原型与原型链的基本知识

原型和原型链（prototype）

介绍

1、函数的prototype属性

​ 每个函数都有一个prototype属性，它默认指向一个Object空对象（除了Object函数）即称为：原型对象，并不是真是空的，只是没有我们添加的属性和方法而已

​ 原型对象中有一个属性constructor，它指向函数对象，还有一个__proto_属性

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

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

例子：

function Fun(){
    console.log('beautiful')
}
Fun.prototype.test = function(){
    console.log('hello world')
}
var per = new Fun()
per.test()//hello world
console.log(Fun.prototype) //{test: ƒ, constructor: ƒ,_proto_: Object}
Fun.prototype.constructor() //beautiful

显式原型与隐式原型

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

2、每个实例对象都有一个proto，可称为隐式原型（属性）

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

4、内存结构（如下图）

5、总结：

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

fn.test()执行时，先在Fn的实例对象中寻找，没有找到，去隐式原型对象中去寻找。

原型链

1、

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

2、构造函数/原型/实体对象的关系（图解）

3、详细的原型链图解

由以上图可以分析得到：

function Fn(){} 
//1、函数的显示原型指向的对象默认是空Object实例对象（但Object不满足）
console.log(Fn.prototype instanceof Object) //true
console.log(Object.prototype instanceof Object) //false
console.log(Function.prototype instanceof Object) //true
//2、所有函数都是Function的实例（包含Function自身） var Function = new Function()
console.log(Function.__proto__ === Function.prototype)
//Object的原型对象是原型链的尽头
console.log(Object.prototype.___proto__) //null

原型链_属性问题

1、读取对象的属性值时：会自动到原型链中查找

2、设置对象的属性值时：不会查找原型链，如果当前对象中没有此属性值，直接添加此属性并设置其值

3、方法一般定义在原型中，属性一般通过构造函数定义在对象本身上