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 相关文章推荐
Prototype使用指南之hash.js
Jan 10 Javascript
jQuery 对Select的操作备忘记录
Jul 04 Javascript
js判断是否为数组的函数: isArray()
Oct 30 Javascript
JavaScript将Table导出到Excel实现思路及代码
Mar 13 Javascript
浅谈重写window对象的方法
Dec 29 Javascript
谈一谈js中的执行环境及作用域
Mar 30 Javascript
使用jQuery中的wrap()函数操作HTML元素的教程
May 24 Javascript
Jquery EasyUI $.Parser
Jun 02 jQuery
JS设计模式之状态模式概念与用法分析
Feb 05 Javascript
js input输入百分号保存数据库失败的解决方法
May 26 Javascript
javascrpt密码强度校验函数详解
Mar 18 Javascript
微信小程序APP的生命周期及页面的生命周期
Apr 19 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函数解决SQL injection
2006/10/09 PHP
PHP学习笔记 用户注册模块用户类以及验证码类
2011/09/20 PHP
PHP字符串函数系列之nl2br(),在字符串中的每个新行 (\n) 之前插入 HTML 换行符br
2011/11/10 PHP
php中smarty模板条件判断用法实例
2015/06/11 PHP
PHP下的浮点运算不准的解决方法
2016/10/27 PHP
10个新的最有前途的JavaScript框架
2009/03/12 Javascript
初识javascript 文档碎片
2010/07/13 Javascript
jquery键盘事件介绍
2011/01/31 Javascript
一个关于jqGrid使用的小例子(行按钮)
2011/11/04 Javascript
用jquery生成二级菜单的实例代码
2013/06/24 Javascript
jquery 操作css样式、位置、尺寸方法汇总
2014/11/28 Javascript
JS验证IP,子网掩码,网关和MAC的方法
2015/07/02 Javascript
javascript检查浏览器是否已经启用XX功能
2015/07/10 Javascript
JavaScript实现非常简单实用的下拉菜单效果
2015/08/27 Javascript
JS实现自定义简单网页软键盘效果代码
2015/11/05 Javascript
详解js中class的多种函数封装方法
2016/01/03 Javascript
JS 事件绑定、事件监听、事件委托详细介绍
2016/09/28 Javascript
jQuery输入框密码的显示隐藏【代码分享】
2017/04/29 jQuery
JavaScript引用类型之基本包装类型实例分析【Boolean、Number和String】
2018/08/09 Javascript
vuejs简单验证码功能完整示例
2019/01/08 Javascript
Vue动态路由缓存不相互影响的解决办法
2019/02/19 Javascript
python用ConfigObj读写配置文件的实现代码
2013/03/04 Python
Win7上搭建Cocos2d-x 3.1.1开发环境
2014/07/03 Python
使用Python的Django框架实现事务交易管理的教程
2015/04/20 Python
Python的Tornado框架的异步任务与AsyncHTTPClient
2016/06/27 Python
Python标准库之itertools库的使用方法
2017/09/07 Python
Python简单实现的代理服务器端口映射功能示例
2018/04/08 Python
Python API 自动化实战详解(纯代码)
2019/06/11 Python
python实现LBP方法提取图像纹理特征实现分类的步骤
2019/07/11 Python
python获取百度热榜链接的实例方法
2020/08/25 Python
Math.round(11.5)等於多少? Math.round(-11.5)等於多少?
2015/01/27 面试题
班级年度安全计划书
2014/05/01 职场文书
节约粮食标语
2014/06/18 职场文书
乡镇党员干部四风对照检查材料思想汇报
2014/09/27 职场文书
个人作风建设自查报告
2014/10/22 职场文书
详解Python中的进程和线程
2021/06/23 Python