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

 1 为什么要使用原型？

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

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


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

//这是一个类
function Person(){
    
}
//下面我们向这个Person类的原型对象里面添加属性和方法
Person.prototype.name = "张三";
Person.prototype.show = function(){
    return this.name;
};

//实例化两个Person的对象
var p1 = new Person();
var p2 = new Person();
//alert(p1.name);    //张三
//alert(p1.name == p2.name);    //true 加入原型对象的属性就变成了公共属性，所有对象拥有相同一份
//这个时候我们给p1 增加自己的变量 覆盖name
p1.name = "李四";
//alert(p1.show());    //李四    这个name变量实际上没有覆盖原型类当中，而是p1对象自己的成员变量
//这个时候把p1的name删除，再取p1的name，就又会取到原型对象的name
delete p1.name;
//alert(p1.show());    //张三   这个时候，自己没有成员变量name ， 就会使用原型对象中共有的name

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


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

 

 

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

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

// 实例化对象
var p1 = new Person();
alert(p1.name);    //haha    这里会找到原型对象中的公共属性

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



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


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

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

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


//Object.keys(obj) 返回obj对象中能够被枚举的私有属性的数组  constructor 是不能被枚举的
p2.name = "xixi";
p2.age=10;
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