js基礎(chǔ)面試題1-10道

1.document load 和 document ready 的區(qū)別

平武ssl適用于網(wǎng)站、小程序/APP、API接口等需要進(jìn)行數(shù)據(jù)傳輸應(yīng)用場景，ssl證書未來市場廣闊！成為創(chuàng)新互聯(lián)的ssl證書銷售渠道，可以享受市場價(jià)格4-6折優(yōu)惠！如果有意向歡迎電話聯(lián)系或者加微信：18980820575（備注：SSL證書合作）期待與您的合作！

參考答案：文檔解析過程中，ready在加載圖片等外部資源前觸發(fā)，load在之后觸發(fā)。如果頁面中要是沒有圖片之類的媒體文件的話ready與load是差不多的，但是頁面中有文件就不一樣了，所以還是推薦大家在工作中用ready

解析：

DOM文檔解析：

頁面加載完成有兩種事件

1.load是當(dāng)頁面所有資源全部加載完成后（包括DOM文檔樹，css文件，js文件，圖片資源等），執(zhí)行一個(gè)函數(shù)

缺點(diǎn)：如果圖片資源較多，加載時(shí)間較長，onload后等待執(zhí)行的函數(shù)需要等待較長時(shí)間，所以一些效果可能受到影響

代碼形式：

2.$(document).ready()是當(dāng)DOM文檔樹加載完成后執(zhí)行一個(gè)函數(shù) （不包含圖片，css等）所以會比load較快執(zhí)行

在原生的jS中不包括ready()這個(gè)方法，Jquery才有，jquery中有 $().ready(function)。

代碼形式為：

參與互動

2.JavaScript 中如何檢測一個(gè)變量是一個(gè) String 類型？

參考答案：三種方法（typeof、constructor、Object.prototype.toString.call()）

解析：

參與互動

3.請用 js 去除字符串空格？

參考答案：replace 正則匹配方法、str.trim()方法、JQ 方法：$.trim(str)方法

解析：

方法一：replace 正則匹配方法

去除字符串內(nèi)所有的空格：str = str.replace(/s*/g, "");

去除字符串內(nèi)兩頭的空格：str = str.replace(/^s*|s*$/g, "");

去除字符串內(nèi)左側(cè)的空格：str = str.replace(/^s*/, "");

去除字符串內(nèi)右側(cè)的空格：str = str.replace(/(s*$)/g, "");

示例：

方法二：str.trim()方法

trim()方法是用來刪除字符串兩端的空白字符并返回，trim 方法并不影響原來的字符串本身，它返回的是一個(gè)新的字符串。

缺陷：只能去除字符串兩端的空格，不能去除中間的空格

示例：

方法三：JQ 方法：$.trim(str)方法

$.trim() 函數(shù)用于去除字符串兩端的空白字符。

注意：$.trim()函數(shù)會移除字符串開始和末尾處的所有換行符，空格(包括連續(xù)的空格)和制表符。如果這些空白字符在字符串中間時(shí)，它們將被保留，不會被移除。

示例：

參與互動

4.js 是一門怎樣的語言，它有什么特點(diǎn)

參考答案：

1.腳本語言。JavaScript 是一種解釋型的腳本語言, C、C++等語言先編譯后執(zhí)行, 而 JavaScript 是在程序的運(yùn)行過程中逐行進(jìn)行解釋。

2.基于對象。JavaScript 是一種基于對象的腳本語言, 它不僅可以創(chuàng)建對象, 也能使用現(xiàn)有的對象。

3.簡單。JavaScript 語言中采用的是弱類型的變量類型, 對使用的數(shù)據(jù)類型未做出嚴(yán)格的要求, 是基于 Java 基本語句和控制的腳本語言, 其設(shè)計(jì)簡單緊湊。

4.動態(tài)性。JavaScript 是一種采用事件驅(qū)動的腳本語言, 它不需要經(jīng)過 Web 服務(wù)器就可以對用戶的輸入做出響應(yīng)。

5.跨平臺性。JavaScript 腳本語言不依賴于操作系統(tǒng), 僅需要瀏覽器的支持。

參與互動

5.== 和 === 的不同

參考答案： == 是抽象相等運(yùn)算符，而 === 是嚴(yán)格相等運(yùn)算符。 == 運(yùn)算符是在進(jìn)行必要的類型轉(zhuǎn)換后，再比較。 === 運(yùn)算符不會進(jìn)行類型轉(zhuǎn)換，所以如果兩個(gè)值不是相同的類型，會直接返回 false 。使用 == 時(shí)，可能發(fā)生一些特別的事情，例如：

如果你對 == 和 === 的概念不是特別了解，建議大多數(shù)情況下使用 ===

參與互動

6.怎樣添加、移除、移動、復(fù)制、創(chuàng)建和查找節(jié)點(diǎn)？

參考答案：

1）創(chuàng)建新節(jié)點(diǎn)

2）添加、移除、替換、插入

3）查找

參與互動

7.事件委托是什么

參考答案：利用事件冒泡的原理，讓自己的所觸發(fā)的事件，讓他的父元素代替執(zhí)行！

解析：

1、那什么樣的事件可以用事件委托，什么樣的事件不可以用呢？

2、為什么要用事件委托

3、事件冒泡與事件委托的對比

4、事件委托怎么取索引？

拓展：

參考

參與互動

8.require 與 import 的區(qū)別

參考答案：兩者的加載方式不同、規(guī)范不同

第一、兩者的加載方式不同，require 是在運(yùn)行時(shí)加載，而 import 是在編譯時(shí)加載

require('./a')(); // a 模塊是一個(gè)函數(shù)，立即執(zhí)行 a 模塊函數(shù)

var data = require('./a').data; // a 模塊導(dǎo)出的是一個(gè)對象

var a = require('./a')[0]; // a 模塊導(dǎo)出的是一個(gè)數(shù)組 ====== 哪都行

import $ from 'jquery';

import * as _ from '_';

import {a, b, c} from './a';

import {default as alias, a as a_a, b, c} from './a'; ======用在開頭

第二、規(guī)范不同，require 是 CommonJS/AMD 規(guī)范，import 是 ESMAScript6+規(guī)范

第三、require 特點(diǎn)：社區(qū)方案，提供了服務(wù)器/瀏覽器的模塊加載方案。非語言層面的標(biāo)準(zhǔn)。只能在運(yùn)行時(shí)確定模塊的依賴關(guān)系及輸入/輸出的變量，無法進(jìn)行靜態(tài)優(yōu)化。

import 特點(diǎn)：語言規(guī)格層面支持模塊功能。支持編譯時(shí)靜態(tài)分析，便于 JS 引入宏和類型檢驗(yàn)。動態(tài)綁定。

參與互動

9.javascript 對象的幾種創(chuàng)建方式

參考答案：

第一種：Object 構(gòu)造函數(shù)創(chuàng)建

這行代碼創(chuàng)建了 Object 引用類型的一個(gè)新實(shí)例，然后把實(shí)例保存在變量 Person 中。

第二種：使用對象字面量表示法

對象字面量是對象定義的一種簡寫形式，目的在于簡化創(chuàng)建包含大量屬性的對象的過程。也就是說，第一種和第二種方式創(chuàng)建對象的方法其實(shí)都是一樣的，只是寫法上的區(qū)別不同

在介紹第三種的創(chuàng)建方法之前，我們應(yīng)該要明白為什么還要用別的方法來創(chuàng)建對象，也就是第一種，第二種方法的缺點(diǎn)所在：它們都是用了同一個(gè)接口創(chuàng)建很多對象，會產(chǎn)生大量的重復(fù)代碼，就是如果你有 100 個(gè)對象，那你要輸入 100 次很多相同的代碼。那我們有什么方法來避免過多的重復(fù)代碼呢，就是把創(chuàng)建對象的過程封裝在函數(shù)體內(nèi)，通過函數(shù)的調(diào)用直接生成對象。

第三種：使用工廠模式創(chuàng)建對象

在使用工廠模式創(chuàng)建對象的時(shí)候，我們都可以注意到，在 createPerson 函數(shù)中，返回的是一個(gè)對象。那么我們就無法判斷返回的對象究竟是一個(gè)什么樣的類型。于是就出現(xiàn)了第四種創(chuàng)建對象的模式。

第四種: 使用構(gòu)造函數(shù)創(chuàng)建對象

對比工廠模式，我們可以發(fā)現(xiàn)以下區(qū)別：

1.沒有顯示地創(chuàng)建對象

2.直接將屬性和方法賦給了 this 對象

3.沒有 return 語句

4.終于可以識別的對象的類型。對于檢測對象類型，我們應(yīng)該使用 instanceof 操作符，我們來進(jìn)行自主檢測：

同時(shí)我們也應(yīng)該明白，按照慣例，構(gòu)造函數(shù)始終要應(yīng)該以一個(gè)大寫字母開頭，而非構(gòu)造函數(shù)則應(yīng)該以一個(gè)小寫字母開頭。

那么構(gòu)造函數(shù)確實(shí)挺好用的，但是它也有它的缺點(diǎn)：

就是每個(gè)方法都要在每個(gè)實(shí)例上重新創(chuàng)建一遍，方法指的就是我們在對象里面定義的函數(shù)。如果方法的數(shù)量很多，就會占用很多不必要的內(nèi)存。于是出現(xiàn)了第五種創(chuàng)建對象的方法

第五種：原型創(chuàng)建對象模式

使用原型創(chuàng)建對象的方式，可以讓所有對象實(shí)例共享它所包含的屬性和方法。

如果是使用原型創(chuàng)建對象模式，請看下面代碼：

當(dāng)為對象實(shí)例添加一個(gè)屬性時(shí)，這個(gè)屬性就會屏蔽原型對象中保存的同名屬性。

這時(shí)候我們就可以使用構(gòu)造函數(shù)模式與原型模式結(jié)合的方式，構(gòu)造函數(shù)模式用于定義實(shí)例屬性，而原型模式用于定義方法和共享的屬性

第六種：組合使用構(gòu)造函數(shù)模式和原型模式

解析： 參考

參與互動

10.JavaScript 繼承的方式和優(yōu)缺點(diǎn)

參考答案：六種方式

js面試題

1.eventLoop

2.setTimeout 誤差原因

3.深淺拷貝

4.跨域原因及解決方案

5.css放在頭部，js放在尾部

6.css觸發(fā)bfc

7.webpack plugin和loader區(qū)別

8.前端優(yōu)化

9.協(xié)商緩存

10.長列表優(yōu)化

11.webview交互

12.vue響應(yīng)式原理

13.原型

14.算法題：數(shù)組中有n個(gè)元素，排列

EventLoop是計(jì)算機(jī)系統(tǒng)的運(yùn)行機(jī)制，js就是運(yùn)行這個(gè)機(jī)制，因?yàn)閖s是單線程語言，所以一旦遇到一個(gè)耗時(shí)很長的任務(wù)就會卡住，js為了解決這個(gè)問題就有了EventLoop

Event Loop是一個(gè)程序結(jié)構(gòu)，用于等待和發(fā)送消息和事件。

就是在程序中有了兩個(gè)線程，一個(gè)負(fù)責(zé)應(yīng)用本身，主線程，另一個(gè)負(fù)責(zé)主線程和其它進(jìn)程，稱為EventLoop

1、js是單線程語言

基本數(shù)據(jù)類型存放在棧中的簡單數(shù)據(jù)段

引用數(shù)據(jù)類型存放在堆中的對象

因?yàn)槎〞r(shí)器是宏任務(wù)，如果執(zhí)行棧的時(shí)間大于定時(shí)器花費(fèi)的時(shí)間，那么定時(shí)器的回調(diào)在 宏任務(wù)(macrotask) 里，來不及去調(diào)用，所有這個(gè)時(shí)間會有誤差。所以就會有誤差

宏任務(wù)是宿主發(fā)起的比如script,setTimeout

css放在頭部是因?yàn)轫撁婕虞dhtml生成dom樹的時(shí)候就可以同時(shí)對dom樹進(jìn)行渲染，防止閃跳，白屏

js放在尾部是因?yàn)閖s會修改dom樹，需要一個(gè)穩(wěn)定的dom樹

BFC是css的一個(gè)布局概念，塊級格式化上下文

浮動float不為none的時(shí)候

定位為position:absolute和fixed的

display的時(shí)候

overflow不為visible

解決浮動父元素坍塌問題

解決自適應(yīng)布局的問題

解決外邊距垂直方向重合問題

loader是文件加載器，運(yùn)行在nodejs中，并對文件進(jìn)行打包，壓縮轉(zhuǎn)換

plugin是插件，用于拓展webpack的功能

淺拷貝有兩種定于，第一種是賦值，第二種是拷貝對象的第一層屬性，深層還是一樣的

深拷貝是指將對象拷貝一份，無論如何修改都不會改變原有的

響應(yīng)式原理就是當(dāng)數(shù)據(jù)發(fā)生改變的時(shí)候視圖也會跟著更新

VUE是利用了Object.defineProperty的方法里面的setter 與getter方法的觀察者模式來實(shí)現(xiàn)。

js基礎(chǔ)面試題71-80道題目

71.IE 和標(biāo)準(zhǔn)下有哪些兼容性的寫法

參考答案：

參與互動

72.變量提升

參考答案：

A、js 代碼執(zhí)行的過程

B、變量提升發(fā)生的環(huán)境：發(fā)生在代碼所處的當(dāng)前作用域。

解析：

對應(yīng)面試題

參與互動

73.如何阻止冒泡與默認(rèn)行為

參考答案：

解析：

當(dāng)需要阻止冒泡行為時(shí)，可以使用

當(dāng)需要阻止默認(rèn)行為時(shí)，可以使用

參與互動

74.js 中 this 閉包 作用域

參考答案：

this：指向調(diào)用上下文

閉包：定義一個(gè)函數(shù)就開辟了一個(gè)局部作用域，整個(gè) js 執(zhí)行環(huán)境有一個(gè)全局作用域

作用域：一個(gè)函數(shù)可以訪問其他函數(shù)中的變量（閉包是一個(gè)受保護(hù)的變量空間）

參與互動

75.javascript 的本地對象，內(nèi)置對象和宿主對象

參考答案：

1.本地對象

ECMA-262 把本地對象（native object）定義為“獨(dú)立于宿主環(huán)境的 ECMAScript 實(shí)現(xiàn)提供的對象"。簡單來說，本地對象就是 ECMA-262 定義的類（引用類型）。它們包括：Object、Function、Array、String、Boolean、Number、Date、RegExp、Error、EvalError、RangeError、ReferenceError、SyntaxError、TypeError、URIError

2.內(nèi)置對象

JS中內(nèi)置了17個(gè)對象，常用的是Array對象、Date對象、正則表達(dá)式對象、string對象、Global對象

3.宿主對象

由ECMAScript實(shí)現(xiàn)的宿主環(huán)境提供的對象，可以理解為：瀏覽器提供的對象。所有的BOM和DOM都是宿主對象。

參與互動

76.javascript 的同源策略

參考答案：一段腳本只能讀取來自于同一來源的窗口和文檔的屬性

解析：

同源策略：限制從一個(gè)源加載的文檔或腳本如何與來自另一個(gè)源的資源進(jìn)行交互。這是一個(gè)用于隔離潛在惡意文件的關(guān)鍵的安全機(jī)制。（來自 MDN 官方的解釋）

簡單來說就是：一段腳本只能讀取來自于同一來源的窗口和文檔的屬性，這里的同一來源指的是主機(jī)名、協(xié)議和端口號的組合 具體解釋：

（1）源包括三個(gè)部分：協(xié)議、域名、端口（http 協(xié)議的默認(rèn)端口是 80）。如果有任何一個(gè)部分不同，則源不同，那就是跨域了。

（2）限制：這個(gè)源的文檔沒有權(quán)利去操作另一個(gè)源的文檔。這個(gè)限制體現(xiàn)在：（要記住）

Cookie、LocalStorage 和 IndexDB 無法獲取。

無法獲取和操作 DOM。

不能發(fā)送 Ajax 請求。我們要注意，Ajax 只適合同源的通信。

同源策略帶來的麻煩：ajax 在不同域名下的請求無法實(shí)現(xiàn)，需要進(jìn)行跨域操作

參與互動

77.事件冒泡與事件捕獲

參考答案：

事件冒泡：由最具體的元素（目標(biāo)元素）向外傳播到最不具體的元素

事件捕獲：由最不確定的元素到目標(biāo)元素

參與互動

78.foo = foo||bar ，這行代碼是什么意思？為什么要這樣寫？

參考答案：

這種寫法稱為短路表達(dá)式

解析：

相當(dāng)于

常用于函數(shù)參數(shù)的空判斷

參與互動

79.復(fù)雜數(shù)據(jù)類型如何轉(zhuǎn)變?yōu)樽址?/p>

參考答案：

參與互動

80.javascript 中 this 的指向問題

參考答案：

解析：

全局環(huán)境下，this 始終指向全局對象（window），無論是否嚴(yán)格模式；

2.1 普通函數(shù)

普通函數(shù)內(nèi)部的 this 分兩種情況，嚴(yán)格模式和非嚴(yán)格模式。

（1）非嚴(yán)格模式下，沒有被上一級的對象所調(diào)用, this 默認(rèn)指向全局對象 window。

（2）嚴(yán)格模式下，this 指向 undefined。

2.2 函數(shù)作為對象的方法

（1）函數(shù)有被上一級的對象所調(diào)用，那么 this 指向的就是上一級的對象。

（2）多層嵌套的對象，內(nèi)部方法的 this 指向離被調(diào)用函數(shù)最近的對象（window 也是對象，其內(nèi)部對象調(diào)用方法的 this 指向內(nèi)部對象， 而非 window）。

特殊例子

2.3 原型鏈中的 this

（1）如果該方法存在于一個(gè)對象的原型鏈上，那么 this 指向的是調(diào)用這個(gè)方法的對象，就像該方法在對象上一樣。

上述例子中，對象 p 沒有屬于它自己的 f 屬性，它的 f 屬性繼承自它的原型。當(dāng)執(zhí)行 p.f()時(shí)，會查找 p 的原型鏈，找到 f 函數(shù)并執(zhí)行。因?yàn)?f 是作為 p 的方法調(diào)用的，所以函數(shù)中的 this 指向 p。

（2）相同的概念也適用于當(dāng)函數(shù)在一個(gè) getter 或者 setter 中被調(diào)用。用作 getter 或 setter 的函數(shù)都會把 this 綁定到設(shè)置或獲取屬性的對象。

（3）call()和 apply()方法：當(dāng)函數(shù)通過 Function 對象的原型中繼承的方法 call() 和 apply() 方法調(diào)用時(shí)， 其函數(shù)內(nèi)部的 this 值可綁定到 call() apply() 方法指定的第一個(gè)對象上， 如果第一個(gè)參數(shù)不是對象，JavaScript 內(nèi)部會嘗試將其轉(zhuǎn)換成對象然后指向它。

（4）bind()方法：由 ES5 引入， 在 Function 的原型鏈上， Function.prototype.bind。通過 bind 方法綁定后， 函數(shù)將被永遠(yuǎn)綁定在其第一個(gè)參數(shù)對象上， 而無論其在什么情況下被調(diào)用。

2.4 構(gòu)造函數(shù)中的 this

當(dāng)一個(gè)函數(shù)用作構(gòu)造函數(shù)時(shí)（使用 new 關(guān)鍵字），它的 this 被綁定到正在構(gòu)造的新對象。

構(gòu)造器返回的默認(rèn)值是 this 所指的那個(gè)對象，也可以手動返回其他的對象。

特殊例子

當(dāng) this 碰到 return 時(shí)

2.5 setTimeout setInterval

（1）對于延時(shí)函數(shù)內(nèi)部的回調(diào)函數(shù)的 this 指向全局對象 window；

（2）可以通過 bind()方法改變內(nèi)部函數(shù) this 指向。

3.1 作為一個(gè) DOM 事件處理函數(shù)

當(dāng)函數(shù)被用作事件處理函數(shù)時(shí)，它的 this 指向觸發(fā)事件的元素（針對 addEventListener 事件）。

3.2 作為一個(gè)內(nèi)聯(lián)事件處理函數(shù)

（1）當(dāng)代碼被內(nèi)聯(lián)處理函數(shù)調(diào)用時(shí)，它的 this 指向監(jiān)聽器所在的 DOM 元素；

（2）當(dāng)代碼被包括在函數(shù)內(nèi)部執(zhí)行時(shí)，其 this 指向等同于 普通函數(shù)直接調(diào)用的情況，即在非嚴(yán)格模式指向全局對象 window，在嚴(yán)格模式指向 undefined：

4.1 全局環(huán)境中

在全局代碼中，箭頭函數(shù)被設(shè)置為全局對象：

4.2 this 捕獲上下文

箭頭函數(shù)沒有自己的 this，而是使用箭頭函數(shù)所在的作用域的 this，即指向箭頭函數(shù)定義時(shí)（而不是運(yùn)行時(shí)）所在的作用域。

4.2 this 捕獲上下文

箭頭函數(shù)沒有自己的 this，而是使用箭頭函數(shù)所在的作用域的 this，即指向箭頭函數(shù)定義時(shí)（而不是運(yùn)行時(shí)）所在的作用域。

在 setTimeout 中的 this 指向了構(gòu)造函數(shù)新生成的對象，而普通函數(shù)指向了全局 window 對象。

4.3 箭頭函數(shù)作為對象的方法使用

箭頭函數(shù)作為對象的方法使用，指向全局 window 對象；而普通函數(shù)作為對象的方法使用，則指向調(diào)用的對象。

4.4 箭頭函數(shù)中，call()、apply()、bind()方法無效

4.5 this 指向固定化

箭頭函數(shù)可以讓 this 指向固定化，這種特性很有利于封裝回調(diào)函數(shù)

上面代碼的 init 方法中，使用了箭頭函數(shù)，這導(dǎo)致這個(gè)箭頭函數(shù)里面的 this，總是指向 handler 對象。如果不使用箭頭函數(shù)則指向全局 document 對象。

4.6 箭頭函是不適用場景

（1）箭頭函數(shù)不適合定義對象的方法（方法內(nèi)有 this），因?yàn)榇藭r(shí)指向 window；

（2）需要動態(tài) this 的時(shí)候，也不應(yīng)使用箭頭函數(shù)。

參與互動

JS 燒腦面試題大賞

答案

2、1

解析

首先基本類型數(shù)據(jù)是按值傳遞的，所以執(zhí)行b函數(shù)時(shí)，b的參數(shù)a接收的值為1，參數(shù)a相當(dāng)于函數(shù)內(nèi)部的變量，當(dāng)本作用域有和上層作用域同名的變量時(shí)，無法訪問到上層變量，所以函數(shù)內(nèi)無論怎么修改a，都不影響上層，所以函數(shù)內(nèi)部打印的a是2，外面打印的仍是1。

答案

報(bào)錯(cuò)

解析

給函數(shù)多個(gè)參數(shù)設(shè)置默認(rèn)值實(shí)際上跟按順序定義變量一樣，所以會存在暫時(shí)性死區(qū)的問題，即前面定義的變量不能引用后面還未定義的變量，而后面的可以訪問前面的。

答案

10、20

解析

答案

undefined、{n: 2}

解析

恕筆者不才，這道題筆者做一次錯(cuò)一次。

反正按照網(wǎng)上大部分的解釋是因?yàn)?運(yùn)算符優(yōu)先級最高，所以會先執(zhí)行a.x，此時(shí)a、b共同指向的{n: 1}變成了{(lán)n: 1, x: undefined}，然后按照連等操作從右到左執(zhí)行代碼，a = {n: 2}，顯然，a現(xiàn)在指向了一個(gè)新對象，然后a.x = a，因?yàn)閍.x最開始就執(zhí)行過了，所以這里其實(shí)等價(jià)于：({n: 1, x: undefined}).x = b.x = a = {n: 2}。

答案

[]

解析

這題比較簡單，arr[10]=10，那么索引3到9位置上都是undefined，arr[3]等打印出來也確實(shí)是undefined，但是，這里其實(shí)涉及到ECMAScript版本不同對應(yīng)方法行為不同的問題，ES6之前的遍歷方法都會跳過數(shù)組未賦值過的位置，也就是空位，但是ES6新增的for of方法就不會跳過。

答案

Goodbye Jack

解析

答案

NaN、13、NaN、1、1[object Object]、1、[object Object]

解析

這道題考察的顯然是+號的行為：

1.如果有一個(gè)操作數(shù)是字符串，那么把另一個(gè)操作數(shù)轉(zhuǎn)成字符串執(zhí)行連接

2.如果有一個(gè)操作數(shù)是對象，那么調(diào)用對象的valueOf方法轉(zhuǎn)成原始值，如果沒有該方法或調(diào)用后仍是非原始值，則調(diào)用toString方法

3.其他情況下，兩個(gè)操作數(shù)都會被轉(zhuǎn)成數(shù)字執(zhí)行加法操作

答案

456

解析

對象有兩種方法設(shè)置和引用屬性，obj.name和obj['name']，方括號里可以字符串、數(shù)字和變量設(shè)置是表達(dá)式等，但是最終計(jì)算出來得是一個(gè)字符串，對于上面的b和c，它們兩個(gè)都是對象，所以會調(diào)用toString()方法轉(zhuǎn)成字符串，對象轉(zhuǎn)成字符串和數(shù)組不一樣，和內(nèi)容無關(guān)，結(jié)果都是[object Obejct]，所以a[b]=a[c]=a['[object Object]']。

答案

25、20、20、25

解析

這道題考察的是this指向問題：

1.逗號操作符會返回表達(dá)式中的最后一個(gè)值，這里為inner.func對應(yīng)的函數(shù)，注意是函數(shù)本身，然后執(zhí)行該函數(shù)，該函數(shù)并不是通過對象的方法調(diào)用，而是在全局環(huán)境下調(diào)用，所以this指向window，打印出來的當(dāng)然是window下的out

2.這個(gè)顯然是以對象的方法調(diào)用，那么this指向該對象

3.加了個(gè)括號，看起來有點(diǎn)迷惑人，但實(shí)際上(inner.func)和inner.func是完全相等的，所以還是作為對象的方法調(diào)用

4.賦值表達(dá)式和逗號表達(dá)式相似，都是返回的值本身，所以也相對于在全局環(huán)境下調(diào)用函數(shù)

答案

1、2、3

解析

這題考察的是變量解構(gòu)賦值的問題，數(shù)組解構(gòu)賦值是按位置對應(yīng)的，而對象只要變量與屬性同名，順序隨意。

答案

[4, 5, 3]

解析

是不是從來沒有用assign方法合并過數(shù)組？assign方法可以用于處理數(shù)組，不過會把數(shù)組視為對象，比如這里會把目標(biāo)數(shù)組視為是屬性為0、1、2的對象，所以源數(shù)組的0、1屬性的值覆蓋了目標(biāo)對象的值。

答案

4

解析

這題考查的是自增運(yùn)算符的前綴版和后綴版，以及switch的語法，后綴版的自增運(yùn)算符會在語句被求值后才發(fā)生，所以x會仍以1的值去匹配case分支，那么顯然匹配到為1的分支，此時(shí)，x++生效，x變成2，再執(zhí)行++x，變成3，因?yàn)闆]有break語句，所以會進(jìn)入當(dāng)前case后面的分支，所以再次++x，最終變成4。

答案

true、true

解析

2.typeof對函數(shù)使用返回'function'，class只是es6新增的語法糖，本質(zhì)上還是函數(shù)，所以兩者相等

答案

true、false

解析

1.沒啥好說的，typeof對數(shù)字類型返回'number'。

2.這題考查的是運(yùn)算符優(yōu)先級的問題，邏輯非!的優(yōu)先級比全等===高，所以先執(zhí)行!!typeof count，結(jié)果為true，然后執(zhí)行true === 'number'，結(jié)果當(dāng)然為false，可以點(diǎn)擊這里查看優(yōu)先級列表： 點(diǎn)我 [1] 。

答案

2、2

解析

答案

1

解析

這道題考察的是作用域的問題，作用域其實(shí)就是一套變量的查找規(guī)則，每個(gè)函數(shù)在執(zhí)行時(shí)都會創(chuàng)建一個(gè)執(zhí)行上下文，其中會關(guān)聯(lián)一個(gè)變量對象，也就是它的作用域，上面保存著該函數(shù)能訪問的所有變量，另外上下文中的代碼在執(zhí)行時(shí)還會創(chuàng)建一個(gè)作用域鏈，如果某個(gè)標(biāo)識符在當(dāng)前作用域中沒有找到，會沿著外層作用域繼續(xù)查找，直到最頂端的全局作用域，因?yàn)閖s是詞法作用域，在寫代碼階段就作用域就已經(jīng)確定了，換句話說，是在函數(shù)定義的時(shí)候確定的，而不是執(zhí)行的時(shí)候，所以a函數(shù)是在全局作用域中定義的，雖然在b函數(shù)內(nèi)調(diào)用，但是它只能訪問到全局的作用域而不能訪問到b函數(shù)的作用域。

答案

undefined

解析

這道題考察的是this的指向問題，箭頭函數(shù)執(zhí)行的時(shí)候上下文是不會綁定this的，所以它里面的this取決于外層的this，這里函數(shù)執(zhí)行的時(shí)候外層是全局作用域，所以this指向window，window對象下沒有name屬性，所以是undefined。

答案

{a: {b: 1}}

解析

這道題很簡單，因?yàn)閍ssign方法執(zhí)行的是淺拷貝，所以源對象的a屬性會直接覆蓋目標(biāo)對象的a屬性。

答案

undefined、1、2

解析

答案

undefined

解析

答案

打印出arr數(shù)組本身

解析

函數(shù)作為某個(gè)對象的方法調(diào)用，this指向該對象，數(shù)組顯然也是對象，只不過我們都習(xí)慣了對象引用屬性的方法：obj.fn，但是實(shí)際上obj['fn']引用也是可以的。

答案

1、b函數(shù)本身、b函數(shù)本身

解析

2.和第一題類似，只是b沒有賦值操作，那么執(zhí)行到這兩行相當(dāng)于都沒有操作，b當(dāng)然是函數(shù)。

答案

2、4、1、1、2、3、3

解析

1.執(zhí)行Foo函數(shù)的靜態(tài)方法，打印出2。

2.執(zhí)行g(shù)etName，當(dāng)前getName是打印出4的那個(gè)函數(shù)。

3.執(zhí)行Foo函數(shù)，修改了全局變量getName，賦值成了打印1的函數(shù)，然后返回this，因?yàn)槭窃谌汁h(huán)境下執(zhí)行，所以this指向window，因?yàn)間etName已經(jīng)被修改了，所以打印出1。

4.因?yàn)間etName沒有被重新賦值，所以再執(zhí)行仍然打印出1。

5.new操作符是用來調(diào)用函數(shù)的，所以new Foo.getName()相當(dāng)于new (Foo.getName)()，所以new的是Foo的靜態(tài)方法getName，打印出2。

6.因?yàn)辄c(diǎn)運(yùn)算符（.）的優(yōu)先級和new是一樣高的，所以從左往右執(zhí)行，相當(dāng)于(new Foo()).getName()，對Foo使用new調(diào)用會返回一個(gè)新創(chuàng)建的對象，然后執(zhí)行該對象的getName方法，該對象本身并沒有該方法，所以會從Foo的原型對象上查找，找到了，所以打印出3。

7.和上題一樣，點(diǎn)運(yùn)算符（.）的優(yōu)先級和new一樣高，另外new是用來調(diào)用函數(shù)的，所以new new Foo().getName()相當(dāng)于new ((new Foo()).getName)()，括號里面的就是上一題，所以最后找到的是Foo原型上的方法，無論是直接調(diào)用，還是通過new調(diào)用，都會執(zhí)行該方法，所以打印出3。

答案

it's Matthew, from England

it's Bob, from England

解析

Object.create方法會創(chuàng)建一個(gè)對象，并且將該對象的__proto__屬性指向傳入的對象，所以p1和p2兩個(gè)對象的原型對象指向了同一個(gè)對象，接著給p1添加了一個(gè)name屬性，然后調(diào)用了p1的setCountry方法，p1本身是沒有這個(gè)方法的，所以會沿著原型鏈進(jìn)行查找，在它的原型上，也就是person對象上找到了這個(gè)方法，執(zhí)行這個(gè)方法會給address對象的country屬性設(shè)置傳入的值，p1本身也是沒有address屬性的，但是和name屬性不一樣，address屬性在原型對象上找到了，并且因?yàn)槭莻€(gè)引用值，所以會成功修改它的country屬性，接著對p2的操作也是一樣，然后因?yàn)樵椭写嬖谝弥禃谒袑?shí)例中共享，所以p1和p2它們引用的address也是同一個(gè)對象，一個(gè)實(shí)例修改了，會反映到所有實(shí)例上，所以p2的修改會覆蓋p1的修改，最終country的值為England。

答案

2、3、5、4、1

解析

這道題顯然考察的是事件循環(huán)的知識點(diǎn)。

js是一門單線程的語言，但是為了執(zhí)行一些異步任務(wù)時(shí)不阻塞代碼，以及避免等待期間的資源浪費(fèi)，js存在事件循環(huán)的機(jī)制，單線程指的是執(zhí)行js的線程，稱作主線程，其他還有一些比如網(wǎng)絡(luò)請求的線程、定時(shí)器的線程，主線程在運(yùn)行時(shí)會產(chǎn)生執(zhí)行棧，棧中的代碼如果調(diào)用了異步api的話則會把事件添加到事件隊(duì)列里，只要該異步任務(wù)有了結(jié)果便會把對應(yīng)的回調(diào)放到【任務(wù)隊(duì)列】里，當(dāng)執(zhí)行棧中的代碼執(zhí)行完畢后會去讀取任務(wù)隊(duì)列里的任務(wù)，放到主線程執(zhí)行，當(dāng)執(zhí)行棧空了又會去檢查，如此往復(fù)，也就是所謂的事件循環(huán)。

異步任務(wù)又分為【宏任務(wù)】（比如setTimeout、setInterval）和【微任務(wù)】（比如promise），它們分別會進(jìn)入不同的隊(duì)列，執(zhí)行棧為空完后會優(yōu)先檢查微任務(wù)隊(duì)列，如果有微任務(wù)的話會一次性執(zhí)行完所有的微任務(wù)，然后去宏任務(wù)隊(duì)列里檢查，如果有則取出一個(gè)任務(wù)到主線程執(zhí)行，執(zhí)行完后又會去檢查微任務(wù)隊(duì)列，如此循環(huán)。

回到這題，首先整體代碼作為一個(gè)宏任務(wù)開始執(zhí)行，遇到setTimeout，相應(yīng)回調(diào)會進(jìn)入宏任務(wù)隊(duì)列，然后是promise，promise的回調(diào)是同步代碼，所以會打印出2，for循環(huán)結(jié)束后調(diào)用了resolve，所以then的回調(diào)會被放入微任務(wù)隊(duì)列，然后打印出3，最后打印出5，到這里當(dāng)前的執(zhí)行棧就空了，那么先檢查微任務(wù)隊(duì)列，發(fā)現(xiàn)有一個(gè)任務(wù)，那么取出來放到主線程執(zhí)行，打印出4，最后檢查宏任務(wù)隊(duì)列，把定時(shí)器的回調(diào)放入主線程執(zhí)行，打印出1。

答案

1、7、6、8、2、4、9、11、3、10、5、12

當(dāng)前文章：包含javascript高頻面試題的詞條
當(dāng)前網(wǎng)址：http://chinadenli.net/article12/dsgcpdc.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供動態(tài)網(wǎng)站、網(wǎng)站營銷、網(wǎng)站維護(hù)、微信小程序、企業(yè)建站、網(wǎng)頁設(shè)計(jì)公司

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)