`

Javascript继承机制的设计思想

阅读更多

原文地址:

http://www.ruanyifeng.com/blog/2011/06/designing_ideas_of_inheritance_mechanism_in_javascript.html

我一直很难理解Javascript语言的继承机制。

它没有"子类"和"父类"的概念,也没有"类"(class)和"实例"(instance)的区分,全靠一种很奇特的"原型链"(prototype chain)模式,来实现继承。

我花了很多时间,学习这个部分,还做了很多笔记。但是都属于强行记忆,无法从根本上理解。

直到昨天,我读到法国程序员Vjeux的解释,才恍然大悟,完全明白了Javascript为什么这样设计。

下面,我尝试用自己的语言,来解释它的设计思想。彻底说明白prototype对象到底是怎么回事。其实根本就没那么复杂,真相非常简单。

一、从古代说起

要理解Javascript的设计思想,必须从它的诞生说起。

1994年,网景公司(Netscape)发布了Navigator浏览器0.9版。这是历史上第一个比较成熟的网络浏览器,轰动一时。但是,这个版本的浏览器只能用来浏览,不具备与访问者互动的能力。比如,如果网页上有一栏"用户名"要求填写,浏览器就无法判断访问者是否真的填写了,只有让服务器端判断。如果没有填写,服务器端就返回错误,要求用户重新填写,这太浪费时间和服务器资源了。

因此,网景公司急需一种网页脚本语言,使得浏览器可以与网页互动。工程师Brendan Eich负责开发这种新语言。他觉得,没必要设计得很复杂,这种语言只要能够完成一些简单操作就够了,比如判断用户有没有填写表单。

1994年正是面向对象编程(object-oriented programming)最兴盛的时期,C++是当时最流行的语言,而Java语言的1.0版即将于第二年推出,Sun公司正在大肆造势。

Brendan Eich无疑受到了影响,Javascript里面所有的数据类型都是对象(object),这一点与Java非常相似。但是,他随即就遇到了一个难题,到底要不要设计"继承"机制呢?

二、Brendan Eich的选择

如果真的是一种简易的脚本语言,其实不需要有"继承"机制。但是,Javascript里面都是对象,必须有一种机制,将所有对象联系起来。所以,Brendan Eich最后还是设计了"继承"。

但是,他不打算引入"类"(class)的概念,因为一旦有了"类",Javascript就是一种完整的面向对象编程语言了,这好像有点太正式了,而且增加了初学者的入门难度。

他考虑到,C++和Java语言都使用new命令,生成实例。

C++的写法是:

  ClassName *object = new ClassName(param);

Java的写法是:

  Foo foo = new Foo();

因此,他就把new命令引入了Javascript,用来从原型对象生成一个实例对象。但是,Javascript没有"类",怎么来表示原型对象呢?

这时,他想到C++和Java使用new命令时,都会调用"类"的构造函数(constructor)。他就做了一个简化的设计,在Javascript语言中,new命令后面跟的不是类,而是构造函数。

举例来说,现在有一个叫做DOG的构造函数,表示狗对象的原型。

  function DOG(name){

    this.name = name;

  }

对这个构造函数使用new,就会生成一个狗对象的实例。

  var dogA = new DOG('大毛');

  alert(dogA.name); // 大毛

注意构造函数中的this关键字,它就代表了新创建的实例对象。

三、new运算符的缺点

用构造函数生成实例对象,有一个缺点,那就是无法共享属性和方法。

比如,在DOG对象的构造函数中,设置一个实例对象的共有属性species。

  function DOG(name){

    this.name = name;

    this.species = '犬科';

  }

然后,生成两个实例对象:

  var dogA = new DOG('大毛');

  var dogB = new DOG('二毛');

这两个对象的species属性是独立的,修改其中一个,不会影响到另一个。

  dogA.species = '猫科';

  alert(dogB.species); // 显示"犬科",不受dogA的影响

每一个实例对象,都有自己的属性和方法的副本。这不仅无法做到数据共享,也是极大的资源浪费。

四、prototype属性的引入

考虑到这一点,Brendan Eich决定为构造函数设置一个prototype属性。

这个属性包含一个对象(以下简称"prototype对象"),所有实例对象需要共享的属性和方法,都放在这个对象里面;那些不需要共享的属性和方法,就放在构造函数里面。

实例对象一旦创建,将自动引用prototype对象的属性和方法。也就是说,实例对象的属性和方法,分成两种,一种是本地的,另一种是引用的。

还是以DOG构造函数为例,现在用prototype属性进行改写:

  function DOG(name){

    this.name = name;

  }

  DOG.prototype = { species : '犬科' };


  var dogA = new DOG('大毛');

  var dogB = new DOG('二毛');


  alert(dogA.species); // 犬科

  alert(dogB.species); // 犬科

现在,species属性放在prototype对象里,是两个实例对象共享的。只要修改了prototype对象,就会同时影响到两个实例对象。

  DOG.prototype.species = '猫科';


  alert(dogA.species); // 猫科

  alert(dogB.species); // 猫科

五、总结

由于所有的实例对象共享同一个prototype对象,那么从外界看起来,prototype对象就好像是实例对象的原型,而实例对象则好像"继承"了prototype对象一样。

这就是Javascript继承机制的设计思想。不知道我说清楚了没有,继承机制的具体应用方法,可以参考我写的系列文章:

分享到:
评论

相关推荐

    Javascript继承机制的设计思想分享

    我一直很难理解Javascript语言的继承机制。  它没有”子类”和”父类”的概念,也没有”类”(class)和”实例”(instance)的区分,全靠一种很奇特的”原型链”(prototype chain)模式,来实现继承。  我花了很...

    javascript中类的定义及其方式(《javascript高级程序设计》学习笔记)

    关于javascript中类的继承可以参考阮一峰的Blog《Javascript继承机制的设计思想》,说的很透。 一、在javascript中实例化遇到的问题: 下面用《javascript高级程序设计》中的例子来做说明,假如现在定义了一个car的...

    JavaScript面向对象的程序设计(犯迷糊的小羊)

    本章开始进入JavaScript核心知识点的高级部分——面向对象的程序设计,这一部分的内容将会对对象这一数据类型做进一步的深化理解,并且讲述几种创建对象的设计模式以及JavaScript独特的继承机制; 1.理解对象和面向...

    JavaScript 模拟类机制及私有变量的方法及思路

    在使用一些 Javascript 框架时,或许会看到类似的代码 代码如下: var ...这是一种典型的面向对象的类机制应用,与原生的 Javascript 类机制相比,显得更为清晰和自然。并且,在此基础上,实现类的继承也较为方便。

    javascript-Design-Patterns:设计模式

    JavaScript设计模式与开发实践 前端在软件开发过程中开始扮演越来越重要的角色,需要处理的业务越来越复杂,前端跟其的差异也越来越小。 设计模式是对软件中普遍存在的各种问题提出的解决方案,设计模式作为通用设计...

    JavaScript框架OurJS.zip

    设计思想: 不创造 JS 和 DOM 范畴之外的概念。它们本身就在不断地创造新概念,OurJS 不会再添乱。 不模拟其他语言的“类”和“继承”的机制。JS 的作用域链和原型链特性已足够实用,没必要以蹩脚的方式去效仿...

    JavaScript 常见的继承方式汇总

     在ECMAscript中描述了原型链的概念,并将原型链作为实现继承的主要方法,其基本思想就是利用原型让一个引用类型继承另一个引用类型的属性和方法。 构造函数和原型还有实例之间的关系:  每个构造函数都有一个原型...

    php网络开发完全手册

    12.3 JavaScript程序设计基础 184 12.3.1 在HTML中嵌入JavaScript 184 12.3.2 变量 185 12.3.3 注释 185 12.3.4 函数的定义与调用 186 12.3.5 条件语句 186 12.3.6 循环语句 189 12.3.7 对象 191 12.3.8 事件 192 ...

    小程序版2048小游戏-项目源码-基于微信小程序开发框架的小游戏

    后端则采用了高效的JavaScript语言,通过事件驱动和数据绑定机制,确保了游戏的高性能运行。 此外,这份源码还具备良好的扩展性,可以轻松集成社交分享、排行榜等功能,为玩家提供更丰富的游戏体验。无论是对于个人...

    js框架源码

    根据网上的资源整理的一个js的框架,一个面向对象的带继承的,易学易用的js框架,拥有单独的事件机制,有mvc思想便于初学者学习练习。

    asp.net知识库

    Asp.net 2.0功能体验,总体设计思想 Asp.net 2.0 WebPart使用经验点滴 革新:.NET 2.0的自定义配置文件体系初探 关于如何在ASP.NET 2.0中定制Expression Builders 怎么在ASP.NET 2.0中使用Membership asp.net 2.0-...

    庖丁解牛纵向切入ASP.NET 3.5控件和组件开发技术.pdf

     本书主要介绍asp.net的控件开发,书中通过70多个例子讲解了asp.net控件开发技术的各个方面,而且剖析了很多控件中系统基类源代码,读者从这些系统源代码可以体会设计模式思想。如果扎实地掌握了asp.net控件的运行...

    编写高质量代码-Web前端开发修炼之道.azw3

    4.4.3 挂多个class还是新建class——多用组合,少用继承 4.4.4 如何处理上下margin 4.5 低权重原则——避免滥用子选择器 4.6 CSS sprite 4.7 CSS的常见问题 4.7.1 CSS的编码风格 4.7.2 id和class 4.7.3 CSS ...

    工程硕士学位论文 基于Android+HTML5的移动Web项目高效开发探究

    第四章 页面自适应机制设计 23 4.1页面兼容策略 23 4.2 页面自适应策略 24 4.2.1设备自适应 24 4.2.2.浏览器自适应 25 4.3 模块实现 25 4.3.1根据适口属性设计响应式布局: 26 4.3.2同分辨率范围内的流式布局设计 26...

    JS 面向对象之神奇的prototype

    对于初学 JavaScript 的人来说 prototype 是一种很神奇的特性,而事实上,prototype 对于 JavaScript 的意义重大,prototype 不仅仅是一种管理对象继承的机制,更是一种出色的设计思想。

    亮剑.NET深入体验与实战精要2

    本书既考虑到实际开发中经常遇到的困惑和难题,也分析了解决问题的思路和方法,更总结出项目开发中不可或缺的技术点及思想。读者可以在欣赏一个个有趣例子的过程中,不知不觉具备开发真正商业项目的能力。 本书集...

    亮剑.NET深入体验与实战精要3

    本书既考虑到实际开发中经常遇到的困惑和难题,也分析了解决问题的思路和方法,更总结出项目开发中不可或缺的技术点及思想。读者可以在欣赏一个个有趣例子的过程中,不知不觉具备开发真正商业项目的能力。 本书集...

    AJAX 源码范例

    06/6.6.1.html 利用共享prototype实现继承范例 06/6.6.2.html 利用反射机制和prototype实现继承范例 06/6.6.3.html prototype-1.3.1框架中的类继承实现机制范例 06/6.7.2.html 在JavaScript实现...

    python入门到高级全栈工程师培训 第3期 附课件代码

    08 接口继承与归一化设计 09 继承顺序之mro线性顺序列表 10 在python2中的继承顺序是什么 11 在子类中调用父类方法 12 super调用父类的方法 13 选择系统作业讲解 第26章 01 学生自主复习 02 分享列表 03 多态 04 ...

Global site tag (gtag.js) - Google Analytics