《JavaScript 闯关记》之原型及原型链

时间 2019-11-08

原文原文链接

原型链是一种机制，指的是 JavaScript 每一个对象都有一个内置的 __proto__ 属性指向建立它的构造函数的 prototype（原型）属性。原型链的做用是为了实现对象的继承，要理解原型链，须要先从函数对象、constructor、new、prototype、__proto__ 这五个概念入手。javascript

函数对象

前面讲过，在 JavaScript 里，函数即对象，程序能够随意操控它们。好比，能够把函数赋值给变量，或者做为参数传递给其余函数，也能够给它们设置属性，甚至调用它们的方法。下面示例代码对「普通对象」和「函数对象」进行了区分。前端

普通对象：java

var o1 = {};
var o2 = new Object();复制代码

函数对象：git

function f1(){};
var f2 = function(){};
var f3 = new Function('str','console.log(str)');复制代码

简单的说，凡是使用 function 关键字或 Function 构造函数建立的对象都是函数对象。并且，只有函数对象才拥有 prototype （原型）属性。github

`constructor` 构造函数

函数还有一种用法，就是把它做为构造函数使用。像 Object 和 Array 这样的原生构造函数，在运行时会自动出如今执行环境中。此外，也能够建立自定义的构造函数，从而自定义对象类型的属性和方法。以下代码所示：segmentfault

function Person(name, age, job){
    this.name = name;
    this.age = age;
    this.job = job;
    this.sayName = function(){
        console.log(this.name);
    };
}

var person1 = new Person("Stone", 28, "Software Engineer");
var person2 = new Person("Sophie", 29, "English Teacher");复制代码

在这个例子中，咱们建立了一个自定义构造函数 Person()，并经过该构造函数建立了两个普通对象 person1 和 person2，这两个普通对象均包含3个属性和1个方法。数组

你应该注意到函数名 Person 使用的是大写字母 P。按照惯例，构造函数始终都应该以一个大写字母开头，而非构造函数则应该以一个小写字母开头。这个作法借鉴自其余面向对象语言，主要是为了区别于 JavaScript 中的其余函数；由于构造函数自己也是函数，只不过能够用来建立对象而已。浏览器

`new` 操做符

要建立 Person 的新实例，必须使用 new 操做符。以这种方式调用构造函数实际上会经历如下4个步骤：微信

建立一个新对象；
将构造函数的做用域赋给新对象（所以 this 就指向了这个新对象）；
执行构造函数中的代码（为这个新对象添加属性）；
返回新对象。

将构造函数看成函数

构造函数与其余函数的惟一区别，就在于调用它们的方式不一样。不过，构造函数毕竟也是函数，不存在定义构造函数的特殊语法。任何函数，只要经过 new 操做符来调用，那它就能够做为构造函数；而任何函数，若是不经过 new 操做符来调用，那它跟普通函数也不会有什么两样。例如，前面例子中定义的 Person() 函数能够经过下列任何一种方式来调用。app

// 看成构造函数使用
var person = new Person("Stone", 28, "Software Engineer");
person.sayName(); // "Stone"

// 做为普通函数调用
Person("Sophie", 29, "English Teacher"); // 添加到 window
window.sayName(); // "Sophie"

// 在另外一个对象的做用域中调用
var o = new Object();
Person.call(o, "Tommy", 3, "Baby");
o.sayName(); // "Tommy"复制代码

这个例子中的前两行代码展现了构造函数的典型用法，即便用 new 操做符来建立一个新对象。接下来的两行代码展现了不使用 new 操做符调用 Person() 会出现什么结果，属性和方法都被添加给 window 对象了。当在全局做用域中调用一个函数时，this 对象老是指向 Global 对象（在浏览器中就是 window 对象）。所以，在调用完函数以后，能够经过 window 对象来调用 sayName() 方法，而且还返回了 "Sophie" 。最后，也可使用 call()（或者 apply()）在某个特殊对象的做用域中调用 Person() 函数。这里是在对象 o 的做用域中调用的，所以调用后 o 就拥有了全部属性和 sayName() 方法。

构造函数的问题

构造函数模式虽然好用，但也并不是没有缺点。使用构造函数的主要问题，就是每一个方法都要在每一个实例上从新建立一遍。在前面的例子中，person1 和 person2 都有一个名为 sayName() 的方法，但那两个方法不是同一个 Function 的实例。由于 JavaScript 中的函数是对象，所以每定义一个函数，也就是实例化了一个对象。从逻辑角度讲，此时的构造函数也能够这样定义。

function Person(name, age, job){
    this.name = name;
    this.age = age;
    this.job = job;
    this.sayName = new Function("console.log(this.name)"); // 与声明函数在逻辑上是等价的
}复制代码

从这个角度上来看构造函数，更容易明白每一个 Person 实例都包含一个不一样的 Function 实例（sayName() 方法）。说得明白些，以这种方式建立函数，虽然建立 Function 新实例的机制仍然是相同的，可是不一样实例上的同名函数是不相等的，如下代码能够证实这一点。

console.log(person1.sayName == person2.sayName);  // false复制代码

然而，建立两个完成一样任务的 Function 实例的确没有必要；何况有 this 对象在，根本不用在执行代码前就把函数绑定到特定对象上面。所以，大可像下面这样，经过把函数定义转移到构造函数外部来解决这个问题。

function Person(name, age, job){
    this.name = name;
    this.age = age;
    this.job = job;
    this.sayName = sayName;
}

function sayName(){
    console.log(this.name);
}

var person1 = new Person("Stone", 28, "Software Engineer");
var person2 = new Person("Sophie", 29, "English Teacher");复制代码

在这个例子中，咱们把 sayName() 函数的定义转移到了构造函数外部。而在构造函数内部，咱们将 sayName 属性设置成等于全局的 sayName 函数。这样一来，因为 sayName 包含的是一个指向函数的指针，所以 person1 和 person2 对象就共享了在全局做用域中定义的同一个 sayName() 函数。这样作确实解决了两个函数作同一件事的问题，但是新问题又来了，在全局做用域中定义的函数实际上只能被某个对象调用，这让全局做用域有点名存实亡。而更让人没法接受的是，若是对象须要定义不少方法，那么就要定义不少个全局函数，因而咱们这个自定义的引用类型就丝毫没有封装性可言了。好在，这些问题能够经过使用原型来解决。

`prototype` 原型

咱们建立的每一个函数都有一个 prototype（原型）属性。使用原型的好处是可让全部对象实例共享它所包含的属性和方法。换句话说，没必要在构造函数中定义对象实例的信息，而是能够将这些信息直接添加到原型中，以下面的例子所示。

function Person(){}

Person.prototype.name = "Stone";
Person.prototype.age = 28;
Person.prototype.job = "Software Engineer";
Person.prototype.sayName = function(){
    console.log(this.name);
};

var person1 = new Person();
person1.sayName();   // "Stone"

var person2 = new Person();
person2.sayName();   // "Stone"

console.log(person1.sayName == person2.sayName);  // true复制代码

在此，咱们将 sayName() 方法和全部属性直接添加到了 Person 的 prototype 属性中，构造函数变成了空函数。即便如此，也仍然能够经过调用构造函数来建立新对象，并且新对象还会具备相同的属性和方法。但与前面的例子不一样的是，新对象的这些属性和方法是由全部实例共享的。换句话说，person1 和 person2 访问的都是同一组属性和同一个 sayName() 函数。

理解原型对象

在默认状况下，全部原型对象都会自动得到一个 constructor（构造函数）属性，这个属性包含一个指向 prototype 属性所在函数的指针。就拿前面的例子来讲，Person.prototype.constructor 指向 Person。而经过这个构造函数，咱们还可继续为原型对象添加其余属性和方法。

虽然能够经过对象实例访问保存在原型中的值，但却不能经过对象实例重写原型中的值。若是咱们在实例中添加了一个属性，而该属性与实例原型中的一个属性同名，那咱们就在实例中建立该属性，该属性将会屏蔽原型中的那个属性。来看下面的例子。

function Person(){}

Person.prototype.name = "Stone";
Person.prototype.age = 28;
Person.prototype.job = "Software Engineer";
Person.prototype.sayName = function(){
    console.log(this.name);
};

var person1 = new Person();
var person2 = new Person();

person1.name = "Sophie";
console.log(person1.name);     // "Sophie"，来自实例
console.log(person2.name);     // "Stone"，来自原型复制代码

在这个例子中，person1 的 name 被一个新值给屏蔽了。但不管访问 person1.name 仍是访问 person2.name 都可以正常地返回值，即分别是 "Sophie"（来自对象实例）和 "Stone"（来自原型）。当访问 person1.name 时，须要读取它的值，所以就会在这个实例上搜索一个名为 name 的属性。这个属性确实存在，因而就返回它的值而没必要再搜索原型了。当访问 person2. name 时，并无在实例上发现该属性，所以就会继续搜索原型，结果在那里找到了 name 属性。

当为对象实例添加一个属性时，这个属性就会屏蔽原型中保存的同名属性；换句话说，添加这个属性只会阻止咱们访问原型中的那个属性，但不会修改那个属性。即便将这个属性设置为 null ，也只会在实例中设置这个属性，而不会恢复其指向原型的链接。不过，使用 delete 操做符则能够彻底删除实例属性，从而让咱们可以从新访问原型中的属性，以下所示。

function Person(){}

Person.prototype.name = "Stone";
Person.prototype.age = 28;
Person.prototype.job = "Software Engineer";
Person.prototype.sayName = function(){
    console.log(this.name);
};

var person1 = new Person();
var person2 = new Person();

person1.name = "Sophie";
console.log(person1.name);     // "Sophie"，来自实例
console.log(person2.name);     // "Stone"，来自原型

delete person1.name;
console.log(person1.name);     // "Stone"，来自原型复制代码

在这个修改后的例子中，咱们使用 delete 操做符删除了 person1.name，以前它保存的 "Sophie" 值屏蔽了同名的原型属性。把它删除之后，就恢复了对原型中 name 属性的链接。所以，接下来再调用 person1.name 时，返回的就是原型中 name 属性的值了。

更简单的原型语法

前面例子中每添加一个属性和方法就要敲一遍 Person.prototype。为减小没必要要的输入，也为了从视觉上更好地封装原型的功能，更常见的作法是用一个包含全部属性和方法的对象字面量来重写整个原型对象，以下面的例子所示。

function Person(){}

Person.prototype = {
    name : "Stone",
    age : 28,
    job: "Software Engineer",
    sayName : function () {
        console.log(this.name);
    }
};复制代码

在上面的代码中，咱们将 Person.prototype 设置为等于一个以对象字面量形式建立的新对象。最终结果相同，但有一个例外：constructor 属性再也不指向 Person 了。前面曾经介绍过，每建立一个函数，就会同时建立它的 prototype 对象，这个对象也会自动得到 constructor 属性。而咱们在这里使用的语法，本质上彻底重写了默认的 prototype 对象，所以 constructor 属性也就变成了新对象的 constructor 属性（指向 Object 构造函数），再也不指向 Person 函数。此时，尽管 instanceof 操做符还能返回正确的结果，但经过 constructor 已经没法肯定对象的类型了，以下所示。

var friend = new Person();

console.log(friend instanceof Object);        // true
console.log(friend instanceof Person);        // true
console.log(friend.constructor === Person);    // false
console.log(friend.constructor === Object);    // true复制代码

在此，用 instanceof 操做符测试 Object 和 Person 仍然返回 true，但 constructor 属性则等于 Object 而不等于 Person 了。若是 constructor 的值真的很重要，能够像下面这样特地将它设置回适当的值。

function Person(){}

Person.prototype = {
    constructor : Person,
    name : "Stone",
    age : 28,
    job: "Software Engineer",
    sayName : function () {
        console.log(this.name);
    }
};复制代码

以上代码特地包含了一个 constructor 属性，并将它的值设置为 Person ，从而确保了经过该属性可以访问到适当的值。

注意，以这种方式重设 constructor 属性会致使它的 [[Enumerable]] 特性被设置为 true。默认状况下，原生的 constructor 属性是不可枚举的，所以若是你使用兼容 ECMAScript 5 的 JavaScript 引擎，能够试一试 Object.defineProperty()。

function Person(){}

Person.prototype = {
    name : "Stone",
    age : 28,
    job : "Software Engineer",
    sayName : function () {
        console.log(this.name);
    }
}; 

// 重设构造函数，只适用于 ECMAScript 5 兼容的浏览器
Object.defineProperty(Person.prototype, "constructor", {
    enumerable: false,
    value: Person
});复制代码

原型的动态性

因为在原型中查找值的过程是一次搜索，所以咱们对原型对象所作的任何修改都可以当即从实例上反映出来，即便是先建立了实例后修改原型也照样如此。请看下面的例子。

var friend = new Person();

Person.prototype.sayHi = function(){
    console.log("hi");
};

friend.sayHi();   // "hi"（没有问题！）复制代码

以上代码先建立了 Person 的一个实例，并将其保存在 friend 中。而后，下一条语句在 Person.prototype 中添加了一个方法 sayHi()。即便 person 实例是在添加新方法以前建立的，但它仍然能够访问这个新方法。其缘由能够归结为实例与原型之间的松散链接关系。当咱们调用 friend.sayHi() 时，首先会在实例中搜索名为 sayHi 的属性，在没找到的状况下，会继续搜索原型。由于实例与原型之间的链接只不过是一个指针，而非一个副本，所以就能够在原型中找到新的 sayHi 属性并返回保存在那里的函数。

尽管能够随时为原型添加属性和方法，而且修改可以当即在全部对象实例中反映出来，但若是是重写整个原型对象，那么状况就不同了。咱们知道，调用构造函数时会为实例添加一个指向最初原型的 [[Prototype]] 指针，而把原型修改成另一个对象就等于切断了构造函数与最初原型之间的联系。请记住：实例中的指针仅指向原型，而不指向构造函数。看下面的例子。

function Person(){}

var friend = new Person();

Person.prototype = {
    constructor: Person,
    name : "Stone",
    age : 28,
    job : "Software Engineer",
    sayName : function () {
        console.log(this.name);
    }
};

friend.sayName();   // Uncaught TypeError: friend.sayName is not a function复制代码

在这个例子中，咱们先建立了 Person 的一个实例，而后又重写了其原型对象。而后在调用 friend.sayName() 时发生了错误，由于 friend 指向的是重写前的原型对象，其中并不包含以该名字命名的属性。

原生对象的原型

原型的重要性不只体如今建立自定义类型方面，就连全部原生的引用类型，都是采用这种模式建立的。全部原生引用类型（Object、Array、String，等等）都在其构造函数的原型上定义了方法。例如，在 Array.prototype 中能够找到 sort() 方法，而在 String.prototype 中能够找到 substring() 方法，以下所示。

console.log(typeof Array.prototype.sort);       // "function"
console.log(typeof String.prototype.substring); // "function"复制代码

经过原生对象的原型，不只能够取得全部默认方法的引用，并且也能够定义新方法。能够像修改自定义对象的原型同样修改原生对象的原型，所以能够随时添加方法。下面的代码就给基本包装类型 String 添加了一个名为 startsWith() 的方法。

String.prototype.startsWith = function (text) {
    return this.indexOf(text) === 0;
};

var msg = "Hello world!";
console.log(msg.startsWith("Hello"));   // true复制代码

这里新定义的 startsWith() 方法会在传入的文本位于一个字符串开始时返回 true。既然方法被添加给了 String.prototype ，那么当前环境中的全部字符串就均可以调用它。因为 msg 是字符串，并且后台会调用 String 基本包装函数建立这个字符串，所以经过 msg 就能够调用 startsWith() 方法。

尽管能够这样作，但咱们不推荐在产品化的程序中修改原生对象的原型。若是因某个实现中缺乏某个方法，就在原生对象的原型中添加这个方法，那么当在另外一个支持该方法的实现中运行代码时，就可能会致使命名冲突。并且，这样作也可能会意外地重写原生方法。

原型对象的问题

原型模式也不是没有缺点。首先，它省略了为构造函数传递初始化参数这一环节，结果全部实例在默认状况下都将取得相同的属性值。虽然这会在某种程度上带来一些不方便，但还不是原型的最大问题。原型模式的最大问题是由其共享的本性所致使的。

原型中全部属性是被不少实例共享的，这种共享对于函数很是合适。对于那些包含基本值的属性倒也说得过去，毕竟（如前面的例子所示），经过在实例上添加一个同名属性，能够隐藏原型中的对应属性。然而，对于包含引用类型值的属性来讲，问题就比较突出了。来看下面的例子。

function Person(){}

Person.prototype = {
    constructor: Person,
    name : "Stone",
    age : 28,
    job : "Software Engineer",
    friends : ["ZhangSan", "LiSi"],
    sayName : function () {
        console.log(this.name);
    }
};

var person1 = new Person();
var person2 = new Person();

person1.friends.push("WangWu");

console.log(person1.friends);    // "ZhangSan,LiSi,WangWu"
console.log(person2.friends);    // "ZhangSan,LiSi,WangWu"
console.log(person1.friends === person2.friends);  // true复制代码

在此，Person.prototype 对象有一个名为 friends 的属性，该属性包含一个字符串数组。而后，建立了 Person 的两个实例。接着，修改了 person1.friends 引用的数组，向数组中添加了一个字符串。因为 friends 数组存在于 Person.prototype 而非 person1 中，因此刚刚提到的修改也会经过 person2.friends（与 person1.friends 指向同一个数组）反映出来。假如咱们的初衷就是像这样在全部实例中共享一个数组，那么对这个结果我没有话可说。但是，实例通常都是要有属于本身的所有属性的。

构造函数和原型结合

因此，构造函数用于定义实例属性，而原型用于定义方法和共享的属性。结果，每一个实例都会有本身的一份实例属性的副本，但同时又共享着对方法的引用，最大限度地节省了内存。下面的代码重写了前面的例子。

function Person(name, age, job){
    this.name = name;
    this.age = age;
    this.job = job;
    this.friends = ["ZhangSan", "LiSi"];
}

Person.prototype = {
    constructor : Person,
    sayName : function(){
        console.log(this.name);
    }
}

var person1 = new Person("Stone", 28, "Software Engineer");
var person2 = new Person("Sophie", 29, "English Teacher");

person1.friends.push("WangWu");
console.log(person1.friends);    // "ZhangSan,LiSi,WangWu"
console.log(person2.friends);    // "ZhangSan,LiSi"
console.log(person1.friends === person2.friends);    // false
console.log(person1.sayName === person2.sayName);    // true复制代码

在这个例子中，实例属性都是在构造函数中定义的，而由全部实例共享的属性 constructor 和方法 sayName() 则是在原型中定义的。而修改了 person1.friends（向其中添加一个新字符串），并不会影响到 person2.friends，由于它们分别引用了不一样的数组。

这种构造函数与原型混成的模式，是目前在 JavaScript 中使用最普遍、认同度最高的一种建立自定义类型的方法。能够说，这是用来定义引用类型的一种默认模式。

`proto`

为何在构造函数的 prototype 中定义了属性和方法，它的实例中就能访问呢？

那是由于当调用构造函数建立一个新实例后，该实例的内部将包含一个指针 __proto__，指向构造函数的原型。Firefox、Safari 和 Chrome 的每一个对象上都有这个属性，而在其余浏览器中是彻底不可见的（为了确保浏览器兼容性问题，不要直接使用 __proto__ 属性，此处只为解释原型链而演示）。让咱们来看下面代码和图片：

图中展现了 Person 构造函数、Person 的原型属性以及 Person 现有的两个实例之间的关系。在此，Person.prototype.constructor 指回了 Person。Person.prototype 中除了包含 constructor 属性以外，还包括后来添加的其余属性。此外，要格外注意的是，虽然这两个实例都不包含属性和方法，但咱们却能够调用 person1.sayName()。这是由于内部指针 __proto__ 指向 Person.prototype，而在 Person.prototype 中能找到 sayName() 方法。

咱们来证明一下，__proto__ 是否是真的指向 Person.prototype 的？以下代码所示：

function Person(){}
var person = new Person();
console.log(person.__proto__ === Person.prototype); // true复制代码

既然，__proto__ 确实是指向 Person.prototype，那么使用 new 操做符建立对象的过程能够演变为，为实例对象的 __proto__ 赋值的过程。以下代码所示：

function Person(){}

// var person = new Person(); 
// 上一行代码等同于如下过程 ==> 
var person = {};
person.__proto__ = Person.prototype;
Person.call(person);复制代码

这个例子中，我先建立了一个空对象 person，而后把 person.__proto__ 指向了 Person 的原型对象，便继承了 Person 原型对象中的全部属性和方法，最后又以 person 为做用域执行了 Person 函数，person 便就拥有了 Person 的全部属性和方法。这个过程和 var person = new Person(); 彻底同样。

简单来讲，当咱们访问一个对象的属性时，若是这个属性不存在，那么就会去 __proto__ 里找，这个 __proto__ 又会有本身的 __proto__，因而就这样一直找下去，直到找到为止。在找不到的状况下，搜索过程老是要一环一环地前行到原型链末端才会停下来。

原型链

JavaScript 中描述了原型链的概念，并将原型链做为实现继承的主要方法。其基本思想是利用原型让一个引用类型继承另外一个引用类型的属性和方法。简单回顾一下构造函数、原型和实例的关系：每一个构造函数都有一个原型对象，原型对象都包含一个指向构造函数的指针，而实例都包含一个指向原型对象的内部指针。以下图所示：（图源：segmentfault.com，做者：manxisuo）

那么，假如咱们让原型对象等于另外一个类型的实例，结果会怎么样呢？显然，此时的原型对象将包含一个指向另外一个原型的指针，相应地，另外一个原型中也包含着一个指向另外一个构造函数的指针。假如另外一个原型又是另外一个类型的实例，那么上述关系依然成立，如此层层递进，就构成了实例与原型的链条。这就是所谓原型链的基本概念。

上面这段话比较绕口，代码更容易理解，让咱们来看看实现原型链的基本模式。以下代码所示：

function Father(){
    this.value = true;
}
Father.prototype.getValue = function(){
    return this.value;
};

function Son(){
    this.value2 = false;
}

// 继承了 Father
Son.prototype = new Father();

Son.prototype.getValue2 = function (){
    return this.value2;
};

var son = new Son();
console.log(son.getValue());  // true复制代码

以上代码定义了两个类型：Father 和 Son。每一个类型分别有一个属性和一个方法。它们的主要区别是 Son 继承了 Father，而继承是经过建立 Father 的实例，并将该实例赋给 Son.prototype 实现的。实现的本质是重写原型对象，代之以一个新类型的实例。换句话说，原来存在于 Father 的实例中的全部属性和方法，如今也存在于 Son.prototype 中了。在确立了继承关系以后，咱们给 Son.prototype 添加了一个方法，这样就在继承了 Father 的属性和方法的基础上又添加了一个新方法。

咱们再用 __proto__ 重写上面代码，更便于你们的理解：

function Father(){
    this.value = true;
}
Father.prototype.getValue = function(){
    return this.value;
};

function Son(){
    this.value2 = false;
}

// 继承了 Father
// Son.prototype = new Father(); ==>
Son.prototype = {};
Son.prototype.__proto__ = Father.prototype;
Father.call(Son.prototype);

Son.prototype.getValue2 = function (){
    return this.value2;
};

// var son = new Son(); ==>
var son = {};
son.__proto__ = Son.prototype;
Son.call(son);

console.log(son.getValue()); // true
console.log(son.getValue === son.__proto__.__proto__.getValue); // true复制代码

从以上代码能够看出，实例 son 调用 getValue() 方法，实际是通过了 son.__proto__.__proto__.getValue 的过程的，其中 son.__proto__ 等于 Son.prototype，而 Son.prototype.__proto__ 又等于 Father.prototype，因此 son.__proto__.__proto__.getValue 其实就是 Father.prototype.getValue。

事实上，前面例子中展现的原型链还少一环。咱们知道，全部引用类型默然都继承了 Obeject，而这个继承也是经过原型链实现的。你们要记住，全部函数的默认原型都是 Object 的实例，所以默认原型都会包含一个内部指针 __proto__，指向 Object.prototype。这也正是全部自定义类型都会继承 toString()、valueOf() 等默认方法的根本缘由。

下图展现了原型链实现继承的所有过程。（图源：segmentfault.com，做者：manxisuo）

上图中，p 指 prototype 属性，[p] 即 __proto__ 指对象的原型，[p] 造成的链（虚线部分）就是原型链。从图中能够得出如下信息：

Object.prototype 是顶级对象，全部对象都继承自它。
Object.prototype.__proto__ === null ，说明原型链到 Object.prototype 终止。
Function.__proto__ 指向 Function.prototype。

关卡

根据描述写出对应的代码。

// 挑战一
// 1.定义一个构造函数 Animal，它有一个 name 属性，以及一个 eat() 原型方法。
// 2.eat() 的方法体为：console.log(this.name + " is eating something.")。
// 3.new 一个 Animal 的实例 tiger，而后调用 eat() 方法。
// 4.用 __proto__ 模拟 new Animal() 的过程，而后调用 eat() 方法。

var Animal = function(name){
    // 待补充的代码
};

var tiger = new Animal("tiger");
// 待补充的代码

var tiger2 = {};
// 待补充的代码复制代码

// 挑战二
// 1.定义一个构造函数 Bird，它继承自 Animal，它有一个 name 属性，以及一个 fly() 原型方法。
// 2.fly() 的方法体为：console.log(this.name + " want to fly higher.");。
// 3.new 一个 Bird 的实例 pigeon，而后调用 eat() 和 fly() 方法。
// 4.用 __proto__ 模拟 new Bird() 的过程，而后用代码解释 pigeon2 为什么能调用 eat() 方法。

var Bird = function(name){
      // 待补充的代码
}

var pigeon = new Bird("pigeon");
// 待补充的代码

var pigeon2 = {};
// 待补充的代码复制代码

// 挑战三
// 1.定义一个构造函数 Swallow，它继承自 Bird，它有一个 name 属性，以及一个 nesting() 原型方法。
// 2.nesting() 的方法体为：console.log(this.name + " is nesting now.");。
// 3.new 一个 Swallow 的实例 yanzi，而后调用 eat()、fly() 和 nesting() 方法。
// 4.用 __proto__ 模拟 new Swallow() 的过程，而后用代码解释 yanzi2 为什么能调用 eat() 方法。

var Swallow = function(name){
      // 待补充的代码
}

var yanzi = new Swallow("yanzi");
// 待补充的代码

var yanzi2 = {};
// 待补充的代码复制代码

关注微信公众号「劼哥舍」回复「答案」，获取关卡详解。
关注 github.com/stone0090/j…，获取最新动态。

本文对你有帮助？欢迎扫码加入前端学习小组微信群：