JavaScript函数之prototype原型和原型链

1. 原型

函数的prototype属性

• 每个函数都有一个prototype属性，它默认指向一个Object空对象（即：原型对象）。
• 原型对象中有一个属性constructor，它指向函数对象。

Person的prototype指向了它的Person Prototype，Person Prototype的constructor指向了Person 。

// 用户对象
function Person() {};console.log(Person.prototype);Person.prototype.getMoney = function() {return 5000000;console.log("身价500w");
}console.log((new Person()).getMoney());

给原型对象添加属性（一般都是方法）

• 作用：函数的所有实例对象自动拥有原型中的属性（方法）

2. 显式和隐式原型

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

每个实例对象都有一个__proto__，称为隐式原型（属性）。

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

内存结构

// 第1步，内部语句：this.prototype = {}
function Fn() {};console.log(Fn.prototype);// 第2步，内部语句：this.__proto__ = Fn.prototype
let fn = new Fn();console.log(fn.__proto__);
console.log(fn.__proto__ === Fn.prototype);// 在原型上添加方法
Fn.prototype.test = function () {console.log("invoke test...");
}
fn.test();

以上代码对应内存结构如下：

总结：

• 函数的prototype属性：在定义函数时自动添加的，默认值是一个空的Object对象。
• 对象的__proto__属性：创建对象的时候自动添加的，默认值为构造函数的prototype属性值。
• 可以在程序中直接操作显式原型，但不能直接操作隐式原型（ES6之前）

3. 原型链

3.1 访问顺序

原型链（隐式原型链），主要用于查找对象的属性（方法）；访问一个对象的属性时，

• 先在自身属性中查找，找到则返回
• 如果没有，在沿着__proto__这条链向上查找，找到返回
• 如果最终没找到，则返回undefined

            console.log(Object.prototype.__proto__)function Fn() {this.test1 = function() {console.log("test1()")}}Fn.prototype.test2 = function() {console.log("test2()")}let fn = new Fn();fn.test1();fn.test2();console.log(fn.toString);fn.test3();

输出如下：

构造函数/原型/实体对象的关系

函数的显式原型指向的对象默认是空Object实例对象（但是Object不满足）

所有函数都是Function的实例（包含Function）

Object的原型对象是原型链的尽头。

原型链的属性问题
读取对象的属性值时：会自动到原型链中查找
设置对象的属性值时：不会查找原型链，如果当前对象中没有此属性，直接添加此属性并设置其值
方法一般定义在原型中，属性一般通过构造函数定义在对象本身上。

function Fn() {}
Fn.prototype.a = 'xxx';
let fn1 = new Fn();
console.log(fn1.a, fn1);let fn2 = new Fn();
fn2.a = 'yyy';
console.log(fn1.a, fn2.a, fn1)

输出如下：

4. instanceof

4.1 如何判断

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

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

function Foo() {}
let f1 = new Foo()
console.log(f1 instanceof Foo) // true
console.log(f1 instanceof Object) // true

完整的原型关系图：