芒果小站

  1. 全球最具业界良心的主机 - Linode

    毫无疑问,目前做得最好的主机供应商

    猛击这里查看

  2. 芒果小站目前使用的主机 - Linode

    客服响应快,随时退款,XEN 架构稳定

    猛击这里查看

  3. 最好的日本东京线路主机 - Linode

    可选弗里蒙特、达拉斯、亚特兰大、纽瓦克、伦敦、东京机房

    猛击这里查看

  • 1
  • 2
  • 3
切换到精简模式
7

JavaScript 原型继承之基础机制

作者 芒果/分类 代码/发布于 2011-08-09 12:41

由于语言设计上的原因,JavaScript 没有真正意义上“类”的概念。而通常使用的 new 命令实例化对象的方法,其实是对原型对象的实例化。这一语言功能的本质依赖于 JavaScript 特有的原型链(prototype chain)模式。

所以严格意义上说,JavaScript 是基于原型的面向对象语言。也就是说,每个实例对象都具有一个原型。对象从该原型中继承属性和方法。

1、构造函数

利用构造函数,可以简单地创建对象。构造函数内的 this 关键字指向实例对象本身:

function People(name){
    this.name = name;
}

使用 new 运算符和构造函数创建实例对象:

var people = new People('小明');
console.log(people.name); //小明

但如果创建了两个实例,这两个实例之间无法直接共享属性和方法:

var people1 = new People('小明');
var people2 = new People('小王');
people1.sex = 'male';
console.log(people2.sex); //undefined

也就是说对象一旦被实例化,其属性方法都独立存在,对某个属性的修改不会影响到其他实例。

2、Prototype

于是就有了 prototype 属性,这个属性是在生成实例对象时自动创建的。它本身又是一个对象,拥有能够在实例间共享的属性和方法。而实例本身的属性和方法,则包含在构造函数中。换句话说,构造函数内部的属性和方法,在经过实例化后都成为了本地的属性和方法,而原型(prototype)中的属性和方法在实例中只是一种引用,因此能够被多个实例共享。

还是刚才那个构造函数,现在为它增加 prototype 属性:

People.prototype.sex = 'female';
//或者写成 People.prototype = {sex: 'female'};
console.log(people1.sex); //male
console.log(people2.sex); //female

People 构造函数的 prototype 属性参数会直接影响到 people1people2 两个实例。

但为什么 people1.sex 输出 male 呢?这是由于在 JavaScript 中,原型关系以递归形式存在。对象的原型也是一个对象,而原型的本身也可能具有一个原型。原型的最高层级是全局的 Object 对象。

这就是说,一旦 people1.sex 被设置为 male 后,它在原型中对应的值就无法被暴露出来。假如 people1.sex 本身没有值,才会从构造函数的 prototype 属性中读取,以此类推一级一级向上查找,直到 Object 对象。

注:使用 “null” 给对象赋值,可以销毁自定义对象,释放内存资源。

版权所有,转载请注明出处。
转载自 <a href="http://mangguo.org/javascript-prototype-inheritance-basic-mechanisms/" title="JavaScript 原型继承之基础机制" rel="bookmark">JavaScript 原型继承之基础机制 | 芒果小站</a>
如果喜欢这篇文章,欢迎订阅芒果小站以获得最新内容。

已经有 7 条群众意见

  1. ?
    JavaScript 原型继承之基础机制 | 千里走单骑 /2011-08-09 21:06

    […] CSS 字体 Unicode 编码 (19) © 2010 芒果小站 | 固定链接 | 没有评论 | 标签 JavaScript, […] 回应

    #1
  2. 中鞋网 /2011-08-10 15:54

    很久很了解了,看得都有一些迷茫。 回应

    #2
  3. ?
    JavaScript 原型继承之构造函数继承 | 千里走单骑 /2011-08-11 14:48

    […] JavaScript 原型继承之基础机制 (2) […] 回应

    #3
  4. 数据恢复培训 /2011-08-12 10:31

    路过学习, 回应

    #4
  5. airoschouJavaScript 原型继承之基础机制 | 千里走单骑/2011-08-12 10:48

    不错,我转你的贴了~ 回应

    #5
  6. woiweb /2011-09-01 17:51

    嗯,JS继承有好几种写好 回应

    #6
  7. CC霜 /2011-10-18 17:16

    关键是prototype 回应

    #7

下面我简单说几句