介绍
prototype(函数的原型)
- 只有函数才有
- protoype对象默认有两个属性:constructor 和 proto。
- prototype是为其他对象提供共享属性的对象
proto
- 所有对象都有,内置属性
- 指向构造函数对象的原型对象(prototype)
function Person(name, age) {
this.name = name;
this.age = age;
}
var person1 = new Person('tom', 2);
// person1是对象只有__proto__属性
// Person是函数具有__proto__、prototype
person1.__proto__ === Person.prototype; // true (__proto__第2条)
Person.prototype.constructor === Person; //true (prototype第2条)
Person.prototype.__proto__ === Object.prototype; // true (prototype第2条)
Person.prototype.sex = 'male';
console.log(person1.sex) // 'male' (prototype第3条)
常见误区
- 所有对象字面量创建的对象__proto__指向Object.prototype
var Person = {
name: 'tom',
age: 12
};
Person.__proto__ === Object.prototype; // true
- Function,Object是函数类型
console.log(typeof Object) // function
console.log(typeof Function) // function
console.log(Function.__proto__ === Function.prototype); // true
console.log(Object.__proto__ === Function.prototype); // true
console.log(Function.prototype.__proto__ === Object.prototype); // true
- Object.create
定义:Object.create(proto,[propertiesObject])
proto:新创建对象的原型对象
propertiesObject:可选。要添加到新对象的可枚举(新添加的属性是其自身的属性,而不是其原型链上的属性)的属性。
var Person = {
name: 'tom',
age: 12
}
var person1 = Object.create(Person);
console.log(person1.__proto__ === Person); // true
// Object.create实现原理
Object.createMy = function(obj) {
function f() {};
f.prototype = obj;
return new f();
}
var person2 = Object.createMy(Person);
console.log(person2.__proto__ === Person); // true
// 让我们回忆一下new的操作
function Personfun(name, age) {
this.name = name;
this.age = age;
}
personfun1 = new Personfun('tom', 13)
console.log(personfun1.__proto__ === Personfun.prototype); // true
console.log(Personfun.prototype.constructor === Personfun); // true
既然说到了就详细说一下Object.create{null}, Object.create{Object.prototype}, {}吧
var obj1 = {a: '1'};
var obj2 = Object.create(Object.prototype,{
a:{
writable:true,
configurable:true,
value:'1'
}
});
var obj3 = Object.create(null);
obj1.toString();
obj2.toString();
obj3.toString(); // TypeError: obj3.toString is not a function
// obj1 和 obj2 是创建方式是一致的,存在Object原型链上的方法
// obj3是一个存粹对象,什么时候使用Object.create(null)呢?
// - 你需要一个非常干净且高度可定制的对象当作数据字典的时候;
// - 想节省hasOwnProperty带来的一丢丢性能损失并且可以偷懒少些一点代码的时候
图说天下
原型链:利用原型让一个引用类型继承另一个引用类型的属性和方法
参考:
https://segmentfault.com/a/1190000016364830
https://juejin.im/entry/6844903790345191437