javascript类继承机制的原理分析

目前 javascript的实现继承方式并不是通过“extend”关键字来实现的，而是通过 constructor function和prototype属性来实现继承。首先我们创建一个animal 类

js 代码


代码如下:

var animal = function (){ //这就是constructor function 了

this .name = 'pipi';
this .age = 10;
this .height = 0;
}
//建立一个动物的实例
var a1 = new animal ();

构造函数与其他普通函数区别在于，1.构造函数里有 this关键字，2.调用构造函数是使用的new关键字。通过new运算符调用构造函数 animal 后，系统就会返回一个对象，这个对象就相当于


代码如下:

var a1 = { name:'pipi' ,age:10,height:0 }
//或者
var a1 = new Object();
a1.name='pipi';
a1.age = 10;
a1.height = 0;

等同这样的方式来产生js对象。
到这里我们知道如何在js中定义一个类了，接下来我们展示如何写一个cat


代码如下:

var cat = function (){
this .play = function (){
alert('cat play')
}
}
cat .prototype = new animal ();
//prototype 属性指向一个对象
var c1 = new cat();

到这里，cat就继承了 animal 对象，类cat的一个实例对象c1拥有属性name,age,height,和方法play了。
那么 prototype起到了一个什么样的作用呢？
prototype就好比一个指针，它指向一个object，这个object就称为子类对象的原型。当cat的对象被创建的时候，由于cat的构造函数拥有prototype属性，那么cat的实例就会间接指向这个原型对象了（说成间接的是因为每个object都有一个 constructor 属性指向它的构造函数）。
那么问题来了，“当我们修改对象 c1 的name属性的时候，会不会修改它prototype的name属性值呢？”，答案是否定的。
接下来详细解析：
1.访问name属性： 首先当我们第一次访问c1.name的属性的时候，我们会得到值“pipi”，这个和我们预料中的一样。但是计算过程你未必知道。
它计算的过程是这样的：第一步：检查c1对象中是否有name属性,找到的话就返回值，没有就跳到第二步，显然没有找到，因为cat的构造函数中没有定义。第二步：当第一步没有找时，去间接访问 prototype对象所指向的object，如果在 prototype对象中 找到的name属性的话，就返回找到的属性值。如果还是没有找到的话，再去递归地寻找 prototype对象的 prototype对象（去找它的爷爷） ，一直到找到name属性或者没有prototype对象为止。如果到最后还是没有找到name属性的话就返回undefined。
2.设定name属性：当我们设定c1对象的name属性时，及调用 c1.name= ' new name'; 这个过程就简单多了。首先检查是否对象已有该属性，若已存在则修改当前值，若不存在则为该对象新增一个属性并设定当前值。值得一提的是，在设定值的过程中没有去访问 prototype属性。
为了加深理解，我们再看一个 read-write-read 的过程，第一次read的时候，由于自己的对象没有name属性，那么就会返回的原型对象的name属性的值。第二步，写入name的值，同样没发现本身对象有name属性,那么就在本身对象上新建一个name属性，然后赋值。第三步，再次读取name属性，由于在第二步中已经新建了name属性，此时就返回在第二步中设定的值。值得一提的是，在这三步中没有改变原型对象的值。
好了，到此详细分析了 javascript对象是如果实现继承的，其实和其他的面向对象语言不一样的是，javascript的继承机制是对象的原型继承而不是类型继承。
呵呵，欢迎看完，有不对的地方欢迎大家讨论！

赞 (0)

相关推荐

  • JavaScript 继承机制的实现(待续)

    1.对象冒充 原理:构造函数使用this关键字给所有属性和方法赋值(即采用类声明的构造函数方式). 因为构造函数只是一个函数,所以可使ClassA的构造函数成为ClassB的方法,然后调用它.ClassB就会收到ClassA的构造函数中定义的属性和方法. 例如: 下面方式定义的ClassA和ClassB: 复制代码 代码如下: function ClassA(sColor){ this.color=sColor; this.sayColor=function(){ alert(this.colo

  • Javascript继承机制的设计思想分享

    Javascript继承机制的设计思想分享

    我一直很难理解Javascript语言的继承机制. 它没有"子类"和"父类"的概念,也没有"类"(class)和"实例"(instance)的区分,全靠一种很奇特的"原型链"(prototype chain)模式,来实现继承. 我花了很多时间,学习这个部分,还做了很多笔记.但是都属于强行记忆,无法从根本上理解. 直到昨天,我读到法国程序员Vjeux的解释,才恍然大悟,完全明白了Javascript为什么这样

  • Javascript继承机制详解

    学完了Javascript类和对象的创建之后,现在总结一下Javascript继承机制的实现.Javascript并不像Java那样对继承机制有严格明确的定义,它的实现方式正如它的变量的使用方式那样也是十分宽松的,你可以设计自己的方法"模仿"继承机制的实现.有以下几种方法: 1.对象冒充 <script type="text/javascript"> function classA(str){ this.str=str; this.printstr=fu

  • 基于JavaScript实现继承机制之构造函数+原型链混合方式的使用详解

    构造函数.原型实现继承的缺陷 首先来分析构造函数和原型链两种实现继承方式的缺陷: 构造函数(对象冒充)的主要问题是必须使用构造函数方式,且无法继承通过原型定义的方法,这不是最好的选择.不过如果使用原型链,就无法使用带参数的构造函数了.开发者如何选择呢?答案很简单,两者都用. 构造函数+原型混合方式 这种继承方式使用构造函数定义类,并非使用任何原型.创建类的最好方式是用构造函数定义属性,用原型定义方法.这种方式同样适用于继承机制,用对象冒充继承构造函数的属性,用原型链继承 prototype 对象

  • 由JavaScript中call()方法引发的对面向对象继承机制call的思考

    起因: 今天在阅读snandy大神的读jQuery之五(取DOM元素)时,看到有讲到toArray()方法,具体jQuery代码如下: 复制代码 代码如下: toArray: function() { return slice.call( this, 0 ); }, get: function( num ) { return num == null ? // Return a 'clean' array this.toArray() : // Return just the object ( n

  • 基于JavaScript实现继承机制之调用call()与apply()的方法详解

    call() 方法call() 方法是与经典的对象冒充方法最相似的方法.它的第一个参数用作 this 的对象.其他参数都直接传递给函数自身.例如: 复制代码 代码如下: function sayHello(sPrefix,sSuffix) {    alert(this.name + "says" + sPrefix + sSuffix);}; var obj = new Object();obj.name = "Tom"; sayHello.call(obj, &

  • Javascript 继承机制的实现

    Javascript 继承机制的实现

    选定基类后,就可以创建它的子类了.是否使用基类完全由你决定.有时,你可能想创建一个不能直接使用的基类,它只是用于给子类提供通用的函数.在这种情况下,基类被看作抽象类. 尽管ECMAScript并没有像其他语言那样严格地定义抽象类,但有时它的确会创建一些不允许使用的类.通常,我们称这种类为抽象类. 创建的子类将继承超类的所有属性和方法,包括构造函数及方法的实现.记住,所有属性和方法都是公用的,因此子类可直接访问这些方法.子类还可添加超类中没有的新属性和方法,也可以覆盖超类中的属性和方法. 4.2.

  • 基于JavaScript实现继承机制之原型链(prototype chaining)的详解

    如果用原型方式重定义前面例子中的类,它们将变为下列形式: 复制代码 代码如下: function ClassA() {} ClassA.prototype.color = "blue";ClassA.prototype.sayColor = function () {    alert(this.color);}; function ClassB() {} ClassB.prototype = new ClassA(); 原型方式的神奇之处在于最后一行代码.这里,把 ClassB 的

  • javascript类继承机制的原理分析

    目前 javascript的实现继承方式并不是通过"extend"关键字来实现的,而是通过 constructor function和prototype属性来实现继承.首先我们创建一个animal 类 js 代码 复制代码 代码如下: var animal = function (){ //这就是constructor function 了 this .name = 'pipi'; this .age = 10; this .height = 0; } //建立一个动物的实例 var

  • JavaScript实现按键精灵的原理分析

    JavaScript实现按键精灵的原理分析

    最近有个需求,需要在页面上面自动点击.输入.提交. 用以模拟真实用户的操作行为,可以通过直接执行某个元素绑定的事件,来执行操作. 也可以创建事件,再派发事件,执行操作.关于事件的更多细节,可以参考<JavaScript中事件处理> 1.模拟MouseEvent中的click事件,x与y位置随机点击 2.模拟TouchEvent中的touchstart和touchmove,用scroll来做滑动效果 3.模拟FocusEvent,聚焦到屏幕中的输入框内 一.鼠标事件MouseEvent Mous

  • JavaScript类继承及实例化的方法

    本文实例讲述了JavaScript类继承及实例化的方法.分享给大家供大家参考.具体如下: (function(){ var Class = { //扩展类 create: function(aBaseClass, aClassDefine){ var $class = function(){ for(var member in aClassDefine){ this[member] = aClassDefine[member]; } if('undefined'===typeof aClassD

  • Python类继承和多态原理解析

    这篇文章主要介绍了python类继承和多态原理解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 现在属于是老年人的脑子,东西写着写着就忘了,东西记着记着就不知道了.之前学C++的时候就把类.对象这块弄得乱七八糟,现在是因为很想玩python,所以就看看python的类和对象. 就像说的,类有三个特征:封装.继承.多态. 1.封装:类封装了一些方法,可通过一定的规则约定方法进行访问权限. C++中的成员变量有public.private.pto

  • javascript垃圾收集机制的原理分析

    前面的话 javascript具有自动垃圾收集机制,执行环境会负责管理代码执行过程中使用的内存.在编写javascript程序时,开发人员不用再关心内存使用问题,所需内存的分配以及无用内存的回收完全实现了自动管理.下面将详细介绍javascript的垃圾收集机制 原理 垃圾收集机制的原理很简单:找出那些不再继续使用的变量,然后释放其占用的内存,垃圾收集器会按照固定的时间间隔,或代码执行中预定的收集时间,周期性地执行这一操作 局部变量只在函数执行的过程中存在.而在这个过程中,会为局部变量在栈(或堆

  • 基于JavaScript实现继承机制之构造函数方法对象冒充的使用详解

    继承的方式 ECMAScript 实现继承的方式不止一种.这是因为 JavaScript 中的继承机制并不是明确规定的,而是通过模仿实现的.这意味着所有的继承细节并非完全由解释程序处理.作为开发者,你有权决定最适用的继承方式.最原始的继承实现方式就是对象冒充,下面着重介绍该方法. 对象冒充 对象冒充实现继承的核心其实依赖于在函数环境中使用 this 关键字.其原理如下:构造函数使用 this 关键字给所有属性和方法赋值(即采用类声明的构造函数方式).因为构造函数只是一个函数,所以可使 Class

  • Python面向对象类继承和组合实例分析

    本文实例讲述了Python面向对象类继承和组合.分享给大家供大家参考,具体如下: 在python3中所有类默认继承object,凡是继承了object的类都成为新式类,以及该子类的子类Python3中所有的类都是新式类,没有集成object类的子类成为经典类(在Python2中没有集成object的类以及它的子类都是经典类 继承式用来创建新的类的一种方式,好处是减少重复代码 class People: def __init__(self,name,age): self.name=name sel

  • Android Handler 机制实现原理分析

    Android Handler 机制实现原理分析

    handler在安卓开发中是必须掌握的技术,但是很多人都是停留在使用阶段.使用起来很简单,就两个步骤,在主线程重写handler的handleMessage( )方法,在工作线程发送消息.但是,有没有人想过这种技术是怎么实现的呢?下面我们一起探讨下. 先上图,让大家好理解下handler机制: handler机制示例图 上面一共出现了几种类,ActivityThread,Handler,MessageQueue,Looper,msg(Message),对这些类作简要介绍: ActivityThr

随机推荐