摘要：前言前兩天總結了一下方面的面試題傳送門，今天翻看了一些面試中常見的幾個問題只是一部分，會持續(xù)更新，分享給有需要的小伙伴，歡迎關注如果文章中有出現(xiàn)紕漏錯誤之處，還請看到的小伙伴留言指正，先行謝過以下有哪些數據類型種原始數據類型布爾表示一個邏輯

前兩天總結了一下HTML+CSS方面的面試題 (傳送門)，今天翻看了一些 JavaScript 面試中常見的幾個問題（只是一部分，會持續(xù)更新），分享給有需要的小伙伴，歡迎star關注

如果文章中有出現(xiàn)紕漏、錯誤之處，還請看到的小伙伴留言指正，先行謝過

以下 ↓

6種原始數據類型：

Boolean: 布爾表示一個邏輯實體，可以有兩個值：true 和 false

Number: 用于表示數字類型

String: 用于表示文本數據

Null: Null 類型只有一個值： null,特指對象的值未設置

Undefined: 一個沒有被賦值的變量會有個默認值 undefined

Symbol: 符號(Symbols)是ECMAScript第6版新定義的。符號類型是唯一的并且是不可修改的

引用類型：Object

詳見 JavaScript中的數據類型

typeof 操作符：返回一個字符串，表示未經計算的操作數的類型

typeof 操作符對于簡單數據類型，返回其本身的數據類型，函數對象返回 function ，其他對象均返回 Object
null 返回 Object

instanceof: 用來判斷A 是否是 B的實例，表達式為 A instanceof B，返回一個Boolean類型的值

instanceof 檢測的是原型,只能用來判斷兩個對象是否屬于實例關系， 而不能判斷一個對象實例具體屬于哪種類型

let a = [];
a instanceof Array  // true
a instanceof Object // true

變量a 的 __proto__  直接指向Array.prototype，間接指向 Object.prototype，所以按照 instanceof 的判斷規(guī)則，a 就是Object的實例.針對數組的這個問題，ES5 提供了 Array.isArray() 方法 。該方法用以確認某個對象本身是否為 Array 類型

constructor: 當一個函數被定義時，JS引擎會為其添加prototype原型，然后再在 prototype上添加一個 constructor 屬性，并讓其指向該函數的引用

null和undefined是無效的對象，因此是不會有constructor存在的，這兩種類型的數據需要通過其他方式來判斷
函數的constructor是不穩(wěn)定的，這個主要體現(xiàn)在自定義對象上，當開發(fā)者重寫prototype后，原有的constructor引用會丟失，constructor會默認為 Object

function F() {};
var f = new F;
f.constructor == F // true

F.prototype = {a: 1}
var f = new F
f.constructor == F // false 

在構造函數 F.prototype 沒有被重寫之前，構造函數 F 就是新創(chuàng)建的對象 f 的數據類型。當 F.prototype 被重寫之后，原有的 constructor 引用丟失, 默認為 Object
因此，為了規(guī)范開發(fā)，在重寫對象原型時一般都需要重新給 constructor 賦值，以保證對象實例的類型不被篡改

toString: Object 的原型方法，調用該方法，默認返回當前對象的 [[Class]] 。這是一個內部屬性，其格式為 [object Xxx] ，其中 Xxx 就是對象的類型

Object.prototype.toString.call("") ;   // [object String]
Object.prototype.toString.call(11) ;    // [object Number]
Object.prototype.toString.call(true) ; // [object Boolean]
Object.prototype.toString.call(Symbol()); //[object Symbol]
Object.prototype.toString.call(undefined) ; // [object Undefined]
Object.prototype.toString.call(null) ; // [object Null]
Object.prototype.toString.call(new Function()) ; // [object Function]
Object.prototype.toString.call([]) ; // [object Array]

null表示"沒有對象"，即該處不應該有值

典型用法：

作為函數的參數，表示該函數的參數不是對象

作為對象原型鏈的終點

undefined表示"缺少值"，就是此處應該有一個值，但是還沒有定義

典型用法：

變量被聲明了，但沒有賦值時，就等于undefined

調用函數時，應該提供的參數沒有提供，該參數等于undefined

對象沒有賦值的屬性，該屬性的值為undefined

函數沒有返回值時，默認返回undefined

詳見： undefined和null的區(qū)別-阮一峰

修改器方法：

pop(): 刪除數組的最后一個元素，并返回這個元素

push()：在數組的末尾增加一個或多個元素，并返回數組的新長度

reverse(): 顛倒數組中元素的排列順序

shift(): 刪除數組的第一個元素，并返回這個元素

unshift(): 在數組的開頭增加一個或多個元素，并返回數組的新長度

sort(): 對數組元素進行排序，并返回當前數組

splice(): 在任意的位置給數組添加或刪除任意個元素

訪問方法：

concat(): 返回一個由當前數組和其它若干個數組或者若干個非數組值組合而成的新數組

join(): 連接所有數組元素組成一個字符串

slice(): 抽取當前數組中的一段元素組合成一個新數組

indeOf(): 返回數組中第一個與指定值相等的元素的索引，如果找不到這樣的元素，則返回 -1

lastIndexOf(): 返回數組中最后一個（從右邊數第一個）與指定值相等的元素的索引，如果找不到這樣的元素，則返回 -1

迭代方法：

forEach(): 為數組中的每個元素執(zhí)行一次回調函數,最終返回 undefined

every(): 如果數組中的每個元素都滿足測試函數，則返回 true，否則返回 false

some(): 如果數組中至少有一個元素滿足測試函數，則返回 true，否則返回 false

filter(): 將所有在過濾函數中返回 true 的數組元素放進一個新數組中并返回

map(): 返回一個由回調函數的返回值組成的新數組

更多方法請參考 MDN 傳送門

對象字面量

var obj = {}

Object 構造函數

var obj = new Object()

工廠模式

function Person(name, age) {
    var o = new Object()
    o.name = name;
    o.age = age;
    o.say = function() {
        console.log(name)
    }
    return o
}

缺點： 每次通過Person創(chuàng)建對象的時候，所有的say方法都是一樣的，但是卻存儲了多次，浪費資源

構造函數模式

function Person(name, age) {
    this.name = name
    this.age = age
    this.say = function() {
        console.log(name)
    }
}
var person = new Person("hello", 18)

構造函數模式隱試的在最后返回return this 所以在缺少new的情況下，會將屬性和方法添加給全局對象，瀏覽器端就會添加給window對象,可以根據return this 的特性調用call或者apply指定this

原型模式

function Person() {}
Person.prototype.name = "hanmeimei";
Person.prototype.say = function() {
  alert(this.name);
}
Person.prototype.friends = ["lilei"];
var person = new Person();

實現(xiàn)了方法與屬性的共享，可以動態(tài)添加對象的屬性和方法。但是沒有辦法創(chuàng)建實例自己的屬性和方法，也沒有辦法傳遞參數

構造函數和原型組合

function Person(name, age) {
    this.name = name
    this.age = age
}
Person.prototype.say = function() {
    console.log(this.name)
}
var person = new Person("hello")

還有好幾種模式，感興趣的小伙伴可以參考 紅寶書，你們肯定知道的了！

淺拷貝

拷貝原對象引用

可以使用Array.prototype.slice()也可以完成對一個數組或者對象的淺拷貝

Object.assign()方法

深拷貝

最常用的方式就是 JSON.parse(JSON.stringify(目標對象)，缺點就是只能拷貝符合JSON數據標準類型的對象

詳見 JavaScript中的淺拷貝與深拷貝

簡單來說，閉包就是能夠讀取其他函數內部變量的函數

function Person() {
    var name = "hello"
    function say () {
        console.log(name)
    }
    return say()
}
Person() // hello

由于 JavaScript 特殊的作用域，函數外部無法直接讀取內部的變量，內部可以直接讀取外部的變量，從而就產生了閉包的概念

用途：

最大用處有兩個，一個是前面提到的可以讀取函數內部的變量，另一個就是讓這些變量的值始終保持在內存中

注意點：

由于閉包會使得函數中的變量都被保存在內存中，內存消耗很大，所以不能濫用閉包，否則會造成網頁的性能問題，在IE中可能導致內存泄露

詳見 JavaScript 中的閉包

首先明確一點，JavaScript是基于原型的

每個構造函數(constructor)都有一個原型對象(prototype),原型對象都包含一個指向構造函數的指針,而實例(instance)都包含一個指向原型對象的內部指針.

圖解：

每一個構造函數都擁有一個prototype屬性，這個屬性指向一個對象，也就是原型對象

原型對象默認擁有一個constructor屬性，指向指向它的那個構造函數

每個對象都擁有一個隱藏的屬性[[prototype]]，指向它的原型對象

那么什么是原型鏈：

JavaScript中所有的對象都是由它的原型對象繼承而來。而原型對象自身也是一個對象，它也有自己的原型對象，這樣層層上溯，就形成了一個類似鏈表的結構，這就是原型鏈
所有原型鏈的終點都是Object函數的prototype屬性。Objec.prototype指向的原型對象同樣擁有原型，不過它的原型是null，而null則沒有原型

詳見 JavaScript中的原型與原型鏈

原型鏈繼承

function Animal() {}
Animal.prototype.name = "cat"
Animal.prototype.age = 1
Animal.prototype.say = function() {console.log("hello")}

var cat = new Animal()

cat.name  // cat
cat.age  // 1
cat.say() // hello

最簡單的繼承實現(xiàn)方式，但是也有其缺點

來自原型對象的所有屬性被所有實例共享

創(chuàng)建子類實例時，無法向父類構造函數傳參

要想為子類新增屬性和方法，必須要在new語句之后執(zhí)行，不能放到構造器中

構造繼承

function Animal() {
    this.species = "動物"
}
function Cat(name, age) {
    Animal.call(this)
    this.name = name 
    this.age = age
}

var cat = new Cat("豆豆", 2)

cat.name  // 豆豆
cat.age // 2
cat.species // 動物

使用call或apply方法，將父對象的構造函數綁定在子對象上.

組合繼承

function Animal() {
    this.species = "動物"
}

function Cat(name){
  Animal.call(this)
  this.name = name
}

Cat.prototype = new Animal() // 重寫原型
Cat.prototype.constructor = Cat

如果沒有Cat.prototype = new Animal()這一行，Cat.prototype.constructor是指向Cat的；加了這一行以后，Cat.prototype.constructor指向Animal.這顯然會導致繼承鏈的紊亂（cat1明明是用構造函數Cat生成的），因此我們必須手動糾正，將Cat.prototype對象的constructor值改為Cat

extends 繼承

ES6新增繼承方式，Class 可以通過extends關鍵字實現(xiàn)繼承

class Animal {
    
}

class Cat extends Animal {
    constructor() {
        super();
  }
}

使用 extends 實現(xiàn)繼承，必須添加 super 關鍵字定義子類的 constructor，這里的super() 就相當于 Animal.prototype.constructor.call(this)

當然，還有很多種實現(xiàn)繼承的方式，這里就不多說了。然后，再推薦一波 紅寶書

詳見 JavaScript中的繼承

創(chuàng)建一個空對象，并且 this 變量引用該對象，同時還繼承了該函數的原型

屬性和方法被加入到 this 引用的對象中

新創(chuàng)建的對象由 this 所引用，并且最后隱式的返回 this

這里現(xiàn)在只是JavaScript 面試題中的一部分，后面是持續(xù)更新， 有需要的小伙伴可以關注哦
好了，周末愉快 [??！結束了……]