Web前端5道面試題

1.請說明ECMAScript,JavaScript,Jscript之間的關(guān)系?

專注于為中小企業(yè)提供做網(wǎng)站、成都網(wǎng)站建設(shè)服務(wù),電腦端+手機端+微信端的三站合一,更高效的管理,為中小企業(yè)石景山免費做網(wǎng)站提供優(yōu)質(zhì)的服務(wù)。我們立足成都，凝聚了一批互聯(lián)網(wǎng)行業(yè)人才，有力地推動了上千企業(yè)的穩(wěn)健成長，幫助中小企業(yè)通過網(wǎng)站建設(shè)實現(xiàn)規(guī)模擴充和轉(zhuǎn)變。

ECMAScript提供腳本語言必須遵守的規(guī)則、

細(xì)節(jié)和準(zhǔn)則，是腳本語言的規(guī)范。

比如：ES5，ES6就是具體的一js版本。

JavaScript是ECMAScript的一個分支版本,

JavaScript實現(xiàn)了多數(shù)ECMA-262中

描述的ECMAScript規(guī)范，但存在少數(shù)差異。

JScript是微軟公司對ECMA-262語言規(guī)范的

一種實現(xiàn),除了少數(shù)例外(這是為了保持向后兼容),

微軟公司宣稱JScript完全實現(xiàn)了ECMA標(biāo)準(zhǔn).

關(guān)系:

JavaScript和JScript都是ECMAScript的版本分支,

二者在語法上沒有多大的區(qū)別;

只不過一個是NetScape公司的,一個是微軟的;

IE系列默認(rèn)是JScript,其它的則反之用JavaScript。

2.頁面加載過程中可能觸發(fā)哪些事件?它們的順序是?

頁面加載時，大致可以分為以下幾個步驟：1)開始解析HTML文檔結(jié)構(gòu)2)加載外部樣式表及JavaScript腳本3)解析執(zhí)行JavaScript腳本4)DOM樹渲染完成5)加載未完成的外部資源6)頁面加載成功

執(zhí)行順序:1)documentreadystatechange事件2)documentDOMContentLoaded事件3)windowload事件

3.函數(shù)中在聲明變量a前使用a會產(chǎn)生錯誤嗎?為什么?

不會,JS中能夠進行變量作用域提升,

把所有變量、函數(shù)的聲明提升到當(dāng)前

作用域的最前面,但不進行賦值操作;

所以可能造成獲取的值是undefined。

4.什么是hash,以及hashchange事件?

先了解下什么是hash:hash即URL中"#"字符后面的部分。

a)使用瀏覽器訪問網(wǎng)頁時，

如果網(wǎng)頁URL中帶有hash，

頁面就會定位到id(或name)

與hash值一樣的元素的位置;

b)hash還有另一個特點，

它的改變不會導(dǎo)致頁面重新加載;

c)hash值瀏覽器是不會隨請求發(fā)送到服務(wù)器端的;

d)通過window.location.hash屬性獲取和設(shè)置hash值。

window.location.hash值的變化會直接

反應(yīng)到瀏覽器地址欄(#后面的部分會發(fā)生變化)，同時，瀏覽器地址欄hash值的變化也會觸發(fā)

window.location.hash值的變化，

從而觸發(fā)onhashchange事件。

再來了解下什么是hashchange事件:

a)當(dāng)URL的片段標(biāo)識符更改時，

將觸發(fā)hashchange事件(跟在#符號后面的URL部分，包括#符號)b)

hashchange事件觸發(fā)時，

事件對象會有hash改變前的URL(oldURL)和hash改變后的URL(newURL)兩個屬性。

5.什么是CDN,CDN對于網(wǎng)站有什么意義,它有什么樣的缺點?

CDN又稱為內(nèi)容分發(fā)網(wǎng)絡(luò);本意在于

盡可能避開互聯(lián)網(wǎng)上有可能影響數(shù)據(jù)

傳輸速度和穩(wěn)定性的瓶頸和環(huán)節(jié)，

使內(nèi)容傳輸?shù)母?、更穩(wěn)定。

主要目的:

解決因分布、帶寬、服務(wù)器性能帶來的訪問延遲問題，

適用于站點加速、點播、直播等場景。

使用戶可就近取得所需內(nèi)容，解決Internet網(wǎng)絡(luò)擁擠的狀況，

提高用戶訪問網(wǎng)站的響應(yīng)速度和成功率。

缺點:

a)實施復(fù)雜,投資大;

b)目前大部分的CDN還只是對靜態(tài)內(nèi)容加速，

對動態(tài)加速效果不好;

而雙線對動態(tài)加速的效果跟靜態(tài)是一樣的。

js基礎(chǔ)面試題131-160道題目

131.用原生 JavaScript 的實現(xiàn)過什么功能嗎？

參考答案：輪播圖、手風(fēng)琴、放大鏡、3D動畫效果等，切記，所答的一定要知道實現(xiàn)原理！，不知道還不如不說！

參與互動

132.javascript 代碼中的"use strict"; 是什么意思 ? 使用它區(qū)別是什么？

參考答案：意思是使用嚴(yán)格模式，使用嚴(yán)格模式，一些不規(guī)范的語法將不再支持

參與互動

133.簡述創(chuàng)建函數(shù)的幾種方式

參考答案：

參與互動

134.window.location.search() 返回的是什么？

參考答案：查詢(參數(shù))部分。除了給動態(tài)語言賦值以外，我們同樣可以給靜態(tài)頁面, 并使用 javascript 來獲得相信應(yīng)的參數(shù)值 返回值：?ver=1.0id=timlq 也就是問號后面的！

參與互動

135.window.location.hash 返回的是什么？

參考答案：錨點 ， 返回值：#love ；

參與互動

136.window.location.reload() 作用？

參考答案：刷新當(dāng)前頁面

參與互動

137.為什么不能定義 1px 左右的 p 容器？

參考答案： IE6 下這個問題是因為默認(rèn)的行高造成的，解決的方法也有很多，例如： overflow:hidden | zoom:0.08 | line-height:1px

參與互動

138.BOM 對象有哪些，列舉 window 對象？

參考答案：

參與互動

139.簡述 readonly 與 disabled 的區(qū)別

參考答案：

參與互動

140.為什么擴展 javascript 內(nèi)置對象不是好的做法？

參考答案：

參與互動

141.什么是三元表達式？“三元”表示什么意思？

參考答案：三元如名字表示的三元運算符需要三個操作數(shù)。

語法是 條件 ? 結(jié)果1 : 結(jié)果2; .這里你把條件寫在問號(?)的前面后面跟著用冒號(:)分隔的結(jié)果1和結(jié)果2。滿足條件時結(jié)果1否則結(jié)果2。

參與互動

142.我們給一個 dom 同時綁定兩個點擊事件，一個用捕獲，一個用冒泡，你來說下會執(zhí)行幾次事件，然后會先執(zhí)行冒泡還是捕獲

參考答案：所有事件的順序是：其他元素捕獲階段事件 - 本元素代碼順序事件 - 其他元素冒泡階段事件 。

參考

參與互動

144.簡述一下 Handlebars 的基本用法？

參考答案：沒有用過的話說出它是干什么的即可

參與互動

143.簡述一下 Handlerbars 的對模板的基本處理流程， 如何編譯的？如何緩存的？

參考答案：

參與互動

145.前端 templating(Mustache, underscore, handlebars)是干嘛的, 怎么用?

參考答案：

參與互動

146.知道什么是 webkit 么? 知道怎么用瀏覽器的各種工具來調(diào)試和 debug 代碼么?

參考答案：Webkit 是瀏覽器引擎，包括 html 渲染和 js 解析功能，手機瀏覽器的主流內(nèi)核，與之相對應(yīng)的引擎有 Gecko（Mozilla Firefox 等使用）和 Trident（也稱 MSHTML，IE 使用）。 對于瀏覽器的調(diào)試工具要熟練使用，主要是頁面結(jié)構(gòu)分析，后臺請求信息查看，js 調(diào)試工具使用，熟練使用這些工具可以快速提高解決問題的效率

參與互動

147.如何測試前端代碼? 知道 BDD, TDD, Unit Test 么? 知道怎么測試你的前端工程么(mocha, sinon, jasmin, qUnit..)?

參考答案：了解 BDD 行為驅(qū)動開發(fā)與 TDD 測試驅(qū)動開發(fā)已經(jīng)單元測試相關(guān)概念

參與互動

148.JavaScript 的循環(huán)語句有哪些？

參考答案：while for do while forEach

參與互動

149.作用域-編譯期執(zhí)行期以及全局局部作用域問題

參考答案：js 執(zhí)行主要的兩個階段：預(yù)解析和執(zhí)行期

參與互動

150.如何添加 html 元素的事件，有幾種方法？請列舉

參考答案：直接在標(biāo)簽里添加；在元素上添加、使用事件注冊函數(shù)添加

參與互動

151.列舉瀏覽器對象模型 BOM 里常用的至少 4 個對象，并列舉 window 對象的常用方法至少 5 個

參考答案：

對象：Window document location screen history navigator

方法：Alert() confirm() prompt() open() close()

參與互動

152.事件綁定的方式

參考答案：

參與互動

153.事件循環(huán)

參考答案：事件循環(huán)是一個單線程循環(huán)，用于監(jiān)視調(diào)用堆棧并檢查是否有工作即將在任務(wù)隊列中完成。如果調(diào)用堆棧為空并且任務(wù)隊列中有回調(diào)函數(shù)，則將回調(diào)函數(shù)出隊并推送到調(diào)用堆棧中執(zhí)行。

參與互動

154.事件模型

參考答案：

解析：參考

參與互動

155.如何自定義事件

參考答案：

1.原生提供了 3 個方法實現(xiàn)自定義事件 2.createEvent，設(shè)置事件類型，是 html 事件還是 鼠標(biāo)事件 3.initEvent 初始化事件，事件名稱，是否允許冒泡，是否阻止自定義事件 4.dispatchEvent 觸發(fā)事件

MDN

參與互動

156.target 和 currentTarget 區(qū)別

參考答案：

參與互動

157.prototype 和__proto__的關(guān)系是什么

參考答案：

所有的對象都擁有__proto__屬性，它指向?qū)ο髽?gòu)造函數(shù)的 prototype 屬性

所有的函數(shù)都同時擁有__proto__和 protytpe 屬性 函數(shù)的__proto__指向自己的函數(shù)實現(xiàn) 函數(shù)的 protytpe 是一個對象 所以函數(shù)的 prototype 也有__proto__屬性 指向 Object.prototype

Object.prototype.__proto__指向 null

參與互動

158.什么是原型屬性？

參考答案：從構(gòu)造函數(shù)的prototype屬性出發(fā)找到原型，這時候就把原型稱之為構(gòu)造函數(shù)的原型屬性

參與互動

159.什么是原型對象？

參考答案：從實例的__proto__出發(fā)，找到原型，這時候就把原型稱之為實例的原型對象。

參與互動

160.使用 let、var 和 const 創(chuàng)建變量有什么區(qū)別

參考答案：

let 和 const 的區(qū)別在于：let 允許多次賦值，而 const 只允許一次。

有哪些經(jīng)典的 Web 前端或者 JavaScript 面試筆試題

一、不定項選擇題 （每題3分，共30分）

1. 聲明一個對象，給它加上name屬性和show方法顯示其name值，以下代碼中正確的是（ D ）

A. var obj = [name:"zhangsan",show:function(){alert(name);}];

B. var obj = {name:”zhangsan”,show:”alert(this.name)”};

C. var obj = {name:”zhangsan”,show:function(){alert(name);}};

D. var obj = {name:”zhangsan”,show:function(){alert(this.name);}};

2. 以下關(guān)于Array數(shù)組對象的說法不正確的是（ CD ）

A. 對數(shù)組里數(shù)據(jù)的排序可以用sort函數(shù)，如果排序效果非預(yù)期，可以給sort函數(shù)加一個排序函數(shù)的參數(shù)

B. reverse用于對數(shù)組數(shù)據(jù)的倒序排列

C. 向數(shù)組的最后位置加一個新元素，可以用pop方法

D. unshift方法用于向數(shù)組刪除第一個元素

3. 要將頁面的狀態(tài)欄中顯示“已經(jīng)選中該文本框”，下列JavaScript語句正確的是（ A ）

A. window.status=”已經(jīng)選中該文本框”

B. document.status=”已經(jīng)選中該文本框”

C. window.screen=”已經(jīng)選中該文本框”

D. document.screen=”已經(jīng)選中該文本框”

4. 點擊頁面的按鈕，使之打開一個新窗口，加載一個網(wǎng)頁，以下JavaScript代碼中可行的是（ AD ）

A. input type=”button” value=”new”

onclick=”open(‘new.html’, ‘_blank’)”/

B. input type=”button” value=”new”

onclick=”window.location=’new.html’;”/

C. input type=”button” value=”new”

onclick=”location.assign(‘new.html’);”/

D. form target=”_blank”action=”new.html”

inputtype=”submit” value=”new”/

/form

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

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

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

解析：

DOM文檔解析：

頁面加載完成有兩種事件

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

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

代碼形式：

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

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

代碼形式為：

參與互動

2.JavaScript 中如何檢測一個變量是一個 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 方法并不影響原來的字符串本身，它返回的是一個新的字符串。

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

示例：

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

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

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

示例：

參與互動

4.js 是一門怎樣的語言，它有什么特點

參考答案：

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

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

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

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

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

參與互動

5.== 和 === 的不同

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

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

參與互動

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

參考答案：

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

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

3）查找

參與互動

7.事件委托是什么

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

解析：

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

2、為什么要用事件委托

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

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

拓展：

參考

參與互動

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

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

第一、兩者的加載方式不同，require 是在運行時加載，而 import 是在編譯時加載

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

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

var a = require('./a')[0]; // a 模塊導(dǎo)出的是一個數(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 特點：社區(qū)方案，提供了服務(wù)器/瀏覽器的模塊加載方案。非語言層面的標(biāo)準(zhǔn)。只能在運行時確定模塊的依賴關(guān)系及輸入/輸出的變量，無法進行靜態(tài)優(yōu)化。

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

參與互動

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

參考答案：

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

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

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

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

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

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

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

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

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

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

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

3.沒有 return 語句

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

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

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

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

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

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

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

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

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

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

解析： 參考

參與互動

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

參考答案：六種方式

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)需要阻止冒泡行為時，可以使用

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

參與互動

74.js 中 this 閉包 作用域

參考答案：

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

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

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

參與互動

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

參考答案：

1.本地對象

ECMA-262 把本地對象（native object）定義為“獨立于宿主環(huán)境的 ECMAScript 實現(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個對象，常用的是Array對象、Date對象、正則表達式對象、string對象、Global對象

3.宿主對象

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

參與互動

76.javascript 的同源策略

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

解析：

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

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

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

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

Cookie、LocalStorage 和 IndexDB 無法獲取。

無法獲取和操作 DOM。

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

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

參與互動

77.事件冒泡與事件捕獲

參考答案：

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

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

參與互動

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

參考答案：

這種寫法稱為短路表達式

解析：

相當(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）如果該方法存在于一個對象的原型鏈上，那么 this 指向的是調(diào)用這個方法的對象，就像該方法在對象上一樣。

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

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

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

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

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

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

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

特殊例子

當(dāng) this 碰到 return 時

2.5 setTimeout setInterval

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

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

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

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

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

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

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

4.1 全局環(huán)境中

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

4.2 this 捕獲上下文

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

4.2 this 捕獲上下文

箭頭函數(shù)沒有自己的 this，而是使用箭頭函數(shù)所在的作用域的 this，即指向箭頭函數(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)致這個箭頭函數(shù)里面的 this，總是指向 handler 對象。如果不使用箭頭函數(shù)則指向全局 document 對象。

4.6 箭頭函是不適用場景

（1）箭頭函數(shù)不適合定義對象的方法（方法內(nèi)有 this），因為此時指向 window；

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

參與互動

本文名稱：關(guān)于javascript面試的信息
網(wǎng)站鏈接：http://jinyejixie.com/article12/dssdpdc.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供定制網(wǎng)站、網(wǎng)站收錄、網(wǎng)站導(dǎo)航、網(wǎng)頁設(shè)計公司、標(biāo)簽優(yōu)化、外貿(mào)網(wǎng)站建設(shè)

廣告

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