prototype为对象添加属性和方法

Posted 2020-09-12 AiTing on the way

可以通过prototype来为已经定义好的的"类"添加属性和方法。这里来了解一下prototype的基础知识。prototype是"构造函数"的属性，不是实例的属性.

示例：

function HiClass() {  
    this.sayHi = function(){  
        alert("hi");  
    }  
}  
  
var obj = new HiClass();   
alert(HiClass.prototype);//outputs [object, object]  
alert(obj.prototype);//outputs undefined  

 

在用prototype的方式实现继承一个类的时候，要注意其可能覆盖别的prototype方式添加的属性和方法。如果HiClass.prototype.prop = ‘value‘是在HiClass.prototype = new HelloClass()之前则不会有prop属性，如果在执行HiClass.prototype = new HelloClass()之后，HiClass的实例中会有prop属性，这个应该很好理解。但是要注意代码中不要不小心存在这样的bug。

示例：

function HiClass() {  
    this.sayHi = function(){  
        alert("hi");  
    }  
}  
  
  
function HelloClass() {  
    this.sayHello = function(){  
        alert("hello");  
    }     
}  
//HiClass.prototype.prop = ‘value‘;  //this.prop = function(){}写法是可以继承的，两种写法有区别滴
HiClass.prototype = new HelloClass();  
HiClass.prototype.prop = ‘value‘;  
  
var obj = new HiClass();  
obj.sayHello();  
alert(obj.prop); 

 

在JavaScript中有一个prototype链，在对一个对象实例上调用方法或者获取属性的时候，先看实例对应的类有没有对应的定义，没有的话会沿着prototype链一直找，找不到则为undefined。如果某类都有

定义，则调用本身的定义。Object.prototype.foo = function(){}会对所有以定义的方法起作用，javascript中Object对象是所有对象的基类

示例：

function Object2() {  
        this.sayHi = function(){  
            alert("hi Object2");  
        }  
    }  
      
    function Object3() {  
        this.sayHi = function(){  
            alert("hi Object3");  
        }  
          
        this.sayHello = function(){  
            alert("hello Object3");  
        }  
          
    }  

    Object2.prototype = new Object3();  
      
    var obj = new Object2();  
    obj.sayHi();  //hi Object2    调用obj.sayHi();的时候，sayHi在Object2里已经定义，则调用本身的定义。
    obj.sayHello();  //hi Object3    
      
    Object.prototype.foo = function(){  //会对所有以定义的方法起作用，javascript中Object对象是所有对象的基类
        alert("f00 Object");  
    };  
    obj.foo();  //f00 Object
    Object2.foo(); //f00 Object
    Object3.foo(); //f00 Object
    a.foo();    //报错

 

如果在实例里添加的属性和方法与prototype里的属性和方法重名，相对于实例和prototype都有这个属性和方法，只是由于prototype链的访问顺序，先访问到实例中的属性和方法。如下面的例子说明了这一点

function Test(){};  
  
Test.prototype.prop1 = ‘prop value‘;  
  
var obj = new Test();  //obj如果是一个方法又不一样喽；obj.prototype = new Test();不会继承滴
  
obj.prop1 = ‘instance value‘;  
  
alert(obj.prop1 );//outputs instance value  
  
alert(obj.hasOwnProperty("prop1"));//outputs true  
  
delete obj.prop1;alert(obj.prop1 ); //outputs prop value  由于prototype链的访问顺序，先访问到实例中的属性和方法，删除的是第一个属性
alert(obj.hasOwnProperty("prop1"));//outputs false  
alert("prop1" in obj);//outputs true  

delete Test.prototype.prop1;alert(obj.prop1 );//outputs undefined

 

再来看看一些构造函数和prototype的使用：

var myObj = {  
    prop1:‘value1‘,  
    prop2:‘value2‘  
}  
  
Object.prototype.foo = function(){  
    alert("f00 Object");  
};  
  
//等价于  
//var myObj = new Object();  
//myObj.prop1 = ‘value1‘;  
//myObj.prop2 = ‘value2‘;  
  
alert(myObj.prop2);  //value2
myObj.foo();    // f00 Object

 

同时也可以如下的方式对prototype赋值，可以一次添加多个属性和方法

function TestCls(){  
      
}  
TestCls.prototype = {  //可以一次添加多个属性和方法
    prop1:‘value1‘,  
    prop2:‘value2‘  
};  
myObj = new TestCls();  
alert(myObj.prop2);  //value2

 

上面的做法中有一个问题是改变prototype后，constructor也改变了。
所以要将prototype.constructor之前的值，比如第一个例子中要加上 HiClass.prototype.constructor=HiClass；constructor 属性返回对创建此对象的数组函数的引用

//上面的做法中有一个问题是改变prototype后，constructor也改变了。  
//所以要将prototype.constructor之前的值，比如第一个例子中要加上 HiClass.prototype.constructor=HiClass  
function HiClass() {  
    this.sayHi = function(){  
        alert("hi");  
    }  
}  
  
  
function HelloClass() {  
    this.sayHello = function(){  
        alert("hello");  
    }     
}  
  
HiClass.prototype = new HelloClass();  
HiClass.prototype.constructor=HiClass  //constructor 属性返回对创建此对象的数组函数的引用。