# 实现一下new

# new命令原理

使用new命令时,它后面的函数依次执行下面的步骤

  1. 创建空对象:创建一个空对象,作为将要返回的对象实例
  2. 连接原型:将这个空对象的原型,指向构造函数的prototype属性
  3. 绑定 this:将这个空对象赋值给函数内部的this关键字
  4. 返回新对象:开始执行构造函数内部的代码

# 特性

  • 如果构造函数内部有return语句,而且return后面跟着一个对象,new命令会返回return语句指定的对象,否则返回这个创建的对象
  • 对于普通函数(内部没有使用this关键字)则会返回一个空对象

示例

function a(name){
    this.name = name
}
const d1 = new a('xm') // { name : "xm" }
d1 instanceof a // true

function b(name){
    this.name = name
    return {
        name:'abc'
    }
}
const d2 = new b('xm') // { name : "abc" }
d2 instanceof b // false

function c(){
    return 'hello world'
}

const d3 = new c() // { }
d3 instanceof c    // true
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

按照上面的思路实现

# myNew

function myNew() {
    // 获得构造函数
    var constructor = [].shift.call(arguments)
    // 创建一个空对象,并继承构造函数的 prototype 属性
    var context = Object.create(constructor.prototype);
    // 绑定this
    var res = constructor.apply(context, arguments);
    // 如果返回结果是对象,就直接返回
    // 否则返回 context 对象
    return res instanceof Object ? res : context;
}
1
2
3
4
5
6
7
8
9
10
11

测试,得到一致的结果

function a(name) {
    this.name = name
}
const d1 = myNew(a, 'xm') // { name : "xm" }
d1 instanceof a // true

function b(name) {
    this.name = name
    return {
        name: 'abc'
    }
}
const d2 = myNew(b, 'xm') // { name : "abc" }
d2 instanceof b // false

function c() {
    return 'hello world'
}

const d3 = myNew(c) // { }
d3 instanceof c    // true
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

其余写法的实现方案

function myNew() {
    // 创建空对象
    let o = {}
    // 获取构造函数
    let fn = [].shift.call(arguments)
    // 连接原型
    o.__proto__ = fn.prototype
    // 绑定this
    let res = fn.apply(o, arguments)
    return res instanceof Object ? res : o
}
1
2
3
4
5
6
7
8
9
10
11

# 拓展延伸

# __proto__属性

  • 每一个js对象有一个__proto__属性
  • __proto__指向该对象的原型
  • __proto__ 绝大部分浏览器都支持这个非标准的方法访问原型,然而它并不存在于 xx.prototype 中,实际上,它是来自于 Object.prototype ,与其说是一个属性,不如说是一个 getter/setter,当使用 obj.__proto__ 时,可以理解成返回了 Object.getPrototypeOf(obj)
    • Object.getPrototypeOf方法的作用是返回指定对象的原型

# Object.create

作用:创建一个新对象,使用现有的对象来提供新创建的对象的__proto__

于是可以得出下面的结论

// 构造函数
function fn(){

}
const a1 = Object.create(fn.prototype)
// 等价于
const a2 = new Object()
a2.__proto__ = fn.prototype

a1.__proto__ === a2.__proto__ // true
1
2
3
4
5
6
7
8
9
10