一区二区三区日韩精品-日韩经典一区二区三区-五月激情综合丁香婷婷-欧美精品中文字幕专区

分享

37道WEB前端開發(fā)面試題之JavaScript篇章!

 王金亮博客 2018-09-07
  1. ajax, 跨域, jsonp

參考: 《JavaScript》高級(jí)程序設(shè)計(jì)第21章:Ajax和Comet jQuery中Ajax操作

  1. apply和call的用法和區(qū)別:

用法:

都能繼承另一個(gè)對(duì)象的方法和屬性,區(qū)別在于參數(shù)列表不一樣

區(qū)別:

Function.apply(obj, args) args是一個(gè)數(shù)組,作為參數(shù)傳給Function

Function.call(obj, arg1, arg2,...) arg*是參數(shù)列表

apply一個(gè)妙用: 可以將一個(gè)數(shù)組默認(rèn)的轉(zhuǎn)化為一個(gè)參數(shù)列表

舉個(gè)栗子: 有一個(gè)數(shù)組arr要push進(jìn)一個(gè)新的數(shù)組中去, 如果用call的話需要把數(shù)組中的元素一個(gè)個(gè)取出來再push, 而用apply只有Array.prototype.push.apply(this, arr)

  1. bind函數(shù)的兼容性

用法:

bind()函數(shù)會(huì)創(chuàng)建一個(gè)新函數(shù), 為綁定函數(shù)。當(dāng)調(diào)用這個(gè)綁定函數(shù)時(shí),綁定函數(shù)會(huì)以創(chuàng)建它時(shí)傳入bind方法的第一個(gè)參數(shù)作為this,傳入bind方法的第二個(gè)以及以后的參數(shù)加上綁定函數(shù)運(yùn)行時(shí)本身的參數(shù)按照順序作為原函數(shù)的參數(shù)來調(diào)用原函數(shù).

一個(gè)綁定函數(shù)也能使用new操作符創(chuàng)建對(duì)象:這種行為就像把原函數(shù)當(dāng)成構(gòu)造器。提供的 this 值被忽略,同時(shí)調(diào)用時(shí)的參數(shù)被提供給模擬函數(shù)。

  1. 解釋下事件代理

事件委托利用了事件冒泡, 只指定一個(gè)事件處理程序, 就可以管理某一類型的所有事件.

例: html部分: 要點(diǎn)擊li彈出其id

html部分

<ul id="list">

<li id="li-1">Li 2</li>

<li id="li-2">Li 3</li>

<li id="li-3">Li 4</li>

<li id="li-4">Li 5</li>

<li id="li-5">Li 6</li>

<li id="li-6">Li 7</li>

</ul>

//js部分

document.getElementById("list").addHandler("click", function(e){

var e = e || window.event;

var target = e.target || e.srcElement;

if(target.nodeName.toUpperCase == "LI"){

console.log("List item", e,target.id, "was clicked!");

}

});

  1. 解釋下js中this是怎么工作的?

this 在 JavaScript 中主要由以下五種使用場(chǎng)景。

作為函數(shù)調(diào)用,this 綁定全局對(duì)象,瀏覽器環(huán)境全局對(duì)象為 window 。

內(nèi)部函數(shù)內(nèi)部函數(shù)的 this 也綁定全局對(duì)象,應(yīng)該綁定到其外層函數(shù)對(duì)應(yīng)的對(duì)象上,這是 JavaScript的缺陷,用that替換。

作為構(gòu)造函數(shù)使用,this 綁定到新創(chuàng)建的對(duì)象。

作為對(duì)象方法使用,this 綁定到該對(duì)象。

使用apply或call調(diào)用 this 將會(huì)被顯式設(shè)置為函數(shù)調(diào)用的第一個(gè)參數(shù)。

  1. 繼承

參考:js怎么實(shí)現(xiàn)繼承?

  1. AMD vs. CommonJS?

AMD是依賴提前加載

CMD是依賴延時(shí)加載

  1. 什么是哈希表?

哈希表(Hash table,也叫散列表),是根據(jù)關(guān)鍵碼值(Key value)而直接進(jìn)行訪問的數(shù)據(jù)結(jié)構(gòu)。也就是說,它通過把關(guān)鍵碼值映射到表中一個(gè)位置來訪問記錄,以加快查找的速度。這個(gè)映射函數(shù)叫做散列函數(shù),存放記錄的數(shù)組叫做散列表。

使用哈希查找有兩個(gè)步驟:

使用哈希函數(shù)將被查找的鍵轉(zhuǎn)換為數(shù)組的索引。在理想的情況下,不同的鍵會(huì)被轉(zhuǎn)換為不同的索引值,但是在有些情況下我們需要處理多個(gè)鍵被哈希到同一個(gè)索引值的情況。

所以哈希查找的第二個(gè)步驟就是處理沖突。處理哈希碰撞沖突。有很多處理哈希碰撞沖突的方法,比如拉鏈法和線性探測(cè)法。

元素特征轉(zhuǎn)變?yōu)閿?shù)組下標(biāo)的方法就是散列法。散列法當(dāng)然不止一種,下面列出三種比較常用的:

1,除法散列法

最直觀的一種,上圖使用的就是這種散列法,公式: index = value % 16

學(xué)過匯編的都知道,求模數(shù)其實(shí)是通過一個(gè)除法運(yùn)算得到的,所以叫“除法散列法”。

2,平方散列法

求index是非常頻繁的操作,而乘法的運(yùn)算要比除法來得省時(shí)(對(duì)現(xiàn)在的CPU來說,估計(jì)我們感覺不出來),所以我們考慮把除法換成乘法和一個(gè)位移操作。公式: index = (value * value) >> 28 (右移,除以2^28。記法:左移變大,是乘。右移變小,是除。)

如果數(shù)值分配比較均勻的話這種方法能得到不錯(cuò)的結(jié)果,但我上面畫的那個(gè)圖的各個(gè)元素的值算出來的index都是0——非常失敗。也許你還有個(gè)問題,value如果很大,value * value不會(huì)溢出嗎?答案是會(huì)的,但我們這個(gè)乘法不關(guān)心溢出,因?yàn)槲覀兏静皇菫榱双@取相乘結(jié)果,而是為了獲取index。

3,斐波那契(Fibonacci)散列法

解決沖突的方法:

  1. 拉鏈法

將大小為M 的數(shù)組的每一個(gè)元素指向一個(gè)條鏈表,鏈表中的每一個(gè)節(jié)點(diǎn)都存儲(chǔ)散列值為該索引的鍵值對(duì),這就是拉鏈法.

對(duì)采用拉鏈法的哈希實(shí)現(xiàn)的查找分為兩步,首先是根據(jù)散列值找到等一應(yīng)的鏈表,然后沿著鏈表順序找到相應(yīng)的鍵。

  1. 線性探測(cè)法:

使用數(shù)組中的空位解決碰撞沖突

參考:淺談算法和數(shù)據(jù)結(jié)構(gòu): 十一 哈希表 哈希表的工作原理

  1. 什么是閉包? 閉包有什么作用?

閉包是指有權(quán)訪問另一個(gè)函數(shù)作用域中的變量的函數(shù). 創(chuàng)建閉包常見方式,就是在一個(gè)函數(shù)內(nèi)部創(chuàng)建另一個(gè)函數(shù).

作用:

匿名自執(zhí)行函數(shù) (function (){ ... })(); 創(chuàng)建了一個(gè)匿名的函數(shù),并立即執(zhí)行它,由于外部無法引用它內(nèi)部的變量,因此在執(zhí)行完后很快就會(huì)被釋放,關(guān)鍵是這種機(jī)制不會(huì)污染全局對(duì)象。

緩存, 可保留函數(shù)內(nèi)部的值

實(shí)現(xiàn)封裝

實(shí)現(xiàn)模板

參考: js閉包的用途

  1. 偽數(shù)組:

什么是偽數(shù)組:

偽數(shù)組是能通過Array.prototype.slice 轉(zhuǎn)換為真正的數(shù)組的帶有l(wèi)ength屬性的對(duì)象

比如arguments對(duì)象,還有像調(diào)用getElementsByTagName,document.childNodes之類的,它們都返回NodeList對(duì)象都屬于偽數(shù)組

我們可以通過Array.prototype.slice.call(fakeArray)將偽數(shù)組轉(zhuǎn)變?yōu)檎嬲腁rray對(duì)象: 返回新數(shù)組而不會(huì)修改原數(shù)組

參考:偽數(shù)組

  1. undefined和null的區(qū)別, 還有undeclared:

null表示沒有對(duì)象, 即此處不該有此值. 典型用法:

(1) 作為函數(shù)的參數(shù),表示該函數(shù)的參數(shù)不是對(duì)象。

(2) 作為對(duì)象原型鏈的終點(diǎn)。

( 3 ) null可以作為空指針. 只要意在保存對(duì)象的值還沒有真正保存對(duì)象,就應(yīng)該明確地讓該對(duì)象保存null值.

undefined表示缺少值, 即此處應(yīng)該有值, 但還未定義.

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

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

(3)對(duì)象沒有賦值的屬性,該屬性的值為undefined。

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

undeclared即為被污染的命名, 訪問沒有被聲明的變量, 則會(huì)拋出異常, 終止執(zhí)行. 即undeclared是一種語(yǔ)法錯(cuò)誤

參考: undefined與null的區(qū)別

  1. 事件冒泡機(jī)制:

從目標(biāo)元素開始,往頂層元素傳播。途中如果有節(jié)點(diǎn)綁定了相應(yīng)的事件處理函數(shù),這些函數(shù)都會(huì)被一次觸發(fā)。如果想阻止事件起泡,可以使用e.stopPropagation()(Firefox)或者e.cancelBubble=true(IE)來組織事件的冒泡傳播。

  1. 解釋下為什么接下來這段代碼不是 IIFE(立即調(diào)用的函數(shù)表達(dá)式):function foo(){ }();?

而函數(shù)定義(語(yǔ)句以function關(guān)鍵字開始)是不能被立即執(zhí)行的,這無疑會(huì)導(dǎo)致語(yǔ)法的錯(cuò)誤(SyntaxError)。當(dāng)函數(shù)定義代碼段包裹在括號(hào)內(nèi),使解析器可以將之識(shí)別為函數(shù)表達(dá)式,然后調(diào)用。IIFE: (function foo(){})()

區(qū)分 (function(){})(); 和 (function(){}()); 其實(shí)兩者實(shí)現(xiàn)效果一樣。

函數(shù)字面量:首先聲明一個(gè)函數(shù)對(duì)象,然后執(zhí)行它。(function () { alert(1); })();

優(yōu)先表達(dá)式:由于Javascript執(zhí)行表達(dá)式是從圓括號(hào)里面到外面,所以可以用圓括號(hào)強(qiáng)制執(zhí)行聲明的函數(shù)。(function () { alert(2); }());

  1. "attribute" 和 "property" 的區(qū)別是什么?

DOM元素的attribute和property兩者是不同的東西。attribute翻譯為“特性”,property翻譯為“屬性”。

attribute是一個(gè)特性節(jié)點(diǎn),每個(gè)DOM元素都有一個(gè)對(duì)應(yīng)的attributes屬性來存放所有的attribute節(jié)點(diǎn),attributes是一個(gè)類數(shù)組的容器,說得準(zhǔn)確點(diǎn)就是NameNodeMap,不繼承于Array.prototype,不能直接調(diào)用Array的方法。attributes的每個(gè)數(shù)字索引以名值對(duì)(name=”value”)的形式存放了一個(gè)attribute節(jié)點(diǎn)。<div class="box" id="box" gameid="880">hello</div>

property就是一個(gè)屬性,如果把DOM元素看成是一個(gè)普通的Object對(duì)象,那么property就是一個(gè)以名值對(duì)(name=”value”)的形式存放在Object中的屬性。要添加和刪除property和普通的對(duì)象類似。

很多attribute節(jié)點(diǎn)還有一個(gè)相對(duì)應(yīng)的property屬性,比如上面的div元素的id和class既是attribute,也有對(duì)應(yīng)的property,不管使用哪種方法都可以訪問和修改。

總之,attribute節(jié)點(diǎn)都是在HTML代碼中可見的,而property只是一個(gè)普通的名值對(duì)屬性。

  1. 請(qǐng)指出 document load 和 document ready 兩個(gè)事件的區(qū)別。

document.ready和onload的區(qū)別——JavaScript文檔加載完成事件。頁(yè)面加載完成有兩種事件:

一是ready,表示文檔結(jié)構(gòu)已經(jīng)加載完成(不包含圖片等非文字媒體文件)

二是onload,指示頁(yè)面包含圖片等文件在內(nèi)的所有元素都加載完成。

jQuery中$(function(){});他的作用或者意義就是:在DOM加載完成后就可以可以對(duì)DOM進(jìn)行操作。一般情況先一個(gè)頁(yè)面響應(yīng)加載的順序是,域名解析-加載html-加載js和css-加載圖片等其他信息。

  1. 什么是use strict? 其好處壞處分別是什么?

在所有的函數(shù) (或者所有最外層函數(shù)) 的開始處加入 "use strict"; 指令啟動(dòng)嚴(yán)格模式。

"嚴(yán)格模式"有兩種調(diào)用方法

1)將"use strict"放在腳本文件的第一行,則整個(gè)腳本都將以"嚴(yán)格模式"運(yùn)行。如果這行語(yǔ)句不在第一行,則無效,整個(gè)腳本以"正常模式"運(yùn)行。如果不同模式的代碼文件合并成一個(gè)文件,這一點(diǎn)需要特別注意。

2)將整個(gè)腳本文件放在一個(gè)立即執(zhí)行的匿名函數(shù)之中。

好處

  • 消除Javascript語(yǔ)法的一些不合理、不嚴(yán)謹(jǐn)之處,減少一些怪異行為;

  • 消除代碼運(yùn)行的一些不安全之處,保證代碼運(yùn)行的安全;

  • 提高編譯器效率,增加運(yùn)行速度;

  • 為未來新版本的Javascript做好鋪墊。

壞處

同樣的代碼,在"嚴(yán)格模式"中,可能會(huì)有不一樣的運(yùn)行結(jié)果;一些在"正常模式"下可以運(yùn)行的語(yǔ)句,在"嚴(yán)格模式"下將不能運(yùn)行

  1. 瀏覽器端的js包括哪幾個(gè)部分?

核心( ECMAScript) , 文檔對(duì)象模型(DOM), 瀏覽器對(duì)象模型(BOM)

  1. DOM包括哪些對(duì)象?

DOM是針對(duì)HTML和XML文檔的一個(gè)API(應(yīng)用程序編程接口). DOM描繪了一個(gè)層次化的節(jié)點(diǎn)樹, 允許開發(fā)人員添加, 移除和修改頁(yè)面的某一部分.

常用的DOM方法:

getElementById(id)

getElementsByTagName()

appendChild(node)

removeChild(node)

replaceChild()

insertChild()

createElement()

createTextNode()

getAttribute()

setAttribute()

常用的DOM屬性

innerHTML 節(jié)點(diǎn)(元素)的文本值

parentNode 節(jié)點(diǎn)(元素)的父節(jié)點(diǎn)

childNodes

attributes 節(jié)點(diǎn)(元素)的屬性節(jié)點(diǎn)

參考: HTML DOM 方法

  1. js有哪些基本類型?

Undefined, Null, Boolean, Number, String

Object是復(fù)雜數(shù)據(jù)類型, 其本質(zhì)是由一組無序的名值對(duì)組成的.

  1. 基本類型與引用類型有什么區(qū)別?

基本類型如上題所示. 引用類型則有: Object, Array, Date, RegExp, Function

存儲(chǔ)

基本類型值在內(nèi)存中占據(jù)固定大小的空間,因此被保存在棧內(nèi)存中

引用類型的值是對(duì)象, 保存在堆內(nèi)存中. 包含引用類型的變量實(shí)際上包含的并不是對(duì)象本身, 而是一個(gè)指向改對(duì)象的指針

復(fù)制

從一個(gè)變量向另一個(gè)變量復(fù)制基本類型的值, 會(huì)創(chuàng)建這個(gè)值的一個(gè)副本

從一個(gè)變量向另一個(gè)變量復(fù)制引用類型的值, 復(fù)制的其實(shí)是指針, 因此兩個(gè)變量最終都指向同一個(gè)對(duì)象

檢測(cè)類型

確定一個(gè)值是哪種基本類型可以用typeof操作符,

而確定一個(gè)值是哪種引用類型可以使用instanceof操作符

  1. 關(guān)于js的垃圾收集例程

js是一門具有自動(dòng)垃圾回收機(jī)制的編程語(yǔ)言,開發(fā)人員不必關(guān)心內(nèi)存分配和回收問題

離開作用域的值將被自動(dòng)標(biāo)記為可以回收, 因此將在垃圾收集期間被刪除

"標(biāo)記清除"是目前主流的垃圾收集算法, 這種算法的思路是給當(dāng)前不使用的值加上標(biāo)記, 然后再回收其內(nèi)存

另一種垃圾收集算法是"引用計(jì)數(shù)", 這種算法的思想是跟蹤記錄所有值被引用的次數(shù). js引擎目前都不再使用這種算法, 但在IE中訪問非原生JS對(duì)象(如DOM元素)時(shí), 這種算法仍然可能會(huì)導(dǎo)致問題

當(dāng)代碼中存在循環(huán)引用現(xiàn)象時(shí), "引用計(jì)數(shù)" 算法就會(huì)導(dǎo)致問題

解除變量的引用不僅有助于消除循環(huán)引用現(xiàn)象, 而且對(duì)垃圾收集也有好處. 為了確保有效地回收內(nèi)存, 應(yīng)該及時(shí)解除不再使用的全局對(duì)象, 全局對(duì)象屬性以及循環(huán)引用變量的引用

  1. ES5中, 除了函數(shù),什么能夠產(chǎn)生作用域?

try-catch 和with延長(zhǎng)作用域. 因?yàn)樗麄兌紩?huì)創(chuàng)建一個(gè)新的變量對(duì)象.

這兩個(gè)語(yǔ)句都會(huì)在作用域鏈的前端添加一個(gè)變量對(duì)象. 對(duì)with語(yǔ)句來說, 會(huì)將指定的對(duì)象添加到作用域鏈中. 對(duì)catch語(yǔ)句來說, 會(huì)創(chuàng)建一個(gè)新的變量對(duì)象, 其中包含的是被拋出的錯(cuò)誤對(duì)象的聲明.

當(dāng)try代碼塊中發(fā)生錯(cuò)誤時(shí),執(zhí)行過程會(huì)跳轉(zhuǎn)到catch語(yǔ)句,然后把異常對(duì)象推入一個(gè)可變對(duì)象并置于作用域的頭部。在catch代碼塊內(nèi)部,函數(shù)的所有局部變量將會(huì)被放在第二個(gè)作用域鏈對(duì)象中。請(qǐng)注意,一旦catch語(yǔ)句執(zhí)行完畢,作用域鏈機(jī)會(huì)返回到之前的狀態(tài)。try-catch語(yǔ)句在代碼調(diào)試和異常處理中非常有用,因此不建議完全避免。你可以通過優(yōu)化代碼來減少catch語(yǔ)句對(duì)性能的影響。一個(gè)很好的模式是將錯(cuò)誤委托給一個(gè)函數(shù)處理

with(object) {statement}。它的意思是把object添加到作用域鏈的頂端

//代碼片段

function buildUrl(){

var qs = "?debug=true";

//with接收l(shuí)ocation對(duì)象, 因此其變量對(duì)象中就包含了location對(duì)象的所有屬性和方法, 而這個(gè)變量對(duì)象被添加到了作用域鏈的前端

with(location){

//這里的href其實(shí)是location.href. 創(chuàng)建了一個(gè)名為url的變量, 就成了函數(shù)執(zhí)行環(huán)境的一部分

var url = href + qs;

}

return url;

}

參考: js try、catch、finally語(yǔ)句還有with語(yǔ)句 JavaScript 開發(fā)進(jìn)階:理解 JavaScript 作用域和作用域鏈

  1. js有幾種函數(shù)調(diào)用方式?

方法調(diào)用模型 var obj = { func : function(){};} obj.func()

函數(shù)調(diào)用模式  var func = function(){} func();

構(gòu)造器調(diào)用模式

apply/ call調(diào)用模式

  1. 描述事件模型?IE的事件模型是怎樣的?事件代理是什么?事件代理中怎么定位實(shí)際事件產(chǎn)生的目標(biāo)?

捕獲->處于目標(biāo)->冒泡,IE應(yīng)該是只有冒泡沒有捕獲。

事件代理就是在父元素上綁定事件來處理,通過event對(duì)象的target來定位。

  1. js動(dòng)畫有哪些實(shí)現(xiàn)方法?

用定時(shí)器 setTimeout和setInterval

  1. 還有什么實(shí)現(xiàn)動(dòng)畫的方法?

js動(dòng)畫:

使用定時(shí)器 setTimeout和setInterval

CSS : transition , animation

transition 包含4種屬性:transition-delaytransition-durationtransition-propertytransition-timing-function,對(duì)應(yīng)動(dòng)畫的4種屬性: 延遲、持續(xù)時(shí)間、對(duì)應(yīng)css屬性和緩動(dòng)函數(shù),

transform 包含7種屬性:animation-nameanimation-durationanimation-timing-functionanimation-delayanimation-directionanimation-iteration-countanimation-fill-modeanimation-play-state,它們可以定義動(dòng)畫名稱,持續(xù)時(shí)間,緩動(dòng)函數(shù),動(dòng)畫延遲,動(dòng)畫方向,重復(fù)次數(shù),填充模式。

HTML5 動(dòng)畫

canvas

svg

webgl

參考:前端動(dòng)畫效果實(shí)現(xiàn)的簡(jiǎn)單比較

  1. 面向?qū)ο笥心膸讉€(gè)特點(diǎn)?

封裝, 繼承, 多態(tài)

  1. 如何判斷屬性來自自身對(duì)象還是原型鏈?

hasOwnPrototype

  1. ES6新特性

1) 箭頭操作符 inputs=>outputs: 操作符左邊是輸入的參數(shù),而右邊則是進(jìn)行的操作以及返回的值

2) 支持類, 引入了class關(guān)鍵字. ES6提供的類實(shí)際上就是JS原型模式的包裝

3) 增強(qiáng)的對(duì)象字面量.

  1. 可以在對(duì)象字面量中定義原型 proto: xxx //設(shè)置其原型為xxx,相當(dāng)于繼承xxx

  2. 定義方法可以不用function關(guān)鍵字

  3. 直接調(diào)用父類方法

4) 字符串模板: ES6中允許使用反引號(hào) ` 來創(chuàng)建字符串,此種方法創(chuàng)建的字符串里面可以包含由美元符號(hào)加花括號(hào)包裹的變量${vraible}。

5) 自動(dòng)解析數(shù)組或?qū)ο笾械闹?。比如若一個(gè)函數(shù)要返回多個(gè)值,常規(guī)的做法是返回一個(gè)對(duì)象,將每個(gè)值做為這個(gè)對(duì)象的屬性返回。但在ES6中,利用解構(gòu)這一特性,可以直接返回一個(gè)數(shù)組,然后數(shù)組中的值會(huì)自動(dòng)被解析到對(duì)應(yīng)接收該值的變量中。

6) 默認(rèn)參數(shù)值: 現(xiàn)在可以在定義函數(shù)的時(shí)候指定參數(shù)的默認(rèn)值了,而不用像以前那樣通過邏輯或操作符來達(dá)到目的了。

7) 不定參數(shù)是在函數(shù)中使用命名參數(shù)同時(shí)接收不定數(shù)量的未命名參數(shù)。在以前的JavaScript代碼中我們可以通過arguments變量來達(dá)到這一目的。不定參數(shù)的格式是三個(gè)句點(diǎn)后跟代表所有不定參數(shù)的變量名。比如下面這個(gè)例子中,…x代表了所有傳入add函數(shù)的參數(shù)。

8) 拓展參數(shù)則是另一種形式的語(yǔ)法糖,它允許傳遞數(shù)組或者類數(shù)組直接做為函數(shù)的參數(shù)而不用通過apply。

9) let和const關(guān)鍵字: 可以把let看成var,只是它定義的變量被限定在了特定范圍內(nèi)才能使用,而離開這個(gè)范圍則無效。const則很直觀,用來定義常量,即無法被更改值的變量。

10) for of值遍歷 每次循環(huán)它提供的不是序號(hào)而是值。

11) iterator, generator

12) 模塊

13) Map, Set, WeakMap, WeakSet

14) Proxy可以監(jiān)聽對(duì)象身上發(fā)生了什么事情,并在這些事情發(fā)生后執(zhí)行一些相應(yīng)的操作。一下子讓我們對(duì)一個(gè)對(duì)象有了很強(qiáng)的追蹤能力,同時(shí)在數(shù)據(jù)綁定方面也很有用處。

15) Symbols Symbol 通過調(diào)用symbol函數(shù)產(chǎn)生,它接收一個(gè)可選的名字參數(shù),該函數(shù)返回的symbol是唯一的。之后就可以用這個(gè)返回值做為對(duì)象的鍵了。Symbol還可以用來創(chuàng)建私有屬性,外部無法直接訪問由symbol做為鍵的屬性值。

16) Math, Number, String, Object的新API

17) Promises是處理異步操作的一種模式

參考:ES6新特性概覽

  1. 如何獲取某個(gè)DOM節(jié)點(diǎn),節(jié)點(diǎn)遍歷方式

獲取節(jié)點(diǎn): getElementById() getElementsByTagName()

節(jié)點(diǎn)遍歷:先序遍歷DOM樹的5種方法

  1. 用LESS如何給某些屬性加瀏覽器前綴?

可以自定義一個(gè)函數(shù)

//代碼片段

.border-radius(@values) {

-webkit-border-radius: @values;

-moz-border-radius: @values;

border-radius: @values;

}

div {

.border-radius(10px);

}

  1. js異步模式如何實(shí)現(xiàn)?

參考:JavaScript異步編程的Promise模式

  1. 圖片預(yù)加載的實(shí)現(xiàn)

使用jQuery圖片預(yù)加載插件Lazy Load

1.加載jQuery, 與jquery.lazyload.js

2.設(shè)置圖片的占位符為data-original, 給圖片一個(gè)特別的標(biāo)簽,比如class=".lazy"

3.然后延遲加載: $('img.lazy').lazyload();這個(gè)函數(shù)可以選擇一些參數(shù):

3.1.圖片預(yù)先加載距離:threshold,通過設(shè)置這個(gè)值,在圖片未出現(xiàn)在可視區(qū)域的頂部距離這個(gè)值時(shí)加載。

3.2.事件綁定加載的方式:event

3.3.圖片限定在某個(gè)容器內(nèi):container

使用js實(shí)現(xiàn)圖片加載: 就是new一個(gè)圖片對(duì)象, 綁定onload函數(shù), 賦值url

用CSS實(shí)現(xiàn)圖片的預(yù)加載

寫一個(gè)CSS樣式設(shè)置一批背景圖片,然后將其隱藏

改進(jìn): 使用js來推遲預(yù)加載時(shí)間, 防止與頁(yè)面其他內(nèi)容一起加載

用Ajax實(shí)現(xiàn)預(yù)加載

其實(shí)就是通過ajax請(qǐng)求請(qǐng)求圖片地址. 還可以用這種方式加載css,js文件等

  1. 如果在同一個(gè)元素上綁定了兩個(gè)click事件, 一個(gè)在捕獲階段執(zhí)行, 一個(gè)在冒泡階段執(zhí)行. 那么當(dāng)觸發(fā)click條件時(shí), 會(huì)執(zhí)行幾個(gè)事件? 執(zhí)行順序是什么?

我在回答這個(gè)題的時(shí)候說是兩個(gè)事件, 先執(zhí)行捕獲的后執(zhí)行冒泡的. 其實(shí)是不對(duì)的.

綁定在目標(biāo)元素上的事件是按照綁定的順序執(zhí)行的!!!!

即: 綁定在被點(diǎn)擊元素的事件是按照代碼順序發(fā)生,其他元素通過冒泡或者捕獲“感知”的事件,按照W3C的標(biāo)準(zhǔn),先發(fā)生捕獲事件,后發(fā)生冒泡事件。所有事件的順序是:其他元素捕獲階段事件 -> 本元素代碼順序事件 -> 其他元素冒泡階段事件 。

參考: JavaScript-父子dom同時(shí)綁定兩個(gè)點(diǎn)擊事件,一個(gè)用捕獲,一個(gè)用冒泡時(shí)執(zhí)行順序

  1. js中怎么實(shí)現(xiàn)塊級(jí)作用域?

使用匿名函數(shù), (立即執(zhí)行函數(shù))

(function(){...})()

使用es6

塊級(jí)作用域引入了兩種新的聲明形式,可以用它們定義一個(gè)只存在于某個(gè)語(yǔ)句塊中的變量或常量.這兩種新的聲明關(guān)鍵字為:

let: 語(yǔ)法上非常類似于var, 但定義的變量只存在于當(dāng)前的語(yǔ)句塊中

const: 和let類似,但聲明的是一個(gè)只讀的常量

使用let代替var可以更容易的定義一個(gè)只在某個(gè)語(yǔ)句塊中存在的局部變量,而不用擔(dān)心它和函數(shù)體中其他部分的同名變量有沖突.在let語(yǔ)句內(nèi)部用var聲明的變量和在let語(yǔ)句外部用var聲明的變量沒什么差別,它們都擁有函數(shù)作用域,而不是塊級(jí)作用域.

  1. 構(gòu)造函數(shù)里定義function和使用prototype.func的區(qū)別?

  2. 直接調(diào)用function,每一個(gè)類的實(shí)例都會(huì)拷貝這個(gè)函數(shù),弊端就是浪費(fèi)內(nèi)存(如上)。prototype方式定義的方式,函數(shù)不會(huì)拷貝到每一個(gè)實(shí)例中,所有的實(shí)例共享prototype中的定義,節(jié)省了內(nèi)存。

  3. 但是如果prototype的屬性是對(duì)象的話,所有實(shí)例也會(huì)共享一個(gè)對(duì)象(這里問的是函數(shù)應(yīng)該不會(huì)出現(xiàn)這個(gè)情況),如果其中一個(gè)實(shí)例改變了對(duì)象的值,則所有實(shí)例的值都會(huì)被改變。同理的話,如果使用prototype調(diào)用的函數(shù),一旦改變,所有實(shí)例的方法都會(huì)改變。——不可以對(duì)實(shí)例使用prototype屬性,只能對(duì)類和函數(shù)用。

  4. js實(shí)現(xiàn)對(duì)象的深克隆

因?yàn)閖s中數(shù)據(jù)類型分為基本數(shù)據(jù)類型(number, string, boolean, null, undefined)和引用類型值(對(duì)象, 數(shù)組, 函數(shù)). 這兩類對(duì)象在復(fù)制克隆的時(shí)候是有很大區(qū)別的. 原始類型存儲(chǔ)的是對(duì)象的實(shí)際數(shù)據(jù), 而對(duì)象類型存儲(chǔ)的是對(duì)象的引用地址(對(duì)象的實(shí)際內(nèi)容單獨(dú)存放, 為了減少數(shù)據(jù)開銷通常放在內(nèi)存中). 此外, 對(duì)象的原型也是引用對(duì)象, 它把原型的屬性和方法放在內(nèi)存中, 通過原型鏈的方式來指向這個(gè)內(nèi)存地址.

于是克隆也會(huì)分為兩類:

淺度克隆:

原始類型為值傳遞, 對(duì)象類型仍為引用傳遞

深度克隆:

所有元素或?qū)傩跃耆珡?fù)制, 與原對(duì)象完全脫離, 也就是說所有對(duì)于新對(duì)象的修改都不會(huì)反映到原對(duì)象中

深度克隆實(shí)現(xiàn):

//代碼片段

function clone(obj){

if(typeof(obj)== 'object'){

var result = obj instanceof Array ? [] : {};

for(var i in obj){

var attr = obj[i];

result[i] = arguments.callee(attr);

}

return result;

} else {

return obj;

}

};

參考: JavaScript深克隆 javascript中對(duì)象的深度克隆

    本站是提供個(gè)人知識(shí)管理的網(wǎng)絡(luò)存儲(chǔ)空間,所有內(nèi)容均由用戶發(fā)布,不代表本站觀點(diǎn)。請(qǐng)注意甄別內(nèi)容中的聯(lián)系方式、誘導(dǎo)購(gòu)買等信息,謹(jǐn)防詐騙。如發(fā)現(xiàn)有害或侵權(quán)內(nèi)容,請(qǐng)點(diǎn)擊一鍵舉報(bào)。
    轉(zhuǎn)藏 分享 獻(xiàn)花(0

    0條評(píng)論

    發(fā)表

    請(qǐng)遵守用戶 評(píng)論公約

    類似文章 更多

    日本欧美一区二区三区高清| 日韩欧美一区二区黄色| 亚洲高清欧美中文字幕| 久久热这里只有精品视频| 噜噜中文字幕一区二区| 亚洲精品国男人在线视频| 国产精品久久精品毛片| 夜夜嗨激情五月天精品| 日韩精品日韩激情日韩综合| 欧美精品激情视频一区| 国产精品午夜福利免费阅读| 少妇人妻精品一区二区三区| 国产又粗又猛又爽又黄| 久久国产人妻一区二区免费| 精品国产亚洲区久久露脸| 久久精品色妇熟妇丰满人妻91 | 国内九一激情白浆发布| 夫妻性生活黄色录像视频| 丰满少妇高潮一区二区| 激情图日韩精品中文字幕| 亚洲欧美国产中文色妇| 精品人妻少妇二区三区| 国产高清三级视频在线观看| 午夜福利国产精品不卡| 果冻传媒精选麻豆白晶晶| 亚洲精品国产精品日韩| 91在线播放在线播放观看| 日本乱论一区二区三区| 九九视频通过这里有精品| 国产又黄又猛又粗又爽的片| 亚洲一区二区久久观看| 国产精品久久女同磨豆腐| 久久精品色妇熟妇丰满人妻91| 麻豆果冻传媒一二三区| 精品一区二区三区免费看| 欧美黑人黄色一区二区| 久久老熟女一区二区三区福利| 国产视频在线一区二区| 夜夜躁狠狠躁日日躁视频黑人| 日本加勒比在线观看不卡| 欧美亚洲另类久久久精品|