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 操作也失效了。
- JS中的new操作符原理解析
- js解析xml字符串和xml文档实现原理及代码(针对ie与火狐)
- 浏览器的解析渲染原理以及js ,css 阻塞问题的分析
- vue.js双向数据绑定原理解析及模拟demo的实现
- js原理解析
- iOS解析---WebView和js交互原理
- 【Node.js】 bodyparser实现原理解析
- zepto.js 实现原理解析
- js解析xml字符串和xml文档实现原理及代码(针对ie与火狐)
- 如何实现js拖拽效果及原理解析
- 【JS】304- KOA2框架原理解析和实现
- 微信QQ的二维码登录原理js代码解析
- 深入解析JS实现3D标签云的原理与方法
- 微信QQ的二维码登录原理js代码解析
- js事件循环(原理解析)
- Atitit.sql ast 表达式 语法树 语法 解析原理与实现 java php c#.net js python
- 微信QQ的二维码登录原理js代码解析
- Vue.js 源码全方位深入解析 学精学透 Vue 原理实现
- js前端模块化之加载器原理解析(一)
- js跨域请求方式 ---- JSONP原理解析