共计 2657 个字符,预计需要花费 7 分钟才能阅读完成。
写该系列文章的初衷是“让每位前端工程师把握高频知识点,为工作助力”。这是前端百题斩的第 18 斩,心愿敌人们关注公众号“执鸢者”,用常识武装本人的头脑。
18.1 根底
new 的作用是通过构造函数来创立一个实例对象,该实例与原型和构造函数之间的关系如下图所示:
18.2 new 过程中产生了什么
当一个构造函数 new 的过程到底产生了什么?简要概述次要分为以下几个步骤:
- 一个新对象被创立;
- 该对象的__ proto __属性指向该构造函数的原型,即 Fn.prototype;
- 将执行上下文(this)绑定到新创建的对象中;
- 如果构造函数有返回值(对象或函数),那么这个返回值将取代第一步中新创建的对象。
new 真的做了这几步吗?秉承着“实际是测验真谛的唯一标准”的准则,上面将这几个关键点进行逐个验证。
function Fun() {
this.a = 10;
this.b = 20;
this.method1 = () => {return this.a + this.b;}
this.method2 = () => {return this;}
}
Fun.prototype = {method2: () => {console.log('原型上的 method1 被拜访');
}
}
18.2.1 验证点 1——新对象被创立
验证点 1 是新对象被创立,其实这个外面有两层含意:
- new 之后返回的内容是一个对象
const fun = new Fun();
console.log(fun); // {a: 10, b: 20, method1: [Function] }
console.log(typeof(fun)); // object
通过打印其内容,并通过 typeof 进行验证,其返回内容的确是一个对象。
- 每次返回的都是一个新创建的对象
const fun1 = new Fun();
const fun2 = new Fun();
console.log(fun1 === fun2); // false
通过创立两个实例,通过判断两个实例不相等,则证实的确每次返回的是一个新的对象。
18.2.2 验证点 2——该对象可拜访原型上的属性和办法
验证点 2 是新创建的实例可拜访原型上的属性和办法,验证该关键点只须要拜访原型上的办法即可实现,若原型上的办法可能被失常拜访,则示意该验证点通过,负责不通过。
const fun3 = new Fun();
fun3.method3(); // 原型上的 method3 被拜访
通过验证,原型上的办法的确可能被拜访。
18.2.3 验证点 3——this 指向
验证 this 指向只须要将 this 指向打印进去即可。
const fun4 = new Fun();
console.log(fun4.method2()); // {a: 10, b: 20, method1: [Function], method2: [Function] }
console.log(fun4.method2() === fun4); // true
18.2.4 验证点 4——构造函数有返回值的解决逻辑
一个函数的返回值能够有多种,例如:string、boolean、number、Object、function 等,上面咱们验证一些内容,看构造函数有不同的返回值,其实例为何值。
- 返回值为 string
function Fun() {
this.a = 10;
this.b = 20;
return 'test';
}
Fun.prototype = {method: () => {console.log('原型上的 method 被拜访');
}
}
const fun = new Fun();
console.log(fun); // {a: 10, b: 20}
察看其最终后果,字符串没有没失常返回,返回值是一个新的实例。
- 返回值为 Object
function Fun() {
this.a = 10;
this.b = 20;
return {c: 30};
}
Fun.prototype = {method: () => {console.log('原型上的 method 被拜访');
}
}
const fun = new Fun();
console.log(fun); // {c: 30}
察看其后果,返回值是函数中返回的对象,则表征当构造函数返回值为对象时,会返回其对象,不返回实例化后的内容。
- 返回值为 function
function Fun() {
this.a = 10;
this.b = 20;
return function() {this.d = 40;};
}
Fun.prototype = {method: () => {console.log('原型上的 method 被拜访');
}
}
const fun = new Fun();
console.log(fun); // [Function]
返回函数的成果和返回对象的成果统一。
通过一直尝试总结,能够得出以下论断:
- 构造函数的返回值为根本类型,其返回值是实例化后的对象,不受返回值的影响;
- 构造函数的返回值是援用类型,其返回值即为 new 之后的返回值。
18.3 实现一个 new
介绍了这么多,曾经了解了 new 时产生的事件并通过了验证,上面就手动实现一个本人的 new 函数。
function myNew(Fn, ...args) {
// 一个新的对象被创立
const result = {};
// 该对象的__proto__属性指向该构造函数的原型
if (Fn.prototype !== null) {Object.setPrototypeOf(result, Fn.prototype);
}
// 将执行上下文(this)绑定到新创建的对象中
const returnResult = Fn.apply(result, args);
// 如果构造函数有返回值(对象或函数),那么这个返回值将取代第一步中新创建的对象。if ((typeof returnResult === 'object' || typeof returnResult === 'function') && returnResult !== null) {return returnResult;}
return result;
}
小试牛刀
function Fun() {
this.a = 10;
this.b = 20;
}
Fun.prototype = {method: () => {console.log('原型上的 method 被拜访');
}
}
const fun1 = new Fun();
console.log(fun1); // {a: 10, b: 20}
const fun2 = myNew(Fun);
console.log(fun2); // {a: 10, b: 20}
1. 如果感觉这篇文章还不错,来个分享、点赞吧,让更多的人也看到
2. 关注公众号执鸢者,与号主一起斩杀前端百题