[JavaScript]new操作符做了什么？如何实现一个 new?

- 日理万妓 2022-12-10 14:40 193阅读 0赞

### 做了什么？ ###

1、创建了一个空的js对象（即\{\}）

2、将空对象的原型prototype指向构造函数的原型

3、将空对象作为构造函数的上下文（改变this指向）

4、对构造函数有返回值的判断

### 怎么实现？ ###

function _new(Con,...args){ 
        //1、创建一个空的对象
        let obj = { } // let obj = Object.create({})
        //2、将空对象的原型prototype指向构造函数的原型
        obj.__proto__ = Con.prototype // Object.setPrototypeOf(obj,Con.prototype)
        //3、改变构造函数的上下文（this）,并将剩余的参数传入
        let result = Con.apply(obj,args)
        //4、在构造函数有返回值的情况进行判断
        return result instanceof Object?result:obj
    }

### 构造函数返回值的判断 ###

一般情况下构造函数没有返回值，但是作为函数，是可以有返回值的。

那么在构造函数有返回值的情况下，new操作符做了什么？

先看两个例子：  
**注意一下上面两个返回值的差异**

function Person(name) { 
                this.name = name
                return 1 // return undefined/NaN/'string'/null
            }
            let me = new Person('Jayee')
            let me2 = _new(Person,'Jayee') //顺便测试一下我们自己实现的_new
            console.log(me) // { name:'Jayee' }
            console.log(me2) // { name:'Jayee' }

function Person(name) { 
                this.name = name
                return { 
                    age: 21
                }
            }
            let me3 = new Person('Jayee')
            let me4 = _new (Person,'Jayee') //顺便测试一下我们自己实现的_new
            console.log(me3) // { age:21 }
            console.log(me4) // { age:21 }

#### 结论： ####

**在new的时候，会对构造函数的返回值做一些判断：  
1、如果返回值是基础数据类型，则忽略返回值，返回创建的obj；  
2、如果返回值是引用数据类型，则使用return 的返回**