模擬實現js的new

2022-04-11 03:03:12 字數 2987 閱讀 3250

目錄new是什麼

一句話介紹newnew運算子建立乙個使用者自定義的物件型別的例項,或者具有建構函式的內建物件型別之一。看下下面的**來了解new操作符都做了什麼事情

// class (constructor)

function person(name,age)

// 每個函式都有prototype物件屬性

// 在類的原型上掛載屬性和方法,掛載載原型上,每個例項都可以呼叫,並且不會每個例項都掛載相同的屬性和方法

person.prototype.strlength = 60

person.prototype.sayname = function()

// 例項化物件

const person = new person("yato", 50)

person.sayname();

console.log(person)

進一步理解new

從上面這個例子中,我們可以看到,例項person可以

接下來模擬實現乙個類似new的newfake,使用方式如下
function person(arguments)

// 使用new

let person = new person(arguments)

// 使用newfake

let person = newfake(person,arguments)

初步實現
function newfake())

let constructor = .shift.call(arguments)

if(typeof constructor !== 'function')

// 將新建物件的[[prototype]]屬性指向到建構函式的prototype屬性

obj.__proto__ = constructor.prototype

// 修改this指向到obj

return obj

}function person(name,age)

// 每個函式都有prototype物件屬性

// 在類的原型上掛載屬性和方法,掛載載原型上,每個例項都可以呼叫,並且不會每個例項都掛載相同的屬性和方法

person.prototype.strlength = 60

person.prototype.sayname = function()

// 例項化物件

const person = newfake(person,"yato", 50)

person.sayname(); // i am yato

console.log(person) // person

返回值處理
如果建構函式有返回值的情況

function person(name,age)

}let person = new person('yato', 18)

console.log(person.name) // yato

console.log(person.habit) // game

console.log(person.strength) // undefined

console.log(person.age) // undefined

在這個例子中,建構函式返回了乙個物件,在例項person中只能訪問返回物件中的屬性,而且還要注意一點,這裡我們是返回乙個物件,假設我們只返回乙個基本型別值呢,看下面的例子

function person(name,age)

let person = new person('yato', 18)

console.log(person.name) // undefined

console.log(person.habit) // undefined

console.log(person.strength) // 60

console.log(person.age) // 18

結果和正常new例項,無返回值的時候表現是一樣的!可以得出結論:new操作最後一步,需要判斷一返回值是否是乙個物件,如果是乙個物件就返回這個物件,如果不是物件就返回我們new內部的例項物件

第二版的new實現
function newfake())

let constructor = .shift.call(arguments)

if(typeof constructor !== 'function')

// es6 new.target 是指向建構函式

newfake.target = constructor;

// 將新建物件的[[prototype]]屬性指向到建構函式的prototype屬性

obj.__proto__ = constructor.prototype

// 修改this指向到obj

// 判斷返回值是否為物件 object(包含functoin, array, date, regexg, error)都會直接返回這些值。

// 這些型別中合併起來只有object和function兩種型別 typeof null 也是'object'所以要不等於null,排除 // null

let isobject = typeof ret === 'object' && ret !== null;

let isfunction = typeof ret === 'function';

if(isobject || isfunction)

return obj

}

總結一下new做了什麼

new 原理及模擬實現

new 運算子建立乙個使用者定義的物件型別的例項或具有建構函式的內建物件的例項。舉個栗子 function car color car.prototype.start function var car new car black car.color 訪問建構函式裡的屬性 black car.star...

js 模擬實現EventBus

文章原文 eventbus 幾個常用方法如下 這裡用map 儲存 eventbus 的資料,map 的模擬實現 可以看 示例 如下 let eb new eventbus eb.on event1 test1 eb.emit event1 第一次 eb.off event1 test1 eb.emi...

js模擬實現雜湊表

在演算法中,尤其是有關陣列的演算法中,雜湊表的使用可以很好的解決問題,所以這篇文章會記錄一些有關js實現雜湊表並給出解決實際問題的例子。說明 這篇部落格所寫並不是真正意義的雜湊表,只是與雜湊表的使用有相似之處。屬性的列舉 var person for var prop in person 輸出 即對...