1. js繼承的7種方式

回顧：

每個構造函數都有一個原型對象；

原型對象都包含一個指向構造函數的指針；

實例都包含一個指向原型對象的內部指針；

一切皆為對象，只要是對象，就會有 proto 屬性，該屬性存儲了指向其構造的指針。

1.1確定原型和實例的關系：

1.1.1instanceOf

使用 instanceof操作符來檢測實例與原型鏈中出現過的構造函數，結果就會返回true；
因此可以說instance是Object、SuperType或SubType中任何一個類型的原型。

1.1.2 isPrototypeOf

只要是原型鏈中出現過的原型，都可以說是該原型鏈派生的實例的原型，因此isPrototypeOf()方法也會返回true。

Object.prototype.isPrototypeOf(instance) SuperType.prototype.isPrototypeOf(instance) SubType.prototype.isPrototypeOf(instance)

1.2 7中方式

1.2.1 原型鏈：子類原型對象等于超類的實例

Object.prototype.isPrototypeOf(instance) SuperType.prototype.isPrototypeOf(instance) SubType.prototype.isPrototypeOf(instance) function SuperType() {this.colors = ['red','yellow','blue'] } function SubType() { } SubType.prototype = new SuperType() var instance1 = new SubType() instance1.colors.push('green') var instance2 = new SubType() instance2.colors // ['red','yellow','blue', 'green']

2個問題（引用類型、不能向超類型的構造函數傳遞參數）

1.2.2 借用構造函數: 在SubType內部SuperType.call(this, 'Lee') (能解決原型鏈的2個問題)

2個問題

構造函數模式的通病

每個方法都要在每個實例上重新創建一遍！不同實例上的同名函數是不相等的，然而，創建2個完成同樣任務的Function實例的確沒有必要。

超類型的原型中定義的方法，對子類型而言是不可見的

1.2.3 組合繼承

借用構造函數方式，解決傳參和引用 + 原型鏈方式，使用原型鏈上的方法

無論什么情況下，都會調用兩次超類型構造函數：一次是在創建子類型原型的時候，另一次在子類型構造函數內部。 子類型最終會包含超類型對象的全部實例屬性，但我們不得不在調用子類型構造函數時重寫這些屬性。

function SuperType(name) {this.name = namethis.colors = ['red','yellow','blue'] } SuperType.prototype.sayName = function() {alert(this.name) } function SubType(name, age) {SuperType.call(this, name) // 第二次調用超類型構造函數，在新對象上創建了實例屬性name、colors，將屏蔽原型中的兩個同名屬性this.age = age } SubType.prototype = new SuperType() //第一次調用超類型構造函數，SubType.prototype 獲得兩個屬性：name、colors var instance1 = new SubType('Lee', 26) instance1.colors.push('green') var instance2 = new SubType() instance2.colors // ['red','yellow','blue']

1.2.4 原型式繼承-和原型鏈對應

在沒有必要興師動眾地創建構造函數，而只是想讓一個對象與另一個對象保持類似的情況下，原型式繼承時完全可以勝任的
相同問題：引用類型值的屬性會共享
從本質上講，object()對傳入其中的對象執行了一次淺拷貝

function object(o) {function F() {}F.prototype = oreturn new F() }

Object.create()

兩個參數：

用來作為新對象原型的對象

對新對象定義額外屬性的對象，與Object.defineProperties()方法的第二個參數格式相同，每個屬性都是通過自己的描述符定義的。

var person = {name: 'Lee',friends: ['a', 'b'] } var p1 = Object.create(person) p1.name = 'Yoona' p1.friends = ['c'] var p2 = Object.create(person) p2.name = 'Jessica' p2.friends.push('d') console.log(person.friends) // a, b, c, d

1.2.5 寄生式繼承-和構造函數對應

只能解決方法復用，沒有解決引用

function createPerson(original) {// var clone = object(original)var clone = Object.create(original)clone.sayHi = function() {alert('Hi')}return clone } var p = {name: 'Lee',friends: ['a', 'b'] } var p1 = createPerson(p) p1.sayHi() p1.friends.push('cs') console.dir(p.friends)// a b cs

1.2.6 寄生組合式繼承-解決組合繼承問題

通過借用構造函數：繼承屬性
通過原型鏈的混合形成：繼承方法
目的：不必為了指定子類型的原型而調用超類型的構造函數，可以使用寄生式繼承來繼承超類型的原型。

call 借用構造函數繼承屬性和方法

Object.create來指定原型

添加constructor從而彌補重寫原型而失去的默認的屬性

1.2.7 ES6 Class的繼承 extends關鍵字

子類必須在constructor方法中調用super方法

class Point {constructor(x, y) {this.x = x;this.y = y;} }class ColorPoint extends Point {constructor(x, y, color) {super(x, y);this.color = color;} } let cp = new ColorPoint(25, 8, 'green');cp instanceof ColorPoint // true cp instanceof Point // true

父類的靜態方法，也會被子類繼承。

class A {static hello() {console.log('hello world');} }class B extends A { }B.hello() // hello world

2. js作用域的類型

全局 局部 塊級

3. 塊級作用域和全局、局部作用域的區別

4. 閉包

描述用詞一定要準確
閉包讀取內部嵌套函數的變量
閉包的優點、缺點：
閉包：能夠讀取其他函數內部變量的函數。（應用場景：要獲取某函數內部的局部變量）

閉包的優點：1.能夠讀取函數內部的變量 2.讓這些變量一直存在于內存中，不會在調用結束后，被垃圾回收機制回收

閉包的缺點：正所謂物極必反，由于閉包會使函數中的變量保存在內存中，內存消耗很大，所以不能濫用閉包，解決辦法是，退出函數之前，將不使用的局部變量刪除。

5. vue的api – 讀vue文檔

vue-router是vue的生態

6. computed和watch的區別

一切關于vue的，參考文檔最合理
計算屬性和偵聽器

6.1 計算屬性

對于任何復雜邏輯，你都應當使用計算屬性；

我們提供的函數將用作計算屬性的 getter 函數；

計算屬性緩存vs 方法（計算屬性是基于它們的響應式依賴進行緩存的。只在相關響應式依賴發生改變時它們才會重新求值。這就意味著只要 message 還沒有發生改變，多次訪問 reversedMessage 計算屬性會立即返回之前的計算結果，而不必再次執行函數）每當觸發重新渲染時，調用方法將總會再次執行函數。【假設我們有一個性能開銷比較大的計算屬性 A，它需要遍歷一個巨大的數組并做大量的計算?！?#xff1b;

Date.now() 不是響應式依賴；

計算屬性默認只有 getter，不過在需要時你也可以提供一個 setter；

6.2 偵聽屬性

當需要在數據變化時執行異步或開銷較大的操作時，這個方式是最有用的。question-answer，限制我們執行該操作的頻率，并在我們得到最終結果前，設置中間狀態。

無緩存性，頁面重新渲染時值不變化也會執行。

7. 對vue的對象進行深度監聽

7.1 deep:true

watch:{obj:{ //監聽的對象deep:true, //深度監聽設置為 truehandler:function(newV,oldV){console.log('watch中：',newV)}} } data () {return {obj:{name:'夜空中最亮的星星',age:18}}},watch:{'obj.name':{deep:true,handler:function(newV,oldV){console.log('watch中：',newV)}}}

7.2 計算屬性+偵聽器

data () {return {obj:{name:'夜空中最亮的星星',age:18}}},computed:{name(){return this.obj.name;}},watch:{name(newV){console.log('watch中name為：',newV)}}

8. 節流和防抖

9. vue的生命周期

創建 掛載 更新 銷毀
VUE-生命周期/請求數據

詳解vue生命周期-一篇文章搞懂詳細過程

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title> </head> <body><div id="app"><button @click="des">銷毀</button><button @click="add">修改狀態</button>{{ count }}</div> </body> <script src="vue.js"></script> <script>new Vue({el: '#app',data: {count: 0},methods: {add () {this.count += 1},des () {this.$destroy() // 觸發銷毀}},beforeCreate () {console.log('創建實例之前', this.$el) // undefinedconsole.log('創建實例之前', this.$data) // undefinedconsole.log('創建實例之前', this.count) // undefined},created () {console.log('創建實例成功', this.$el) // undefinedconsole.log('創建實例成功', this.$data) // {count: 0}console.log('創建實例成功', this.count) // 0},beforeMount () {console.log('裝載之前', this.$el) // <div id="app"></div>console.log('裝載之前', this.$data) // {count: 0}console.log('裝載之前', this.count) // 0},mounted () {console.log('裝載之后', this.$el) // <div id="app"></div>console.log('裝載之后', this.$data) // {count: 0}console.log('裝載之后', this.count) // 0},beforeUpdate () {console.log('更新之前', this.$el) // <div id="app"></div>console.log('更新之前', this.$data) // {count: 0}console.log('更新之前', this.count) // 1},updated () {console.log('更新之后', this.$el) // <div id="app"></div>console.log('更新之后', this.$data) // {count: 0}console.log('更新之后', this.count) // 1},beforeDestroy () {console.log('銷毀之前', this.$el) // <div id="app"></div>console.log('銷毀之前', this.$data) // {count: 0}console.log('銷毀之前', this.count) // 1},destroyed () {console.log('銷毀之后', this.$el) // <div id="app"></div>console.log('銷毀之后', this.$data) // {count: 0}console.log('銷毀之后', this.count) // 1}}) </script> </html>

10. 在beforeCreated和created之間能請求數據嗎

無論在哪個生命周期都是能請求數據的，只是不一定能渲染
在生命周期的什么階段進行請求：看需求

一般在 created 里面就可以，如果涉及到需要頁面加載完成之后的操作話就用 mounted；

• created 階段的優勢是：請求時間比較早，頁面 loading 時間相對較短；
• mounted 階段的優勢是：頁面已經渲染完成，如果想請求之后進行 DOM 操作的話，必須在 mounted 階段發起請求；

11. 什么是虛擬DOM

12. 什么是MVVM框架

13. 解釋響應式原理

在源代碼中是怎么實現的

14. 項目中的難點

代表性、成就感最高的——決定了做到什么程度

15. 大數據渲染

16. 循環數組的方式

forEach沒有返回值，返回值undefined？斟酌

17. vue的雙向數據綁定

Vue內部通過Object.defineProperty方法屬性攔截的方式，把data對象里每個數據的讀寫轉化成getter/setter，當數據變化時通知視圖更新。
vue的雙向綁定原理及實現
代碼實現：細讀！！！

【數據層】【視圖層】的數據同步

數據劫持+發布者-訂閱者模式

Object.defineProperty()方法會直接在一個對象上定義一個新屬性，或者修改一個對象的現有屬性，并返回此對象。

17. 1 對象屬性

ECMAScript中有兩種屬性: 數據屬性和訪問器屬性, 數據屬性一般用于存儲數據數值, 訪問器屬性對應的是set/get操作, 不能直接存儲數據值, 每種屬性下面又都含有四個特性.下面介紹一下:

17.1.1 數據屬性（數值）

1.[[Configurable]]: 表示能否通過delete將屬性刪除，能否把屬性修改為訪問器屬性, 默認為false。當把屬性Configurable設置為false后，該屬性不能通過delete刪除，并且也無法再將該屬性的Configurable設置回true
2.[[Enumerable]]: 表示屬性可否被枚舉(即是否可以通過for in循環返回)，默認false
3.[[Writable]]: 表示屬性是否可寫(即是否可以修改屬性的值)，默認false
4.[[Value]]: 該屬性的數據值, 默認是undefined

17.1.1 訪問器屬性（set/get操作）

1.[[Configurable]]: 表示能否通過delete將屬性刪除，能否把屬性修改為數據屬性, 默認為false。當把屬性Configurable設置為false后，該屬性不能通過delete刪除，并且也無法再將該屬性的Configurable設置回true
2.[[Enumerable]]: 表示屬性可否被枚舉(即是否可以通過for in循環返回)，默認false
3.[[Get]]: 讀取屬性時調用的函數, 默認為undefined
4.[[Set]]: 寫入屬性時調用的函數, 默認是undefined

總結

以上是生活随笔為你收集整理的前端试题(三)的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。