前端經典面試題解密 JS的new關鍵字都幹了什麼？

2022-01-10 13:47:12 字數 1535 閱讀 6753

new關鍵字在例項化獲取物件時都做了什麼？是一道經常出現在前端面試時的問題。如果只是簡單的了解new關鍵字是例項化建構函式獲取物件，是萬萬不能夠的。更深入的層級發生了什麼呢？同時面試官想從這道題裡面考察什麼呢？下面胡哥為各位小夥伴一一來解密。

new關鍵字的作用：通過new關鍵字例項化建構函式，獲取物件。說一千道一萬，不如來段**看一看

// 定義建構函式


function person (name, age) , my age is $`) }}


// 建構函式的原型屬性和方法定義


person.prototype.color = 'yellow'


person.prototype.saybye = function () 


// 例項化


let p = new person('胡小帥', 18)


console.log(p)


// 當前屬性


console.log(p.name)


// 當前方法


p.say()


console.log(p.color)


// 原型方法


p.saybye()
通過new關鍵字例項化的物件p，具備了建構函式person中this的屬性：name、age，也具備了建構函式person的原型prototype的屬性color和方法saybye。下面我們來通過偽**來看看具體的實現過程。

初始化新物件

var o = {}
原型的執行，確定物件o的原型鏈

o.__proto__ = person.prototype
繫結this物件為o，傳入引數；執行person建構函式，進行屬性和方法的賦值操作

person.call(o, '胡小帥', 18)
返回結果

注意：在通過該種方式獲取物件時，最終不一定返回的是物件o，要看建構函式的返回值是什麼。

如果函式返回的是基本型別值，實際會生成乙個物件，返回o


如果是函式返回的是引用型別值，則實際返回的是該引用型別值
以上就是胡哥今天給大家分享的內容，喜歡的小夥伴記得收藏、**、點選右下角按鈕在看

胡哥有話說，乙個有技術，有情懷的胡哥！現任京東前端攻城獅一枚。

胡哥有話說，專注於大前端技術領域，分享前端系統架構，框架實現原理，最新最高效的技術實踐！

前端JS面試題

在引數過多的時候，call 的效能會好一些 console.time 可以測試一段程式執行的時間 console.timeend 假設 arr 是乙個陣列，它之所以可以呼叫 arr.push 這個方法式因為 它是array的例項，可以繼續呼叫array原型上面的 push 方法 function f...

Js前端面試題

1.判斷js型別的方法 1 typof 2 可以判斷出 string boolean undefiend number 3 但是判斷typeof null 時值為object 判斷物件陣列的時候也是object object.prototype.tostring.call 可以判斷出所有型別 arr...

前端面試題 Js

1.原型 原型鏈 建構函式 例項 繼承 原型 proto 原型物件 prototype 用作建構函式中有prototype 原型物件 例項中有 proto 2.有幾種方式可以實現繼承 原型繼承，構造繼承，例項繼承，拷貝繼承，組合繼承，寄生組合繼承，class繼承 3.用原型實現繼承有什麼缺點，如何解...