JS继承 笔记_js面向对象

JS继承
JavaScript中没有类的概念,与类相关的继承的概念更是无从谈起,但是我们可以通过特殊的语法来

模拟面向对象语言中的继承。
在JS中模拟继承有多种方式,其中寄生组合模式是一种比较容易简单的模拟继承模式,下面我们就来

介绍一下用寄生组合模式模拟继承。
JS的继承包括属性的继承和方法的继承,他们分别通过不同的方法来实现。
1属性的继承
属性的继承通过改变函数的执行环境来实现的。而改变函数的执行环境可以使用call()和apply()两种

方法来实现。
我们首先创建一个Animal“类”(因为JS中没有类的概念,这里只是一个模拟,它实际上只是一个

Function函数对象)。

复制代码 代码如下:

   function Animal(name){
   this.name=name;
  }

再创建一个Lion“类”,“继承”于Animal

复制代码 代码如下:

  function Lion(){
   Animal.apply(this, ["狮子"]);
   }

这里使用了Animal的apply方法,把Animal的执行环境改成Lion被调用时的执行环境。
这里要解释一下,我们要想使用Lion这个“类”,通常需要new一个Lion。如:
       var l = new Lion();
而new关键字是十分伟大的,在上段代码中,new关键字完成了以下几项工作:
   1)开辟堆空间,以准备存储Lion对象
  2)修改Lion对象本身的执行环境,使得Lion函数的this指向了Lion函数对象本身。
  3)调用Lion“类”的“构造函数”,创建Lion对象
  4)将Lion函数对象的堆地址赋值给变量l,这个时候l就指向了这个Lion函数对象
所以经过new关键字以后Animal.apply(this, ["狮子"])中的this已经指向了Lion函数对象本身了,所

以这段代码就将Animal函数的执行环境改变成了Lion函数中,相当于以下代码:

复制代码 代码如下:

  function Lion(){
  function Animal(name){
  this.name=name;
   }
  }

而此时的this已经是Lion函数对象了所以上段代码进一步相当于:

复制代码 代码如下:

  function Lion(){
   this.name=name;
  }

这样就给Lion函数对象添加了name属性,也模拟了Lion函数继承于Animal函数的效果。
2方法的继承
在JS中每一个“类”(即函数,注意不是函数对象)都有一个prototype属性,prototype表示该函数

的原型,也表示一个类的成员的集合(通常是方法的集合)。我们可以通过函数的prototype属性来实现方

法的继承。
我们同样首先创建一个Animal“类”:

复制代码 代码如下:

   function Animal(name){
  this.name=name;
  }

给Animal的原型中加入一个eat方法:

复制代码 代码如下:

  Animal.prototype.eat=function(){
   alter("我能吃!~");
  }

创建一个Lion“类”,同时完成对Animal“类”的属性的继承

复制代码 代码如下:

   function Lion(){
Animal.apply(this, ["狮子"]);
  }

注意下面的代码,我们马上要完成方法的继承了
Lion.prototype=new Animal();
这样就把一个Animal函数对象储存在了Lion的原型中了,Lion也就包含了Animal中的方法了(其实也

包含了属性)。这样就模拟了Lion函数对Animal的继承。

时间: 2024-09-20 07:58:51

JS继承 笔记_js面向对象的相关文章

JavaScript 原型与继承说明_js面向对象

function A(x) { this.x = x; } alert(A.prototype); alert(A.prototype.constructor); 根据弹出的结果,我们可以得到:原型对象是由函数的构造函数创建,它所拥有的属性能被所有对象共享,初始时原型对象指向一个Object对象,并且定义了一个constructor属性,该属性指向定义该原型对象的构造函数本身,再看如下代码. Code function A(x) { A.prototype.x = x; } var obj =

javascript中类的定义及其方式(《javascript高级程序设计》学习笔记)_js面向对象

关于javascript中类的继承可以参考阮一峰的Blog<Javascript继承机制的设计思想>,说的很透. 一.在javascript中实例化遇到的问题: 下面用<javascript高级程序设计>中的例子来做说明,假如现在定义了一个car的对象,它是Object类的实例.像下面这样的: 复制代码 代码如下: var oCar=new Object(); oCar.color = "red"; oCar.doors = 4; oCar.mpg = 23;

js另类写法_js面向对象

实现功能估计貌似于这样: [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行] 代码运行到 test() 后,要调用已经写好的方法 E() 并传递 2 个参数 一个就是所谓对象的 ju . 另一个就是一个才写的函数 然后把这两个参数传递到了 E() 方法,当然,E()方法已经在等参数了 当他等到了许久不见的参数的时候会怎么做呢...(待续) 续简介: 上回说到 E() 方法见到了许久不见的参数 ju 和 一个函数 当然 E() 做为这两个参数的传递执行方法,就叫了两个小弟(变量 a, b)

JavaScript之信息的封装 js对象入门_js面向对象

JavaScript之信息的封装 在编码前,我们需要了解如下几个术语:封装:对内部数据的表现形式和实施细节进行隐藏: 私有属性和方法:外界只能通过其公开的接口与其进行存取和交互 作用域:JavaScript中,只有函数具有作用域,函数内部定义的属性和方法在外部无法访问 特权方法:声明在函数内部,能访问函数内部变量(属性)的方法,比较耗费内存: 复制代码 代码如下: function Person() { /* * 声明私有的数据 * 昵称,年龄,邮箱 */ var nickName, age,

CCPry JS类库 代码_js面向对象

复制代码 代码如下: function CCPry(){ // // 判断浏览器类型 // this.Browser ={ "isMozilla":(typeof document.implementation != 'undefined') && (typeof document.implementation.createDocument != 'undefined') && (typeof HTMLDocument!='undefined'), &q

JObj预览一个JS的框架_js面向对象

我的时间不多,大部分是在工作之余写的. 复制代码 代码如下: JObj.Dom.$tag("INPUT")    .$filter(function(o){        var fa = o.parentNode.parentNode.parentNode;     return f =(o.type == "text" && fa.id == "hollerNew") ? true : false;    })    .$cs

学习JS面向对象成果 借国庆发布个最新作品与大家交流_js面向对象

首先引入一个jQuery的小问题 jQuery在设置透明度上是有问题的,首先看一下其代码: Code 复制代码 代码如下: // IE uses filters for opacity if ( !jQuery.support.opacity && name == "opacity" ) { if ( set ) { // IE has trouble with opacity if it does not have layout // Force it by sett

javascript 面向对象编程基础:继承_js面向对象

我们看到这里继承的概念是多么的直白,"拷贝一个类的prototype 到另外一个类",好,Code is cheap,看代码: function class1() { } function class2() { } class2.prototype = class1.prototype; class2.moreProperty1 = " class 2 additional string " ; class2.moreMethod1 = function () {

javascript 面向对象全新理练之继承与多态_js面向对象

1 又是几个基本概念 为什么要说又呢? 在讨论继承时,我们已经列出了一些基本概念了,那些概念是跟封装密切相关的概念,今天我们要讨论的基本概念,主要是跟继承与多态相关的,但是它们跟封装也有一些联系. 1.1 定义和赋值 变量定义是指用 var a; 这种形式来声明变量. 函数定义是指用 function a(...) {...} 这种形式来声明函数. var a = 1; 是两个过程.第一个过程是定义变量 a,第二个过程是给变量 a 赋值. 同样 var a = function(...) {};