玩轉js之——new方法的模擬實現

已知new的做用 1.實例能夠訪問到構造函數的屬性和方法 2.實例能夠訪問到構造函數原型中的屬性和方法

//demo:

function Person(name, age) {
  this.name = name
  this.age = age
}
Person.prototype.sayName = function () {
  console.log("this.name:",this.name)
}

const man = new Person("張三",18)
console.log("demo man:", man) //Person { name: '張三', age: 18 }
man.sayName() //this.name: 張三

初步實現

function myNew() {
    const result = new Object() //最終返回的是個對象，因此先new一個出來

    const obj = Array.prototype.shift.call(arguments) //使用shift，截取第一個參數，即咱們須要的構造函數

    //這一步其實能夠不用，由於shift直接改變原數組，在後面的apply的時候直接傳arguments便可
    const argArray = Array.prototype.slice.call(arguments)//將構造函數obj的this指向result對象，這樣result就能夠訪問到obj中的屬性或方法

    result.__proto__ = obj.prototype // 第二條,繼承原型上的屬性或方法

    obj.apply(result, argArray) //第一條,將構造函數obj的this指向result對象，這樣result就能夠訪問到obj中的屬性或方法

    return result
}

const b = myNew(Person, "張三",19)
console.log("test:", b) //test: { name: '張三', age: 19 }

完美實現，(^▽^) 哈哈哈。。。。

第二步 優化

若是構造函數有返回且返回的是個指定對象呢，好比

function Person(name, age) {
  this.name = name
  this.age = age
  this.like = "休息"
  return {
    like:this.like
  }
}
const man = new Person("張三", 18)
console.log("demo man:", man) //demo man: { like: '休息' }
console.log(man.name, man.age) //undefined undefined

代碼實現

function myNew() {

  、、、、
  、、、、

  const  hasReturn = obj.apply(result,argArray)  //第一條,將構造函數obj的this指向result對象，這樣result就能夠訪問到obj中的屬性或方法
                                                 //同時看obj構造函數有無返回，且，返回是否爲對象，不然，直接返回
  return typeof hasReturn === 'object' ? hasReturn : result
}


const b = myNew(Person, "張三", 19)
console.log("test:", b) // test: { like: '休息' }
console.log(b.name, b.age) // undefined undefined

完成，(＾－＾)V

tips:若是構造函數沒有返回或者返回的不是一個指定對象，好比只是 return "哈哈哈" 這種，那返回不返回其實沒啥區別