js原型 prototype

阅读更多

   js原型是Js中非常重要的概念，每个函数(在Js里面函数也是对象)都有一个叫prototype(即原型)的属性，不过在一般情况下它的值都是null，但是它有一项非常重要的功能就是所有实例都会共享它里面的属性和方法(这就是Js里面实现继承的基础)

  原型与原型链 体现OOP思想.

原型使用方式1：

 

 var Calculator = function (decimalDigits, tax) {                                         
       this.decimalDigits = decimalDigits;    
        this.tax = tax;      
  };

 Calculator.prototype = {         
   add: function (x, y) {   
             return x + y;          
  },       
     subtract: function (x, y) {   
             return x - y;           
 }        };      

//测试
var obj=new Calculator();
 alert(obj.add(1, 3));

 Calculator对象的prototype属性赋值对象字面量来设定Calculator对象的原型。
 

 原型使用方式2：

赋值原型prototype的时候使用function立即执行的表达式来赋值。

Calculator.prototype = function () { 

} ();

 

 封装私有的function，通过return的形式暴露出简单的使用名称，以达到public/private的效果 。

Calculator.prototype = function () {    
        add = function (x, y) {     
           return x + y;           
 },           
 subtract = function (x, y) {   
             return x - y;         
   }          
  return {          
      add: add,      
       subtract: subtract  
          }        } ();      

//测试
var obj=new Calculator();
alert(obj.add(11,3));

 

分步声明：

var BaseCalculator = function () {  
  //为每个实例都声明一个小数位数  
  this.decimalDigits = 2;
};     
   //使用原型给BaseCalculator扩展2个对象方法
BaseCalculator.prototype.add = function (x, y) {  
  return x + y;
};
BaseCalculator.prototype.subtract = function (x, y) { 
   return x - y;
};

 

首先，声明了一个BaseCalculator对象，构造函数里会初始化一个小数位数的属性decimalDigits，然后通过原型属性设置2个function，分别是add(x,y)和subtract(x,y)，当然你也可以使用前面提到的2种方式的任何一种，我们的主要目的是看如何将BaseCalculator对象设置到真正的Calculator的原型上。

 

var BaseCalculator = function() {   
 this.decimalDigits = 2;
};
BaseCalculator.prototype = {  
  add: function(x, y) {  
      return x + y;    
},    subtract: function(x, y) { 
       return x - y;   
 }};

 

var Calculator = function () {  
  //为每个实例都声明一个税收数字  
  this.tax = 5;
};      
  Calculator.prototype = new BaseCalculator();

 

我们可以看到Calculator的原型是指向到BaseCalculator的一个实例上，目的是让Calculator集成它的add(x,y)和subtract(x,y)这2个function，还有一点要说的是，由于它的原型是BaseCalculator的一个实例，所以不管你创建多少个Calculator对象实例，他们的原型指向的都是同一个实例。

var calc = new Calculator();
alert(calc.add(1, 1));
//BaseCalculator 里声明的decimalDigits属性，在 Calculator里是可以访问到的alert(calc.decimalDigits); 

 

上面的代码，运行以后，我们可以看到因为Calculator的原型是指向BaseCalculator的实例上的，所以可以访问他的decimalDigits属性值，那如果我不想让Calculator访问BaseCalculator的构造函数里声明的属性值，这样处理

var Calculator = function () { 
   this.tax= 5;
};
Calculator.prototype = BaseCalculator.prototype;

 

通过将BaseCalculator的原型赋给Calculator的原型，这样你在Calculator的实例上就访问不到那个decimalDigits值了，如果你访问如下代码，那将会提升出错。

var calc = new Calculator();
alert(calc.add(1, 1));
alert(calc.decimalDigits);

 

重写原型： 

 在使用第三方JS类库的时候，往往有时候他们定义的原型方法是不能满足我们的需要，但是又离不开这个类库，所以这时候我们就需要重写他们的原型中的一个或者多个属性或function，我们可以通过继续声明的同样的add代码的形式来达到覆盖重写前面的add功能。

//覆盖前面Calculator的add() function 
Calculator.prototype.add = function (x, y) {  
  return x + y + this.tax;
};
var calc = new Calculator();
alert(calc.add(1, 1));