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


Posted in Javascript onJuly 31, 2016

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]]链吗?

      是的,也是这样。

Javascript 相关文章推荐
JavaScript对象之间的转换 jQuery对象和原声DOM
Mar 07 Javascript
js change,propertychange,input事件小议
Dec 20 Javascript
javascript动画浅析
Aug 30 Javascript
使用Node.js配合Nginx实现高负载网络
Jun 28 Javascript
javascript实现简单的全选和反选功能
Jan 05 Javascript
原生JS实现跑马灯效果
Feb 20 Javascript
Angular中响应式表单的三种更新值方法详析
Aug 22 Javascript
webpack4之SplitChunksPlugin使用指南
Jun 12 Javascript
vue展示dicom文件医疗系统的实现代码
Aug 27 Javascript
微信小程序3D轮播实现代码
Sep 19 Javascript
关于JavaScript轮播图的实现
Nov 20 Javascript
一起来看看Vue的核心原理剖析
Mar 24 Vue.js
jquery实现界面无刷新加载登陆注册
Jul 30 #Javascript
AngularJS ng-change 指令的详解及简单实例
Jul 30 #Javascript
Javascript中级语法快速入手
Jul 30 #Javascript
AngularJS ng-blur 指令详解及简单实例
Jul 30 #Javascript
AngularJS ng-bind-template 指令详解
Jul 30 #Javascript
AngularJS ng-bind-html 指令详解及实例代码
Jul 30 #Javascript
AngularJS ng-bind 指令简单实现
Jul 30 #Javascript
You might like
虹吸式咖啡探讨–研磨
2021/03/03 冲泡冲煮
php图片的二进制转换实现方法
2014/12/15 PHP
PHP 搜索查询功能实现
2016/11/29 PHP
ThinkPHP5.0框架使用build 自动生成模块操作示例
2019/04/11 PHP
通过event对象的fromElement属性解决热区设置主实体的一个bug
2008/12/22 Javascript
用Js实现的动态增加表格示例自己写的
2013/10/21 Javascript
javascript里使用php代码实例
2014/12/13 Javascript
只要1K 纯JS脚本送你一朵3D红色玫瑰
2016/08/09 Javascript
jQuery+ajax读取并解析XML文件的方法
2016/09/09 Javascript
jquery鼠标悬停导航下划线滑出效果
2017/09/29 jQuery
基于casperjs和resemble.js实现一个像素对比服务详解
2018/01/10 Javascript
webpack 插件html-webpack-plugin的具体使用
2018/04/09 Javascript
解析vue路由异步组件和懒加载案例
2018/06/08 Javascript
jQuery实现的监听导航滚动置顶状态功能示例
2018/07/23 jQuery
详解Vue 全局变量,局部变量
2019/04/17 Javascript
react+antd 递归实现树状目录操作
2020/11/02 Javascript
JavaScript中跨域问题的深入理解
2021/03/04 Javascript
Python中的pprint折腾记
2015/01/21 Python
Python多线程编程(四):使用Lock互斥锁
2015/04/05 Python
python制作小说爬虫实录
2017/08/14 Python
Python设计模式之桥接模式原理与用法实例分析
2019/01/10 Python
Python实现二叉树前序、中序、后序及层次遍历示例代码
2019/05/18 Python
python 利用turtle模块画出没有角的方格
2019/11/23 Python
python matplotlib模块基本图形绘制方法小结【直线,曲线,直方图,饼图等】
2020/04/26 Python
python爬虫今日热榜数据到txt文件的源码
2021/02/23 Python
欧洲最大的球衣网上商店:Kitbag
2017/11/11 全球购物
Bose法国官网:购买耳机、扬声器、家庭影院、专业音响
2017/12/21 全球购物
临床医学专业个人的自我评价
2013/09/27 职场文书
网管求职信
2014/03/03 职场文书
外贸专业求职信
2014/03/09 职场文书
材料员岗位职责
2015/02/10 职场文书
员工辞职信范文
2015/03/02 职场文书
网吧管理制度范本
2015/08/05 职场文书
python 如何做一个识别率百分百的OCR
2021/05/29 Python
vue里使用create, mounted调用方法
2022/04/26 Vue.js
js 实现Material UI点击涟漪效果示例
2022/09/23 Javascript