js中new操作符原理解析
js中使用new操作符时,到底做了哪些事情?
在js中,我们经常会用到 new 操作符,当我们对构造函数使用new操作符时,具体做了哪些事情呢?
它会完成以下四个步骤:
1.创建一个空的对象
2.设置原型链:将新对象的constructor属性设置为构造函数信息,设置新对象的__proto__属性指向构造函数的prototype对象
3.让构造函数中的this指向新对象,并执行构造函数的函数体
4.判断构造函数的返回值类型,将初始化完成的对象地址,保存到等号左边的变量中
结合代码分析:
var Func = function() {
...
}
var func = new Func()
我们来具体分析:
new一共经历了4个阶段:
1.创建一个空对象
var obj = {}
2.设置原型链
obj.__proto__ = Func.prototype
3.让Func中的 this 指向 obj,并执行Func的函数体。(因为创建新的对象后,构造函数的作用域赋给了新对象,所以 this 指向了新对象)
var res = Func.call(obj)
4.判断Func的返回值类型
如果是基本数据类型,则返回obj,如果是引用数据类型,则返回引用类型的对象
if (typeof(res)=== "object"){
func = res
}else {
func = obj
}
注意:在构造函数没有返回值的情况下,返回新创建的对象;
如果构造函数有返回值res,那么就要判断值的类型:
返回值res为基本数据类型(string、number、null、undefined、boolean、symbol),那么返回新创建的对象。
返回值res为引用数据类型时,函数的返回值res才为指定对象,此时返回res。
结合实例我们来看一下:
构造函数没有返回值的情况:
构造函数返回值为基本数据类型的情况:
构造函数返回值为引用数据类型的情况:
由Person {name : "Sunwukong"} 和 {name : "Zhubajie"}
可以看出,当返回值是引用类型时,则使用 return 的对象,此时 new 操作也失效了。
作者: 默然晴天 博客地址:http://www.cnblogs.com/bryanfu/
本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出, 原文链接 如有问题, 可邮件(fukangkobe@163.com)咨询.