本文是一篇原理猜测的文章,如果有不准确的地方请指正,
原文: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.