从Object和Function说说JS的原型链
ECMAScript规定了两个特殊的内置对象:Object和Function。他们的特殊性在于,他们本身既是对象又是函数,而他们同时也是对象和函数的构造器。这种自己生自己的逻辑显然违反人性,如果还停留在类的继承的思想上,那么更加无法理解。
然而ECMAScript是基于原型链的,所以忘掉类的继承,从原型链入手:原型链是对象的集合,每个对象都有内部属性[[Prototype]](注1)指向另一个对象;当访问对象某一属性的时候,如果此属性不为此对象的自身属性(注2),则继续去[[Prototype]]指向的对象上查找此属性。[[Prototype]]形成的对象的链式集合即原型链。这里可以得出:原型链上的所有元素都是对象。
ECMASciprt规定:原型链必须是有限长度(注3),而且终点必须是null。现在终点是唯一的,那么原型链上倒数第二个元素是不是唯一的呢?ECMAScript没有规定,但从实现上来看,是唯一的。因为原型链上所有的元素都是对象,所以倒数第二个元素应该是所有对象的基础对象。这个对象在实现中只给出一个引用,就是Object.prototype。这里可以得出:原型链上有两个元素是固定的,终点是null,倒数第二的元素是Object.prototype指向的对象(注4)。
那么倒数第三个元素是不是固定的呢?不是。从倒数第二个元素是Object.prototype来看,通过{}字面量和new Object()创建的对象都在倒数第三这个位置,即POJO都在倒数第三。另外还有两个特例,一个是除内置函数之外的内置对象,如Math、JSON;一个是除Object之外的内置函数的prototype属性指向的对象,如Function.prototype。这里可以得出:原型链上倒数第三的元素一般是POJO+Math/JSON+(Function/Array/String/Boolean/Number/Date/RegExp/Error).prototype。
倒数第三的位置出现了这么多的prototype,那么倒数第四的位置就好推测了,所有除Object之外的内置函数作为构造器调用(注5)时生成的实例对象都在倒数第四。其中需要注意的是,所有的内置函数本身是Function作为构造器调用生成的实例对象,所以都在这个位置。这里可以得出:原型链上倒数第四的元素一般是(Function/Array/String/Boolean/Number/Date/RegExp/Error)实例,其中包括(Object/Function/Array/String/Boolean/Number/Date/RegExp/Error),注意这个括号里面Object回来了。
原型链基本结构如下图:

从图上看来:
- array等非POJO对象在原型链上和他们的构造器属于同一级别
- POJO在原型链上比他的构造器还靠后一个级别
参考文档:ES5
注:
- 内部属性是不开放给JS访问的属性,但现代浏览器已经可以通过__proto__属性访问和设置[[Prototype]]
- own property,即直接设置在此对象上的属性
- 执行以下代码感受下:
var a = {};
a.__proto__ = a; - Object.prototype和基础对象的关系好比快捷方式和应用程序,本身没有任何关系,现在可以指向基础对象,以后也可以指向其他对象。当然原则上是不允许的,基础对象没有引用内存会被回收,所以ECMAScript规定Object下的prototype属性的writable和configuration特性都是false(特性的问题以后另起一篇)
- 假设func为一个函数,func()即作为函数调用(调用内部函数属性[[Call]]),new func()即作为构造器调用(调用内部函数属性[[Construct]])
从Object和Function说说JS的原型链的更多相关文章
- 前端基本知识(二):JS的原型链的理解
之前一直对于前端的基本知识不是了解很详细,基本功不扎实,但是前端开发中的基本知识才是以后职业发展的根基,虽然自己总是以一种实践是检验真理的唯一标准,写代码实践项目才是唯一,但是经常遇到知道怎么去解决这 ...
- js javascript 原型链详解
看了许多大神的博文,才少许明白了js 中原型链的概念,下面给大家浅谈一下,顺便也是为了巩固自己 首先看原型链之前先来了解一下new关键字的作用,在许多高级语言中,new是必不可少的关键字,其作用是为了 ...
- 怎么理解js的原型链继承?
前言 了解java等面向对象语言的童鞋应该知道.面向对象的三大特性就是:封装,继承,多态. 今天,我们就来聊一聊继承.但是,注意,我们现在说的是js的继承. 在js的es6语法出来之前,我们想实现js ...
- 自己对js对原型链的理解
js对象分为2种 函数对象和普通对象 函数对象 比如 function Show(){}var x=function Show2(){}var b=new Function("show3&q ...
- JS中原型链继承
当我们通过构造函数A来实现一项功能的时候,而构造函数B中需要用到构造函数A中的属性或者方法,如果我们对B中的属性或者方法进行重写就会出现冗杂的代码,同时写出来也很是麻烦.而在js中每个函数都有个原型, ...
- js的原型链和constructor
转载:http://www.108js.com/article/article1/10201.html?id=1092 请先瞻仰上边的这篇文章. 对象的原型链: box.__proto__.__pro ...
- js的原型链
js中的原型链是一个很重要的概念,理解了原型链,对js程序的开发有很大的好处,废话不说,先上图: javascript是基于原型的语言,所以一个对象可以另一个对象继承.不过javascript实现的时 ...
- 关于js中原型链的理解
我们创建的每个函数都有一个prototype(原型)属性,这个属性是一个指针,一个对象.无论什么时候,我们只要创建一个新函数,就会根据一组特定的规则为该函数创建一个prototype属性,这个属性对象 ...
- js面向对象-原型链
var Person = function (name) { this.name = name; } Person.prototype.say = function () { console.log( ...
随机推荐
- <Mastering KVM Virtualization>:第一章 了解Linux虚拟化
本章为读者提供了Linux虚拟化中流行技术的深刻见解,以及相较于其他同类技术的优势特点.本书共有14章,囊括了KVM虚拟化中的各个方面,从KVM的内部构造开始,并包括了诸如软件定义网络(SDN),性能 ...
- Python数据可视化Matplotlib——Figure画布背景设置
之前在今日头条中更新了几期的Matplotlib教学短视频,在圈内受到了广泛好评,现应大家要求,将视频中的代码贴出来,方便大家学习. 为了使实例图像显得不单调,我们先将绘图代码贴上来,此处代码对Fig ...
- netstat命令---输出网络相关的信息
简介 Netstat 命令用于显示各种网络相关信息,如网络连接,路由表,接口状态 (Interface Statistics),masquerade 连接,多播成员 (Multicast Member ...
- 关于IE,Chrome,Firefox浏览器的字符串拼接问题
昨天项目测试的时候,IE8.IE11测试勾选checkbox然后执行保存的时候,竟然执行的结果与预期相反,吓屎我了,最终排查之下,原来是拼接checkbox的值的时候出现的问题.本人对js了解知之甚少 ...
- JAVASCRIPT 调用 OCX 的那些坑
这个东西我之前已经想写了,但是在我写完"制作OCX","MFC应用OCX" 之后,html 调用OCX 就一直不成功,搞了好久,都快要放弃了.昨天领导需要我这边 ...
- 关于浏览器解析html全过程详解
本人web前端菜鸟一枚,第一次在这里发博客梳理知识,知识都是从各地方查阅引用以及自己的理解得来,有什么错误的地方欢迎指正. DOM文档通常加载的步骤: 1.解析HTML结构. 2.加载外部脚本和样式表 ...
- MySQL视图了解
视图是什么 视图是一种虚拟存在的表,不会在数据库中实际存在.相比较普通的表,有如下优势 简单:使用视图的用户完全不需要关心后面对应的表的结构.关联条件和筛选条件,对用户来说已经是过滤好的复合条件的结果 ...
- 【leetocde】 105. Construct Binary Tree from Preorder and Inorder Traversal
Given preorder and inorder traversal of a tree, construct the binary tree. Note:You may assume that ...
- JMeter脚本录制
1.1. 使用第三方录制方式或代理录制方式(建议) 第三方采用:http://www.badboy.com.au/ 通过badboy来录制,录制后另存为jmx格式即可. 操作步骤: a.打开badb ...
- How to make a simplest WCF service work on Win7 with VS2010
You know as a beginner to learn WCF, the first thing is to make a simplest WCF service work like a c ...