面试官：说说new操作符具体都干了什么？

浅浅的花香味﹌ 2022-11-05 00:46 156阅读 0赞

![format_png][]

## 一、是什么 ##

在`JavaScript`中，`new`操作符用于创建一个给定构造函数的实例对象

例子

function Person(name, age){
        this.name = name;
        this.age = age;
    }
    Person.prototype.sayName = function () {
        console.log(this.name)
    }
    const person1 = new Person('Tom', 20)
    console.log(person1)  // Person {name: "Tom", age: 20}
    t.sayName() // 'Tom'

从上面可以看到：

*  `new` 通过构造函数 `Person` 创建出来的实例可以访问到构造函数中的属性
 *  `new` 通过构造函数 `Person` 创建出来的实例可以访问到构造函数原型链中的属性（即实例与构造函数通过原型链连接了起来）

现在在构建函数中显式加上返回值，并且这个返回值是一个原始类型

function Test(name) {
      this.name = name
      return 1
    }
    const t = new Test('xxx')
    console.log(t.name) // 'xxx'

可以发现，构造函数中返回一个原始值，然而这个返回值并没有作用

下面在构造函数中返回一个对象

function Test(name) {
      this.name = name
      console.log(this) // Test { name: 'xxx' }
      return { age: 26 }
    }
    const t = new Test('xxx')
    console.log(t) // { age: 26 }
    console.log(t.name) // 'undefined'

从上面可以发现，构造函数如果返回值为一个对象，那么这个返回值会被正常使用

## 二、流程 ##

从上面介绍中，我们可以看到`new`关键字主要做了以下的工作：

*  创建一个新的对象`obj`
 *  将对象与构建函数通过原型链连接起来
 *  将构建函数中的`this`绑定到新建的对象`obj`上
 *  根据构建函数返回类型作判断，如果是原始值则被忽略，如果是返回对象，需要正常处理

举个例子：

function Person(name, age){
        this.name = name;
        this.age = age;
    }
    const person1 = new Person('Tom', 20)
    console.log(person1)  // Person {name: "Tom", age: 20}
    t.sayName() // 'Tom'

流程图如下：

![format_png 1][]

## 三、手写new操作符 ##

现在我们已经清楚地掌握了`new`的执行过程

那么我们就动手来实现一下`new`

function mynew(Func, ...args) {
        // 1.创建一个新对象
        const obj = {}
        // 2.新对象原型指向构造函数原型对象
        obj.__proto__ = Func.prototype
        // 3.将构建函数的this指向新对象
        let result = Func.apply(obj, args)
        // 4.根据返回值判断
        return result instanceof Object ? result : obj
    }

测试一下

function mynew(func, ...args) {
        const obj = {}
        obj.__proto__ = func.prototype
        let result = func.apply(obj, args)
        return result instanceof Object ? result : obj
    }
    function Person(name, age) {
        this.name = name;
        this.age = age;
    }
    Person.prototype.say = function () {
        console.log(this.name)
    }
    
    let p = mynew(Person, "huihui", 123)
    console.log(p) // Person {name: "huihui", age: 123}
    p.say() // huihui

可以发现，代码虽然很短，但是能够模拟实现`new`

### \--The End-- ###

面试官JavaScript系列正在更新：15/33

[面试官：说说你对Javascript中作用域的理解?][Javascript]

[面试官：JavaScript原型，原型链 ? 有什么特点？][JavaScript_ _]

[面试官：说说Javascript中的继承？如何实现继承？][Javascript 1]

[面试官：说说你对Javascript中this对象的理解][Javascript_this]

[面试官：JavaScript中执行上下文和执行栈是什么？][JavaScript]

[面试官：JavaScript中的事件模型如何理解?][JavaScript 1]

[面试官：解释下什么是事件代理？应用场景？][Link 1]

篇副有限，扫下方二维码查看往期

![format_png 2][]

[format_png]: /images/20221023/64dc05f8c55a4862821c088ecf702e33.png
[format_png 1]: /images/20221023/1412d409435d4ecc881ddc26b48572ef.png
[Javascript]: http://mp.weixin.qq.com/s?__biz=MzU1OTgxNDQ1Nw%3D%3D&chksm=fc10caadcb6743bba52b054baa67b782ec057522d87204fc5fb02050e3a01fcc32a2de949f62&idx=2&mid=2247485691&scene=21&sn=17ceeb1eebf1ca79991a44487fae3b06#wechat_redirect
[JavaScript_ _]: http://mp.weixin.qq.com/s?__biz=MzU1OTgxNDQ1Nw%3D%3D&chksm=fc10cb5dcb67424bf470fe32ebe876597f66a9fed17bb9ef18c53eb33e39504dbcec7c2b4a98&idx=1&mid=2247485707&scene=21&sn=56b670c1587570276d1f2dda04c804a4#wechat_redirect
[Javascript 1]: http://mp.weixin.qq.com/s?__biz=MzU1OTgxNDQ1Nw%3D%3D&chksm=fc10cb77cb6742619b2a76aa0d882d4e94d7021d8813f6ea09667b16146040faed9806203523&idx=2&mid=2247485729&scene=21&sn=e3d6148c0f4ab3617bcdf8f8501c7eb2#wechat_redirect
[Javascript_this]: http://mp.weixin.qq.com/s?__biz=MzU1OTgxNDQ1Nw%3D%3D&chksm=fc10cb6dcb67427b39ac8102099de814bfe368726aa25cb78967f8ca7c1107c59fc5ac29ba92&idx=2&mid=2247485755&scene=21&sn=8df3e7c0ada42fc112f2fa4c8bf0448c#wechat_redirect
[JavaScript]: http://mp.weixin.qq.com/s?__biz=MzU1OTgxNDQ1Nw%3D%3D&chksm=fc10cb1dcb67420bfb31f6560570b9b1dbcb3b46ad83bee8ec240ae1bfa8fbe9edfb18521576&idx=1&mid=2247485771&scene=21&sn=cb4eccd7996c95ca260c4a8d85e92113#wechat_redirect
[JavaScript 1]: http://mp.weixin.qq.com/s?__biz=MzU1OTgxNDQ1Nw%3D%3D&chksm=fc10cbc1cb6742d7d877332259c1563d2dcc8b114c5b1d1ed8c08b71b47502053ae5cb341c8e&idx=1&mid=2247485847&scene=21&sn=6214e1eda9a0205c143e6c26ac4426ca#wechat_redirect
[Link 1]: http://mp.weixin.qq.com/s?__biz=MzU1OTgxNDQ1Nw%3D%3D&chksm=fc10cb89cb67429f566962a6b4f76b953cbe1f59d35e8b338dbb6d1b42d2e0e647ca0fe47f5c&idx=2&mid=2247485919&scene=21&sn=15d93516f2118b13700a1e6e2ee1a56a#wechat_redirect
[format_png 2]: /images/20221023/a77845f2cbaf48dabbd64a55dcd92f10.png

面试官：说说new操作符具体都干了什么？

发表评论取消回复

还没有评论，来说两句吧...

相关阅读