优就业WEB教程-JavaScript之原型深入详解解析.doc

优就业WEB教程-JavaScript之原型深入详解 理解原型 原型是一个对象，其他对象可以通过它实现属性继承。任何一个对象都可以成为继承，所有对象在默认的情况下都有一个原型，因为原型本身也是对象，所以每个原型自身又有一个原型。任何一个对象都有一个prototype的属性，记为:__proto__。每当我们定义一个对象，其__proto__属性就指向了其prototype。示例如下： var foo = { x: 10, y: 20 }; 即使我们不指定prototype，该属性也会预留。如果我们有明确指向的话，那么链表就连起来了。需要注意的是，prototype自己也有指向，就是最高级的object.prototype。示例如下： var a = { x: 10, calculate: function (z) { return this.x + this.y + z } }; var b = { y: 20, __proto__: a }; var c = { y: 30, __proto__: a }; // call the inherited method b.calculate(30); // 60 使用原型 理解了原型的原理之后，如何使用原型呢?或者说原型有什么作用呢? 一般的初学者，在刚刚学习了基本的javascript语法后，都是通过面向函数来编程的。如下代码： var decimalDigits = 2, tax = 5; function add(x, y) { return x + y; } function subtract(x, y) { return x - y; } //alert(add(1, 3)); 通过执行各个函数来得到最后的结果。但是利用原型，我们可以优化一些我们的代码，使用构造函数： 首先，函数本体中只存放变量： var Calculator = function (decimalDigits, tax) { this.decimalDigits = decimalDigits; this.tax = tax; }; 其具体的方法通过prototype属性来设置： Calculator.prototype = { add: function (x, y) { return x + y; }, subtract: function (x, y) { return x - y; } }; //alert((new Calculator()).add(1, 3)); 这样就可以通过实例化对象后进行相应的函数操作。这也是一般的js框架采用的方法。 原型还有一个作用就是用来实现继承。首先，定义父对象： 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对象实例，他们的原型指向的都是同一个实例。 上面的代码，运行以后，我们可以看到因为Calculator的原型是指向BaseCalculator的实例上的，所以可以访问他的decimalDigits属性值，那如果我不想让Calculator访问BaseCalculator的构造函数里声明的属性值，那怎么办呢?只需要将Calculator指向BaseCalculator的原型而不是实例就行了。代码如下： var Calculator = function () { this.tax= 5; }; Calculator.prototype = BaseCalculator.prototype; 在使用第三方库的时候，有时候他们定义的原型方法不能满足我们的需要，我们就可以自己添加一些方法，代码如下： //覆盖前面Calculator的add() function Calculator.proto