24. 原型和原型链

原型

在学习原型之前,我们来看个小例子:

<xmp>
var decimalDigits = 2,
    tax = 5;

function add(x, y) {
   return x + y;
}

function subtract(x, y) {
  return x - y;
}

//alert(add(1, 3));
</xmp>

使用原型可以把以上代码写成这样:

<xmp>
Calculator.prototype = {
   add: function (x, y) {
      return x + y;
  },

  subtract: function (x, y) {
      return x - y;
  }
};
//alert((new Calculator()).add(1, 3));
</xmp>

原型链是一种机制,指的是 JavaScript 每个对象都有一个内置的 __proto__ 属性指向创建它的构造函数的 prototype(原型)属性。
使用 function 关键字或 Function 构造函数创建的对象都是函数对象。而且,只有函数对象才拥有 prototype (原型)属性。

<xmp>
function Person(){}
Person.prototype.name = "Nicholas";
Person.prototype.age = 29;
Person.prototype.job = "Software Engineer";
Person.prototype.sayName = function(){
    alert(this.name);
};
var person1 = new Person();
person1.sayName(); //"Nicholas"
var person2 = new Person();
person2.sayName(); //"Nicholas"
alert(person1.sayName == person2.sayName); //true
</xmp>

在默认情况下,所有原型对象都会自动获得一个 constructor(构造函数)属性,这个属性包含一个指向 prototype 属性所在函数的指针。


2、原型链

JavaScript 中描述了原型链的概念,并将原型链作为实现继承的主要方法。其基本思想是利用原型让一个引用类型继承另一个引用类型的属性和方法。
当查找一个对象的属性时,JavaScript 会向上遍历原型链,直到找到给定名称的属性为止,到查找到达原型链的顶部 – 也就是Object.prototype 但是仍然没有找到指定的属性,就会返回 undefined.

<xmp>
function Person(){}
Person.prototype.name = "Nicholas";
Person.prototype.age = 29;
Person.prototype.job = "Software Engineer";
Person.prototype.sayName = function(){
    alert(this.name);
};
var person1 = new Person();
var person2 = new Person();
alert(person1.hasOwnProperty("name")); //false

person1.name = "Greg";
alert(person1.name); //"Greg"——来自实例
alert(person1.hasOwnProperty("name")); //true
alert(person2.name); //"Nicholas"——来自原型
alert(person2.hasOwnProperty("name")); //false

delete person1.name;
alert(person1.name); //"Nicholas"——来自原型
alert(person1.hasOwnProperty("name")); //false
</xmp>

属性在查找的时候是先查找自身的属性,如果没有再查找原型,再没有,再往上走,一直插到Object的原型上,所以在某种层面上说,用 for in语句遍历属性的时候,效率也是个问题。
注:我们可以赋值任何类型的对象到原型上,但是不能赋值原子类型的值

<xmp>
function Foo() {}
Foo.prototype = 1; // 无效
</xmp>

部分例子来源:http://www.cnblogs.com/TomXu/archive/2012/01/05/2305453.html

评论

0 条评论