前端JS面試視頻重要知識(shí)點(diǎn):
1.原型規(guī)則:
?? 1:所有引用類型(數(shù)組，對(duì)象，函數(shù)),都具有擴(kuò)展性，null沒有。
?? 2.所有引用類型(數(shù)組，對(duì)象，函數(shù))都有隱式原型__proto__屬性，屬性值是一個(gè)普通對(duì)象。符合第一條瀏覽器自己為對(duì)象創(chuàng)建的。
?? 3:所有函數(shù)都有prototype屬性，屬性值是一個(gè)普通對(duì)象。這個(gè)為現(xiàn)式原型。符合第一條瀏覽器自己為對(duì)象創(chuàng)建的。
?? 4:所有引用類型(數(shù)組，對(duì)象，函數(shù))，__proto__屬性值指向它的構(gòu)造函數(shù)的prototype屬性值。
?? 5:當(dāng)試圖得到一個(gè)對(duì)象的屬性，這個(gè)對(duì)象本身沒這個(gè)屬性，那么會(huì)去__proto__中找，即構(gòu)造函數(shù)的prototype屬性。
2.判斷對(duì)象自身是否有某些屬性:hasOwenProperty
js面試技巧視頻學(xué)習(xí)：包括三部分—js基礎(chǔ)，js web api，js開發(fā)環(huán)境。
查的：
一般情況下，一個(gè)頁(yè)面的相應(yīng)加載順序是：域名解析——>加載html——>加載js和css——>加載圖片等其他信息
2019.10.08
js基礎(chǔ):原型/原型鏈，作用域/閉包，異步/單線程。
Web api：DOM，js事件綁定，ajax。
開發(fā)環(huán)境：版本管理，打包工具，模塊化。
運(yùn)行環(huán)境：頁(yè)面渲染，性能優(yōu)化。
1,typeof得到哪些類型？
只能區(qū)分值類型的詳細(xì)類型。
undefined,object(包括null),boolean,number,string,symbol，function。
2,何時(shí)用===何時(shí)用==?
==會(huì)有類型轉(zhuǎn)換，三等不會(huì)，必須類型和值都相等。
3，window.onload DOMContentLoaded區(qū)別 ？
解析HTML結(jié)構(gòu)。
加載外部腳本和樣式表文件。
解析并執(zhí)行腳本代碼。//js之類的
DOM樹構(gòu)建完成。//DOMContentLoaded
加載圖片等外部文件。
頁(yè)面加載完畢。//load
在第4步的時(shí)候DOMContentLoaded事件會(huì)被觸發(fā)。在第6步的時(shí)候load事件會(huì)被觸發(fā)。
4，js創(chuàng)建10個(gè)a標(biāo)簽，點(diǎn)擊彈出對(duì)應(yīng)序號(hào)。
5,簡(jiǎn)述如何實(shí)現(xiàn)一個(gè)模塊加載器，實(shí)現(xiàn)require.js基本功能。
6,實(shí)現(xiàn)數(shù)組的隨機(jī)排序。
function shuffle(arr){?
? var i = arr.length,t,j;?
? while(i){?
? ? j = Math.floor(Math.random()* i--);?
? ? t = arr[i];?
? ? arr[i]= arr[j];?
? ? arr[j]= t;?
? }?
}?
//對(duì)應(yīng)的ES6如下
function shuffle(arr){?
? ? let i = arr.length;?
? ? while(i){?
? ? ? ? let j = Math.floor(Math.random()* i--);? //5555
? ? ? ? [arr[j],arr[i]]=[arr[i],arr[j]];?
? ? }?
}
變量類型和計(jì)算：
變量類型：值類型，引用類型。
1,typeof得到哪些類型？?
2,何時(shí)用===何時(shí)用==?
?3,js有哪些內(nèi)置函數(shù)？
4，如何理解json？
5,js按照存儲(chǔ)方式分為哪些類型，描述其特點(diǎn)。
值類型，引用類型。
2019.10.10
1，引用類型：對(duì)象，數(shù)組，函數(shù)。
2，變量計(jì)算
2.1，強(qiáng)制類型轉(zhuǎn)換：字符串拼接，==（a==null(等價(jià)于：a===null || a===undefined)），if語(yǔ)句，邏輯運(yùn)算。
2.2，js有哪些內(nèi)置函數(shù):
數(shù)據(jù)封裝類型：Boolean,String,Number,Object,
Array,Function,Error,Date,RegExp
2020.02.11
1，作用域和閉包
題目：
a,說(shuō)明一下對(duì)變量提升的理解；
b,說(shuō)明this幾種不同的使用場(chǎng)景；
this要在執(zhí)行時(shí)才能確認(rèn)值，定義是無(wú)法確定。
c,創(chuàng)建10個(gè)a標(biāo)簽，點(diǎn)擊時(shí)彈出對(duì)應(yīng)序號(hào)
for(var i=0;i<10;i++){
?? ? var a=document.createElement('a');
?? ? a.value=i
?? ? a.innerHTML=a.value+'
';
?? ? document.body.appendChild(a)
?? ? a.onclick=function(){
?? ? ? ? console.log(i,event,this)
?? ? ? ? alert(this.text)
?? ? }
}
for(let i=0;i<10;i++){
? let a=? document.createElement('a');
? a.innerHTML=i;
? a.style.color='red';
? a.style.fontSize="30px"
? a.onclick=()=>{
? ? ? alert(i)
? }
? document.body.appendChild(a)
}
? 修改HTML文檔內(nèi)容最簡(jiǎn)單的方法是，使用innerHTML屬性。?
? attribute:改變?cè)貙傩灾?/p>
d,如何理解作用域；
e,實(shí)際開發(fā)中閉包的作用；
函數(shù)聲明與函數(shù)表達(dá)式區(qū)別：
函數(shù)聲明：function fn(){...}
函數(shù)表達(dá)式：var a=function(){}
2020.02.12
1.this場(chǎng)景
a構(gòu)造函數(shù)中?
b對(duì)象 指向?qū)ο?/p>
c函數(shù)中指向window
d call apply bind改變this指向
2020.02.13
1.閉包的使用場(chǎng)景
?? 1.函數(shù)作為返回值 原始聲明作用域
?? 2.函數(shù)作為參數(shù)傳遞? 原始聲明作用域
2.異步的理解
? ? 1.同步和異步的區(qū)別？舉同步異步例子
?? ? ? 同步例子：一直等到確定再執(zhí)行第二個(gè)打印，阻塞代碼執(zhí)行
?? ? ? console.log（1）
?? ? ? alert（2）
?? ? ? console.log（3）
?? ? ? 異步例子:打印順序1.3.2
?? ? ? console.log（1）
?? ? ? settimeout（function（）? ? ? ｛console.log（2）｝）
?? ? ? console.log（3）
? ? 2.settimeout面試題
? ? 3.一些使用異步的場(chǎng)景
幾個(gè)問題：
什么是異步，
不會(huì)立即順序執(zhí)行，執(zhí)行需要等待
前端使用異步的場(chǎng)景，
等待的情況下使用異步，
定時(shí)任務(wù)：setTimeout、setInverval；
網(wǎng)絡(luò)請(qǐng)求：ajax請(qǐng)求，img加載；
事件綁定：綁定了放在那，點(diǎn)擊了去執(zhí)行；
異步和單線程，
單線程，不能同時(shí)干兩件事。
JS內(nèi)置對(duì)象：Math，Array，JSON，Object，Boolean，Date，String，Number，
2020.02.15
其他基礎(chǔ)知識(shí)：日期，Math，數(shù)組和對(duì)象的API.
題目：
實(shí)現(xiàn)2017-10-12的格式日期獲取。
獲取隨機(jī)數(shù)，要求是長(zhǎng)度一致的字符串格式。
寫一個(gè)遍歷對(duì)象與數(shù)組的通用forEach函數(shù)。
function forEach...待完成
2020.02.16
1.DOM屬于哪種數(shù)據(jù)結(jié)構(gòu)？
樹
2020.02.17
1.常說(shuō)的js組成部分：js基礎(chǔ)知識(shí)(ECMA262標(biāo)準(zhǔn)),web-api部分(w3c標(biāo)準(zhǔn))
2，DOM操作:Document,Object,Model，即文檔對(duì)象模型。
DOM的本質(zhì)：將html代碼結(jié)構(gòu)化，讓瀏覽器可以識(shí)別，讓js可識(shí)別。
3，獲取DOM節(jié)點(diǎn)操作：
獲取DOM節(jié)點(diǎn)
property獲取的html結(jié)構(gòu)對(duì)象有的屬性
Attribute html文檔的屬性
2020.02.19
1，BOM:broswer,object,model，瀏覽器對(duì)象模型。
瀏覽器屬性的獲取:navigator?
屏幕信息:screen
地址欄信息：location?
歷史：history
2，題目
編寫一個(gè)通用的事件綁定函數(shù)
????
描述事件冒泡流程
對(duì)于一個(gè)無(wú)限下拉加載圖片的頁(yè)面，如何給每個(gè)圖片綁定事件。
2020.02.22
1. //這里我們創(chuàng)建了一個(gè)單例模式
let single =function(fn){let ret;
return function(){console.log(ret);
// render一次undefined,render二次true,render三次true
//所以之后每次都執(zhí)行ret，就不會(huì)再次綁定了
return ret ||(ret = fn.apply(this,arguments));}};
let bindEvent =single(function()
?{//雖然下面的renders函數(shù)執(zhí)行3次,bindEvent也執(zhí)行了3次
//但是根據(jù)單例模式的特點(diǎn)，函數(shù)在被第一次調(diào)用后，之后就不再調(diào)用了
document.getElementById('box').onclick =function(){alert('click');}
return true;});
let renders =function(){console.log('渲染');
bindEvent();
}
renders();
renders();
renders();
理解下這三個(gè)函數(shù):
call:
apply:
bind:
this 的指向:
在 ES5 中，其實(shí) this 的指向，始終堅(jiān)持一個(gè)原理：this 永遠(yuǎn)指向最后調(diào)用它的那個(gè)對(duì)象，來(lái)，跟著我朗讀三遍：this 永遠(yuǎn)指向最后調(diào)用它的那個(gè)對(duì)象，this 永遠(yuǎn)指向最后調(diào)用它的那個(gè)對(duì)象，this 永遠(yuǎn)指向最后調(diào)用它的那個(gè)對(duì)象。記住這句話，this 你已經(jīng)了解一半了。
// 構(gòu)造函數(shù):
functionmyFunction(arg1,arg2){
? ? this.firstName = arg1;
? ? this.lastName? = arg2;
}
// This? ? creates a new object
vara =newmyFunction("Li","Cherry");
a.lastName;? ? ? ? ? ? ? ? ? ? ? ? ? ? // 返回 "Cherry"
這就有要說(shuō)另一個(gè)面試經(jīng)典問題：new 的過程了，(?_?)
這里就簡(jiǎn)單的來(lái)看一下 new 的過程吧：
偽代碼表示：
vara =newmyFunction("Li","Cherry");
newmyFunction{
? ? varobj = {};
? ? obj.__proto__ = myFunction.prototype;
? ? varresult = myFunction.call(obj,"Li","Cherry");
? ? returntypeofresult === 'obj'? result : obj;
}
創(chuàng)建一個(gè)空對(duì)象 obj;
將新創(chuàng)建的空對(duì)象的隱式原型指向其構(gòu)造函數(shù)的顯示原型。
使用call改變this的指向
如果無(wú)返回值或者返回一個(gè)非對(duì)象值，則將 obj 返回作為新對(duì)象；如果返回值是一個(gè)新對(duì)象的話那么直接直接返回該對(duì)象。
所以我們可以看到，在 new 的過程中，我們是使用 call 改變了 this 的指向。
2020.02.26
1，編寫一個(gè)通用的事件監(jiān)聽函數(shù)
function bindEvent(id,type,fn){
// id:元素id type:事件類型callback：回調(diào)函數(shù)
let elem=document.getElementById(id)
// IE低版本使用attachEvent，和w3c標(biāo)準(zhǔn)不一樣
elem.addEventListener(type,function(e){
? fn(e)
})
}
e.stopPropagation()//組織冒泡往上冒泡往父節(jié)點(diǎn)dom一層一層向上冒泡
e.preventDefault()//阻止默認(rèn)事件比如a標(biāo)簽點(diǎn)擊會(huì)跳轉(zhuǎn)
// 事件代理
let elem=document.getElementById(id)
function bindEvent(elem,type,selector,fn){
// id:元素id type:事件類型fn：回調(diào)函數(shù)
if(fn==null){
? ? ? ? //當(dāng)沒有選擇元素的時(shí)候，第三個(gè)參數(shù)直接傳回調(diào)方法，重新賦值一下
? fn=selector
? selecor=null
}
// IE低版本使用attachEvent，和w3c標(biāo)準(zhǔn)不一樣
console.log(fn,selector)
elem.addEventListener(type,function(e){
? // e指向目標(biāo)點(diǎn)擊元素
? console.log(e)
? var target
? if(selector){
? ? target=e.target
? ? if(target.matches(selector)){
? ? ? // this調(diào)用指向windows? this指向目標(biāo)元素
? ? ? fn.call(target,e)
? ? }
? }else{
? ? //為啥這里不需要改變this指向? 因?yàn)槔永锩嬷苯佑玫耐獠縠lem去操作沒用this
? ? fn(e)? //
? }
})
}
2020,02,27
1,描述事件冒泡的流程
DOM樹形結(jié)構(gòu)
時(shí)間冒泡
組織冒泡
冒泡應(yīng)用
無(wú)限下拉圖片點(diǎn)擊事件怎么寫? ：使用代理 ，綁定父元素，使用前面的bindEvent方法。
2，Ajax
題目
? 手動(dòng)編寫一個(gè)ajax，不依賴第三方庫(kù)
? var xhr=new XMLHttpRequest()
? xhr.open("GET","/api",true)// false:使用同步，請(qǐng)不要編寫onreadystatechange函數(shù)-把代碼放到send()語(yǔ)句后面即可
? xhr.onreadystatechange=function(){
? ? //這里的函數(shù)異步執(zhí)行
? ? if(xhr.readyState==4){
? ? ? //0:未初始化，還沒有調(diào)用send()方法?
? ? ? //1:載入，已調(diào)用send()，正在發(fā)請(qǐng)求?
? ? ? //2:暫入完成，send()方法執(zhí)行完成，已經(jīng)接受全部響應(yīng)內(nèi)容
? ? ? //3:交互，正在解析響應(yīng)內(nèi)容?
? ? ? //4:完成，響應(yīng)內(nèi)容解析完成，可以在客戶端調(diào)用了
? ? ? if(xhr.status==200){
? ? ? ? // 2xx：表示成功處理請(qǐng)求。如200
? ? ? ? // 3xx:需要重定向，瀏覽器直接跳轉(zhuǎn)
? ? ? ? // 4XX:客戶端請(qǐng)求錯(cuò)誤，如404
? ? ? ? // 5xx:服務(wù)端錯(cuò)誤
? ? ? ? alert(xhr.responseTsxt)
? ? ? }
? ? }
? }
? xhr.send(null)
// 同步去請(qǐng)求頁(yè)面：只會(huì)打印最后xhr.readyState==4的結(jié)果? ;異步會(huì)答應(yīng)1-4四次結(jié)果
var xhr=new XMLHttpRequest()
xhr.open('GET','https://www.w3school.com.cn/ajax/ajax_xmlhttprequest_send.asp',false)
xhr.onreadystatechange=function(){
? console.log(xhr)
}
xhr.send(null)
? IE低版本：ActiveObject? 低版本現(xiàn)在基本放棄
? 跨域的幾種實(shí)現(xiàn)方式 跨域的原理
知識(shí)點(diǎn)：
? XMLHttpRequest
? 狀態(tài)碼說(shuō)明
? 實(shí)現(xiàn)原理
跨域：
? 什么是跨域
? ? 瀏覽器同源策略，不允許ajax訪問其他域接口
? ? 跨域條件：協(xié)議、域名、端口，有一個(gè)不同就算跨域。
? 三個(gè)標(biāo)簽的場(chǎng)景
? 可以使用CDN，CDN也是其他域
? 可以用于JSONP
? 跨域注意事項(xiàng)：所有跨域請(qǐng)求必須經(jīng)過信息提供方允許。
? JSONP前端（源碼查看，自己手動(dòng)敲一下）
? JSONP實(shí)現(xiàn)原理：服務(wù)器根據(jù)請(qǐng)求動(dòng)態(tài)返回一個(gè)文件
? 服務(wù)器端設(shè)置? http header（可以后續(xù)繼續(xù)了解）
存儲(chǔ)：
? 題目：
? 請(qǐng)描述一下cookie，sesstionStorage,localStorage的區(qū)別
? cookie：客戶端用于客戶端和服務(wù)端通信。但是他有本地存儲(chǔ)的功能。（存儲(chǔ)的就是字符串）服務(wù)端可以獲取。
?? ? ? ? 存儲(chǔ)缺點(diǎn)：只有4kb，存儲(chǔ)量??；所有http去哪個(gè)球都帶著，會(huì)影響獲取資源的效率；API簡(jiǎn)單，需要封裝。
? 下面兩個(gè)是h5為存儲(chǔ)而設(shè)計(jì)，最大容量5M，不用在請(qǐng)求中帶著。
? 坑：ios safari隱藏模式下localtionStorage.getItem()會(huì)報(bào)錯(cuò)。
? sesstionStorage：瀏覽器頁(yè)面、回話結(jié)束關(guān)閉數(shù)據(jù)清空
? localtionStorage：存儲(chǔ)在本地，數(shù)據(jù)清空需手動(dòng)清理
第六章學(xué)習(xí)完
第7章節(jié)：開發(fā)環(huán)境
關(guān)于開發(fā)環(huán)境：
面試官想通過開發(fā)環(huán)境了解面試者的經(jīng)驗(yàn)；
開發(fā)環(huán)境，最能體現(xiàn)工作產(chǎn)出的效率；
IDE（寫代碼的效率）：webstorm,sublime,vscode,atom(插件、快捷鍵提高編碼效率)
git(代碼版本管理，多人寫作開發(fā))：版本迭代管理；追溯代碼；多人協(xié)作；
JS模塊化
打包工具
上線回滾的流程
VScode git zeplin?
2020.03.01
1.AMD:異步模塊規(guī)劃
工具require.js:引入后，會(huì)生成全局define函數(shù)，全局require函數(shù)，依賴js會(huì)自動(dòng)異步加載。
20200312
var、let、const的區(qū)別
var定義的變量，沒有塊的概念，可以跨塊訪問, 不能跨函數(shù)訪問。
let定義的變量，只能在塊作用域里訪問，不能跨塊訪問，也不能跨函數(shù)訪問。
const用來(lái)定義常量，使用時(shí)必須初始化(即必須賦值)，只能在塊作用域里訪問，而且不能修改。
2020.03.14
1,require.js
2020.04.06
1，為什么全局定義log要用bind？
constlog = console.log.bind(console)
var a = document.write;
a('hello');
//Error
a.bind(document)('hello');
//hello
a.call(document,'hello');
//hello
注意：這里直接調(diào)用a的話，this指向的是global或window對(duì)象，所以會(huì)報(bào)錯(cuò)，通過bind或者call的方式綁定this至document對(duì)象，即可正常調(diào)用
2020.04.10
1，Commonjs
Commonjs不會(huì)異步加載js，而是同步一次性加載出來(lái)
moudle.exports={key:value} //導(dǎo)入
require(path)//引入
異步加載js，AMD，使用npm用CommonJS.
2,構(gòu)建工具
grunt
gulp
?fis3
Webpack
npm intsall http-server本地起http服務(wù)工具
2022.04.12
1，window.onload和DOMContentLoaded
// 圖片視頻是異步加載
window.addEventListener(‘load’,function(){
//頁(yè)面全部資源加載完才會(huì)執(zhí)行，包括視頻圖片等
})
window.addEventListener(‘DOMCotent;Loaded’,function(){
// DOM渲染完即會(huì)執(zhí)行，此時(shí)圖片視頻可能沒加載完
})
2020.04.13
1，從url到得到html的詳細(xì)過程
瀏覽器根據(jù)dns服務(wù)器得到域名的ip地址
