建站
咨詢
售后
建站咨詢
新聞中心
在百題斬js中的這些“this”指向都值得了解中已經(jīng)簡要概述了call、apply、bind三個方法，這三者作用是相同的，均可以改變this指向，從而讓某對象可以調(diào)用自身不具備的方法，本節(jié)將深入理解這三者的實現(xiàn)原理。
寶坻網(wǎng)站建設(shè)公司成都創(chuàng)新互聯(lián),寶坻網(wǎng)站設(shè)計制作，有大型網(wǎng)站制作公司豐富經(jīng)驗。已為寶坻上千余家提供企業(yè)網(wǎng)站建設(shè)服務(wù)。企業(yè)網(wǎng)站搭建\外貿(mào)網(wǎng)站建設(shè)要多少錢，請找那個售后服務(wù)好的寶坻做網(wǎng)站的公司定做！
15.1 call()
15.1.1 基礎(chǔ)
call() 方法使用一個指定的 this 值和單獨(dú)給出的一個或多個參數(shù)來調(diào)用一個函數(shù)。其返回值是使用調(diào)用者提供的this值和參數(shù)調(diào)用該函數(shù)的返回值，若該方法沒有返回值，則返回undefined。
基本用法：
- function.call(thisArg, arg1, arg2, ...)
小試牛刀
- function method(val1, val2) {
- return this.a + this.b + val1 + val2;
- }
- const obj = {
- a: 1,
- b: 2
- };
- console.log(method.call(obj, 3, 4)); // 10
15.1.2 實現(xiàn)
實現(xiàn)一個call函數(shù)，將通過以下幾個步驟：
- 獲取第一個參數(shù)(注意第一個參數(shù)為null或undefined時，this指向window)，構(gòu)建對象
- 將對應(yīng)函數(shù)傳入該對象中
- 獲取參數(shù)并執(zhí)行相應(yīng)函數(shù)
- 刪除該對象中函數(shù)，消除副作用
- 返回結(jié)果
- Function.prototype.myCall = function (context, ...args) {
- // 獲取第一個參數(shù)（注意第一個參數(shù)為null或undefined時，this指向window），構(gòu)建對象
- context = context ? Object(context) : window;
- // 將對應(yīng)函數(shù)傳入該對象中
- context.fn = this;
- // 獲取參數(shù)并執(zhí)行相應(yīng)函數(shù)
- let result = context.fn(...args);
- // 消除副作用
- delete context.fn;
- // 返回結(jié)果
- return result;
- }
- // ……
- console.log(method.myCall(obj, 3, 4)); // 10
15.2 apply()
15.2.1 基礎(chǔ)
apply() 方法調(diào)用一個具有給定this值的函數(shù)，以及以一個數(shù)組(或類數(shù)組對象)的形式提供的參數(shù)。其返回值是指定this值和參數(shù)的函數(shù)的結(jié)果。call() 和 apply()的區(qū)別是call()方法接受的是參數(shù)列表，而apply()方法接受的是一個參數(shù)數(shù)組;
基本用法
- func.apply(thisArg, [argsArray])
小試牛刀
- function method(val1, val2) {
- return this.a + this.b + val1 + val2;
- }
- const obj = {
- a: 1,
- b: 2
- };
- console.log(method.apply(obj, [3, 4])); // 10
15.2.2 實現(xiàn)
apply和call的區(qū)別主要是參數(shù)的不同，所以其實現(xiàn)步驟的call大體類似，如下所示：
- Function.prototype.myApply = function (context, arr) {
- context = context ? Object(context) : window;
- context.fn = this;
- let result = arr ? context.fn(...arr) : context.fun();
- delete context.fn;
- return result;
- }
- // ……
- console.log(method.myApply(obj, [3, 4])); // 10
15.3 bind()
15.3.1 基礎(chǔ)
bind() 方法創(chuàng)建一個新的函數(shù)，在 bind() 被調(diào)用時，這個新函數(shù)的 this 被指定為 bind() 的第一個參數(shù)，而其余參數(shù)將作為新函數(shù)的參數(shù)，供調(diào)用時使用。該函數(shù)的返回值是一個原函數(shù)的拷貝，并擁有指定的this值和初始參數(shù)。
基本用法
- function.bind(thisArg[, arg1[, arg2[, ...]]])
小試牛刀
- function method(val1, val2) {
- return this.a + this.b + val1 + val2;
- }
- const obj = {
- a: 1,
- b: 2
- };
- const bindMethod = method.bind(obj, 3, 4);
- console.log(bindMethod()); // 10
15.3.2 實現(xiàn)
實現(xiàn)一個bind函數(shù)相對較復(fù)雜一些，應(yīng)該注意以下幾點(diǎn)：
- 能夠改變this指向;
- 返回的是一個函數(shù);
- 能夠接受多個參數(shù);
- 支持柯里化形式傳參 fun(arg1)(arg2);
- 獲取到調(diào)用bind()返回值后，若使用new調(diào)用(當(dāng)做構(gòu)造函數(shù))，bind()傳入的上下文context失效。
- Function.prototype.myBind = function (context, ...args) {
- if (typeof(this) !== 'function') {
- throw new TypeError('The bound object needs to be a function');
- }
- const self = this;
- // 定義一個中裝函數(shù)
- const fNOP = function() {};
- const fBound = function(...fBoundArgs) {
- // 利用apply改變this指向
- // 接受多個參數(shù)+支持柯里化形式傳參
- // 當(dāng)返回值通過new調(diào)用時，this指向當(dāng)前實例 （因為this是當(dāng)前實例，實例的隱士原型上有fNOP的實例（fnop）；fnop instanceof fNOP為true）
- return self.apply(this instanceof fNOP ? this : context, [...args, ...fBoundArgs]);
- }
- // 將調(diào)用函數(shù)的原型賦值到中轉(zhuǎn)函數(shù)的原型上
- if (this.prototype) {
- fNOP.prototype = this.prototype;
- }
- // 通過原型的方式繼承調(diào)用函數(shù)的原型
- fBound.prototype = new fNOP();
- return fBound;
- }
本文轉(zhuǎn)載自微信公眾號「執(zhí)鳶者」，可以通過以下二維碼關(guān)注。轉(zhuǎn)載本文請聯(lián)系執(zhí)鳶者公眾號。
網(wǎng)頁題目：前端百題斬——快速手撕Call、Apply、Bind
URL標(biāo)題：http://www.dlmjj.cn/article/dphssji.html
