关于JavaScript 原型链的一点个人理解

 更新时间:2016年07月31日 11:41:20   投稿:hebedich  
本文给大家分享的是个人关于JavaScript原型链相关知识的一些理解,这里推荐给大家,希望大家能够喜欢

JavaScript借鉴了许多语言的特点;例如语法类Java、函数借鉴Scheme、原型继承借鉴自Self、正则表达式借鉴于Perl。(DC Javascript:语言精粹)。

     首先,每个JS是一门基于原型继承的面向对象的语言。里面数组是对象、函数是对象、“对象”当然还是对象。而且每个对象都有一个internal slot[[prototype]],这才是原型链连接起来的关键。诚然,我们可以为一个对象设置prototype property,但这又怎么样呢,这只是表象;后面暗藏杀机。

    好,那我可以用isPrototypeOf()来检验某个对象是不是另一个对象的原型;然而这也是基于[[prototype]]链的。

   举个例子:

    //建立一个函数

    function foo () {} 

    //修改函数的prototype property  

    foo.prototype = {

         name : "foo.prototype" 
              };
     //建立一个实例 

      var a = new foo();

    //重写 a 的默认原型,本应该是foo.prototype.
       a.prototype = {
         name : "a.prototype"
      };

    下面的问题是foo.prototype是不是a的原型呢?!

    这要分开来看:一方面a.prototype确实是{ name : "a.prototype"};但是,foo.prototype.isPrototypeOf(a)结果是true.

    下面来看一看具体的关系:(使用--->表示不明显的[[prototype]]链,---表示prototype property关系)

        Function ---> Function.prototype--->Object.prototype

                          Function.prototype <--- foo---foo.prototype ------>Object.prototype 。

    另外,Number、Boolean、String等的[[protptype]]仍然是Fuction.prototype对象。Function.prototype对象为“function”,内部不含[[construct]]故而不可做构造函数用;实际上Function.prototype类似:function () {}。“function”类型除了[[prototype]]internal slot外,还有prototype属性。每个函数总是相伴有一个prototype对象:this.prototype = {constructor:this}(一个普通对象)。这个普通对象的[[prototype]]连接到Object.prototype.

   那构造函数建立的实例对象的[[prototype]]是Object.prototype吗?

          该实例的[[prototype]]是由构造函数的prototype property初始化的,注意不是函数的[[prototype]].所以如果是由Object这个函数构造的对象,那么就确实是.

  Object是函数,它的prototype是大名鼎鼎的Object.prototype(有点废话的意思),但是它的[[prototype]]指向Function.prototype.请看下面:

                                                          Object----->Function.prototype------>Object.prototype.

 如何改变这个[[prototype]]链呢?

     可以采用var a = Object.create(obj)的形式,或Object.setPrototypeOf(objA,objB)的形式。我想例子就不用举了,因为关系很简单;况且我只举得出一些蹩脚的例子。没有意义。

 最后一个问题,行为委托是基于[[prototype]]链吗?

      是的,也是这样。

相关文章

  • 12条写出高质量JS代码的方法

    12条写出高质量JS代码的方法

    这篇文章给大家讲述了如何遵循12条方法来写出高质量的JS代码的经验,有这方便需要的朋友参考下吧。
    2018-01-01
  • js 数组操作代码集锦

    js 数组操作代码集锦

    用js有很久了,但都没有深究过js的数组形式。偶尔用用也就是简单的string.split(char)。
    2009-04-04
  • JavaScript入门系列课程之一

    JavaScript入门系列课程之一

    JavaScript是一种可以用给网页增加交互性的编程语言,是网页不可或缺的部分。
    2010-10-10
  • 详解JavaScript的Polymer框架中的通知交互

    详解JavaScript的Polymer框架中的通知交互

    这篇文章主要介绍了详解JavaScript的Polymer框架中的通知交互,Polymer是由Google开发的针对Web UI的前端框架,需要的朋友可以参考下
    2015-07-07
  • JavaScript数据结构与算法之链表

    JavaScript数据结构与算法之链表

    链表就是线性表中针对顺序存储结构的一种优化手段,但是在javascript语言中由于数组的特殊性(自动更新引用位置),所以我们可以采用对象的方式做链表存储的结构
    2016-01-01
  • 详解javascript函数写法大全

    详解javascript函数写法大全

    这篇文章主要介绍了javascript函数写法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-03-03
  • uniapp父子组件传值3种方法(props、slot和ref)

    uniapp父子组件传值3种方法(props、slot和ref)

    这篇文章主要给大家介绍了关于uniapp父子组件传值的3种方法,方法包括props、slot和ref,最近看到uniapp组件传值的方法,这里记录一下,需要的朋友可以参考下
    2023-07-07
  • 解决 firefox 不支持 document.all的方法

    解决 firefox 不支持 document.all的方法

    解决 firefox 不支持 document.all的方法...
    2007-03-03
  • 带你快速理解javascript中的事件模型

    带你快速理解javascript中的事件模型

    这篇文章主要介绍了javascript中的事件模型,其中包括了DOM0级事件模型和DOM2级事件模型(事件捕获和事件冒泡和DOM2级的注册事件和解除事件),需要的朋友可以参考下
    2017-08-08
  • asm.js使用示例代码

    asm.js使用示例代码

    asm.js是一个底层、格外为 JavaScript 子集优化的编译器。这是 Mozilla 研究项目,类似 Emscripten, Mandreel, 和 LLJS,这个示例让我们简单学习一下asm.js的使用
    2013-11-11

最新评论