javascript关于原型的深刻理解

     2022-03-24     174

关键词:

Javascript继承机制的设计思想

 

作者: 阮一峰

日期: 2011年6月 5日

我一直很难理解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面向对象编程(二):构造函数的继承》

  * 《Javascript面向对象编程(三):非构造函数的继承》

(完)

本文转自阮一峰的博客!侵删!

js对象深刻理解-2

用过JavaScript的同学们肯定都对prototype如雷贯耳,但是这究竟是个什么东西却让初学者莫衷一是,只知道函数都会有一个prototype属性,可以为其添加函数供实例访问,其它的就不清楚了,最近看了一些JavaScript高级程序设计,终于... 查看详情

javascript常见题目

一、您对js的原型是如何理解的?您对js的继承是如何理解的?能否举例说明js的继承?关于这个题目,我之前的一篇文章 http://www.haorooms.com/post/js_constructor_pro ,您可以看一下。理解一下原型prototype,关于继承,那主要是j... 查看详情

关于js的对象原型继承

javascript中,对象的继承是通过原型去继承。可以这样理解:js中的对象,包含的除了属性和方法,还有一个最基本的原型__proto__对象。这个原型__proto__指向谁,这个对象就继承谁。这是最容易理解对象原型继承的一种方式。如下... 查看详情

javascript中原型对象的彻底理解

一、什么是原型原型是Javascript中的继承的继承,JavaScript的继承就是基于原型的继承。1.1函数的原型对象?在JavaScript中,我们创建一个函数A(就是声明一个函数),那么浏览器就会在内存中创建一个对象B,而且每个函数都默认会有一... 查看详情

javascript原型的理解

JavaScript是一门面向对象的语言。在JavaScript中有一句很经典的话,万物皆对象。既然是面向对象的,那就有面向对象的三大特征:封装、继承、多态。这里讲的是JavaScript的继承,其他两个容后再讲。JavaScript的继承和C++的继承不... 查看详情

深入理解javascript

强大的原型和原型链前言JavaScript不包含传统的类继承模型,而是使用prototypal原型模型。虽然这经常被当作是JavaScript的缺点被提及,其实基于原型的继承模型比传统的类继承还要强大。实现传统的类继承模型是很简单,但是实现... 查看详情

javascript深入理解

强大的原型和原型链前言JavaScript不包含传统的类继承模型,而是使用prototypal原型模型。虽然这经常被当作是JavaScript的缺点被提及,其实基于原型的继承模型比传统的类继承还要强大。实现传统的类继承模型是很简单,但是实现... 查看详情

深入理解javascript原型和闭包(转)

说明:  该教程绕开了javascript的一些基本的语法知识,直接讲解javascript中最难理解的两个部分,也是和其他主流面向对象语言区别最大的两个部分——原型和闭包,当然,肯定少不了原型链和作用域链。帮你揭开javascri... 查看详情

问答式理解javascript的原型及其原型链

简言简语1、什么是原型?原型指的是javascript里面对象的prototype属性,称为原型对象,js原生对象都有prototype属性。2、prototype是怎么来的?在我们以函数式声明一个函数时,js引擎会为我们分配prototype这个属性,在js中所有的对象都... 查看详情

javascript原型及原型链的初步理解

最近折腾了好久,终于是把js里面的原型和原型链做了个初步的理解;在这里,我打个比喻:我(child),我妈constructor(构造函数)生了我;别人问我老妈跟谁生的我,于是此时我妈会指向我爸爸(father),即constructor.prototype=father... 查看详情

如何理解javascript的原型和原型链

在现在的业务开发中,应该很少人在写原生JavaScript了,大家都一股脑地扑在各个框架上。本来,这些框架对于业务和开发者来说是一种福音,减少了各种各样的开发痛点,但是带来的负面问题就是对于开发者来说,越来越依赖... 查看详情

对javascript的原型,原型链和继承的个人理解

继承是OO语言中一个最为人津津乐道的概念,也是初接触Javascript的初学者难理解的概念=。=继承主要分为两种:一种是接口继承,另一种是实现继承。而在ECMAScript中只支持实现继承,所以我们今天来讨论讨论实现继承。实现继承... 查看详情

理解javascript的原型属性

...,使用基于类的模型实现:类及对象实例区别对待。但在JavaScript中没有类的概念,取而代之的是一切皆对象。JavaScript中的继承通过原型继承实现:一个对象直接从另一对象继承。对象中包含其继承体系中祖先的引用——... 查看详情

javascript原型链理解

  javascript原型和原型链的引入,最初的目的是属性和方法的共享。没有原型,我们使用同一个构造函数新建的一系列对象,就都拥有一组完全相互独立的属性和方法,但是方法和一些属性我们不需要所有对象都各自有一个,... 查看详情

深入理解javascript之原型

理解原型原型是一个对象。其它对象能够通过它实现属性继承。不论什么一个对象都能够成为继承,全部对象在默认的情况下都有一个原型。由于原型本身也是对象,所以每一个原型自身又有一个原型。不论什么一个对象都有一... 查看详情

理解javascript对象,原型对象闭包

       javascript作为一个面向对象的语言,理解对象、原型、闭包、模块模式等技术点对于成为一名合格的javascript程序员相当重要,多年没写过blog,今天就先拋个玉,在下基本也不做前端,但颇感兴趣,... 查看详情

javascript原型

想了解原型的朋友一定被许多开篇既是原型多么难理解给吓着了吧,其实原意应该是原型是一个非常重要的概念,但是理解起来并不困难,前面的原型链__proto__已经把原型说了一大半,但是那是返回对象之后取到的原型对象,虽... 查看详情

谈谈我对闭包知识的深刻理解

在javascript中闭包应该是最难理解的一部分内容。在我看来闭包就是和作用域之间的联系。1、首先我们来了解一下javascript中的作用域知识。javascript中的作用域其实就指的函数作用域,因为只有函数在javascript中才能形成区域范围... 查看详情