JavaScript原型继承之基础机制

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

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

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

1、构造函数

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

  1. function People(name){  
  2.     this.name = name;  

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

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

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

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

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

2、Prototype

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

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

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

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

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

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

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

原文:http://www.mangguo.org/javascript-prototype-inheritance-basic-mechanisms/

【编辑推荐】

  1. 10个顶级Web移动开发JavaScript框架推荐
  2. 微软雄心勃勃,意欲将JavaScript打造成次世代赢家
  3. JavaScript入门之事件、cookie、定时等
  4. JavaScript入门之语言基础
  5. 7个优秀的JavaScript资源推荐
责任编辑:陈贻新 来源: 芒果
相关推荐

2011-08-24 13:56:27

JavaScript

2011-08-31 14:48:33

JavaScript

2013-09-18 14:01:46

JavaScript

2016-12-27 09:10:29

JavaScript原型链继承

2020-04-29 14:40:19

JavaScript继承编程语言

2010-10-08 09:13:15

oop模式JavaScript

2011-06-07 08:58:31

javascript

2017-04-07 11:15:49

原型链原型Javascript

2020-10-20 08:35:34

JS基础进阶

2012-01-05 15:07:11

JavaScript

2020-11-30 07:59:59

JavaScript语言原型

2020-02-20 14:00:15

JavaScript原型原型链

2023-08-28 07:12:54

2011-08-10 17:04:43

JavaScript

2012-02-14 09:45:02

JavaScript

2016-06-07 14:28:39

Javascript原型

2022-06-20 09:22:55

js原型链前端

2022-05-26 09:20:01

JavaScript原型原型链

2019-02-27 16:00:48

JS原型原型链对象

2020-04-28 10:05:33

JavaScript继承前端
点赞
收藏

51CTO技术栈公众号