关于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 相关文章推荐
jquery中dom操作和事件的实例学习 下拉框应用
Dec 01 Javascript
js判断背景图片是否加载成功使用img的width实现
May 29 Javascript
easyui datagrid 键盘上下控制选中行示例
Mar 31 Javascript
详解JavaScript中的异常处理方法
Jun 16 Javascript
JS实现完全语义化的网页选项卡效果代码
Sep 15 Javascript
jquery验证邮箱格式是否正确实例讲解
Nov 16 Javascript
require简单实现单页应用程序(SPA)
Jul 12 Javascript
用angular实现多选按钮的全选与反选实例代码
May 23 Javascript
浅析Javascript中双等号(==)隐性转换机制
Oct 27 Javascript
微信小程序如何调用图片接口API并居中显示
Jun 29 Javascript
vue select 获取value和lable操作
Aug 28 Javascript
Taro小程序自定义顶部导航栏功能的实现
Dec 17 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
php中get_object_vars()方法用法实例
2015/02/08 PHP
PHP实现类似题库抽题效果
2018/08/16 PHP
jQuery学习笔记(4)--Jquery中获取table中某列值的具体思路
2013/04/10 Javascript
JavaScript和CSS通过expression实现Table居中显示
2013/06/28 Javascript
Node.js中使用Log.io在浏览器中实时监控日志(等同tail -f命令)
2014/09/17 Javascript
JS实现的文字与图片定时切换效果代码
2015/10/06 Javascript
JavaScript学习笔记整理之引用类型
2016/01/22 Javascript
jQuery内容过滤选择器用法示例
2016/09/09 Javascript
jQuery在ie6下无法设置select选中的解决方法详解
2016/09/20 Javascript
jquery uploadify如何取消已上传成功文件
2017/02/08 Javascript
完美实现js选项卡切换效果(一)
2017/03/08 Javascript
详解基于webpack和vue.js搭建开发环境
2017/04/05 Javascript
JS实现的Unicode编码转换操作示例
2017/04/28 Javascript
AngularJS封装$http.post()实例详解
2017/05/06 Javascript
PHP7新特性简述
2017/06/11 Javascript
Vue中的无限加载vue-infinite-loading的方法
2018/04/08 Javascript
在 Typescript 中使用可被复用的 Vue Mixin功能
2018/04/17 Javascript
vuex state及mapState的基础用法详解
2018/04/19 Javascript
vue移动端下拉刷新和上拉加载的实现代码
2018/09/08 Javascript
JS实现的雪花飘落特效示例
2019/12/03 Javascript
python实现爬虫统计学校BBS男女比例(一)
2015/12/31 Python
Python中super()函数简介及用法分享
2016/07/11 Python
python: 判断tuple、list、dict是否为空的方法
2018/10/22 Python
Python pandas.DataFrame 找出有空值的行
2019/09/09 Python
pyqt5数据库使用详细教程(打包解决方案)
2020/03/25 Python
python如何从键盘获取输入实例
2020/06/18 Python
如何使用python记录室友的抖音在线时间
2020/06/29 Python
校园门卫岗位职责
2013/12/09 职场文书
软件售后服务承诺书
2014/05/21 职场文书
门面房租房协议书
2014/08/20 职场文书
2014年志愿者工作总结
2014/11/20 职场文书
2014年客房部工作总结
2014/11/22 职场文书
2015年班组建设工作总结
2015/05/13 职场文书
《丑小鸭》教学反思
2016/02/19 职场文书
2016基督教会圣诞节开幕词
2016/03/04 职场文书
vue-element-admin项目导入和导出的实现
2021/05/21 Vue.js