JavaScript进阶—函数高级之原型与原型链

一、原型

1. 什么是原型

• 每个函数都有一个prototype属性，这个属性指向一个空的Object对象，即称为原型对象
• 原型对象中都有一个constructor属性，它指向函数对象

// Date函数的prototype属性
console.log(Date.prototype);

// Date函数prototype中的constructor
console.log(Date.prototype.constructor);

2. 作用

给原型对象中添加属性后（一般添加的都是方法），函数的所有实例对象自动拥有原型中的属性（方法）。

// 定义Person函数
function Person(){
    this.name = 'person'
}

// 向Person原型中添加一个test方法
Person.prototype.test = function(){
    console.log('test');
}

// 创建一个实例对象
let per = new Person()

// per对象调用Person原型上的test方法
per.test()

二、显式原型与隐式原型

1. 显示原型

每个函数都有一个prototype属性，即显式原型（属性）

显式原型在函数被创建时自动添加，默认值为一个Object空对象。

2. 隐式原型

每个实例对象都有一个__proto__属性，即隐式原型

隐式原型在实例对象被创建时自动添加，默认值为构造函数的prototype属性。

3. 联系

对象隐式原型的值为其构造函数的显式原型的值。

ES6之前只能操作显式原型。

console.log(Person.prototype); // Person函数的显式原型
console.log(per.__proto__); // per对象的隐式原型
console.log(Person.prototype === per.__proto__); // 对象的隐式原型等于其构造函数的显式原型

三、原型链

1. 原型链

访问一个对象的属性时：
	先在自身中找，找到返回
	如果没有，再沿着__proto__这条链向上查找，找到返回
	如果最终没找到，返回undefined
别名：隐式原型链
作用：查找对象的属性（方法）

补充

1. 函数的显式原型默认值为一个空的Object实例对象，但Object不满足。

// 定义Person函数
function Person(){
   this.name = 'person'
}

console.log(Person.prototype instanceof Object); //true
console.log(Function.prototype instanceof Object); //true
console.log(Object.prototype instanceof Object);  // false

2. 所有的函数都是Function的实例，包括Function本身

// 实例的隐式原型===构造函数的显式原型
console.log(Function.__proto__ === Function.prototype);  // true

3. 原型链的尽头是Object的原型

console.log(Object.prototype.__proto__); // null 

2. 原型链属性问题

• 读取对象的属性值时，会顺着原型链查找
• 设置对象的属性值时，不会查找原型链，如果对象本身没有，则直接添加属性
• 对象的属性一般定义在自身，方法定义在原型链

3. 探索instanceof

instanceof是怎样判断的？

表达式：A instanceof B
如果B函数的显式原型对象在A对象的隐式原型链上，就返回true，否则返回false

Function是通过new自己产生的实例