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

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

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

以下 ↓

6種原始數(shù)據(jù)類型：

Boolean: 布爾表示一個(gè)邏輯實(shí)體，可以有兩個(gè)值：true 和 false

Number: 用于表示數(shù)字類型

String: 用于表示文本數(shù)據(jù)

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

Undefined: 一個(gè)沒有被賦值的變量會(huì)有個(gè)默認(rèn)值 undefined

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

引用類型：Object

詳見 JavaScript中的數(shù)據(jù)類型

typeof 操作符：返回一個(gè)字符串，表示未經(jīng)計(jì)算的操作數(shù)的類型

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

instanceof: 用來判斷A 是否是 B的實(shí)例，表達(dá)式為 A instanceof B，返回一個(gè)Boolean類型的值

instanceof 檢測的是原型,只能用來判斷兩個(gè)對象是否屬于實(shí)例關(guān)系， 而不能判斷一個(gè)對象實(shí)例具體屬于哪種類型

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

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

constructor: 當(dāng)一個(gè)函數(shù)被定義時(shí)，JS引擎會(huì)為其添加prototype原型，然后再在 prototype上添加一個(gè) constructor 屬性，并讓其指向該函數(shù)的引用

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

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

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

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

toString: Object 的原型方法，調(diào)用該方法，默認(rèn)返回當(dāng)前對象的 [[Class]] 。這是一個(gè)內(nèi)部屬性，其格式為 [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表示"沒有對象"，即該處不應(yīng)該有值

典型用法：

作為函數(shù)的參數(shù)，表示該函數(shù)的參數(shù)不是對象

作為對象原型鏈的終點(diǎn)

undefined表示"缺少值"，就是此處應(yīng)該有一個(gè)值，但是還沒有定義

典型用法：

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

調(diào)用函數(shù)時(shí)，應(yīng)該提供的參數(shù)沒有提供，該參數(shù)等于undefined

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

函數(shù)沒有返回值時(shí)，默認(rèn)返回undefined

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

修改器方法：

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

push()：在數(shù)組的末尾增加一個(gè)或多個(gè)元素，并返回?cái)?shù)組的新長度

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

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

unshift(): 在數(shù)組的開頭增加一個(gè)或多個(gè)元素，并返回?cái)?shù)組的新長度

sort(): 對數(shù)組元素進(jìn)行排序，并返回當(dāng)前數(shù)組

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

訪問方法：

concat(): 返回一個(gè)由當(dāng)前數(shù)組和其它若干個(gè)數(shù)組或者若干個(gè)非數(shù)組值組合而成的新數(shù)組

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

slice(): 抽取當(dāng)前數(shù)組中的一段元素組合成一個(gè)新數(shù)組

indeOf(): 返回?cái)?shù)組中第一個(gè)與指定值相等的元素的索引，如果找不到這樣的元素，則返回 -1

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

迭代方法：

forEach(): 為數(shù)組中的每個(gè)元素執(zhí)行一次回調(diào)函數(shù),最終返回 undefined

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

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

filter(): 將所有在過濾函數(shù)中返回 true 的數(shù)組元素放進(jìn)一個(gè)新數(shù)組中并返回

map(): 返回一個(gè)由回調(diào)函數(shù)的返回值組成的新數(shù)組

更多方法請參考 MDN 傳送門

對象字面量

var obj = {}

Object 構(gòu)造函數(shù)

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
}

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

構(gòu)造函數(shù)模式

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

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

原型模式

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

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

構(gòu)造函數(shù)和原型組合

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()也可以完成對一個(gè)數(shù)組或者對象的淺拷貝

Object.assign()方法

深拷貝

最常用的方式就是 JSON.parse(JSON.stringify(目標(biāo)對象)，缺點(diǎn)就是只能拷貝符合JSON數(shù)據(jù)標(biāo)準(zhǔn)類型的對象

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

簡單來說，閉包就是能夠讀取其他函數(shù)內(nèi)部變量的函數(shù)

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

由于 JavaScript 特殊的作用域，函數(shù)外部無法直接讀取內(nèi)部的變量，內(nèi)部可以直接讀取外部的變量，從而就產(chǎn)生了閉包的概念

用途：

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

注意點(diǎn)：

由于閉包會(huì)使得函數(shù)中的變量都被保存在內(nèi)存中，內(nèi)存消耗很大，所以不能濫用閉包，否則會(huì)造成網(wǎng)頁的性能問題，在IE中可能導(dǎo)致內(nèi)存泄露

詳見 JavaScript 中的閉包

首先明確一點(diǎn)，JavaScript是基于原型的

每個(gè)構(gòu)造函數(shù)(constructor)都有一個(gè)原型對象(prototype),原型對象都包含一個(gè)指向構(gòu)造函數(shù)的指針,而實(shí)例(instance)都包含一個(gè)指向原型對象的內(nèi)部指針.

圖解：

每一個(gè)構(gòu)造函數(shù)都擁有一個(gè)prototype屬性，這個(gè)屬性指向一個(gè)對象，也就是原型對象

原型對象默認(rèn)擁有一個(gè)constructor屬性，指向指向它的那個(gè)構(gòu)造函數(shù)

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

那么什么是原型鏈：

JavaScript中所有的對象都是由它的原型對象繼承而來。而原型對象自身也是一個(gè)對象，它也有自己的原型對象，這樣層層上溯，就形成了一個(gè)類似鏈表的結(jié)構(gòu)，這就是原型鏈
所有原型鏈的終點(diǎn)都是Object函數(shù)的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

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

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

創(chuàng)建子類實(shí)例時(shí)，無法向父類構(gòu)造函數(shù)傳參

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

構(gòu)造繼承

function Animal() {
    this.species = "動(dòng)物"
}
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 // 動(dòng)物

使用call或apply方法，將父對象的構(gòu)造函數(shù)綁定在子對象上.

組合繼承

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

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.這顯然會(huì)導(dǎo)致繼承鏈的紊亂（cat1明明是用構(gòu)造函數(shù)Cat生成的），因此我們必須手動(dòng)糾正，將Cat.prototype對象的constructor值改為Cat

extends 繼承

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

class Animal {
    
}

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

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

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

詳見 JavaScript中的繼承

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

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

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

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