JavaScript 模擬new的實現

2021-09-24 06:31:24 字數 2423 閱讀 1525

首先一句話解釋一下new:

new 可以實現乙個物件繼承建構函式的屬性以及方法

舉個例子:

function parent(name,age)

parent.prototype.sayname = function

()`)

}let child = new parent('js',18);

console.log(child.name); // js

console.log(child.age); // 18

child.sayname(); // my name is js

複製**

從這個案例,可以看到例項child

1.繼承了建構函式裡面的屬性

2.可以訪問到建構函式prototype中的屬性

通過下面這個圖來直觀感受一下,這裡涉及到js原形以及原型鏈,先提前補腦一下

proto 指的是例項物件的原形鏈,每個物件都有這個屬性,它只想建構函式的原形;而prototype屬性是函式物件才有的屬性,那什麼是函式物件?就是凡是通過new functioin()出來的就是函式物件。

child.constructor === parent //true

child._proto === parent.prototype //true

parent.prototype.constructor === parent //true

複製**

function

newfactory

()複製**

首先通過new object()新建乙個物件 obj;

取出第乙個引數,就是我們要傳入的建構函式。因為 shift 會修改原陣列,所以 arguments 會被去除第乙個引數.

講obj的原形指向建構函式

接下來測試一下

function parent(name,age)

parent.prototype.sayname = function

()`)

}function

newfactory

()let child = newfactory(parent,'js','18')

console.log(child.name); // js

console.log(child.age); // 18

child.sayname(); // my name is js

複製**

到這一步我們已經完成了80%,因為還有種情況我們沒有考慮到,當建構函式有返回值的時候,例項化的物件會怎麼?

function parent(name,age)

}var child = new parent('js','18')

console.log(child.name); // js

console.log(child.age); // undefined

console.log(child.***); // undefined

console.log(child.address); // china

複製**

通過上面這個案例,可以看出當建構函式返回了乙個物件的化,例項child只能訪問到返回物件的屬性,那如果返回的是基本型別呢?

function parent(name,age)

var child = new parent('js','18')

console.log(child.name); // undefined

console.log(child.age); // 18

console.log(child.***); // boy

console.log(child.address); // undefined

複製**

從這個案例可以看出來當建構函式返回值是基本型別的時候,跟沒有返回值一樣。

終極版 四大步驟:

1、建立乙個空物件,並且 this 變數引用該物件,// let obj = new object();

2、繼承了函式的原型。// obj.proto = func.prototype;

3、屬性和方法被加入到 this 引用的物件中。並執行了該函式func// func.call(target);

4、新建立的物件由 this 所引用,並且最後隱式的返回 this 。// 如果func.call(target)返回的res是個物件或者function 就返回它

function

newfactory

() return obj;

}複製**

JavaScript深入之new的模擬實現

function otaku name,age 因為缺乏鍛鍊的緣故,身體強度讓人擔憂 otaku.prototype.strength 60 otaku.prototype.sayyourname function var person newotaku kevin 18 console.log p...

模擬new操作符

function imitatenew func,args let person imitatenew function name,age alima 17 複製 使用new操作符呼叫建構函式經歷的步驟 建立乙個新物件,繼承建構函式的原型物件 將建構函式的作用域賦給新物件 this指向新物件 執行建...

模擬new的簡單實現

在建構函式中建立乙個空物件 把建構函式的this指向這個新的空物件 把建構函式的prototype屬性指向的原型物件賦值給這個空物件的 proto 屬性 返回這個空物件 function person name,age function newsimulate 這裡是為了呼叫shift方法,該方法會...