JavaScript中的原型 property

Posted 2020-10-04 稀里糊涂林老冷

 

  1             /*
  2              *    javascript当中 原型 prototype 对象
  3              * 
  4              * */
  5             //首先引入 prototype的意义，为什么要使用这个对象
  6             
  7             //先来写一个构造函数的面向对象实例
  8             function Person(name ){
  9                 this.name = name;
 10                 this.show = function(){
 11                     return this.name;
 12                 };
 13             }
 14             //实例化两个对象
 15             p1 = new Person("a");
 16             p2 = new Person("b");
 17             //alert(p1 == p2); // false    很显然两个实例对象不是一个对象
 18             //alert(p1.show == p2.show);    // false    实际上每一个对象实例化的时候都各自拥有自己的这个方法
 19             
 20             
 21             /*
 22              *   实际上，上面的例子，对于show函数来说，其实每一个Person的对象，都拥有这个方法，并且功能是一样的，这其实是占用内存的，重复累赘的
 23              *         如果可以更好的 话，一个面向对象过程，相同的属性和方法，最好还是能所有对象拥有同一份公共相同方法和属性，
 24              * 
 25              * 
 26              *     在js当中这就需要引入原型的概念：
 27              *         在js中，每一个函数都有一个属性prototype 是一个指向自己的原型对象的引用。
 28              *         原型对象是一个对象， 如果我们把希望共有的方法和属性写入原型对象当中，就能实现，在每一个实例化对象不新建一个方法和属性，
 29              *             而是使用原型对象的提供的方法和属性 
 30              * 
 31              * */
 32             
 33             //这是一个类
 34             function Person(){
 35                 
 36             }
 37             //下面我们向这个Person类的原型对象里面添加属性和方法
 38             Person.prototype.name = "张三";
 39             Person.prototype.show = function(){
 40                 return this.name;
 41             };
 42             
 43             //实例化两个Person的对象
 44             var p1 = new Person();
 45             var p2 = new Person();
 46             //alert(p1.name);    //张三
 47             //alert(p1.name == p2.name);    //true 加入原型对象的属性就变成了公共属性，所有对象拥有相同一份
 48             //这个时候我们给p1 增加自己的变量 覆盖name
 49             p1.name = "李四";
 50             //alert(p1.show());    //李四    这个name变量实际上没有覆盖原型类当中，而是p1对象自己的成员变量
 51             //这个时候把p1的name删除，再取p1的name，就又会取到原型对象的name
 52             delete p1.name;
 53             //alert(p1.show());    //张三   这个时候，自己没有成员变量name ， 就会使用原型对象中共有的name
 54             
 55             //alert(p1.show == p2.show);    // true   这两个实例对象都没有实现show  这个show是原型类提供的
 56             
 57             
 58             /*
 59              * 经过上面的分析 再来整理一下 原型对象：
 60              * 
 61              *     1 任何一个函数 他的prototype属性都是一个指向自己原型对象的引用
 62              *     2 某个函数实例在调用方法或者取属性的时候，先找自己的成员变量，如果没有再找自己的原型对象中的共有变量
 63              *  3 相同构造函数出来的所有实例对象的protorype 指向的原型 都和构造函数的原型是同一个原型对象
 64              *  4 写入原型中的方法和属性是共有的，如果实例对象重写，会添加私有变量 不会覆盖原型中的内容
 65              *  5 原型对象的构造器指向的就是拥有这个原型的初始的构造函数。
 66              * 
 67              * */
 68             
 69             // 我们再来分析一次
 70             //这是一个构造函数
 71             function Person(name){
 72                 this.name = name;
 73             }
 74             //在原型里 添加 共有方法
 75             //我们接收一下原型
 76             var obj = Person.prototype;
 77             obj.age = 18;
 78             obj.show = function(){
 79                 alert(this.name);
 80             };
 81             
 82             //实例化两个对象
 83             var p1 = new Person("a");
 84             var p2 = new Person("b");
 85             //p1.show(); //a
 86             //p2.show();    //b
 87             //alert(p1.show == p2.show);    //true  这是原型里共有的
 88             
 89             // Person的原型对象的构造器就是Person
 90             //alert(obj.constructor);
 91             
 92             //obj.isPrototypeOf(newobj) 这个方法用于检查obj 是不是newobj的原型
 93             //alert( obj.isPrototypeOf(p1) );
 94             //alert( obj.isPrototypeOf(p2) );    // 我们发现两个都是true 也就是 两个对象都有相同的原型
 95             
 96             
 97             // 属性 in 对象 可以返回对象当中有没有属性，但是不能判断是原型的还是对象私有的，只要有这个属性都返回true
 98             // 对象.hasOwnProperty(属性) 能够检查属性是不是对象的私有变量
 99             alert( "age" in p1 );    //true  age是原型里的属性
100             alert( p1.hasOwnProperty("age") );    //false     原型里的属性不是自己的属性
101             alert( p1.hasOwnProperty("name") );    //true    name是自己的属性
102             
103             
104             //判断是原型里的属性而不是自己的方法
105             function prototypeHasProperty(obj , property){
106                 // 自己没有这个属性 并且 能查到这个对象可以使用这个属性
107                 return !obj.hasOwnProperty(property) && ( property in obj );
108             }
109