new操作符过程，发生了什么

最新推荐文章于 2024-05-03 22:13:34 发布

原创最新推荐文章于 2024-05-03 22:13:34 发布 · 1.2k 阅读

8 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #new

整理专栏收录该内容

46 篇文章

订阅专栏

本文详细解释了JavaScript中new运算符的工作原理，包括创建空对象、设置原型链、执行构造函数以及返回对象的过程。同时探讨了当构造函数返回不同类型值时的行为表现。

new 运算符创建一个用户定义的对象类型的实例或具有构造函数的内置对象的实例。new 关键字会进行如下的操作：

创建一个空的简单JavaScript对象（即{}）；

	var obj = {};

设置原型链，将obj的__proto__成员指向了构造函数的prototype

	obj.__proto__ = xx.prototype;

将步骤1新创建的对象作为this的上下文；

	let o = xx.call(obj);

如果构造函数return了一个新的“对象”，那么这个对象就会取代整个new出来的结果。如果构造函数没有return对象，那么就会返回步骤1所创建的对象，即隐式返回this

	return	o ? o : obj

完整版本

	function newObject() {
		var con = [].shift.call(arguments)
		var obj = Object.create(con.prototype)
		var res = con.apply(obj, arguments)
		return res ? res : obj	
	}

声明一个普通函数, 该函数返回一个基本类型, 或者返回函数, 这个时候会发生什么?

函数返回基本类型,使用new, 会生成空对象
函数返回函数类型,使用new, 返回该函数

// 函数返回基本类型 -----------------
function func(a,b){
	return a + b
}

var c = new func(1,2)
console.dir(c) // func{} func类型的空对象
Object.keys(c) // []


// 函数返回函数 ---------------------
function func(){
	return function(){
		return 22
	}
}

var c = new func()
c() // 22