强大的原型和原型链

最新更新: 2018-09-18 14:21:49 阅读: 22次

基于原型的继承模型比传统的类继承还要强大。实现传统的类继承模型是很简单,但是实现 JavaScript 中的原型继承则要困难的多。

原型使用方式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;            }       
 };     
   //alert((new Calculator()).add(1, 3));




原型使用方式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            }   
     } ();     
   //alert((new Calculator()).add(11, 3));


重写原型:

在使用第三方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));


原型链


function Foo() {
this.value = 42;
}
Foo.prototype = {
method: function() {}
};

function Bar() {}

// 设置Bar的prototype属性为Foo的实例对象
Bar.prototype = new Foo();
Bar.prototype.foo = 'Hello World';

// 修正Bar.prototype.constructor为Bar本身
Bar.prototype.constructor = Bar;

var test = new Bar() // 创建Bar的一个新实例

// 原型链
test [Bar的实例]
Bar.prototype [Foo的实例]
{ foo: 'Hello World' }
Foo.prototype
{method: ...};
Object.prototype
{toString: ... /* etc. */};