【前端面试】JavaScript深入之从原型到原型链

1.原型 / 构造函数 / 实例

构造函数: 可以通过‘new’来新建一个对象的函数。构造函数拥有一个 prototype的属性指向原型。

原型 (prototype): 每一个JavaScript对象（null除外）在创建时就会与之关联另一个对象，这个对象就是我们所说的原型（因此原型本身也是一个对象），每一个JS对象都会从原型"继承"属性。原型拥有一个 constructor的属性指向构造函数。

实例: 通过new构造函数创建出来的对象。在火狐和谷歌中，实例通过 __proto__属性指向原型，通过constructor属性指向构造函数。

---

接下来举个栗子，以我们常用的 Object 这个构造函数为例，通过它构建实例。

// 实例
function Person() {
}
const person= new Person() 
person.name = 'Shirley';
console.log(person.name) // Shirley

此时，实例为 instance, 构造函数为 Object，我们知道，构造函数拥有一个 prototype的属性指向原型，因此原型为:

// 原型
const prototype = Person.prototype //注意此时是大写，因此Person是一个构造函数

因此，三者的关系为:

实例.__proto__ === 原型
实例.constructor === 构造函数
构造函数.prototype === 原型
原型.constructorr === 构造函数

2.原型的原型

前面我们讲了原型也是一个对象，因此原型可以被这样创建：

var obj = new Object();
obj.name = 'Kevin'
console.log(obj.name) // Kevin

其实原型对象就是通过 Object 构造函数生成的，结合之前所讲，实例的 __proto__ 指向构造函数的 prototype ，所以我们再更新下关系图:

（Object.prototype没有原型）

3.原型链

原型链是由所有相互关联的原型对象组成的链状结构，是一个用来实现继承和共享属性的有限的对象链。

• 属性查找机制: 当查找某实例的属性时，如果找不到，则沿着原型链往上一级（与该实例关联的原型中的属性）查找，找到时则输出，找不到则继续沿着原型链往上一级查找，直至最顶级的原型对象 Object.prototype，如还是没找到，则输出 undefined；

//举个例子
function Person() {
}

Person.prototype.name = 'Kevin';

var person = new Person();

person.name = 'Daisy';
console.log(person.name) // Daisy

delete person.name;
console.log(person.name) // Kevin

/*在这个例子中，我们给实例对象 person 添加了 name 属性，
当我们打印 person.name 的时候，结果自然为 Daisy。*/

/*但是当我们删除了 person 的 name 属性时，读取 person.name，
从 person 对象中找不到 name 属性,就会从 person 的原型：
也就是 person.__proto__，也就是 Person.prototype中查找，
幸运的是我们找到了 name 属性，结果为 Kevin。*/

• 属性修改机制: 只会修改实例对象本身的属性，如果不存在，则进行添加该属性，如果需要修改原型的属性时，则可以用: Person.prototype.x=2；但是这样会造成所有继承于该对象的实例的属性发生改变。