原型与原型链

看到一篇讲解JavaScript原型与原型链的文章，觉得讲得挺清楚的，就记录下来：

介绍

　　在JavaScript中是没有类型继承这样的说法，但是为了在JavaScript中实现类似的面向对象模式的编程，JavaScript创建了自己的基于原型的集成模型，虽然实现比较麻烦，但是还是解决了这样的问题。

原型

在普通的JavaScript编程中，我们会有如下的需求

var decimalDigits = 2,tax = 5;
function add(x, y) {
    return x + y;
}
function subtract(x, y) {
    return x - y;
}
//alert(add(1, 3));

那么如何能实现类似于Java和C++中的面向对象的方法实现呢？在面向对象中，一般的思路是把对象对应的属性和方法进行声明，在这里，对应的，我们也可以对一个对象（比如数字）封装它的属性和方法。
首先采用函数赋值表达式的方式将封装数字属性的函数赋值给一个变量

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

然后通过Calculator对象的原型属性赋值对象自面值来封装它的方法

Calculator.prototype = {
   add: function (x, y) {
      return x + y;
   },
   subtract: function (x, y) {
      return x - y;
   }
};
//alert((new Calculator()).add(1, 3));

这样的方式是不是很熟悉，通过对象调用对象的方法属性进行操作（类似于C++中的类的方式）
当然，在上述的声明过程中，我们是一次性的赋值了对象的原型，也可以分布对对象原型进行设置，比如：

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

在对应继承的时候，可以通过直接设置子对象的原型对象为父对象的原型实现获取父级属性和方法：

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

这样的情况下，因为Calculator对象的原型是直接赋值了Base的对象实例，所以Calculator对象可以直接访问到Base的方法和属性，如果有部分方法和属性不想被子类访问，可以把对外的属性和方法放到Base的原型里面，然后把Base的原型赋给Calculator的原型。
当然，子对象也可以覆盖修改可继承的父对象的属性和方法（在继承之后）：

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 = new Foo();
Bar.prototype.foo = 'Hello World';
var test = new Bar() // 创建Bar的一个新实例

在上述的代码中，Bar对象的原型继承了Foo对象的实例，而test又是Bar对象的实例，所以test可以访问Foo的原型方法method以及Foo的实力属性value，经过实地验证：

function Foo() {
    this.value = 42;
}
Foo.prototype = {
    method: function() {}
};
function Bar() {}
Bar.prototype = new Foo();
Bar.prototype.foo = 'Hello World';
Bar.prototype.constructor = Bar;
var test = new Bar() 
console.log("1: " + test.value);
test.value = 12;
console.log("2: " + test.value);
var test2 = new Bar();
console.log(test2.value);

发现new Bar()之后不会修改Bar对象的原型上的Foo对象实例的属性。

属性的获取

原型链的最常见的身影就是属性的获取，当我们在控制台输出某一个对象的属性时，如果这个属性事先没有声明，我们得到的一般都是undefined，但是这种属性的查找并不单单是查找当前对象实例是否拥有，正是依靠原型链的存在，依次向上查找，直接找到或者undefined。就是属性在查找的时候是先查找自身的属性，如果没有再查找原型，再没有，再往上走，一直查找到Object的原型上。

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

由于原型链的存在，如果我们在获取某一个对象的属性的时候直接采用for in查找，有时候直接较慢，效率较低就是原型链导致每一次查找都是从当前对象到Object的一次遍历。那么如何才能查找到当前对象自己的属性呢？就是使用如下的函数：

hasOwnProperty

hasOwnProperty是Object的一个原型方法，主要作用就是获取当前对象的属性（不包括原型链上的属性方法），是 JavaScript 中唯一一个处理属性但是不查找原型链的函数。

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

当然，这个方法是可以被赋值为某一对象的属性或方法的（非法占用），此时如果需要再次使用这个函数的话就需要使用外部的hasOwnProperty来获取结果：

var foo = {
    hasOwnProperty: function() {
        return false;
    },
    bar: 'Here be dragons'
};
foo.hasOwnProperty('bar'); // 总是返回 false
{}.hasOwnProperty.call(foo, 'bar'); // true