prototype
- 每个函数|类,都有一个prototype属性
function Person() {
}
Person.prototype.name = 'name';
var person1 = new Person();
var person2 = new Person();
console.log(person1.name) // name
console.log(person2.name) // name
-
函数的prototype属性指向了一个对象,这个对象正是调用该构造函数而创建的实例的原型,也就是这个例子中的person1和person2的原型。
-
每一个JavaScript对象(null除外)在创建的时候就会与之关联另一个对象,这个对象就是我们所说的原型,每一个对象都会从原型"继承"属性。
_proto_
-
该怎么表示实例与实例原型,也就是person和Person.prototype之间的关系呢,浏览器层面定义了__proto__
这是每一个JavaScript对象(除了 null、undefined )都具有的一个属性,叫__proto__,这个属性会指向该对象的构造函数的原型prototype -
它并不存在与Person.prototype中,实际上,它是来自于Object.prototype,与其说是一个属性,不如说是一个getter/setter,当使用obj.__proto__时,可以理解成返回了Object.getPrototypeOf(obj)
function Person() {
}
var person = new Person();
console.log(person.__proto__ === Person.prototype); //true
constructor
实例对象和构造函数都可以指向原型,那么原型是否有属性指向构造函数或者实例呢?
指向实例倒是没有,因为一个构造函数可以生成多个实例,但是原型指向构造函数倒是有的,这就要讲到第三个属性:constructor,每个原型都有一个constructor属性指向关联的构造函数
function Person() {
}
console.log(Person === Person.prototype.constructor); //true
var person = new Person();
console.log(person.constructor === Person); // true
person.constructor === Person.prototype.constructor //true
person中并没有constructor属性,当不能读取到constructor属性时,会从person的原型也就是Person.prototype中读取,正好原型中有该属性,所以
function Person() {
}
var person = new Person();
console.log(person.__proto__ == Person.prototype) // true
console.log(Person.prototype.constructor == Person) // true
// 顺便学习一个ES5的方法,可以获得对象的原型
console.log(Object.getPrototypeOf(person) === Person.prototype) //true
原型链
当读取实例的属性时,如果找不到,就会查找与对象关联的原型中的属性,如果还查不到,就去找原型的原型,一直找到最顶层为止
function Person() {
}
Person.prototype.name = 'name';
var person = new Person();
person.name = 'name of this person';
console.log(person.name) // name of this person
delete person.name;
console.log(person.name) // name
从person中找不到就会从person的原型也就是person._proto_ == Person.prototype中查找,原型也是一个对象,既然是对象,我们就可以用最原始的方式创建它,那就是
var obj = new Object();
obj.name = 'name'
console.log(obj.name) // name
- 由于 Object 本身是一个函数(Object())由 Function 所创建,所以 Object._proto_ 的值是 Function.prototype
- 又因为原型对象是通过 Object 构造函数生成的,Function.prototype 的 proto 属性是 Object.prototype
Object instanceof Object // true
所以我们再更新下关系图:
Object.prototype的原型呢?null,所以查到Object.prototype就可以停止查找了
所以沿着原型链会一直查找到null为止
图中由相互关联的原型组成的链状结构就是原型链,也就是蓝色的这条线
对于函数来说,所有函数都可以看做是 Function 的实例,constructor 都指向构造函数
console.log(Person.constructor === Function); // true
console.log(Object.constructor === Function); // true
console.log(Function.constructor === Function); // true
console.log(Person.__proto__ === Function.prototype); // true
console.log(Object.__proto__ === Function.prototype); // true
console.log(Function.__proto__ === Function.prototype); // true
又因为原型对象是通过 Object 构造函数生成的,Function.prototype 的 _proto_ 属性是 Object.prototype
Function.prototype.__proto__ === Object.prototype
案例:
let arr=[];
arr.__proto__===Array.prototype //true
Array.prototype.__proto__===Object.prototype //true
Array.prototype.constructor === Object //false
Array.prototype.constructor === Array //true
Array.constructor===Function //true
Array.__proto__===Function.prototype //true