JavaScript進(jìn)階的必要性
無論是學(xué)習(xí)react還是vue，它們都是js的應(yīng)用框架绰更。剝?nèi)ニ麄兊臍ぷ涌吹降氖冀K是js报辱，所以作為一個前端大廚必須要熟練掌握好js這個大勺召噩，才能燒出一頓好菜
無論是自我提升還是應(yīng)付面試以下這些手寫功能是每一個前端程序員必須掌握的
1. 手寫apply、call该酗、bind
每個Function對象都存在apply()授药、call()士嚎、bind() 方法，其作用都是可以在特定的作用域
中調(diào)用函數(shù)悔叽，等于設(shè)置函數(shù)體內(nèi)this對象的值莱衩，以擴(kuò)充函數(shù)賴以運(yùn)行的作用域。
apply娇澎、call笨蚁、bind 的異同
1. 三者都可以改變this的指向，第一個參數(shù)都是this趟庄，如果指向是null或者undefined則指向window
2. apply的參數(shù)是數(shù)組括细，call是列表，而bind可以多次傳入
3. apply和call是改變this的指向之后直接運(yùn)行函數(shù)戚啥，而bind則是返回綁定之后的函數(shù)
apply實(shí)現(xiàn)的參考代碼
/**
* 手寫apply
*/
window.name='gy' // 全局變量
let obj={
name:'ckx'
}
var func=function(b,c){
console.log(`this=`, this)
console.log(this.name,b,c)
return 1
}
func('24','hz') // gy 24 hz
func.apply(obj,['24','hz']) // ckx 24 hz
let newObj={
name:'xmx',
age:24
}
Function.prototype.myApply=function(base,args){
// 1. 如果指向是null 或者undefined 則指向window
base=base || window
// 2. 根據(jù)this是誰調(diào)用就指向誰的原理奋单，將this指向的函數(shù) 賦值給base對象的一個屬性
base.fn=this
// 3.執(zhí)行函數(shù),調(diào)用base.fn時，fn中的函數(shù)指向 base對象
let result=base.fn(...args)
// 4. 刪除base的fn屬性
delete base.fn
// 5. 返回result 結(jié)果
return result
}
func.myApply(newObj,['55','yw']) // xmx 55 yw
apply代碼執(zhí)行效果
image.png
call 實(shí)現(xiàn)的參考代碼
/**
* 手寫call
*/
window.name='gy' // 全局變量
let obj={
name:'ckx'
}
var func=function(b,c){
console.log(`this=`, this)
console.log(this.name,b,c)
return 1
}
func('24','hz') // gy 24 hz
func.call(obj,'24','hz') // ckx 24 hz
let newObj={
name:'xmx',
age:24
}
// call 和apply需要注意參數(shù)的格式即可
Function.prototype.myCall=function(base,...args){
// 1. 如果指向是null 或者undefined 則指向window
base=base || window
// 2. 根據(jù)this是誰調(diào)用就指向誰的原理虑鼎，將this指向的函數(shù) 賦值給base對象的一個屬性
base.fn=this
// 3.執(zhí)行函數(shù),調(diào)用base.fn時辱匿，fn中的函數(shù)指向 base對象
let result=base.fn(...args)
// 4. 刪除base的fn屬性
delete base.fn
// 5. 返回result 結(jié)果
return result
}
func.myCall(newObj,'55','yw') // xmx 55 yw
call代碼執(zhí)行效果
image.png
/**
* 手寫bind
*/
window.name = "gy"; // 全局變量
let obj = {
name: "ckx",
};
var func = function (b, c,d) {
console.log(`this=`, this);
console.log(this.name, b, c,d);
return 1;
};
func("24", "hz",26); // gy 24 hz 26
let funcRes = func.bind(obj, "24", "hz");
funcRes(24); // ckx 24 hz 24
let newObj = {
name: "xmx",
age: 24,
};
// 注意bind 返回的時綁定的函數(shù)以及可以多次傳遞參數(shù)
Function.prototype.myBind = function (base, ...args1) {
return (...args2) => {
// 1. 如果指向是null 或者undefined 則指向window
base = base || window;
// 2. 根據(jù)this是誰調(diào)用就指向誰的原理，將this指向的函數(shù) 賦值給base對象的一個屬性
base.fn = this;
// 3.執(zhí)行函數(shù),調(diào)用base.fn時炫彩，fn中的函數(shù)指向 base對象
let result = base.fn(...args1,...args2);
// 4. 刪除base的fn屬性
delete base.fn;
// 5. 返回result 結(jié)果
return result;
};
};
let myfuncRes=func.myBind(newObj, "55", "yw")
myfuncRes(24) // xmx 55 yw 24
bind代碼執(zhí)行效果
image.png
2. 手寫new
new關(guān)鍵字執(zhí)行時做了哪些
1. 創(chuàng)建了一個新對象
2. 將這個新對象與構(gòu)造函數(shù)用原型鏈鏈接起來
3. 將構(gòu)造函數(shù)的this指向新的對象匾七，執(zhí)行構(gòu)造函數(shù)的代碼賦值
4. 如果構(gòu)造函數(shù)沒有返回一個對象就返回新創(chuàng)建的對象否則返回構(gòu)造函數(shù)返回的對象
手寫new參考代碼
/***
* 手寫new關(guān)鍵字執(zhí)行
*/
function Person(name,age) {
this.name = name;
}
Person.prototype.getName = function () {
return this.name;
};
let a = new Person('gy');
console.log(a);
console.log(a.getName());
const myNew = (Func, ...args) => {
let newObj = {};
newObj.__proto__=Func.prototype
let result=Func.apply(newObj,args)
return typeof result == Object ? result: newObj
};
let b = myNew(Person,'gy1')
console.log(b);
console.log(b.getName());
代碼執(zhí)行結(jié)果參考圖
image.png
原型鏈?zhǔn)疽鈭D
image.png
3. 手寫instanceof
typeof 可以判斷基本數(shù)據(jù)類型 但是null 返回的也是object 不能識別 引用數(shù)據(jù)類型
instanceof 可以準(zhǔn)確的判斷引用數(shù)據(jù)類型不可以判斷 基本數(shù)據(jù)類型
instanceof是用于檢測構(gòu)造函數(shù)的prototype是否出現(xiàn)某個實(shí)例對象的原型鏈上
參考代碼
/**
* 手寫instanceof
*/
let obj= { label:'gy' }
let arr= ['hello']
let result = obj instanceof Object
let result1 = arr instanceof Array
let result2 = arr instanceof Object
let result3 = obj instanceof Array
console.log('result=',result )
console.log('result1=',result1 )
console.log('result2=',result2 )
console.log('result3=',result3 )
const myInstanceof = (left,right)=>{
if(typeof left != 'object' || left == null ) return false
let proto= Object.getPrototypeOf(left)
while(true){
if(proto==null) return false
if(proto==right.prototype) return true
proto=Object.getPrototypeOf(proto)
}
}
const myResult= myInstanceof(obj,Object)
const myResult1= myInstanceof(arr,Array)
const myResult2= myInstanceof(arr,Object)
const myResult3= myInstanceof(obj,Array)
console.log('myRsult=',myResult )
console.log('myResult1=',myResult1 )
console.log('myResult2=',myResult2 )
console.log('myResult3=',myResult3 )
代碼執(zhí)行結(jié)果截圖
image.png
根據(jù)上面的代碼打印結(jié)果 需要注意的是：萬物皆對象，包括數(shù)組江兢，如果存在一個變量（arrOrObj）可能為array或者object 如果使用instanceof 去判斷昨忆，一定需要先判斷是否為數(shù)組先，否則 arrOrObj instanceof Object 一定為true 就無法區(qū)分 array和object
4. 手寫防抖和節(jié)流
持續(xù)的觸發(fā)某一事件杉允，延遲n秒后執(zhí)行回調(diào)邑贴，在未到n秒再次觸發(fā)，會從新出發(fā)倒計(jì)時
持續(xù)的觸發(fā)某一時間叔磷，延遲n秒后執(zhí)行回調(diào)拢驾，在未達(dá)到n秒再次出發(fā)，不會重新計(jì)時
兩者的使用場景
防抖可能用于無法預(yù)知的用戶主動行為改基，如用戶輸入內(nèi)容去服務(wù)端動態(tài)搜索結(jié)果繁疤。用戶打字的速度等是無法預(yù)知的，具有非規(guī)律性秕狰。
節(jié)流可能用于一些非用戶主動行為或者可預(yù)知的用戶主動行為稠腊，如用戶滑動商品櫥窗時發(fā)送埋點(diǎn)請求、滑動固定的高度是已知的邏輯鸣哀，具有規(guī)律性架忌。
節(jié)流和防抖也是閉包的應(yīng)用
手寫防抖代碼參考
/***
* 手寫防抖
*/
const debounce = (func, delay) => {
let timer = null;
return function (...args) {
if (timer) {
clearTimeout(timer);
timer = null;
}
timer = setTimeout(() => {
func(args);
}, delay);
};
};
const getfn = (data) => {
console.log(data);
};
debounce(getfn, 2000)("gy");
手寫防抖代碼執(zhí)行結(jié)果
image.png
手寫節(jié)流
/***
* 手寫節(jié)流
* 這里只需要注意和防抖不同的時 不會清除定時器
*/
const throttle = (func, delay) => {
let flag = false;
return function (...args) {
if (flag) return
flag=true
setTimeout(() => {
func(args);
flag=false
}, delay);
};
};
const getfn = (data) => {
console.log(data);
};
throttle(getfn, 2000)("gy");
5. 手動實(shí)現(xiàn)ajax
AJAX 的全稱為 Asynchronous JavaScript + XML， 最重要的要屬 XHR(XMLHttpRequest)
XMLHttpRequest通過不刷新頁面請求特定URL我衬，獲取數(shù)據(jù)叹放。
實(shí)現(xiàn)的必備條件
XMLHttpRequest()是一個構(gòu)造函數(shù)XMLHttpRequest.onreadystatechange狀態(tài)碼變化時觸發(fā)事件（所有瀏覽器支持）XMLHttpRequest.readyState請求的狀態(tài)碼
image.png
-
XMLHttpRequest.status響應(yīng)狀態(tài)碼 返回標(biāo)準(zhǔn)的HTTP 狀態(tài)碼
image.png
-
其他的請求響應(yīng)參數(shù)
XMLHttpRequest.response 這個是整個響應(yīng)實(shí)體 XMLHttpRequest.responseText 返回 `DOMString` XMLHttpRequest.timeout 超時時間 XMLHttpRequest.upload 上傳進(jìn)度 -
在看看常用方法
open()// method/url 是必須的
xhr.open(method, url, async, user, password);
send()// body 可選默認(rèn)為null
// 可以是 Blob, BufferSource (en-US), FormData,
// URLSearchParams, 或者 USVString 對象.
XMLHttpRequest.send(body);
setRequestHeader()XMLHttpRequest.setRequestHeader(header, value);
// 例如
XMLHttpRequest.setRequestHeader ("content-type", "application/x-www-form-urlencoded" );
基于以上API實(shí)現(xiàn) ajax
1. 構(gòu)造一個請求 XMLHttpRequest
2. 初始化一個請求 open
3. 監(jiān)聽請求 onreadystatechange
4. 發(fā)送該請求 send
/**
* 手寫一個ajax
*/
const myAjax =(url,methods,header,success,error)=>{
// 創(chuàng)建一個請求
let request=new XMLHttpRequest()
// 設(shè)置請求頭
for (const key in header) {
request.setRequestHeader(key,header[key])
}
// 初始化請求
request.open(methods,url)
// 發(fā)送請求
request.send()
// 監(jiān)聽請求 onreadystatechange
request.onreadystatechange =function(){
if(request.readyState==4){
if(request.status==200){
success(request.response)
}else {
error()
}
}
}
}
總結(jié)
歡迎提出更好的思路以及其他必備手寫功能
最后分享
WechatIMG6.jpeg
