JavaScript中new操作符的原理與實現詳解

Posted on by

一、new做瞭哪些事

先看看new的使用場景：

// 1、創建一個構造函數
function Vehicle(name, price) {
    this.name = name
    this.price = price
}
​
// 2、new一個實例對象
let truck = new Vehicle()
console.log(truck); //Vehicle { name: undefined, price: undefined }
console.log(Object.prototype.toString.call(truck)); //[object Object]
​
// 傳入參數
let car = new Vehicle('car', '￥9999999')
console.log(car);
//Vehicle { name: 'car', price: '￥9999999' }

司空見慣的代碼，爛熟於心的寫法，那你知道new具體做瞭哪些事情嘛？從上述代碼可以看出，一個構造函數使用new操作符調用的時候，會生成一個具有構造函數相同屬性的新對象。是不是很奇怪？明明Vehicle是構造函數：

console.log(typeof Vehicle); //function

然而，經過new的一番操作後，它的實例化是一個對象！！！new到底做瞭哪些事情呢?對於這個例子，我們可以概括為以下事情：

​
    // 第一件：在構造函數內部，創建一個this對象
    let this = {
        name = name,
        price = price
    }
​
    // 第二件：返回this對象
    return this;
​
    // 第三件：給this對象的屬性賦值
    this.name = name
    this.price = price

很抽象，看不懂。。。進一步剖析如下：

function Person(name, gender) {
    console.log('賦值前的this=', this); //賦值前的this= Person {}
    this.name = name
    this.gender = gender
    console.log('賦值後的this=', this); //賦值後的this= Person { name: '小灰灰', gender: 'boy' }
}
​
let child = new Person('小灰灰', 'boy')//Person { name: '小灰灰', gender: 'boy' }
console.log(child);

由以上代碼可以看出，

第一：在構造函數內部有一個空的this對象，通過new操作符，會創建生成一個全新的對象（實例對象）。

第二：實例對象會執行[[Prototype]]（ .proto）鏈接，並且實例對象的this會指向構造函數的this（實例對象會綁定函數調用的this）。通過new創建的實例對象最終被[[Prototype]]（ .proto）鏈接到構造函數的Prototype對象上。也就是說，實例對象的隱式原型===構造函數的顯示原型

二、返回不同類型時有哪些表現

創建一個構造函數X，通過new操作符，實例化X得到實例化對象x，打印x,一定會是X{…}這個對象嘛？當構造函數內部有返回值，並且返回的是不同類型的值，打印的結果又會是怎麼樣呢？

function Student(id, name) {
    this.id = id
    this.name = name
​
    // 返回基本類型的值時：返回的結果依然是對象Student {name:xxx,age:xxx}
    // return null   //Student { id: '1001', name: 'cat' }
    // return undefined //Student { id: '1001', name: 'cat' }
    // return 123        //Student { id: '1001', name: 'cat' }
    // return 'hello world'   //Student { id: '1001', name: 'cat' }
    // return true  //Student { id: '1001', name: 'cat' }
    // return false  //Student { id: '1001', name: 'cat' }
    //return Symbol('abc')  //Student { id: '1001', name: 'cat' }
​
    // 返回引用類型時：
    //返回空對象時：返回的結果是空對象
    // return {}  //{}
    //返回函數時，返回的結果是函數
    return function() {} //[Function (anonymous)]
    // return [] //[]
    // return new Date() //2022-10-24T04:44:18.581Z
    // return new Error() //Error...
}
​
let student = new Student('1001', 'cat')
console.log(student); //構造函數內部返回不同類型的值時，這裡的打印結果是一樣的嗎？

三、手寫new的實現原理

思路：new的實現原理核心是new做瞭哪些事情。

總結：

（1）通過new操作符調用構造函數，會返回一個全新的對象，這個對象的屬性是構造函數的參數。

若構造函數內部有返回值，且返回值是基本數據類型（number|string|null|undefined|Symbol|boolean），則實例對象的返回結果是原本的對象；

若返回值是引用數據類型（Object|Array|Function|Date|RegExp|Error），則實例對象的返回的結果就是引用類型對應的值。

（2）通過new操作符創建的實例對象的隱式原型會掛載到構造函數的顯示原型上。實例對象.proto==構造函數.prototype。

（3）通過new操作符創建的實例對象的this會綁定調用函數的this 請看如下代碼：

// new的實現原理
function newPerson() {
    // 先return一個對象
    var obj = {};
    
    var constructor = Array.prototype.shift.call(arguments); //把數組的shift方法借給constructor使用
    
    // 實例對象的隱式原型===構造函數的顯示原型
    obj._proto_ = constructor.prototype;
    var result = constructor.apply(obj, arguments);
    return typeof result === 'object' && result != 'null' ? result : obj;
}
​
let p = newPerson(Person, 'hunny')
console.log(p); //{ _proto_: {}, name: 'hunny', age: undefined }

以上就是JavaScript中new操作符的原理與實現詳解的詳細內容，更多關於JavaScript new操作符的資料請關註WalkonNet其它相關文章！

推薦閱讀：