原型在js中,是一个相对而言较难理解易混淆的概念,这里特对原型做了一个小总结,参照JS 高三的一些总结提取。
1、在js中,创建一个函数的同时,就会根据一组特定规则为该函数创建一个 prototype 属性,这个属性是一个指针,指向函数的原型对象。
在默认情况下,所有原型对象都会自动获得一个 constructor (构造函数) 属性,这个属性是一个指向 prototype 属性所在函数的指针。
var Person = function(name,sex,age){
this.name = name;
}
Person.prototype = {
showName : function(){
console.log('name : ', this.name)
}
}
var personA = new Person();
var personB = new Person();
Person.prototype.constructor 指向 构造函数本身,即Person;
personA、personB是构造函数实例化出来的对象,该实例内部包含一个_proto_属性,指向构造函数的原型对象。即:personA、personB的_proto_指向 Person.prototype对象 。
2、在执行某个对象的某个属性(方法)时,首先从对象实例本身开始,查找该属性方法,有则调用;如果没有找到,则去其原型对象上查找该属性方法。
var Person = function(){
this.name = "box1"
}
Person.prototype = {
name : "box2",
sex : "girl"
}
var personX = new Person();
console.log(personX.name); // box1
console.log(personX.sex); // girl
3、当给对象实例添加某个属性时,这个属性就会屏蔽原型对象中保存的同名属性。添加的这个属性只会阻止我们访问原型中的同名属性,但不会去修改原型中的这个同名属性。
不过使用delete操作符,则可以完全删除实例属性,从而让我们能重新访问原型中的属性。
var Person = function(){}
Person.prototype = {
name : "Allen",
}
var person1 = new Person();
var person2 = new Person();
person1.name = 'John';
console.log(person1.name) // John ,来自实例
console.log(person2.name) // Allen,来自原型
delete person1.name;
console.log(person1.name) // Allen,来自原型
4、hasOwnProperty():检测 一个属性 是存在于 实例中 还是 原型中。只有属性在对象实例中,才会返回ture。 即hasOwnProperty()仅当 属性存在于对象实例中时,才返回ture。
因此,通过调用 hasOwnProperty() 方法,就能分辨出 访问的是 实例属性 还是 原型属性。
var Person = function(name){};
Person.prototype = {
name : 1,
showName : function(){
console.log('name : ', this.name)
}
}
// hasOwnProperty() 判断某个属性是否在 实例属性上
var personA = new Person('John');
console.log(personA.hasOwnProperty("name")); // fasle
personA.name = 2; // 实例属性上 (等同于直接在Person构造函数里添加属性)
console.log(personA.hasOwnProperty("name")); // ture
console.log(personA.hasOwnProperty("showName")); // false