javascript --- 继承初探七日谈 (一)

原型链是javascript实现继承的默认方式。下面来一个例子看一下她的魔法吧:

首先定义三个构造函数:

function her(){
    this.name = ‘Anna‘;
    this.toString = function(){
        return this.name;
    }
}

function his(){
    this.sex = ‘men‘;
}

function pepole(side, height){
    this.name = ‘Jock‘;
    this.side = side;
    this.height = ‘height‘;
    this.setArea = function(){
        return this.side * this.height / 2;
    }
}

接下来就是我们施展继承的魔法了:

his.prototype = new her();
pepole.prototype = new his();

发生了神马呢?在这里我们直接将对象创建在his对象的prtotype属性中,并没与去扩展这些对象的原有原型。也就是说,我们用构造函数her()创建的实例对象,用她去覆盖his构造函数的prototype属性。相同pepole也是一样,她的构造器属性prototype完全是his()通过创建实例重建的。

切记:javascript是一个完全依靠对象的语言,其中没有类的概念。因此我们需要构造一个实体new her(),然后通过实体的属性才能完成相关的继承工作,而不能直接继承her()构造函数,另外,这也确保了在继承实现以后,对her()再做任何修改,删除,添加,都不会对his()造成任何影响,因为我们所继承的不过是她所创建的一个实体。

正如上回所讲,我们对对象的prototype进行完全替换的时候(不同于向里面添加属性),与可能回对constonctor属性产生一定的副作用。

在我们完成继承相关工作之后,因该对这些对象的constructon属性进行相应的重置,这是一个非常好的习惯。

his.prototype.constructor = his;
people.prototype.constructor = people;

我们来测试一下目前实现的内容:

var my = new pepole(5,10);
my.setArea();  //25

尽管my没有属于自己的toString()方法,但是我们仍然可以调用她继承来的toString()方法,虽然这里调用的是一个继承的方法,但她的this仍然指向my对象。

my.toString(); // Jock

下面我们来关注一下javascript在my.toString()被调用时究竟发生了那些事情?

  1. 首先她会遍历my对象的所有属性和方法,但没有找到一个叫做toString()的方法。

  2. 接着去查看my._proto_所指的对象,也就是在继承过程中由new his()所创建的实体对象。

  3. 显然,javascript引擎在遍历people()实体的时候仍然不会找到toString()这个方法,然后又会检查该实体的_proto_属性,这时候该属性又会指向new her()所创建的实体对象.

  4. 最终,在new her()所创建的实体中找到了toString()方法。

  5. 最后, 该方法就会在my被调用,并且this也指向了my。

那么问题来了?my对象的构造函数是哪一个?

因为我们在构建继承关系时已经对相应的constructor属性进行了重置:

my.constructor === people; // true

通过instanceof操作符,我们可以验证my对象是以上三个构造函数的实例:

my instance of her;  // true
my instance of his;  // true
my instance of people;  // true

同样的,我们调用构造函数原型的isPropertypeOf()方法时结果也是如此:

her.prototype,isPrototypeOf (my); // true
his.prototype,isPrototypeOf (my); // true
people.prototype,isPrototypeOf (my); // true

我们同样可以用其他构造函数创建对象,她们同样可以获取her()的toString()方法。

时间: 2024-10-20 05:43:53

javascript --- 继承初探七日谈 (一)的相关文章

javascript --- 原型初探七日谈(三)

原型陷阱: 在处理原型问题上时,我们要注意两种行为. 1. 当我们对原型对象执行完全替换的时候,有可能会触发原型链的某种异常. 2. prototype.constructor 属性是不可靠的. 下面,我们新建一个构造函数,并创建两个对象: var her = fucntion(){ this.name = 'Anna'; } var she1 = her(); var she2 = her(); 即使在对象she1和she2对象被创建之后,我们仍然可以对her()的原型添加属性,并且之前创建的

闲聊javascript继承和原型

javascript继承已经是被说烂的话题了,我就随便聊一点~ 一.javascript的复制继承 javascript的继承有复制继承和原型继承,基于复制继承用的不太多,而且无法通过instanceof的验证 //拷贝继承,prototype.js的extend=> function extend(destination,source){ for(var property in source) destination[property]=source[properyt]; return des

javascript继承的三种方法

javascript并不是纯粹的面向对象的语言,因此也没有明确的继承方式,但可以通过一些方式来模拟继承.本文总结常见的javascript继承模拟方式 1,对象继承 //父类 function Person(name,age){ this.name = name; this.age = age; }; Person.prototype.height = "170cm"; //子类 function Boy(){ this.speak = function(){ alert("

javascript继承

原型链继承 1 <script> 2 function Parent(){ 3 this.name = 'mike'; 4 } 5 6 function Child(){ 7 this.age = 12; 8 } 9 Child.prototype = new Parent();//Child继承Parent,通过原型,形成链条 10 11 var test = new Child(); 12 alert(test.age); 13 alert(test.name);//得到被继承的属性 14

JavaScript继承基础讲解,原型链、借用构造函数、混合模式、原型式继承、寄生式继承、寄生组合式继承

说好的讲解JavaScript继承,可是迟迟到现在讲解.废话不多说,直接进入正题. 既然你想了解继承,证明你对JavaScript面向对象已经有一定的了解,如还有什么不理解的可以参考<面向对象JS基础讲解,工厂模式.构造函数模式.原型模式.混合模式.动态原型模式>,接下来讲一般通过那些方法完成JavaScript的继承. 原型链 JavaScript中实现继承最简单的方式就是使用原型链,将子类型的原型指向父类型的实例即可,即“子类型.prototype = new 父类型();”,实现方法如下

javascript继承—prototype属性介绍(2)

js里每一个function都有一个prototype属性,而每一个实例都有constructor属性,并且每一个function的prototype都有一个constructor属性,这个属性会指向自身.这会形成一个非常有意思的链式结构.举例如下: function Person(){ this.name =12; } console.log(Person.prototype); console.log(Person.prototype.constructor);//输出Person,指向自身

一种基于ES5的JavaScript继承

关于JavaScript继承,方式很多,包括compile-to-javascript的语言TypeScript, CoffeeScript以及网站MDN, GitHub, Modernizr各种polyfill都给出了稳妥的实现方案. 从ES5的角度看,这其中一些方案在功能上OK,但在语义上却不尽如人意. 本人从这些方案中采取一些比较潮的思路,整理出一份方案,可实现与原生DOM类继承的风格一致,达到功能和语义兼得的效果(当然,就别再老想着99后ES3了). 如果你的WebApp是基于ES5运行

面向面试编程——javascript继承的6种方法

javascript继承的6种方法 1,原型链继承 2,借用构造函数继承 3,组合继承(原型+借用构造) 4,原型式继承 5,寄生式继承 6,寄生组合式继承 1.原型链继承. <script type="text/javascript"> function Person(name,sex) { this.name=name; this.sex=sex; this.friends=['李四']; this.getName=function(){ alert(this.name

javascript继承的实现方式介绍

javascript继承的实现方式介绍:作为面向对象的一门语言,继承自然是javascript所比不可少的特性,下面就简单介绍一下javascript实现继承的几种方式,希望能够对需要的朋友带来一定的帮助,下面进入正题.一.对象冒充: function A() { this.name="蚂蚁部落"; this.address="青岛市南区"; } function B() { this.target="提供免费的教程"; this.newA=A;