Javascript new关键字的玄机 以及其它


Posted in Javascript onAugust 25, 2010

(接上)先看张对老手不新鲜但对菜鸟很有趣的图:

Javascript new关键字的玄机 以及其它

What the heck is that? 简直是luan lun。

 

new

抛开上面的图,先看看上篇文章留下的第二个问题,让我们在构造器的函数体内加点东西,看会发生什么。

 

function A(){this.p = 1}
var a = new A()

会得到如下结果:

Javascript new关键字的玄机 以及其它

为什么用new关键字构造出来的a,会获得p这个属性?new A()这行代码做了什么事情?根据上篇文章中Function的创建过程第4步,A这个对象会有一个Construct属性(注意不是constructor,Consturct是ECMAScript标准里的属性,好像对外不可见),该属性的值是个函数,new A()即会调用A的这个Construct函数。那么这个Construct函数会做些啥呢?

1, 创建一个object,假设叫x。

2, 如果A.prototype是个object(一般都是),则把A.prototype赋给x.__proto__;否则(不常见),请大老板Object出马,把Object.prototype赋给x.__proto__。

3, 调用A.call(x),第一个参数传入我们刚刚创建的x。这就妥了,A的函数体里this.p = 1,这个this,就成了x。因此x就有了p这个属性,并且x.p = 1。

4, 一般情况下,就返回x了,这时a就是x了。但也有特殊情况,如果A的函数体里返回的东西,它的类型(typeof)是个object。那么a就不是指向x了,而是指向A函数返回的东西。

伪代码如下:

 

var x = new Object(); //事实上不一定用new来创建,我也不清楚。
x.__proto__ = A.prototype 
var result = A.call(x)
if (typeof(result) == "object"){
return result;
}
return x;

 

 

 

在我们的例子里,A函数返回undefined(因为没有return字眼),所以a就是x。但我们举个例子,验证下上面第4步里的特殊情况:

Javascript new关键字的玄机 以及其它

果然。

 

对象的constructor属性

再看看上篇文章留下的第一个问题

 

function Base(){}
Base.prototype.a = 1
var base = new Base();function Derived(){}
Derived.prototype = base;
var d = new Derived()

 

 

执行完上面的代码,mybase.constructor很容易猜到是Base,那么d.constructor呢?是Derived吗?

 Javascript new关键字的玄机 以及其它

不对,也是Base,怎么回事?很简单,复习下上篇的内容就知道:由于d本身没有constructor属性,所以会到d.__proto__上去找,d.__proto__就是Derived.prototype,也就是base这个对象,base也没constructor属性,于是再往上,到base.__proto__上找,也就是Base.prototype。它是有constructor属性的,就是Base本身。事实上,就我目前所知,只有构造器(function类型的object)的prototype,才真正自己拥有constructor属性的对象,且“构造器.prototype.constructor === 构造器”。

 

Instanceof

那么,instanceof怎么样?

Javascript new关键字的玄机 以及其它

从图中可以看出,d是Base、Derived和Object的实例。很合理,但这是怎么判断的呢?是这样的:对于x instanceof constructor的表达式,如果constructor.prototype在x的原型(__proto__)链里,那么就返回true。很显然,d的__proto__链往上依次是:Derived.prototype, Base.prototype, Object.prototype,得到图中结果就毫无疑问了。所以,instanceof跟对象的constructor属性无关。

 

Function and Object

最后解答一下文章开头的图。

Function和Object本身也是function类型的对象,因此可以说都是Function()构造出来的东西(自己构造自己,我不知道具体是不是这样,但就这么认为,挺合理的。)

也就是说,可以设想如下代码:

 

var Function = new Function()
var Object = new Function()

 

 

根据上篇文章的规律,会有Function.__proto__ === Function.prototype,以及Object.__proto__ === Function.prototype,验证一下:

Javascript new关键字的玄机 以及其它

Function instanceof Object,这是显然为true的,万物归Object管,Function的__proto__链依次指向:Function.prototype,Object.prototype。

Object instanceof Function,因为Function.prototype在Object的__proto__链中,所以也为true。

Javascript 相关文章推荐
在IE6下发生Internet Explorer cannot open the Internet site错误
Jun 21 Javascript
一些主流JS框架中DOMReady事件的实现小结
Feb 12 Javascript
jQuery实用函数用法总结
Aug 29 Javascript
js中删除数组中的某一元素实例(无下标时)
Feb 28 Javascript
Angular弹出模态框的两种方式
Oct 19 Javascript
js实现控制文件拖拽并获取拖拽内容功能
Feb 17 Javascript
在小程序中使用Echart图表的示例代码
Aug 02 Javascript
使用D3.js构建实时图形的示例代码
Aug 28 Javascript
小程序实现左滑删除功能
Oct 30 Javascript
JS实现的对象去重功能示例
Jun 04 Javascript
js单线程的本质 Event Loop解析
Oct 29 Javascript
Element Rate 评分的使用方法
Jul 27 Javascript
jquery下组织javascript代码(js函数化)
Aug 25 #Javascript
jquery实现居中弹出层代码
Aug 25 #Javascript
jquery下实现overlay遮罩层代码
Aug 25 #Javascript
在网页中使用document.write时遭遇的奇怪问题
Aug 24 #Javascript
javascript下string.format函数补充
Aug 24 #Javascript
javascript下利用arguments实现string.format函数
Aug 24 #Javascript
基于jQuery的淡入淡出可自动切换的幻灯插件
Aug 24 #Javascript
You might like
PHP中通过HTTP_USER_AGENT判断是否为手机移动终端的函数代码
2013/02/14 PHP
探讨:如何编写PHP扩展
2013/06/13 PHP
Yii学习总结之安装配置
2015/02/22 PHP
php+ajax实现的点击浏览量加1
2015/04/16 PHP
PHP钩子与简单分发方式实例分析
2017/09/04 PHP
php格式文件打开的四种方法
2018/02/24 PHP
PHP pthreads v3在centos7平台下的安装与配置操作方法
2020/02/21 PHP
JavaScript的Function详细
2006/11/14 Javascript
JavaScript检测鼠标移动方向的方法
2015/05/22 Javascript
jquery+json实现动态商品内容展示的方法
2016/01/14 Javascript
理解javascript封装
2016/02/23 Javascript
JavaScript事件学习小结(五)js中事件类型之鼠标事件
2016/06/09 Javascript
简单实现js悬浮导航效果
2017/02/05 Javascript
详解node-ccap模块生成captcha验证码
2017/07/01 Javascript
JS实现二维数组横纵列转置的方法
2018/04/17 Javascript
vue实现动态显示与隐藏底部导航的方法分析
2019/02/11 Javascript
基于Nuxt.js项目的服务端性能优化与错误检测(容错处理)
2019/10/23 Javascript
ant design vue嵌套表格及表格内部编辑的用法说明
2020/10/28 Javascript
详解React路由传参方法汇总记录
2020/11/29 Javascript
python函数返回多个值的示例方法
2013/12/04 Python
Python浅拷贝与深拷贝用法实例
2015/05/09 Python
Python类的动态修改的实例方法
2017/03/24 Python
Python对CSV、Excel、txt、dat文件的处理
2018/09/18 Python
详解python配置虚拟环境
2019/04/08 Python
Python Django框架模板渲染功能示例
2019/11/08 Python
pytorch绘制并显示loss曲线和acc曲线,LeNet5识别图像准确率
2020/01/02 Python
python使用Geany编辑器配置方法
2020/02/21 Python
美国室内和室外装饰花盆购物网站:ePlanters
2019/03/22 全球购物
MAC Cosmetics巴西官方网站:M·A·C彩妆
2019/04/18 全球购物
美国时尚大码女装购物网站:Avenue
2019/05/24 全球购物
全球领先的中国制造商品在线批发平台:DHgate
2020/01/28 全球购物
鸿星尔克广告词
2014/03/21 职场文书
光学与应用专业毕业生求职信
2014/09/01 职场文书
家装电话营销开场白
2015/05/29 职场文书
五年级语文教学反思
2016/03/03 职场文书
Python实现天气查询软件
2021/06/07 Python