我們都知道js中call和apply都是改變this指向的，這篇文章我們一起來(lái)實(shí)現(xiàn)call和apply的底層吧！我們先來(lái)看一下js中的call和apply的用法

一.用法

1.call用法 傳遞參數(shù)逗號(hào)分隔

// 1.js call的用法
function fnc(a,b,c) {
  console.log(this.name,a,b,c);
}
var obj = {
  name: "逍遙的碼農(nóng)",
};
// 這里我們想用fnc函數(shù)打印出obj對(duì)象里的name屬性
// 把obj為參數(shù)給call函數(shù)傳遞過去
fnc.call(obj,"參數(shù)1","參數(shù)2","參數(shù)3")

2.apply用法 傳遞參數(shù)為數(shù)組

// 1.js apply的用法
function fnc(a,b,c) {
  console.log(this.name,a,b,c);
}
var obj = {
  name: "逍遙的碼農(nóng)",
};
// 這里我們想用fnc函數(shù)打印出obj對(duì)象里的name屬性
// 把obj為參數(shù)給apply函數(shù)傳遞過去
fnc.apply(obj,["參數(shù)1","參數(shù)2","參數(shù)3"])

二.手寫實(shí)現(xiàn)call

1.手寫myCall改變this指向

function fnc(a, b, c) {
  console.log(this.name, a, b, c);
}
var obj = {
  name: "逍遙的碼農(nóng)",
};

Function.prototype.myCall = function (obj) {
  // 首先看一下這里的this 這里的this為fnc函數(shù)
  console.log(this);
  // 我們給傳過來(lái)的obj添加fnc函數(shù) 相當(dāng)于obj里面添加了一個(gè)p函數(shù)為fnc函數(shù)
  obj.p = this;
  // 運(yùn)行p函數(shù) 這里fnc的this已經(jīng)被改變?yōu)閛bj fnc函數(shù)正常打印出name
  obj.p();
  // 運(yùn)行完成刪除p方法 不能改變對(duì)象數(shù)據(jù)
  delete obj.p
};
fnc.myCall(obj);

這里this指向已經(jīng)改變，但是還不可以傳遞參數(shù)接下來(lái)傳參

2.傳遞參數(shù) 逗號(hào)分隔傳參

function fnc(a, b, c) {
  console.log(this.name, a, b, c);
}
var obj = {
  name: "逍遙的碼農(nóng)",
};

Function.prototype.myCall = function (obj) {
  //這里用arguments 他是一個(gè)偽數(shù)組并不是真正的數(shù)組 需要給他轉(zhuǎn)換成數(shù)組 這里使用Array.prototype.slice.call
  console.log(arguments)
  // 這里從第一個(gè)下標(biāo)截取 因?yàn)榈谝粋€(gè)參數(shù)為obj 我們不需要
  var ars =  Array.prototype.slice.call(arguments,1)
  console.log(ars)
  // 首先看一下這里的this 這里的this為fnc函數(shù)
  console.log(this);
  // 我們給傳過來(lái)的obj添加fnc函數(shù) 相當(dāng)于obj里面添加了一個(gè)p函數(shù)為fnc函數(shù)
  obj.p = this;
  // 運(yùn)行p函數(shù) 這里fnc的this已經(jīng)被改變?yōu)閛bj fnc函數(shù)正常打印出name 給p傳遞參數(shù)
  obj.p(...ars);
  // 運(yùn)行完成刪除p方法 不能改變對(duì)象數(shù)據(jù)
  delete obj.p
};
fnc.myCall(obj,"參數(shù)1","參數(shù)2","參數(shù)3");

這里就完成了call方法 接下來(lái)的apply肯定小伙伴已經(jīng)懂了吧 來(lái)咱們繼續(xù)

二.手寫實(shí)現(xiàn)apply

1.手寫myApply 數(shù)組傳遞參數(shù)

Function.prototype.myApply = function (obj, arr) {
  // 這里的this還是為為fnc函數(shù)
  console.log(this);
  obj.p = this;
  // 這里的arr為數(shù)組直接傳遞過去就可以了
  obj.p(...arr);
  delete obj.p;
},
fnc.myApply(obj, ["參數(shù)1", "參數(shù)2", "參數(shù)3"]);

apply很簡(jiǎn)單 只要把call弄懂了apply就很簡(jiǎn)單啦文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-735140.html

到了這里，關(guān)于js--手寫call和apply方法干貨注釋滿滿的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！