一、prototype(原型/原型对象)
- 每个函数天生自带一个属性
prototype
,它是一个对象。- 只要函数定义好以后,这个
prototype
就存在了;所以,函数和prototype
可以理解为伴生关系。- 构造函数也是函数,构造函数有
constructor
和prototype
,可以向原型对象prototype
里面添加内容。
function Person(){}
//Person.prototype已经出生了
//向prototype上添加一些属性和方法
Person.Prototype.sayHi = function(){}
console.log(Person.prototype)
// {
// sayHi: ƒ()
// constructor: ƒ Person()
// __proto__: Object
// }
二、__proto__
- 每个对象自带一个属性
__proto__
,指向所属构造函数的prototype
- 实例化对象也是一个对象,也有
__proto__
属性
function Person(){}
Person.prototype.sayHi = function(){
console.log("hello")
}
let p1 = new Person()
console.log(p1) //Person {}
console.log(p1.__proto__ === Person.prototype)//true
因为
p1
是Person
实例化出来的对象,所以p1
所属的构造函数就是Person
p1.__proto__
指向所属构造函数的prototype
三、对象访问机制
当访问一个对象的成员时,如果对象本身有,则直接返回结果;如果没有,会自动去
__proto__
上访问;一直找寻到顶级对象的__proto__
,最终没找到则返回undefined
function Person(name, age) {
this.name = name;
this.age = age;
}
Person.prototype.sayHi = function () {
console.log('Hello world')
}
let p1 = new Person("lxc", 18)
console.log(p1.name, p1.age, p1.sayHi)
p1身上并不存在sayHi属性,它向上找寻时,到了
p1.__proto__
,而p1.__proto__
刚好指向了Person.prototype
,所以找到了sayHi
利用
prototype
、__proto__
和对象访问机制,解决了构造函数的不合理;属性直接写在构造函数体内,方法写在构造函数的prototype
上
protytype作用:为了写一些方法给构造函数的实例对象使用,因为构造函数的每个实例都可以访问它的
prototype
- 看到这里应该有一个疑问?
上面说到:
- 每个对象都有
__proto__
属性,随便一个实例化对象的__proto__
都是其所属构造函数的prototype
;- 每个函数都有一个
prototype
,它是一个对象每个构造函数也是对象,那构造函数这个对象的
prototype
应该也有__proto__
,它指向了谁?
所以,这里来了第三条定义:当一个对象没有准确的构造函数来实例化的时候,看作是内置构造函数Object的实例。
var arr = [];//Array的实例
var obj = {};//Object的实例
function Person(){}
var p1 = new Person;//Person的实例
var time = new Date();//Date的实例
var fn = function(){};//Function的实例(只要是函数,就是Function的实例)
Person.prototype;//Object的实例
Array.prototype;//Object的实例
原型链.png
结论:任何一个对象开始出发,按照
__proto__
向上查找,都能找到Ojbect.prototype
,我们把这个用__proto__
串联起来的链状结构,叫做原型链
原型链的作用:为了对象访问机制服务