為什麼要改變this指向? 我們知道bind,call,apply的作用都是用來改變this指向的,那為什麼要改變this指向呢?請看下麵的例子: var name="lucy"; let obj={ name:"martin", say:function () { console.log(this ...
為什麼要改變this指向?
我們知道bind,call,apply的作用都是用來改變this指向的,那為什麼要改變this指向呢?請看下麵的例子:
var name="lucy";
let obj={
name:"martin",
say:function () {
console.log(this.name);
}
};
obj.say(); //martin,this指向obj對象
setTimeout(obj.say,0); //lucy,this指向window對象
可以觀察到,正常情況下 say 方法中的 this 是指向調用它的 obj 對象的,而定時器 setTimeout 中的 say 方法中的 this 是指向window對象的(在瀏覽器中),這是因為 say 方法在定時器中是作為回調函數來執行的,因此回到主棧執行時是在全局執行上下文的環境中執行的,但我們需要的是 say 方法中 this 指向obj對象,因此我們需要修改 this 的指向。
apply方法
apply接受兩個參數,第一個參數是this的指向,第二個參數是函數接受的參數,以數組的形式傳入,且當第一個參數為null、undefined的時候,預設指向window(在瀏覽器中),使用apply方法改變this指向後原函數會立即執行,且此方法只是臨時改變thi指向一次。
日常用法:改變this指向
示例:
回調函數綁定this指向:
var name="martin"; var obj={ name:"lucy", say:function(year,place){ console.log(this.name+" is "+year+" born from "+place); } }; var say=obj.say; setTimeout(function(){ say.apply(obj,["1996","China"]) } ,0); //lucy is 1996 born from China,this改變指向了obj say("1996","China") //martin is 1996 born from China,this指向window,說明apply只是臨時改變一次this指向
小技巧:改變參數傳入方式
示例:
求數組中的最大值:
var arr=[1,10,5,8,3]; console.log(Math.max.apply(null, arr)); //10
其中Math.max函數的參數是以參數列表,如:Math.max(1,10,5,8,3)的形式傳入的,因此我們沒法直接把數組當做參數,但是apply方法可以將數組參數轉換成列表參數傳入,從而直接求數組的最大值。
call方法
call方法的第一個參數也是this的指向,後面傳入的是一個參數列表(註意和apply傳參的區別)。當一個參數為null或undefined的時候,表示指向window(在瀏覽器中),和apply一樣,call也只是臨時改變一次this指向,並立即執行。
示例:
var arr=[1,10,5,8,3]; console.log(Math.max.call(null,arr[0],arr[1],arr[2],arr[3],arr[4])); //10
採納以參數列表的形式傳入,而apply以參數數組的形式傳入。
bind方法
bind方法和call很相似,第一參數也是this的指向,後面傳入的也是一個參數列表(但是這個參數列表可以分多次傳入,call則必須一次性傳入所有參數),但是它改變this指向後不會立即執行,而是返回一個永久改變this指向的函數。
示例:
var arr=[1,10,5,8,12]; var max=Math.max.bind(null,arr[0],arr[1],arr[2],arr[3]) console.log(max(arr[4])); //12,分兩次傳參
可以看出,bind方法可以分多次傳參,最後函數運行時會把所有參數連接起來一起放入函數運行。
實現bind方法(面試題):
簡易版
Function.prototype.bind=function () { var _this=this; var context=arguments[0]; var arg=[].slice.call(arguments,1); return function(){ arg=[].concat.apply(arg,arguments); _this.apply(context,arg); } };
完美版
//實現bind方法 Function.prototype.bind = function(oThis) { if (typeof this !== 'function') { // closest thing possible to the ECMAScript 5 // internal IsCallable function throw new TypeError('Function.prototype.bind - what is trying to be bound is not callable'); } var aArgs = Array.prototype.slice.call(arguments, 1), fToBind = this, fNOP = function() {}, fBound = function() { // this instanceof fBound === true時,說明返回的fBound被當做new的構造函數調用 return fToBind.apply(this instanceof fBound ? this : oThis, // 獲取調用時(fBound)的傳參.bind 返回的函數入參往往是這麼傳遞的 aArgs.concat(Array.prototype.slice.call(arguments))); }; // 維護原型關係 if (this.prototype) { // 當執行Function.prototype.bind()時, this為Function.prototype // this.prototype(即Function.prototype.prototype)為undefined fNOP.prototype = this.prototype; } // 下行的代碼使fBound.prototype是fNOP的實例,因此 // 返回的fBound若作為new的構造函數,new生成的新對象作為this傳入fBound,新對象的__proto__就是fNOP的實例 fBound.prototype = new fNOP(); return fBound; }; var arr=[1,11,5,8,12]; var max=Math.max.bind(null,arr[0],arr[1],arr[2],arr[3]); console.log(max(arr[4])); //12
apply,call,bind三者的區別
- 三者都可以改變函數的this對象指向。
- 三者第一個參數都是this要指向的對象,如果如果沒有這個參數或參數為undefined或null,則預設指向全局window。
- 三者都可以傳參,但是apply是數組,而call是參數列表,且apply和call是一次性傳入參數,而bind可以分為多次傳入。
- bind 是返回綁定this之後的函數,便於稍後調用;apply 、call 則是立即執行
ref: https://zhuanlan.zhihu.com/p/82340026
你好,我是Jane,如果萬幸對您有用,請幫忙點下推薦,謝謝啦~另外,咱們快閃記憶體見哦~