深入理解call,以及與apply、bind的區別

1、call

修改函數運行時this的指向

// 代碼段一
var obj = {name: 'psg'};
function fn(num1, num2) {
    console.log(num1+num2);
    console.log(this) 
}
// 1、call裏面,第一個參數就會說要變成this的對象
fn(100, 200); //this指向window, num1=100, num2=200
fn.call(100, 200); //this指向100, num1=200, num2=undefined
fn.call(obj, 100, 200); //this指向obj,  num1=100, num2=200
 
// 2、在非嚴格模式下,call裏面,第一個參數如果是空、null、undefined,會導致this指向window
fn.call(); //this指向window
 
// 3、在嚴格模式下,call裏面,傳誰this就是誰,不傳,this就是undefined
fn.call(); //this指向undefined
fn.call(null); //this指向null
fn.call(undefined); //this指向undefined

2、apply

  • apply和call方法的作用是一模一樣的,都是用來改變方法中this關鍵字並且將方法執行,而且在嚴格模式、非嚴格模式下對於第一個參數是null / undefined這種情況的規律也是一樣的。

  • 跟call唯一的的區別就是語法的區別:

//call傳遞參數是用逗號分隔,一個一個傳進去
fn.call(obj, arg1,arg2,arg3.....)
//apply傳遞參數是用一個數組傳的
fn.apply(obj, [arg1,arg2,arg3....])

3、bind

與apply、call類似,都是用來改變this指向,
但是bind它是把function中的this改變成我們想要的結果,並且把對象的參數也準備好了(它並不會執行相應函數,會返回一個新的修改this指向,以及傳遞好了相應參數的方法),以後要用到了,直接執行即可。

var obj = {name: 'psg'};
function fn(num1, num2) {
    console.log(num1+num2);
    console.log(this);
}
fn.call(obj, 100, 200);
fn.bind(obj, 100, 200);  
// 只是改變了fn中的this爲obj,並且給fn傳遞了兩個參數值,但是此時並沒有去執行fn這個函數。
// 它會有一個返回值,這個返回值myFn就是我們把fn的this改變後的那個結果!!!
 
//那麼,如何讓fn這個函數執行呢,下面的寫法就行解決方法
var myFn = fn.bind(obj, 100, 200);
myFn();

參考鏈接: https://www.cnblogs.com/pengshengguang/p/11184378.html

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章