JavaScript中的 原型 property 构造函数 和实例对象之间的关系

 1 为什么要使用原型？

 

/*
 * javascript当中 原型 prototype 对象  3  *  4  * */
//首先引入 prototype的意义，为什么要使用这个对象

//先来写一个构造函数的面向对象实例
function Person(name ){  9     this.name = name; 10     this.show = function(){ 11         return this.name; 12  }; 13 } 14 //实例化两个对象
p1 = new Person("a"); 16 p2 = new Person("b"); 17 //alert(p1 == p2); // false 很显然两个实例对象不是一个对象
//alert(p1.show == p2.show); // false 实际上每一个对象实例化的时候都各自拥有自己的这个方法


/*
 * 实际上，上面的例子，对于show函数来说，其实每一个Person的对象，都拥有这个方法，并且功能是一样的，这其实是占用内存的，重复累赘的 23  * 如果可以更好的 话，一个面向对象过程，相同的属性和方法，最好还是能所有对象拥有同一份公共相同方法和属性， 24  * 25  * 26  * 在js当中这就需要引入原型的概念： 27  * 在js中，每一个函数都有一个属性prototype 是一个指向自己的原型对象的引用。 28  * 原型对象是一个对象， 如果我们把希望共有的方法和属性写入原型对象当中，就能实现，在每一个实例化对象不新建一个方法和属性， 29  * 而是使用原型对象的提供的方法和属性 30  * 31  * */

//这是一个类
function Person(){ 35     
} 37 //下面我们向这个Person类的原型对象里面添加属性和方法
Person.prototype.name = "张三"; 39 Person.prototype.show = function(){ 40     return this.name; 41 }; 42 
//实例化两个Person的对象
var p1 = new Person(); 45 var p2 = new Person(); 46 //alert(p1.name); //张三
//alert(p1.name == p2.name); //true 加入原型对象的属性就变成了公共属性，所有对象拥有相同一份
//这个时候我们给p1 增加自己的变量 覆盖name
p1.name = "李四"; 50 //alert(p1.show()); //李四 这个name变量实际上没有覆盖原型类当中，而是p1对象自己的成员变量
//这个时候把p1的name删除，再取p1的name，就又会取到原型对象的name
delete p1.name; 53 //alert(p1.show()); //张三 这个时候，自己没有成员变量name ， 就会使用原型对象*有的name

//alert(p1.show == p2.show); // true 这两个实例对象都没有实现show 这个show是原型类提供的


/*
 * 经过上面的分析 再来整理一下 原型对象： 60  * 61  * 1 任何一个函数 他的prototype属性都是一个指向自己原型对象的引用 62  * 2 某个函数实例在调用方法或者取属性的时候，先找自己的成员变量，如果没有再找自己的原型对象中的共有变量 63  * 3 相同构造函数出来的所有实例对象的protorype 指向的原型 都和构造函数的原型是同一个原型对象 64  * 4 写入原型中的方法和属性是共有的，如果实例对象重写，会添加私有变量 不会覆盖原型中的内容 65  * 5 原型对象的构造器指向的就是拥有这个原型的初始的构造函数。 66  * 67  * */

 

 

 

 

 

2 构造函数 实例对象 和原型对象的关系

 

/*
 JavaScript中 构造函数、实例对象、原型之间的关系：  3  构造函数内的变量和方法，每一个实例对象初始化的时候都会为自己实例化这些属性方法  4  构造函数的prototype属性，是一个引用，指向他的原型对象  5  构造函数实例化出来的所有对象和构造函数共有一个原型对象，他们的prototype都指向同一个原型  6  原型对象中的属性方法是构造函数和实例对象共有的，实例对象初始化不会为自己创建这些属性和方法。  7  当调用实例对象的属性的时候，会有限找自己的私有变量，没有的话就去找原型对象的变量，再没有就返回undefined  8     
*/
//一个构造函数
function Person(){ 12     
} 14 //Person的原型对象 设置公共属性和方法
Person.prototype.name="haha"; 16 Person.prototype.age=18; 17 Person.prototype.sayName = function(){ 18     alert(this.name); 19 }; 20 
// 实例化对象
var p1 = new Person(); 23 alert(p1.name);    //haha 这里会找到原型对象中的公共属性

//利用Object.getPrototypeOf(obj) 能够取得obj的原型对象
alert(Person.prototype == Object.getPrototypeOf(p1));    //true 构造函数实例化的对象他们之间共有一个原型对象



/*
 当调用对象属性的时候 32  先搜索自己的私有属性 33  如果没有 再搜索原型对象的属性 34  如果没有 返回undefined 35     
 对象设置私有属性不会修改原型内容，只会自己添加属性 37 */
//实例化另一个对象 
var p2 = new Person(); 40 //给p2添加私有属性 
p2.name = "xixi"; 42 alert(p2.name);    //xixi
delete p2.name; 44 alert(p2.name);    //haha


// 检查一个对象的属性是不是自己的 hasOwnProperty()
p2.name = "xixi"; 49 alert(p2.name);    //xixi
alert(p2.hasOwnProperty("name"));    //true
delete p2.name; 52 alert(p2.name);    //haha
alert(p2.hasOwnProperty("name"));    //false

// in 操作符 返回 属性是否在对象中或者在原型中
alert( "name" in p2 );    //true

// 结合in和hasOwnProperty 判断 属性是不是原型的属性
function isPrototypeProperty( obj , property ){ 60     // 不是自己的私有属性并且是自己的属性
    return !obj.hasOwnProperty(property) && property in obj; 62 } 63 

//Object.keys(obj) 返回obj对象中能够被枚举的私有属性的数组 constructor 是不能被枚举的
p2.name = "xixi"; 67 p2.age=10; 68 alert(Object.keys(p2));    // name,age
alert(Object.keys(Person.prototype));    //name,age,sayName

// Object.getOwnPropertyNames(obj) 返回obj所有属性的数组
alert(Object.getOwnPropertyNames(Person.prototype));    // name,age,sayName,constructor