关于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面向对象编程
Mar 18 Javascript
利用JQuery动画制作滑动菜单项效果实现步骤及代码
Feb 07 Javascript
JS特权方法定义作用以及与公有方法的区别
Mar 18 Javascript
使用bootstrap typeahead插件实现输入框自动补全之问题及解决办法
Jul 07 Javascript
JS动态遍历json中所有键值对的方法(不知道属性名的情况)
Dec 28 Javascript
vue实现商城购物车功能
Nov 27 Javascript
vue弹窗插件实战代码
Sep 08 Javascript
Vue.js组件通信之自定义事件详解
Oct 19 Javascript
p5.js临摹动态图形的方法
Oct 23 Javascript
node使用mysql获取数据库数据中文乱码问题的解决
Dec 02 Javascript
js+canvas实现简单扫雷小游戏
Jan 22 Javascript
JavaScript图片旋转效果实现方法详解
Jun 28 Javascript
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
SONY ICF-F10中波修复记
2021/03/02 无线电
ThinkPHP模板比较标签用法详解
2014/06/30 PHP
smarty模板引擎之分配数据类型
2015/03/30 PHP
php安装扩展mysqli的实现步骤及报错解决办法
2017/09/23 PHP
PHP实现二维数组中的查找算法小结
2018/06/09 PHP
javascript 面向对象编程基础:封装
2009/08/21 Javascript
如何判断微信内置浏览器(通过User Agent实现)
2014/09/01 Javascript
JavaScript中操作字符串之localeCompare()方法的使用
2015/06/06 Javascript
javascript实现根据3原色制作颜色选择器的方法
2015/07/17 Javascript
js点击按钮实现带遮罩层的弹出视频效果
2015/12/19 Javascript
BootStrap 模态框实现刷新网页并关闭功能
2017/01/04 Javascript
一个有意思的鼠标点击文字特效jquery代码
2017/09/23 jQuery
vue判断input输入内容全是空格的方法
2018/03/02 Javascript
Node.js net模块功能及事件监听用法分析
2019/01/05 Javascript
JavaScript的console命令使用实例
2019/12/03 Javascript
ES6中的类(Class)示例详解
2020/12/09 Javascript
对比Python中__getattr__和 __getattribute__获取属性的用法
2016/06/21 Python
基于Python中单例模式的几种实现方式及优化详解
2018/01/09 Python
python获取代理IP的实例分享
2018/05/07 Python
python爬虫神器Pyppeteer入门及使用
2019/07/13 Python
wxPython电子表格功能wx.grid实例教程
2019/11/19 Python
Python第三方包之DingDingBot钉钉机器人
2020/04/09 Python
Python偏函数实现原理及应用
2020/11/20 Python
婴儿地球:Baby Earth
2018/12/25 全球购物
校长先进事迹材料
2014/02/01 职场文书
奥巴马获胜演讲稿
2014/05/15 职场文书
儿童生日会策划方案
2014/05/15 职场文书
博士生求职信
2014/07/06 职场文书
班级课外活动总结
2014/07/09 职场文书
员工三分钟演讲稿
2014/08/19 职场文书
工作年限证明范本
2015/06/15 职场文书
预防职务犯罪警示教育心得体会
2016/01/15 职场文书
如何做好员工培训计划?
2019/07/09 职场文书
SQL Server2019数据库之简单子查询的具有方法
2021/04/27 SQL Server
Win11 Build 22000.51版本文件资源管理器“命令栏”和上下文菜单有什么新变化?
2021/11/21 数码科技
面试官问我Mysql的存储引擎了解多少
2022/08/05 MySQL