Skip to content

实现一下new

new命令原理

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

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

特性

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

示例

js
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
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

按照上面的思路实现

myNew

js
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;
}
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;
}

测试,得到一致的结果

js
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
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

其余写法的实现方案

js
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
}
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
}

拓展延伸

__proto__属性

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

Object.create

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

于是可以得出下面的结论

js
// 构造函数
function fn(){

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

a1.__proto__ === a2.__proto__ // true
// 构造函数
function fn(){

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

a1.__proto__ === a2.__proto__ // true

通过new的方式创建对象与通过字面量创建的区别

  • new Object() 方式创建对象本质上是方法调用,涉及到在原型链中查找该方法,当找到该方法后,又会生产方法调用必须的堆栈信息,方法调用结束后,还要释放该堆栈,性能不如字面量的方式
  • 通过对象字面量定义对象时,不会调用Object的构造函数

小结: 使用字面量的方式创建对象性能上更好,可读性更高

更新于: