javaScript原型及原型链详解(二)

第一节内容:javaScript原型及原型链详解(二)

第一节中我们引见了javascript中的原型和原型链,这一节我们来说应用原型和原型链我们能够做些什么。

一般对象的继承

  var a = {
    x: 10,
    caculate: function(z) {
      console.log(this.x + this.y + z)
    }
  };

  var b = {
    y: 20,
    __proto__: a
  };

  var c = {
    y: 30,
    __proto__: a
  };

  b.caculate(30)    // 60
  c.caculate(40)    // 80

如许我们就经由历程的原型链完成了一般对象的继承,下面我们照样经由历程一张原型图来说解一下继承的历程。
《javaScript原型及原型链详解(二)》
上面代码中我们建立了三个一般对象a、b、c,个中a有一个x属性,和caculate要领;b和c都有一个y属性,同时让b和c的默许属性__proto__属性指向a对象,如图所示。
这是时刻我们挪用了b.caculate(30), c.caculate(40),明显b和c的本身要领中是没有caculate要领的,那末这个时刻就会沿着b的原型链向上查找,然后找到了a中有caculate要领,则返回caculate要领,
假如a中也没有这个要领,那末会沿着原型链继承向上查找,找到则返回,找不到则返回undefined

函数对象的继承

比方我们有一个名为”Animal”的组织函数,另有一个叫做”Cat”的组织函数:

function Animal() {};
Animal.prototype.species = "动物";

function Cat(name, color) {
    this.name = name;
    this.color = color;
}

个中Animal对象中有一个原型属性species = “动物”,Cat对象有两个本身对象name和color,这个时刻我们假如须要让Cat对象具有Animal对象中的属性应当怎么办呢? 很简单我们只须要让Cat继承Animal对象就好了,下面我们看怎样让Cat继承Animal:

1    Cat.prototype= new Animal();
2    Cat.prototype.constructor = Cat;

3    var cat1 = new Cat("邃晓", "白色")
4    console.log(cat1.species)    // 动物

《javaScript原型及原型链详解(二)》

上面的要领是经由历程直接继承prototype的要领完成的继承,如上图所示:我们一开始建立Cat对象时,Cat.prototype默许指向Cat的原型(如步骤1所示)。 然后我们变动Cat的原型链,让Cat.prototype指向Animal 的实例(实例中具有组织函数的一切属性和要领),如步骤2所示,如许就胜利变动了Cat的原型链,当我们挪用Cat.species属性时,沿着原型链就查找到Animal实例中的species属性了,如许就完成了函数对象的继承。
固然这还没完,由于我们另有主要的一步没完成,没错!就是上面的第2行代码,假如没有这行代码Animal实例中的constructor指针是指向Animal组织函数的,如许明显是不对的,由于constructor一般情况下应当指向它的组织函数,因而我们须要手动变动:Cat.prototype.constructor = Cat; 使constructor从新指向Cat对象。

我们这里讲的继承的要领只是罕见的一种,别的另有多种要领完成继承,这里引荐阮一峰的一篇文章:组织函数的继承,内里讲了罕见的完成继承的要领。这篇文章也是参考了内里的要领。

假如看了这两篇文章,你照样没搞清楚原型和原型链,给你引荐我进修的时刻看的几篇文章,重复的看重复的浏览,总会弄邃晓的,毕竟我是花了三天时候才搞懂了。
最详实的 JS 原型与原型链最终详解
深切明白JavaScript系列(10):JavaScript中心(升级高手必读篇)
前端开辟必需晓得的JS(一) 原型和继承

    原文作者:dayday_up
    原文地址: https://segmentfault.com/a/1190000009443638
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞