【JavaScript】深入理解call，以及與apply、bind的區別

彭勝光發表於2019-07-14
JavaScriptAPP

一、call

call有兩個妙用

     1、繼承（我前面的文章有提到用call實現call繼承，有興趣可以看下。https://www.cnblogs.com/pengshengguang/p/10547624.html）

     2、修改函式執行時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

 

二、apply

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

     2、跟call唯一的的區別就是語法的區別：

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

 

三、bind

     1、這個方法在IE6-IE8下不相容。

     2、與apply、call類似，都是用來改變this指向，但是bind體現了js的預處理思想。

          ->預處理：實現把fn的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這個函式執行。
// 但是，執行bind會有一個返回值，這個返回值myFn就是我們把fn的this改變後的那個結果！！！

//那麼，如何讓fn這個函式執行呢，下面的寫法就行解決方法
var myFn = fn.bind(obj, 100, 200);
myFn();

 

四、深入理解call

　　4.1 如果我們要理解call，我們首先要知道call是怎樣被執行的，涉及到了原型鏈查詢機制。

//例如，現在有一個函式fn，我們想改變fn中this的指向，因此我們可以
fn.call(obj);
//上面的程式碼，其實是首先通過fnl的原型鏈，找到Function.ptototype中的call方法，然後執行call方法，cal方法中的this，就是fn

　　4.2 虛擬碼模擬實現call方法

Function.prototype.myCall = function(context) {
    //->1、讓fn中的this關鍵字變成context
    this = eval(this.toString().replace("this", context));
    //->2、讓fn執行
    this();  
}

　　4.3 經典面試題

// 練習一
function fn1() {console.log(1);}
function fn2() {console.log(2);}
fn1.call(fn2); // ->1    
//原理：首先fn1通過原型鏈機制找到Function.prototype上的call方法，並且讓call方法執行
// 此時call這個方法中的this就是fn1，在call方法執行過程中，讓fn1中this關鍵字變成fn2，然後讓fn1執行

fn1.call.call(fn2); // ->2
//原理首先fn1通過原型鏈機制找到Function.prototype上的call方法，然後再讓call方法通過原型找到call方法
// Function.prototype原型上的call（因為fn.call這個東西也是個函式資料型別），在第二次找到call時，讓call方法執行，此時
// 的this是fn1.call。

　　end

 

相關文章