【Day03】使用原型最大的好处及原型链的理解

面试题

使用原型最大的好处，原型链的理解

题解

原型优缺点简单分析

1. 通过原型链继承的方式，原先存在父类型的实例中的所有属性和方法，现在也能存在于子类型的原型中了；
2. 在通过原型链实现继承时，原型实际上会成为另一个类型的实例。所以父类的实例属性实际上会成为子类的原型属性。结果就是所有的子类的实例都会共享父类的实例属性（引用类型的）
3. 在创建子类型的实例时，没有办法在不影响所有实例的情况下，向父类型的构造函数传递参数。

原型详细分析

2.1 原型的好处

• JavaScript 采用原型编程，所有的对象都能共享原型上的方法，通过构造函数生成的实例所拥有的方法都指向一个函数的索引，这样可以节省内存，如果不使用原型法就会造成每创建一个对象就会产生一个内存地址
• 方便实现继承

2.2 原型链

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

2.2.1 函数对象

在 JavaScript 里，函数即对象，程序可以随意操控它们。比如，可以把函数赋值给变量，或者作为参数传递给其他函数，也可以给它们设置属性，甚至调用它们的方法。下面示例代码对 [普通对象] 和 [函数对象] 进行了区分。

普通对象：

var o1 = {};
var o2 = new Object();

函数对象：

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

简单的说，凡是使用 function 关键字或 Function 构造函数创建的对象都是函数对象。

2.2.2 constructor 构造函数

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

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("alice", 28, "Software Engineer");
var person2 = new Person("Sophie", 29, "English Teacher");

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

你应该注意到函数名 Person 使用的是大写字母 P。按照惯例，构造函数始终都应该以一个大写字母开头，而非构造函数则应该以一个小写字母开头。这个做法借鉴自其他面向对象语言，主要是为了区别于 JavaScript 中的其他函数，因为构造函数本身也是函数，只不过可以用来创建对象而已。

2.2.3 new 操作符

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

• 创建一个新对象；
• 将构造函数的作用域赋给新对象（因此，this 就指向了这个新对象）
• 执行构造函数中的代码（为这个新对象添加属性）；
• 返回新对象（return）

将构造函数当作函数

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

// 当作构造函数使用
var person = new Person("alice", 28, "Software Engineer");
person.sayName(); // "alice"

// 作为普通函数调用
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() 方法。

2.2.4 构造函数的问题

构造函数模式虽然好用，但也并非没有缺点。使用构造函数的主要问题，就是每个方法都要在每个实例上重新创建一遍。在前面的例子中， 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("alice", 28, "Software Engineer");
var person2 = new Person("Sophie", 29, "English Teacher")

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

2.2.5 prototype 原型

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

function Person(){}

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

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

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

console.log(person1.sayName == person2.sayName);  // true

在此，我们将 sayName() 方法和所有属性直接添加到了 Person的 prototype 属性中，构造函数变成了空函数。即使如此。也仍然可以调用构造函数来创建新对象，而且新对象还会具有相同的属性和方法。但与前面的例子不同的是，新对象的这些属性和方法是由所有实例共享的。换句话说，person1 和 person2 访问的都是同一组属性和同一个 sayName() 函数。

理解原型对象，在默认情况下，所有原型对象都会自动获得一个 constructor (构造函数) 属性，这个属性包含一个指向 prototype 属性所在函数的指针。就拿前面的例子来说，Person.prototype.constructor 指向 Person。而通过这个构造函数，我们还可继续为原型对象添加其他属性和方法。只有对象方法才会有 prototype。

虽然可以通过对象实例访问保存在原型中的值，但却不能通过对象实例重写原型中的值。如果我们在实例中添加了一个属性，而该属性与实例原型中的一个属性同名，那我们就在实例中创建该属性，该属性将会屏蔽原型中的那个属性。

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

function Person(){}

Person.prototype = {
    name : "alice",
    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 的值真的很重要，需要重新指定一下 constructor 的指向。

2.3 原型的动态性

由于在原型中查找值的过程是一次搜索，因此我们对原型对象所做的任何修改都能够立即从实例上反映出来，即使是先创建了实例后修改原型也照样如此。请看下面的例子：

var friend = new Person();

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

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

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

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

function Person(){}

var friend = new Person();

Person.prototype = {
    constructor: Person,
    name : "alice",
    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 指向的是重写前的原型对象，其中并不包含以该名字命名的属性

2.4 原型对象的问题

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

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

function Person(){}

Person.prototype = {
    constructor: Person,
    name : "alice",
    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 指向同一个数组）反映出来。假如我们的初衷就是像这样在所有实例中共享一个数组，那么对这个结果我没有话可说。可是，实例一般都是要有属于自己的全部属性的。

2.5 构造函数和原型结合（寄生组合继承）

function inheritPrototype(subType,superType){
  var prototype = Object.create(superType.prototype);
  prototype.constructor = subType;
  subType.prototype = prototype;
}

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

A.prototype.getName = function () {
  console.log(this.name)
}

function B(name, age) {
  A.call(this, name);
  this.age = age;
  this.firends = ['前端', '资深'];
}

inheritPrototype(B,A)
B.prototype.getFirends = function () {
  console.log(this.firends);
}


const instance1 = new B('jingcheng', 3);
instance1.getName(); // jingcheng
instance1.firends.push('React');
console.log(instance1.firends);  //['前端', '资深','React']
const instance2 = new B('yideng', 4);
instance2.getName(); // yideng
console.log(instance2.firends); // ['前端', '资深']

console.log(instance1, instance2)

在这个例子中，实例属性都是在构造函数中定义的，在子类继承父类的时候，将子类的 prototype.constructor 指向自己，子类再将自己的 prototype 指向父级的 prototype。方法 getName 是在原型上定义的。而修改了 instance1.friends （向其中添加一个新字符串），并不会影响到 instance1.friends，因为它们分别引用了不同的数组。

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

2.6 原型链

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