原标题：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.prototype.add = function (x, y) {
    return x + y + this.tax;
};
var calc = new Calculator();
alert(calc.add(1, 1));

对象的原型指向对象的父，而父的原型又指向父的父，这种原型层层的关系，叫做原型链。

在查找一个对象的属性时，javascript会向上遍历原型链，直到找到给定名称的属性为止，当查找到达原型链的顶部，也即是Object.prototype，仍然没有找到指定的属性，就会返回undefined。

示例如下：

function foo() {
    this.add = function (x, y) {
        return x + y;
    }
}
foo.prototype.add = function (x, y) {
    return x + y + 10;
}
Object.prototype.subtract = function (x, y) {
    return x - y;
}
var f = new foo();
alert(f.add(1, 2)); //结果是3，而不是13
alert(f.subtract(1, 2)); //结果是-1

我们可以发现，subtrace是按照向上找的原则，而add则出了意外。原因就是，属性在查找的时候是先查找自身的属性，如果没有再查找原型。

说到Object.prototype，就不得不提它的一个方法，hasOwnProperty。它能判断一个对象是否包含自定义属性而不是原型链上的属性，它是javascript中唯一一个处理属性但是不查找原型链的函数。使用代码如下：

// 修改Object.prototype
Object.prototype.bar = 1; 
var foo = {goo: undefined};
foo.bar; // 1
'bar' in foo; // true
foo.hasOwnProperty('bar'); // false
foo.hasOwnProperty('goo'); // true

而为了判断prototype对象和某个实例之间的关系，又不得不介绍isPrototyleOf方法，演示如下：

alert(Cat.prototype.isPrototypeOf(cat2)); //true

tags：

上一篇  下一篇

相关：

如何反编译Android5.0framework

在Android平台，对于和硬件交互相关的模块来说，比如：和双卡对应的Telephony模块、和拍照对应的Camera模块

你真的需要了解多种编程语言吗？

本文由玩赚乐(www.banghui.org)– 小峰原创翻译，转载请看清文末的转载要求，欢迎加入技术翻译小组！我在谋

JavaScript之this指针深入详解

javascript中的this含义非常丰富，它可以是全局对象，当前对象或者是任意对象，这都取决于函数的调用方式。

让你分分钟学会JavaScript闭包

闭包，是javascript中独有的一个概念，对于初学者来讲，闭包是一个特别抽象的概念，特别是ECMA规范给的定义

被误解的MVC和被神化的MVVM

MVC 的历史MVC，全称是 Model view Controller，是模型 (model)－视图 (view)－控制器 (controller) 的缩写

如何有效的避免自己陷入思维僵局

设计是一个在不断尝试和纠结中前进的职业，设计师就是一个个纠结综合体。工作中时常被自己的思想围城弄得不

她自己动手改了口红的颜色，还顺手做了个品牌

英国女孩 Florence Adepoju 17 岁时最烦心的一件事是，虽然自己在一家化妆品公司做柜台 BA，但在公司发布的

这位90后巴西设计师，谈了谈运动与时尚如何并存

巴西设计师 Pedro Lourenço 是顶着“天才”、“神童”的光环在时尚界“出道”的，那时候他 12 岁，

香港17岁中学生旷课求婚现场照片曝光 称耽误学习也爱

12月22日，香港一位女网友在Facebook上爆料，她和男朋友在某香港店买戒指的时候，碰到一对穿校服的

钓鱼技巧 学习钓鱼要掌握的要点

　　钓鱼并不是你随便准备下就可以钓到鱼的，钓鱼也是有技巧的，今天小