原型和原型链(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、方法一般定义在原型中,属性一般通过构造函数定义在对象本身上