javascript代码实例教程-初学JavaScript之猜测new操作符的原理

发布时间:2019-01-30 发布网站:脚本宝典
脚本宝典收集整理的这篇文章主要介绍了javascript代码实例教程-初学JavaScript之猜测new操作符的原理脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。
小宝典致力于为广大程序猿(媛)提供高品质的代码服务,请大家多多光顾小站,小宝典在此谢过。

本文是一篇原理猜测的文章,如果有不准确的地方请指正,转载请声明出处,谢谢!

原文:https://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;

(5) 当执行完构造函数之后,构造函数对象(注意措辞)中的this指针又变成了undefined,当再次调用这个函数时,执行器首先看看这个函数中的this指针是否有值,如果没有值他就会到作用域链的上一级去寻找this指针的值,直到找到this指针为止。如果这段话不好理解可以看如下的代码:

var p = new Person("cat");

window.sayName = p.sayName;

window.sayName();

最终其实输出的是undefined为什么呢?

因为 当调用window.sayName时,要alert一个this.name,执行器先去寻找sayName函数中的this属性是不是有值,结果发现没有值,然后去寻找他的调用者window对象的this指针,window的this指向window对象本身,但是遗憾的是window中并没有name这个属性,如果你在window的作用域下加上var name="Dog"的话,上面的代码就会输出dog,而不是cat.这就是this指针的一个搜索过程。

如果你调用window.sayName = p.sayName.bind(p);然后再去调用window.sayName的话,输出就变成了cat,这是因为你把一个新的sayName对象(因为bind返回的是一个新的对象)的this指针绑定到了p对象上,即this指向p对象,当你再调用window.sayName()时搜索sayName函数对象的this指针就不再是undefined了,而是p,此时就直接输出了cat.

觉得可用,就经常来吧! 脚本宝典 欢迎评论哦! js脚本,巧夺天工,精雕玉琢。小宝典献丑了!

脚本宝典总结

以上是脚本宝典为你收集整理的javascript代码实例教程-初学JavaScript之猜测new操作符的原理全部内容,希望文章能够帮你解决javascript代码实例教程-初学JavaScript之猜测new操作符的原理所遇到的问题。

如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。