国产欧美精品专区一区二区_91www永久在线精品果冻传媒_日韩成人亚洲综合专区无码av_欧美激情一区二区三区高清视频_免费福利在线视频亚洲_日韩精品无码人妻自慰喷水_把腿张开老子cao哭你动态图_51a性爱高清免费视频_国产无码资源在线观看資源免費看_再深点灬舒服灬太大了网站

前言

要實(shí)現(xiàn)手寫new，關(guān)鍵在于先吃透它的本質(zhì)。new作為 JavaScript 中創(chuàng)建對(duì)象的核心操作符，看似簡(jiǎn)單的語法背后，藏著一套嚴(yán)謹(jǐn)?shù)膱?zhí)行邏輯。只有先弄清楚它究竟是什么—— 是連接構(gòu)造函數(shù)與實(shí)例對(duì)象的橋梁？還是激活原型鏈關(guān)聯(lián)的開關(guān)？再明確它能完成哪些核心功能—— 是初始化對(duì)象屬性，還是建立繼承關(guān)系？最后拆解它的執(zhí)行過程中每一步都發(fā)生了什么—— 從創(chuàng)建空對(duì)象到綁定原型，從執(zhí)行構(gòu)造函數(shù)到返回實(shí)例…… 搞懂了這些，手寫new的思路才會(huì)清晰起來。接下來，我們一起來揭露這個(gè)東西

new 是什么？

new是JavaScript中用于創(chuàng)建對(duì)象實(shí)例的關(guān)鍵操作符，它是面向?qū)ο缶幊讨袑?duì)象實(shí)例化的核心機(jī)制。

我們通常利用new來實(shí)例化一個(gè)對(duì)象：

function Person(name, age) {
  this.name = name;
  this.age = age;
  this.Talk = function () {
        console.log('我是' + this.name);
    }
}
// 使用new創(chuàng)建實(shí)例
const person1 = new Person('張三', 25);
console.log(person1); // 輸出: Person { name: '張三', age: 25 }
person1.Talk(); // 輸出: 我是張三

我們可以看到利用new產(chǎn)生的實(shí)例繼承了構(gòu)造函數(shù)的屬性和方法，并且成功實(shí)例化了一個(gè)對(duì)象。

new 的過程中發(fā)生了什么？

當(dāng)使用new調(diào)用函數(shù)時(shí)，JavaScript引擎會(huì)執(zhí)行以下步驟：

1. 創(chuàng)建新對(duì)象：創(chuàng)建一個(gè)全新的空對(duì)象{}
2. 鏈接原型：將這個(gè)新對(duì)象的[[Prototype]]（即__proto__）鏈接到構(gòu)造函數(shù)的prototype對(duì)象
3. 綁定this：將構(gòu)造函數(shù)中的this綁定到這個(gè)新對(duì)象
4. 執(zhí)行構(gòu)造函數(shù)：執(zhí)行構(gòu)造函數(shù)中的代碼（通常用于初始化對(duì)象）
5. 返回對(duì)象：如果構(gòu)造函數(shù)沒有返回對(duì)象，則自動(dòng)返回這個(gè)新對(duì)象

當(dāng)然，對(duì)于這5條，1,3就不用說了，

1是基礎(chǔ)步驟，我們要返回一個(gè)實(shí)例化對(duì)象，必須得初始化一個(gè)，沒有米怎么蒸米飯呢？

3的話，上一期的this指向中有講過，傳送門??=>美麗的地方0^0~

2,我們可以在瀏覽器中console.log(person1),查看它的__proto__是否等于Person.prototype

4,我們也可以隨便在構(gòu)造函數(shù)中加一句console.log('whatever u want'),觀察它是否會(huì)執(zhí)行

5,重點(diǎn)來咯！當(dāng)構(gòu)造函數(shù)顯式返回一個(gè)對(duì)象時(shí)，new操作符會(huì)忽略原本創(chuàng)建的新對(duì)象，直接返回構(gòu)造函數(shù)返回的這個(gè)對(duì)象。此時(shí)新對(duì)象的屬性初始化將被丟棄，只有返回對(duì)象的內(nèi)容會(huì)被保留。

構(gòu)造函數(shù)返回對(duì)象完整規(guī)則：

1. 返回對(duì)象類型(包括數(shù)組、函數(shù)等)
   → 完全替代new默認(rèn)創(chuàng)建的對(duì)象
2. 返回原始值(數(shù)字、字符串等)
   → 被忽略，仍然返回new創(chuàng)建的新對(duì)象
3. 沒有return語句
   → 正常返回new創(chuàng)建的新對(duì)象

示例：

// 情況1：返回對(duì)象
function Case1() {
  this.a = 1;
  return { b: 2 }; // 對(duì)象優(yōu)先
}
console.log(new Case1()); // { b: 2 }
// 情況2：返回原始值
function Case2() {
  this.a = 1;
  return 123; // 原始值被忽略
}
console.log(new Case2()); // { a: 1 }
// 情況3：無返回
function Case3() {
  this.a = 1;
}
console.log(new Case3()); // { a: 1 }

手寫new

okk，既然我們都知道了你new出一個(gè)對(duì)象安慰自己沒有對(duì)象的事實(shí)時(shí)會(huì)發(fā)生的事情了，我們開始手寫一個(gè)new吧！

記住這靈魂的舞步~ ：

1. 創(chuàng)建新對(duì)象：創(chuàng)建一個(gè)全新的空對(duì)象{}
2. 鏈接原型：將這個(gè)新對(duì)象的[[Prototype]]（即__proto__）鏈接到構(gòu)造函數(shù)的prototype對(duì)象
3. 綁定this：將構(gòu)造函數(shù)中的this綁定到這個(gè)新對(duì)象
4. 執(zhí)行構(gòu)造函數(shù)：執(zhí)行構(gòu)造函數(shù)中的代碼（通常用于初始化對(duì)象）
5. 返回對(duì)象：如果構(gòu)造函數(shù)沒有返回對(duì)象，則自動(dòng)返回這個(gè)新對(duì)象

ok，假設(shè)我們有一個(gè)構(gòu)造函數(shù)Person,要利用我們的手寫new創(chuàng)建一個(gè)實(shí)例，

那么首先我們要?jiǎng)?chuàng)建一個(gè)函數(shù)，用來實(shí)現(xiàn)new:

function Person(name, age) {
    this.name = name;
    this.age = age;
}
function myNew(){}

現(xiàn)在我們要實(shí)現(xiàn)創(chuàng)建一個(gè)新的空對(duì)象：

function myNew(){
var obj = {};
}

接下來，我們要確立原型，鏈接到構(gòu)造函數(shù)，那么該怎么做呢？

既然我們要用到構(gòu)造函數(shù)，那么我們應(yīng)該至少應(yīng)該拿到構(gòu)造函數(shù)吧，所以我們就要把構(gòu)造函數(shù)和所需要的形參傳遞進(jìn)來！

function myNew(constructor,...args){
var obj = new Object();
}
// tips: ...args為rest運(yùn)算符，負(fù)責(zé)接收其余剩下的參數(shù)

接下來我們開始綁定prototype：

function myNew(constructor,...args){
var obj = new Object();
obj.__proto__ = constructor.prototype;
// obj 繼承構(gòu)造函數(shù)的prototype，prototype包含 構(gòu)造函數(shù) 的各種屬性和方法
}

Next,開始激情♂地綁定this到新的實(shí)例對(duì)象上，那么怎么樣能夠?qū)?gòu)造函數(shù)的this綁定到obj到上面呢？上一期我們學(xué)習(xí)了顯式綁定，我們可以利用call、apply、bind方法來將其綁定到理想目標(biāo)上：

function myNew(constructor,...args){
var obj = new Object();
obj.__proto__ = constructor.prototype;
constructor.bind(obj,...args);
}

這樣我們就成功了，下一步就是要執(zhí)行構(gòu)造函數(shù)了，我們可以用一個(gè)變量接受bind的結(jié)果并執(zhí)行它：

function myNew(constructor,...args){
var obj = new Object();
obj.__proto__ = constructor.prototype;
var before = constructor.bind(obj,...args);
before();
}

最后利用一個(gè)變量接受結(jié)果，判斷構(gòu)造函數(shù)返回的結(jié)果是否符合要求，

如果不符合則返回新對(duì)象，

如果符合則返回構(gòu)造函數(shù)準(zhǔn)備好的結(jié)果：

function myNew(constructor,...args){
var obj = new Object();
obj.__proto__ = constructor.prototype;
var before = constructor.bind(obj,...args);
var res = before();
return typeof res === 'object' ? res || obj : obj; 
// 三目運(yùn)算符，res為函數(shù)執(zhí)行的結(jié)果，如果return的結(jié)果為object，則返回res，沒有就返回obj
// res || obj? 這么寫是因?yàn)閞es可能為null，而 typeof只會(huì)判斷二進(jìn)制前三位，
// null 和 object二進(jìn)制前三位存儲(chǔ)為0，所以判斷不準(zhǔn)
// 因此這么寫當(dāng)res為null時(shí)也會(huì)返回obj，只有其為object時(shí)才會(huì)返回res
}

OK,看到這里大家肯定也知道我們可以優(yōu)化一部分了。我們可以把創(chuàng)建對(duì)象到綁定prototype 以及 從綁定this到判斷結(jié)果這一段優(yōu)化:

function myNew(constructor,...args){
// 創(chuàng)建空對(duì)象，obj的__proto__繼承constructor.prototype
const obj = Object.create(constructor.prototype);
// 利用apply綁定this并執(zhí)行構(gòu)造函數(shù)直接獲得結(jié)果
const res = constructor.apply(obj, args);
return typeof res === 'object' ? res || obj : obj; 
}

總結(jié)

想要手寫一個(gè)new，就要深深記住它在創(chuàng)建過程中會(huì)發(fā)生的事情，所以要記住以下五點(diǎn)?。。。。?！

1. 創(chuàng)建新對(duì)象：創(chuàng)建一個(gè)全新的空對(duì)象{}
2. 鏈接原型：將這個(gè)新對(duì)象的[[Prototype]]（即__proto__）鏈接到構(gòu)造函數(shù)的prototype對(duì)象
3. 綁定this：將構(gòu)造函數(shù)中的this綁定到這個(gè)新對(duì)象
4. 執(zhí)行構(gòu)造函數(shù)：執(zhí)行構(gòu)造函數(shù)中的代碼（通常用于初始化對(duì)象）
5. 返回對(duì)象：如果構(gòu)造函數(shù)沒有返回對(duì)象，則自動(dòng)返回這個(gè)新對(duì)象

轉(zhuǎn)自https://juejin.cn/post/7533521571568336938