前端JS面試視頻重要知識(shí)點(diǎn):
1.原型規(guī)則:
?? 1:所有引用類(lèi)型(數(shù)組鱼填，對(duì)象，函數(shù)),都具有擴(kuò)展性联逻，null沒(méi)有搓扯。
?? 2.所有引用類(lèi)型(數(shù)組，對(duì)象包归，函數(shù))都有隱式原型__proto__屬性锨推，屬性值是一個(gè)普通對(duì)象。符合第一條瀏覽器自己為對(duì)象創(chuàng)建的公壤。
?? 3:所有函數(shù)都有prototype屬性爱态，屬性值是一個(gè)普通對(duì)象。這個(gè)為現(xiàn)式原型境钟。符合第一條瀏覽器自己為對(duì)象創(chuàng)建的锦担。
?? 4:所有引用類(lèi)型(數(shù)組，對(duì)象慨削，函數(shù))洞渔，__proto__屬性值指向它的構(gòu)造函數(shù)的prototype屬性值。
?? 5:當(dāng)試圖得到一個(gè)對(duì)象的屬性缚态，這個(gè)對(duì)象本身沒(méi)這個(gè)屬性磁椒，那么會(huì)去__proto__中找，即構(gòu)造函數(shù)的prototype屬性玫芦。
2.判斷對(duì)象自身是否有某些屬性:hasOwenProperty
js面試技巧視頻學(xué)習(xí)：包括三部分—js基礎(chǔ)浆熔，js web api，js開(kāi)發(fā)環(huán)境桥帆。
查的：
一般情況下医增，一個(gè)頁(yè)面的相應(yīng)加載順序是：域名解析——>加載html——>加載js和css——>加載圖片等其他信息
2019.10.08
js基礎(chǔ):原型/原型鏈，作用域/閉包老虫，異步/單線(xiàn)程叶骨。
Web api：DOM，js事件綁定祈匙，ajax忽刽。
開(kāi)發(fā)環(huán)境：版本管理天揖，打包工具，模塊化跪帝。
運(yùn)行環(huán)境：頁(yè)面渲染今膊，性能優(yōu)化。
1,typeof得到哪些類(lèi)型伞剑？
只能區(qū)分值類(lèi)型的詳細(xì)類(lèi)型斑唬。
undefined,object(包括null),boolean,number,string,symbol，function纸泄。
2,何時(shí)用===何時(shí)用==?
==會(huì)有類(lèi)型轉(zhuǎn)換，三等不會(huì)腰素，必須類(lèi)型和值都相等聘裁。
3，window.onload DOMContentLoaded區(qū)別 弓千？
解析HTML結(jié)構(gòu)衡便。
加載外部腳本和樣式表文件。
解析并執(zhí)行腳本代碼洋访。//js之類(lèi)的
DOM樹(shù)構(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]];?
? ? }?
}
變量類(lèi)型和計(jì)算：
變量類(lèi)型：值類(lèi)型器紧，引用類(lèi)型耀销。
1,typeof得到哪些類(lèi)型？?
2,何時(shí)用===何時(shí)用==?
?3,js有哪些內(nèi)置函數(shù)铲汪？
4熊尉，如何理解json？
5,js按照存儲(chǔ)方式分為哪些類(lèi)型掌腰，描述其特點(diǎn)帽揪。
值類(lèi)型，引用類(lèi)型辅斟。
2019.10.10
1转晰，引用類(lèi)型：對(duì)象，數(shù)組，函數(shù)查邢。
2蔗崎，變量計(jì)算
2.1，強(qiáng)制類(lèi)型轉(zhuǎn)換：字符串拼接扰藕，==（a==null(等價(jià)于：a===null || a===undefined)）缓苛，if語(yǔ)句，邏輯運(yùn)算邓深。
2.2未桥，js有哪些內(nèi)置函數(shù):
數(shù)據(jù)封裝類(lèi)型：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í)際開(kāi)發(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è)問(wèn)題：
什么是異步，
不會(huì)立即順序執(zhí)行燎斩，執(zhí)行需要等待
前端使用異步的場(chǎng)景勒庄，
等待的情況下使用異步，
定時(shí)任務(wù)：setTimeout瘫里、setInverval实蔽；
網(wǎng)絡(luò)請(qǐng)求：ajax請(qǐng)求，img加載谨读；
事件綁定：綁定了放在那局装，點(diǎn)擊了去執(zhí)行；
異步和單線(xiàn)程劳殖，
單線(xiàn)程铐尚，不能同時(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)度一致的字符串格式。
寫(xiě)一個(gè)遍歷對(duì)象與數(shù)組的通用forEach函數(shù)朱转。
function forEach...待完成
2020.02.16
1.DOM屬于哪種數(shù)據(jù)結(jié)構(gòu)蟹地？
樹(shù)
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纫雁，題目
編寫(xiě)一個(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ì)象简十。記住這句話(huà)，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)典問(wèn)題：new 的過(guò)程了螟蝙，(?_?)
這里就簡(jiǎn)單的來(lái)看一下 new 的過(guò)程吧：
偽代碼表示：
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ì)象的話(huà)那么直接直接返回該對(duì)象场斑。
所以我們可以看到，在 new 的過(guò)程中初坠，我們是使用 call 改變了 this 的指向和簸。
2020.02.26
1，編寫(xiě)一個(gè)通用的事件監(jiān)聽(tīng)函數(shù)
function bindEvent(id,type,fn){
// id:元素id type:事件類(lèi)型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:事件類(lèi)型fn：回調(diào)函數(shù)
if(fn==null){
? ? ? ? //當(dāng)沒(méi)有選擇元素的時(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去操作沒(méi)用this
? ? fn(e)? //
? }
})
}
2020,02,27
1,描述事件冒泡的流程
DOM樹(shù)形結(jié)構(gòu)
時(shí)間冒泡
組織冒泡
冒泡應(yīng)用
無(wú)限下拉圖片點(diǎn)擊事件怎么寫(xiě)? ：使用代理 爽柒，綁定父元素，使用前面的bindEvent方法者填。
2浩村，Ajax
題目
? 手動(dòng)編寫(xiě)一個(gè)ajax，不依賴(lài)第三方庫(kù)
? var xhr=new XMLHttpRequest()
? xhr.open("GET","/api",true)// false:使用同步占哟，請(qǐng)不要編寫(xiě)onreadystatechange函數(shù)-把代碼放到send()語(yǔ)句后面即可
? xhr.onreadystatechange=function(){
? ? //這里的函數(shù)異步執(zhí)行
? ? if(xhr.readyState==4){
? ? ? //0:未初始化心墅，還沒(méi)有調(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)容解析完成，可以在客戶(hù)端調(diào)用了
? ? ? if(xhr.status==200){
? ? ? ? // 2xx：表示成功處理請(qǐng)求肛捍。如200
? ? ? ? // 3xx:需要重定向隐绵，瀏覽器直接跳轉(zhuǎn)
? ? ? ? // 4XX:客戶(hù)端請(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訪(fǎng)問(wèn)其他域接口
? ? 跨域條件：協(xié)議依许、域名、端口缀蹄，有一個(gè)不同就算跨域峭跳。
? 三個(gè)標(biāo)簽的場(chǎng)景
? 可以使用CDN，CDN也是其他域
? 可以用于JSONP
? 跨域注意事項(xiàng)：所有跨域請(qǐng)求必須經(jīng)過(guò)信息提供方允許袍患。
? 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：客戶(hù)端用于客戶(hù)端和服務(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è)面乏悄、回話(huà)結(jié)束關(guān)閉數(shù)據(jù)清空
? localtionStorage：存儲(chǔ)在本地，數(shù)據(jù)清空需手動(dòng)清理
第六章學(xué)習(xí)完
第7章節(jié)：開(kāi)發(fā)環(huán)境
關(guān)于開(kāi)發(fā)環(huán)境：
面試官想通過(guò)開(kāi)發(fā)環(huán)境了解面試者的經(jīng)驗(yàn)恳不；
開(kāi)發(fā)環(huán)境檩小，最能體現(xiàn)工作產(chǎn)出的效率；
IDE（寫(xiě)代碼的效率）：webstorm,sublime,vscode,atom(插件烟勋、快捷鍵提高編碼效率)
git(代碼版本管理规求，多人寫(xiě)作開(kāi)發(fā))：版本迭代管理；追溯代碼卵惦；多人協(xié)作阻肿；
JS模塊化
打包工具
上線(xiàn)回滾的流程
VScode git zeplin?
2020.03.01
1.AMD:異步模塊規(guī)劃
工具require.js:引入后，會(huì)生成全局define函數(shù)鸵荠，全局require函數(shù)冕茅，依賴(lài)js會(huì)自動(dòng)異步加載伤极。
20200312
var蛹找、let、const的區(qū)別
var定義的變量哨坪，沒(méi)有塊的概念庸疾，可以跨塊訪(fǎng)問(wèn), 不能跨函數(shù)訪(fǎng)問(wèn)。
let定義的變量当编，只能在塊作用域里訪(fǎng)問(wèn)届慈，不能跨塊訪(fǎng)問(wèn)，也不能跨函數(shù)訪(fǎng)問(wèn)忿偷。
const用來(lái)定義常量金顿，使用時(shí)必須初始化(即必須賦值)，只能在塊作用域里訪(fǎng)問(wèn)鲤桥，而且不能修改揍拆。
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的話(huà)嫂拴，this指向的是global或window對(duì)象播揪，所以會(huì)報(bào)錯(cuò)，通過(guò)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í)圖片視頻可能沒(méi)加載完
})
2020.04.13
1，從url到得到html的詳細(xì)過(guò)程
瀏覽器根據(jù)dns服務(wù)器得到域名的ip地址
