1. 使用new发生了什么
和其他高级语言一样javascript中也有new关键字,但是new内部都干了什么呢? 下面我们看下new关键字的使用以及产生的影响
1.1 当构造函数返回值为undefined或则null时： 发现使用new后产生了新的实例并且返回, 并且绑定this,将私有属性、函数和对应的构造函数原型绑定到新的实例上
function Ctor(name) {
this.name = name
}
Ctor.prototype.getName = function () {
return this.name;
}
let ctor = new Ctor("🃏")
console.log(ctor) // Ctor {name: "🃏"}
console.log(ctor.getName()) // "🃏"
function Ctor(name) {
this.name = name
return null
}
let ctor = new Ctor("🃏")
console.log("返回null", ctor) // 返回null Ctor { name: "🃏" }
function Ctor(name) {
this.name = name
return undefined
}
let ctor = new Ctor("🃏")
console.log("返回undefined", ctor) // 返回undefined Ctor {name: "🃏"}
1.2 当构造函数返回值为对象或函数时： 直接返回的是构造函数的返回值
function Ctor(name) {
this.name = name
return { name: "hello" + name }
}
let ctor = new Ctor("🃏")
console.log("返回实例", ctor) // 返回实例 { name: "hello🃏" }
function Ctor(name) {
this.name = name
return function closure() {
console.log(name)
console.log(this)
return "haha"
}
}
let ctor = new Ctor("🃏")
console.log(
"返回函数",
ctor
) /** 返回函数 ƒ closure() {
console.log(name)
console.log(this)
return "haha"
} */
ctor() // "haha"
从上面使用new关键字的结果可以汇总的出下面4项结论:
* 1. 生成一个新的实例
* 2. 将构造函数的原型绑定实例的原型上
* 3. 绑定this, 让实例可以访问到私有属性
* 4. 若构造函数返回的结果为对象或函数则返回该结果, 否则返回新实例
2. 模拟new
// 在 JS 的最初版本中，使用的是 32 位系统，为了性能考虑使用低位存储了变量的类型信息, 000 开头代表是对象, 而 null 全是 0, 所以 typeof 变量得到的 object, 而实际变量可能为 null
// 对于引用类型 typeof 返回值为 object 或 function: 函数为function, 其他的为object
const isObject = obj => typeof obj === "object" && typeof obj !== null
const isFunction = func => typeof func === "function"
function newFactory(ctor, ...args) {
if (isFunction(ctor)) throw new TypeError("第一个参数必须为函数")
// 新建实例
const obj = new Object()
// 将构造函数的原型绑定实例的原型上
obj.__proto__ = ctor.prototype
// 绑定this, 让实例可以访问到私有属性
const res = ctor.apply(obj, args)
// 若构造函数返回的结果为对象或函数则返回该结果, 否则返回新实例
return isFunction(res) || isObject(res) ? res : obj
}
3. new优先级
我们先来看一段代码
function Bar(name) {
this.name = "小王"
return this;
}
Bar.getName = function () {
console.log(this.name);
};
Bar.prototype.getName = function () {
console.log(this.name);
};
new Bar.getName(); // -> undefined
new Bar().getName(); // -> 小王
MDN上new的优先级
image
从上图可以看出:
1. 成员访问和函数调用(Bar.getName())的优先级大于无参数列表的new(new Bar);
2. 带参数列表的new Bar()的优先级大于无参数列表的new(new Bar);
所以上面代码可以分解成下面
new Bar.getName() ===> new (Bar.getName())
new Bar().getName() ===> (new Bar()).getName()
4. 优先使用字面变量
从new的过程可以看出来, 使用new创建实例会产生函数入栈和出栈,绑定this, 并且会出现构造函数在作用域链中查找的过程; 而使用字面变量则没有这方面的影响,字面变量之所以可以调对应的方法是因为在调用该方法时创建了对应的实例;
