JavaScript中new實現原理

前端張小明發表於2020-03-05

(1)建立一個新物件;

(2)將建構函式的作用域賦給新物件(因此this就指向了這個新物件);

(3)執行建構函式中的程式碼(為這個物件新增屬性和方法)

(4)返回新物件

建構函式建立物件程式碼如下:

function Person(name, age, job) {  

  this.name = name;
  this.age = age;
  this.job = job;
  this.sayName = function () {
      alert(this.name)
  }
}
var person = new Person('xiaoMing', 26, 'kaifa')
console.log('建構函式建立物件', person)
複製程式碼

new方法的實現原理的js程式碼如下:

 function _new() {
   var o = new Object() // 建立一個新的物件
   let [constructor, ...oArgs] = [...arguments] // 傳入引數第一個是建構函式,後面的是建構函式的引數
   o.__proto__ = constructor.prototype   // 執行建構函式 將建構函式的原型賦給 例項物件的__proto__
    這樣建構函式的屬性就全都給例項了
   let resultObject = constructor.apply(o,oArgs) // 將建構函式的this指向建立的物件
   if (resultObject && typeof resultObject == Object || typeof resultObject == "function") {
       // 如果建構函式的執行結果返回的是一個 物件 那麼就返回這個物件
       return resultObject
  }
   // 如果建構函式返回的是正常我們常見的那種(不是物件), 那麼返回這個新建立的物件
   return o
 }複製程式碼

相關文章