快捷導(dǎo)航

JavaScript中new操作符的原理與實(shí)現(xiàn)詳解

更新時(shí)間：2022年10月25日 15:55:59 作者：來(lái)碗鹽焗星球

你知道new嗎？你知道new的實(shí)現(xiàn)原理嗎？你能手寫(xiě)new方法嗎？不要擔(dān)心，這篇文件就來(lái)帶大家深入了解一下JavaScript中的new操作符，感興趣的小伙伴可以學(xué)習(xí)一下

一、new做了哪些事

先看看new的使用場(chǎng)景：

// 1、創(chuàng)建一個(gè)構(gòu)造函數(shù)
function Vehicle(name, price) {
    this.name = name
    this.price = price
}
?
// 2、new一個(gè)實(shí)例對(duì)象
let truck = new Vehicle()
console.log(truck); //Vehicle { name: undefined, price: undefined }
console.log(Object.prototype.toString.call(truck)); //[object Object]
?
// 傳入?yún)?shù)
let car = new Vehicle('car', '￥9999999')
console.log(car);
//Vehicle { name: 'car', price: '￥9999999' }

司空見(jiàn)慣的代碼，爛熟于心的寫(xiě)法，那你知道new具體做了哪些事情嘛？從上述代碼可以看出，一個(gè)構(gòu)造函數(shù)使用new操作符調(diào)用的時(shí)候，會(huì)生成一個(gè)具有構(gòu)造函數(shù)相同屬性的新對(duì)象。是不是很奇怪？明明Vehicle是構(gòu)造函數(shù)：

console.log(typeof Vehicle); //function

然而，經(jīng)過(guò)new的一番操作后，它的實(shí)例化是一個(gè)對(duì)象！?。ew到底做了哪些事情呢?對(duì)于這個(gè)例子，我們可以概括為以下事情：

?
    // 第一件：在構(gòu)造函數(shù)內(nèi)部，創(chuàng)建一個(gè)this對(duì)象
    let this = {
        name = name,
        price = price
    }
?
    // 第二件：返回this對(duì)象
    return this;
?
    // 第三件：給this對(duì)象的屬性賦值
    this.name = name
    this.price = price

很抽象，看不懂。。。進(jìn)一步剖析如下：

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);

由以上代碼可以看出，

第一：在構(gòu)造函數(shù)內(nèi)部有一個(gè)空的this對(duì)象，通過(guò)new操作符，會(huì)創(chuàng)建生成一個(gè)全新的對(duì)象（實(shí)例對(duì)象）。

第二：實(shí)例對(duì)象會(huì)執(zhí)行[[Prototype]]（ .proto）鏈接，并且實(shí)例對(duì)象的this會(huì)指向構(gòu)造函數(shù)的this（實(shí)例對(duì)象會(huì)綁定函數(shù)調(diào)用的this）。通過(guò)new創(chuàng)建的實(shí)例對(duì)象最終被[[Prototype]]（ .proto）鏈接到構(gòu)造函數(shù)的Prototype對(duì)象上。也就是說(shuō)，實(shí)例對(duì)象的隱式原型===構(gòu)造函數(shù)的顯示原型

二、返回不同類型時(shí)有哪些表現(xiàn)

創(chuàng)建一個(gè)構(gòu)造函數(shù)X，通過(guò)new操作符，實(shí)例化X得到實(shí)例化對(duì)象x，打印x,一定會(huì)是X{...}這個(gè)對(duì)象嘛？當(dāng)構(gòu)造函數(shù)內(nèi)部有返回值，并且返回的是不同類型的值，打印的結(jié)果又會(huì)是怎么樣呢？

function Student(id, name) {
    this.id = id
    this.name = name
?
    // 返回基本類型的值時(shí)：返回的結(jié)果依然是對(duì)象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' }
?
    // 返回引用類型時(shí)：
    //返回空對(duì)象時(shí)：返回的結(jié)果是空對(duì)象
    // return {}  //{}
    //返回函數(shù)時(shí)，返回的結(jié)果是函數(shù)
    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); //構(gòu)造函數(shù)內(nèi)部返回不同類型的值時(shí)，這里的打印結(jié)果是一樣的嗎？

三、手寫(xiě)new的實(shí)現(xiàn)原理

思路：new的實(shí)現(xiàn)原理核心是new做了哪些事情。

總結(jié)：

（1）通過(guò)new操作符調(diào)用構(gòu)造函數(shù)，會(huì)返回一個(gè)全新的對(duì)象，這個(gè)對(duì)象的屬性是構(gòu)造函數(shù)的參數(shù)。

（2）通過(guò)new操作符創(chuàng)建的實(shí)例對(duì)象的隱式原型會(huì)掛載到構(gòu)造函數(shù)的顯示原型上。實(shí)例對(duì)象.proto==構(gòu)造函數(shù).prototype。

（3）通過(guò)new操作符創(chuàng)建的實(shí)例對(duì)象的this會(huì)綁定調(diào)用函數(shù)的this 請(qǐng)看如下代碼：

// new的實(shí)現(xiàn)原理
function newPerson() {
    // 先return一個(gè)對(duì)象
    var obj = {};
    
    var constructor = Array.prototype.shift.call(arguments); //把數(shù)組的shift方法借給constructor使用
    
    // 實(shí)例對(duì)象的隱式原型===構(gòu)造函數(shù)的顯示原型
    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操作符的原理與實(shí)現(xiàn)詳解的詳細(xì)內(nèi)容，更多關(guān)于JavaScript new操作符的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！

您可能感興趣的文章: