在了解原型之前,需要对构造函数有一个简单的理解。
function plane() {//飞机的构造函数
this.move = function () {
console.log('移动')
}
}
let p1 = new plane();//构造一个飞机实例1
p1.move();//调用飞机的move方法,会打印出“移动”
console.log(p1)
此时打印p1显示如图:
这里可以打印一下
console.log(p1.__proto__)//实例化的对象才有‘__proto__’属性,这表示p1的原型对象,‘__proto__’在IE中不能使用
结果如图:
proto 与prototype
console.log(p1.__proto__ === plane.prototype);//true,同时指向了一个原型对象
需要注意的是:
1.Object 是所有对象的爸爸,所有对象都可以通过 proto 找到它
2.Function 是所有函数的爸爸,所有函数都可以通过 proto 找到它
3.函数的 prototype 是一个对象
4.对象的 proto 属性指向原型, proto 将对象和原型连接起来组成了原型链
原型链
原型链,是一个链条,讲述每个对象的原型对象的关系,每个对象都有自己的原型对象
接着上面的代码:
p1.__proto__.name = '飞机1'
console.log(p1.name)//飞机1
let p2 = new plane();
p2.__proto__.name = '飞机2'
console.log(p2.name)//飞机2
首先给实例飞机1的原型对象添加属性name,会打印出“飞机1”;其次,新建一个飞机实例2,同样给原型对象添加属性name,会打印出“飞机2”。这个就说明每一个实例对象,都有一个自己的原型对象,虽然是同一个构造函数生成的,但是彼此的原型对象并不相同。
如果给构造函数的原型对象添加属性会是怎样的呢?
plane.prototype.name='大飞机'
console.log(p1.name)//大飞机
此时,打印p1的name属性,发现会与之前打印的p1的name属性有冲突。原因在于,当构造函数的原型对象添加属性后,所有的实例都会去继承相应的属性,如果实例的原型对象添加同一属性的话,并不会有作用。