大厂技术 高级前端 Node进阶
点击上方 程序员成长指北,关注公众号
回复1,加入高级Node交流群
还好在JavaScript的学习中自己深入研究了一下 new 这个神奇的关键字,不然得在面试官面前掉大分了。那既然提到了,我们就来聊聊吧。
前言
在JavaScript中,new关键字的应用可以说是再平常不过了,最基础的有new Array()、new Set(),再而就是new一个自己创建的构造函数,也就是创建一个该构造函数的示例。如:var person1 = new Person("一颗苹果", 18);但你是否真的了解new以及它的底层原理呢,本文将举出几个例子并且手写一个 new 来带大家深入理解。
new
首先,我们回顾一下new的用法:
function Car(make, model, year) {
this.make = make;
this.model = model;
this.year = year;
}
const car1 = new Car('Eagle', 'Talon TSi', 1993);
console.log(car1.make); //输出: "Eagle"
那么new的过程发生了什么呢
创建一个空对象:创建一个空的简单 JavaScript 对象。为方便起见,我们称之为
newInstance
。指定原型链:将
newInstance
的 [[Prototype]] 指向构造函数的prototype
属性,否则newInstance
将保持为一个普通对象,其 [[Prototype]] 为Object.prototype
。更改this指向:使用给定参数执行构造函数,并将
newInstance
绑定为 this 的上下文。返回值:返回
newInstance
。
手写一个new
function myNew(Fun, ...args) {
let obj = {}
obj.__proto__ = Fun.prototype
Fun.apply(obj, args)
return obj
}
function Person(name,age) {
this.name = name
this.age = age
}
let apple = myNew(Person, '一颗苹果','18')
console.log(apple.name); //输出:一颗苹果
console.log(apple.age); //输出:18
这样就模拟出了一个简化版的new
函数,其中不好理解的就是第三行的obj.__proto__ = Fun.prototype
和第四行的Fun.apply(obj, args)
。
...args:将剩下的元素都放进
args
中obj. __ proto __ = Fun.prototype:将
obj
的原型链指向构造函数的prototype
属性Fun.apply(obj, args) :将构造函数内部的this绑定到
obj
上,并执行构造函数
通过这一系列操作,我们就可以拿到构造函数中的 name
和 age
属性了。
看似完成了,但其实落了很重要的一点
“你不觉得少了些什么吗?”
回想一下,我们通过new函数创建一个对象时,除了引用它的属性,我们还会做些什么呢?
let arr = new Array()
arr.push(4)
arr.unshift(3)
console.log(arr);
当然是使用它自带的方法,但是上面并没有给出方法上的引用。这就得引入原型链这个知识点了,我们只需要给Person的原型链上增加我们想要的方法就可以了,实现代码如下:
function myNew(Fun, ...args) {
let obj = {}
obj.__proto__ = Fun.prototype
Fun.apply(obj, args)
return obj
}
function Person(name,age) {
this.name = name
this.age = age
}
Person.prototype.who = function () {
console.log('我是Person的实例对象');
}
Person.prototype.myname = function () {
console.log(this.name)
}
let p = myNew(Person, '一颗苹果')
p.who(); // 输出:我是Person的实例对象
p.myname(); // 输出:一颗苹果
console.log(p.name); // 输出:一颗苹果
这就是我们的最终答案了,把它交给面试官,perfect!!
结语
当我们学习一门语言时,了解其中的底层原理可以让我们事半功倍。不仅仅是面对面试官,也有助于我们在使用一个关键字或者方法时可以更加熟练。
本文转载于稀土掘金技术社区,作者——一颗苹果OMG
原文链接:https://juejin.cn/post/7385010721715404835
Node 社群
我组建了一个氛围特别好的 Node.js 社群,里面有很多 Node.js小伙伴,如果你对Node.js学习感兴趣的话(后续有计划也可以),我们可以一起进行Node.js相关的交流、学习、共建。下方加 考拉 好友回复「Node」即可。
“分享、点赞、在看” 支持一波👍