初学JavaScript之推測new操作符的原理
本文是一篇原理推測的文章,假设有不准确的地方请指正,
原文:http://blog.csdn.net/softmanfly/article/details/34833931
JavaScript中构造函数与普通函数事实上没有什么区别,构造函数能够当做普通函数来使用,普通函数也能够用new来模拟构造函数的调用。然而使普通函数与构造函数发生区别的事实上就在于new操作符的内部原理。以下是我通过測试推測的new操作符的运行过程,当你在用new操作符来生成一个对象时内部可能运行了以下几个步骤的操作:
以构造函数
function Person(name){
this.name = name
this.sayName = function() {
alert(this.name);
}
}
来举例说明:
(1) 新建一个对象 var object = {};
(2) 然后设置构造函数的作用域为object,这样就能使用this指针,详细的操作可能是这种:
Person.apply(object。name);
(3) 运行构造函数中的详细代码,因为上一步apply使用的作用域是object,所以当运行this.name = name时事实上运行器先是去寻找object中有没有name属性。没有name属性就加入一个name属性,并为他赋值。
(4) 返回这个创建的object;
var p = new Person("cat");
window.sayName = p.sayName;
window.sayName();
终于事实上输出的是undefined为什么呢?
由于 假设未对函数进行this指针重定向操作的话(三种方式:object.sayName, sayName.apply(object), var object = new Person()),那么这个函数在调用时所创建的运行上下文环境中的this指针默认指向的是window全局对象,所以当调用window.sayName时。要alert一个this.name,事实上就是在alert window.name,而window对象中没有name这个属性,所以就提示undefined。
假设你调用window.sayName = p.sayName.bind(p);然后再去调用window.sayName的话。输出就变成了cat,这是由于你把一个新的sayName对象(由于bind返回的是一个新的对象)的this指针绑定到了p对象上,即this指向p对象。当你再调用window.sayName()时搜索sayName函数对象的this指针就不再是window对象了,而是p。此时就直接输出了cat.
初学JavaScript之推測new操作符的原理的更多相关文章
- 初学JavaScript七大注意事项
知识说明: 初学JavaScript,注意以下七大细节,在实现同样功能的情况下,让我们的代码更易懂.效率更高. 一.简化代码 例如:创建对象 之前是这样的: Var car = new object( ...
- cocos2d-3.0 Helloworld::onTouchMoved的处理机制的推測
bool sign2 = true; bool sign2 = true; void GameLayer::onTouchMoved(Touch *touch, Event *unused){ if( ...
- 每天一个JavaScript实例-检測表单数据
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...
- Javascript自执行匿名函数(function() { })()的原理浅析
匿名函数就是没有函数名的函数.这篇文章主要介绍了Javascript自执行匿名函数(function() { })()的原理浅析的相关资料,需要的朋友可以参考下 函数是JavaScript中最灵活的一 ...
- JavaScript中Object.prototype.toString方法的原理
在JavaScript中,想要判断某个对象值属于哪种内置类型,最靠谱的做法就是通过Object.prototype.toString方法. ? 1 2 var arr = []; console.lo ...
- Javascript的变量与delete操作符
原文:http://charlee.li/javascript-variables-and-delete-operator.html 刚刚看到一篇好文(原文链接), 对Javascript中的dele ...
- javascript中!=、!==、==、===操作符总结
JavaScript 有两种比较方式:严格比较运算符和转换类型比较运算符. 在相等运算符中对应 === .!==和 ==.!=. 先举个栗子 var str = '1' var num0 = 0 va ...
- 点滴的积累---初学Javascript
在学习知识的路上,我们须要的不断的去接触新的知识,同一时候我们也不要不停地对自己旧的知识进行总结.近期通过<牛腩Javascript>和姜昊的<Javascript专题视频>对 ...
- javascript中的递增递减操作符
javascript中递增递减属于一元操作符,所谓一元操作符,即只能操作一个值的操作符. 递增和递减操作符各有两个版本:前置型和后置型.顾名思义,前置型应该位于要操作的变量之前,而后置型应该位于要操作 ...
随机推荐
- C Tricks(十七)—— 对角线元素的屏蔽、二维数组(矩阵)的遍历
1. 对角线元素的屏蔽 使用 if + continue 实现对对角线元素的屏蔽 for u in range(n): for v in range(n): if u == v: continue . ...
- 使用multiprocessing解决PyMuPDF不支持多线程加载导致的界面卡死无响应问题,及一个PyQt5实现的简易PDF阅读器例子
最近在用PyMuPDF实现一个PDF阅读器,发现PyMuPDF在加载某些epub时耗时非常长,有的长达10几秒,会导致界面卡死无响应. 尝试用多线程后台加载,发现还是不能解决问题,和作者交流(issu ...
- 【转】什么是P问题、NP问题和NPC问题
原文链接:http://www.matrix67.com/blog/archives/105,感谢Matrix67,看完这篇文章终于把这个几个概念弄明白了!! 这或许是众多OIer最大的误区之一. ...
- 第一个Hibernate程序
一 新建一个Java工程(Hibernate) 在src目录下创建一个名为"hibernate.cfg.xml"的文件并配置好各个属性,如下: <?xml version=& ...
- [Offer收割]编程练习赛32
气泡图 两两判断关系,dfs. #include<stdio.h> #include<string.h> #include<stdlib.h> #include&l ...
- CSS——清除浮动的六种解决方案
内容的高度撑起父元素容器的高度,效果图如下 HTML和CSS代码如下 给p标签加上浮动以后,p{float:left:},此时DIV塌陷,两段内容同行显示,效果如下: 解决方案一:给前面一个父元素设置 ...
- js-字符串方法
字符串 遍历字符串 方法:(类似数组) 使用for 或 for… in 结果:得到字符串中的每个字符 查找字符 ² charAt(索引值) 注: 超出索引值范围时,则返回空字符 ² ch ...
- (转)webpack从零开始第6课:在Vue开发中使用webpack
vue官方已经写好一个vue-webpack模板vue_cli,原本自己写一个,发现官方写得已经够好了,自己写显得有点多余,但为了让大家熟悉webpack,决定还是一步一步从0开始写,但源文件就直接拷 ...
- RFID 知识的学习
* 部分资料来自我们博士的PPT,部分来自网络和他人的论文. * 我们使用的教材是清华大学出版社出版的<智能卡技术(第四版)——IC卡.RFID标签与物联网(清华大学计算机系列教材)>(王 ...
- 安装mysql-python的遇到的问题
最近更新环境后遇到安装mysql-python的问题,感觉挺折腾的,记录一下. 安装mysql-python的时候一直提示下面的错误 _mysql.c() : fatal error C1083: C ...