前端面試題積累

sunny5541 發布于2019-08-22 17:23 / 3046人閱讀

摘要：構造函數模式問題每個方法都要在每個實例上重新創建一遍。構造函數在不返回值的情況下，默認會返回新對象實例。在默認情況下，所有原型對象都會自動獲得一個構造函數屬性，這個屬性是一個指向屬性所在函數的指針。。

創建對象的方式

1、工廠模式

在函數里，new 一個 Object，然后根據傳入的參數給該對象添加屬性，最后返回該對象。問題：無法知道一個對象的類型。

2、構造函數模式

問題：每個方法都要在每個實例上重新創建一遍。解決：在全局作用域中定義全局函數。當然，這會導致封裝性很差。

3、原型模式

每個函數都有一個 prototype（原型）屬性，這個屬性是一個指針，指向一個對象(指向該函數的原型對象)，而這個對象的用途是包含可以由特定類型的所有實例共享的屬性和方法。如果按照字面意思來理解，那么 prototype 就是通過調用構造函數而創建的那個對象實例的原型對象。使用原型對象的好處是可以讓所有對象實例共享它所包含的屬性和方法。

缺點：原型中所有屬性是被很多實例共享的，這種共享對于函數非常合適。但是對于包含引用類型值的屬性問題就突出了。

4、組合使用構造函數模式和原型模式

構造函數模式用于定義實例屬性，而原型模式用于定義方法和共享的屬性。
結果，每個實例都會有自己的一份實例屬性的副本，但同時又共享著對方法的引用，最大限度地節省了內存。另外，這種混成模式還支持向構造函數傳遞參數；可謂是集兩種模式之長。

5、動態原型模式

在構造函數中這么寫共享的方法和屬性：

// 方法
if (typeof this.sayName != "function") {
  Person.prototype.sayName = function() {
    alert(this.name);
  };
}

6、寄生構造函數模式

基本思想：創建一個函數，該函數的作用僅僅是封裝創建對象的代碼，然后再返回新創建的對象。

function Person(name, age, job) {
  var o = new Object();
  o.name = name;
  o.age = age;
  o.job = job;
  o.sayName = function() {
    alert(this.name);
  };
  return o;
}

var friend = new Person("Amy", 18, "student");
friend.sayName();    // Amy

構造函數在不返回值的情況下，默認會返回新對象實例。而通過在構造函數的末尾添加一個 return 語句，可以重寫調用構造函數時返回的值。

用法：這個模式可以在特殊的情況下用來為對象創建構造函數。假設我們想創建一個具有額外方法的特殊數組。由于不能直接修改 Array 構造函數，因此可以使用這個模式。

function SpecialArray() {
  // 創建數組
  var values = new Array();
  // 添加值
  values.push.apply(values, arguments);
  // 添加方法
  values.toPipedString = function() {
    return this.join("|");
  };
  // 返回數組
  return values;
}

var colors = new SpecialArray("red", "green", "blue");
alert(colors.toPipedString());    // red|green|blue

關于寄生構造函數模式，有一點需要說明：
首先，返回的對象與構造函數或者與構造函數的原型屬性之間沒有關系；也就是說，構造函數返回的對象與在構造函數外部創建的對象沒有什么不同。為此，不能依賴 instanceof 操作符來確定對象類型。

用 new 調用構造函數實際經歷了4個步驟

1 創建一個新對象；

2 將構造函數的作用域賦給新對象（因此 this 就指向了這個新對象）；

3 執行構造函數中的代碼（為這個新對象添加屬性）；

4 返回新對象。

理解原型對象

所有函數都有一個 prototype 屬性，這個屬性指向函數的原型對象。

在默認情況下，所有原型對象都會自動獲得一個 constructor (構造函數)屬性，這個屬性是一個指向 prototype 屬性所在函數的指針。
eg. Person.prototype.constructor => Person。

當調用構造函數創建一個新實例后，該實例的內部將包含一個指針（內部屬性[[Prototype]]），指向構造函數的原型對象。注意：這個連接存在于實例與構造函數的原型對象之間，而不是存在于實例與構造函數之間。實例 => 構造函數的原型對象

判斷某個實例的原型指針是否指向某個函數的原型對象：

Person.prototype.isPrototypeOf(person1)    // true
Object.getPrototypeOf(person1) === Person.protype    // true

hasOwnProperty() 方法：檢測一個屬性是存在于實例中，還是存在于原型中。只有存在于實例中時，才返回 true。
in 操作符：實例和原型中的屬性都能訪問到。
同時使用 hasOwnProperty() 方法和 in 操作符，就可以確定該屬性到底是存在于對象中，還是存在于原型中。

Object.keys() 方法：取得對象上所有可枚舉的實例屬性。
Object.getOwnPropertyNames() 方法：得到所有實例屬性（包括不可枚舉屬性）。

重寫原型會怎么樣？

Person.prototype = {…}：
我們將 Person.prototype 設置為等于一個以對象字面量形式創建的新對象。最終結果相同，但有一個例外：constructor 屬性不再指向 Person 了。前面曾經介紹過，每創建一個函數，就會同時創建它的 prototype 對象，這個對象也會自動獲得 constructor 屬性。而我們在這里使用的語法，本質上完全重寫了默認的 prototype 對象，因此 constructor 屬性也就變成了新對象的 constructor 屬性（指向 Object 構造函數），不再指向 Person 函數。此時，盡管 instanceof 操作符還能返回正確的結果，但通過 constructor 已經無法確定對象的類型了。

實現繼承的方式

1、原型鏈繼承

云服務器 GPU云服務器面試題棧面試題筆試面試題面試題內容

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/95130.html

新鮮出爐的8月前端面試題

摘要：前言最近參加了幾場面試，積累了一些高頻面試題，我把面試題分為兩類，一種是基礎試題主要考察前端技基礎是否扎實，是否能夠將前端知識體系串聯。前言最近參加了幾場面試，積累了一些高頻面試題，我把面試題分為兩類，一種是基礎試題: 主要考察前端技基礎是否扎實，是否能夠將前端知識體系串聯。一種是開放式問題: 考察業務積累，是否有自己的思考，思考問題的方式，這類問題沒有標準答案。基礎題題目的答...

qingshanli1988 2019-08-23 10:47 評論0 收藏0
CSS技巧 - 收藏集 - 掘金

摘要：筆者作為一位，將工作以來用到的各種優秀資料神器及框架整理在此，畢竟好記性不如爛鍵盤，此前端知識點大百科全書前端掘金，，不定期更新技巧前端掘金技巧，偶爾更新。計算數組的極值技巧使你的更加專業前端掘金一個幫你提升技巧的收藏集。 CSS 樣式畫各種圖形 - 前端 - 掘金下面是一些我在 CSS 中經常用到的圖案，還有一些是在css-tricks看到的。記錄一下，以后會用到。會持續更新… 一、...

Jonathan Shieber 2019-08-29 12:33 評論0 收藏0
CSS技巧 - 收藏集 - 掘金

摘要：筆者作為一位，將工作以來用到的各種優秀資料神器及框架整理在此，畢竟好記性不如爛鍵盤，此前端知識點大百科全書前端掘金，，不定期更新技巧前端掘金技巧，偶爾更新。計算數組的極值技巧使你的更加專業前端掘金一個幫你提升技巧的收藏集。 CSS 樣式畫各種圖形 - 前端 - 掘金下面是一些我在 CSS 中經常用到的圖案，還有一些是在css-tricks看到的。記錄一下，以后會用到。會持續更新… 一、...

SHERlocked93 2019-08-22 11:04 評論0 收藏0
2017年3月份前端資源分享

平日學習接觸過的網站積累，以每月的形式發布。2017年以前看這個網址：http://www.kancloud.cn/jsfron... 03月份前端資源分享 1. Javascript 175453545 Redux compose and middleware 源碼分析深入 Promise(二)——進擊的 Promise Effective JavaScript leeheys blog -...

ermaoL 2019-06-27 16:30 評論0 收藏0