前端面試之new操作符具體都幹了什麼？

我的名字豌豆發表於2021-10-18
前端面試

new操作符具體都幹了什麼？

  • (1) 首先建立了一個空物件。
  • (2) 設定原型，將物件的原型設定為函式的prototype物件。
  • (3) 讓函式的this指向這個物件，執行建構函式中的程式碼

  • (4) 判斷函式的返回值型別，如果是值型別，則返回建立的物件，如果是引用型別，則返回這個引用型別的物件。

    實現一下？

    function objectFactory(){
  let newObject = null,
  construct = Array.prototype.shift.call(anguments),
  result = null

  // 引數判斷
  if(typeof construct !== 'function'){
      console.error('type error')
      return
  }

  // 新建一個空物件，物件的原型為建構函式的prototype物件
  newObject = Object.create(construct.prototype)
  // 將this 指向這個新建物件，並執行
  result = construct.apply(newObject,arguments)

  // 判斷返回物件
  if flag = result && (typeof result === 'object' || typeof result === 'boolean')
  return flag ? result : newObject
}

    判斷返回值型別？

     對於返回值來講，當建構函式返回的是基本資料型別，那麼此時返回的結果是我們所建立的物件newObject，當建構函式返回的是引用型別object || function時，返回的是result值，此時通過apply函式又重新繫結了this指向，也就是說建構函式返回的是什麼引用型別的值，當前返回值型別就是什麼。
     具體程式碼可見：

    // 建構函式返回引用資料型別Object
let foo = objectFactory([function Foo(){ this.name = 'name'; return new Object("name") },1])
console.log(foo,"--------")  // [String: 'name'] --------
// 當建構函式返回值為Object("name")，所以返回值此時返回result，程式又通過apply改變了this的指向，指向了建構函式的返回值Object('name'),所以此時使用new操作符的返回值為引用資料型別[String: 'name']

// 建構函式返回基本資料型別String
let foo = objectFactory([function Foo(){ this.name = 'name'; return 'sss' },1])
console.log(foo,"--------")  // Foo { name: 'name' } --------
// 當建構函式返回值為字串，所以此時返回newObject，則此時的返回值為Foo

相關文章