淺談javascript里面的this、call、apply、bind

Lemon_95 發(fā)布于2019-08-22 11:21 / 3537人閱讀

摘要：如果該參數(shù)的值為或，則表示不需要傳入任何參數(shù)，從開始可以使用類數(shù)組對象。當使用操作符調用綁定函數(shù)時，該參數(shù)無效。當綁定函數(shù)被調用時，這些參數(shù)將置于實參之前傳遞給被綁定的方法。

在了解call,apply之前需要先了解下javascrit中this指向

this的指向
在ES5里面，this永遠指向最后調用它的那個對象
舉個栗子：

var name = "outerName";
function test(){
    var name = "innerName";
    console.log(this.name);  //outerName
    console.log("inner:" + this);  //inner:Window
}
test();
console.log("outer:"+this);//outer:Window

我們最后調用test的地方test();,前面沒有調用的對象那么就是全局對象window,相當于window.test();注意這里沒有使用嚴格模式，如果使用嚴格模式，全局對象就是undefined,那么就會報錯Uncaught TypeError:cannot read property "name" of underfined

在舉個栗子：

var name = "outerName";
var test = {
    name:"innerName",
    fn:function(){
        console.log(this.name); //innerName
    }
};
test.fn();
window.test.fn();

這里打出的是innerName，因為fn是test調用的

還有個略坑的栗子：

var name = "outerName";
var test = {
    name:null,
    fn:function(){
        console.log(this.name); //outerName
    }
};
var f = test.fn
f();

這里打出的outerName因為f并沒有被調用，fn()仍然是window調用的

再看看這個栗子：

var name = "outerName";
function fn(){
    var name = "innnerName";
    innerFn();
    function innerFn(){
        console.log(this.name); //outerName
    }
};
fn();

這里打出的是outerName，因為仍然是window調用的

總結一下：
this的指向并不是在創(chuàng)建的時候就可以確定的，在ES5里面，this永遠是指向最后調用它的那個對象。

改變this指向

那我們怎么才能改變this指向呢，總結一下

使用ES6的箭頭函數(shù)

在函數(shù)內部使用_this=this;

使用call、apply、bind

new 實例化一個對象

繼續(xù)看一個栗子：

var name = "outerName";
var test = {
    name:"mm",
    fn1:function(){
        console.log(this.name);
    },
    fn2:function(){
        setTimeout(function(){
            this.fn1(); 
        },0);
    }
};
test.fn2(); //this.fn1 is not a funtion

箭頭函數(shù)
ES6中的箭頭函數(shù)是可以避免ES5中的this的坑的，箭頭函數(shù)始終指向定義時的this，而非執(zhí)行時。
箭頭函數(shù)中沒有this綁定，必須通過查找作用域鏈來覺得其值，如果箭頭函數(shù)被非箭頭函數(shù)包含，那么this綁定的是最近一層非箭頭函數(shù)的this,否則，this為undefined.
調整后的栗子：

var name = "outerName";
var test = {
    name:"mm",
    fn1:function(){
        console.log(this.name);
    },
    fn2:function(){
        setTimeout(() => {
            this.fn1(); 
        },0);
    }
};
test.fn2(); //mm

在函數(shù)內部使用_this = this
_this指的是test對象

var name = "outerName";
var test = {
    name:"mm",
    fn1:function(){
        console.log(this.name);
    },
    fn2:function(){
        var _this = this;
        setTimeout(function(){
            _this.fn1(); 
        },0);
    }
};
test.fn2(); //mm

使用call,apply,bind

var name = "outerName";
var test = {
    name:"mm",
    fn1:function(){
        console.log(this.name);
    },
    fn2:function(){
        setTimeout(function(){
            this.fn1(); 
        }.apply(test),0);
    }
};
test.fn2(); //mm

var name = "outerName";
var test = {
    name:"mm",
    fn1:function(){
        console.log(this.name);
    },
    fn2:function(){
        setTimeout(function(){
            this.fn1(); 
        }.call(test),0);
    }
};
test.fn2(); //mm

var name = "outerName";
var test = {
    name:"mm",
    fn1:function(){
        console.log(this.name);
    },
    fn2:function(){
        setTimeout(function(){
            this.fn1(); 
        }.bind(test)(),0);
    }
};
test.fn2(); //mm

具體有什么區(qū)別呢
看下MDN上的解釋

apply
語法：
fun.apply(thisArg,[argsArray]);
參數(shù)
thisArg
在fun函數(shù)運行時指定的this值，需要注意的是，指定的this的值不一定是該函數(shù)執(zhí)行時真正的this值，如果這個函數(shù)處于非嚴格模式下，則指定為null或undefined時會自動指向全局對象（瀏覽器中就是window對象），同時值為原始值（數(shù)字，字符串，布爾值）的this會指向該原始值的自動包裝對象。
argsArray
一個數(shù)組或者類數(shù)組對象，其中數(shù)組原始將作為多帶帶的參數(shù)傳給fun函數(shù)。如果該參數(shù)的值為null或undefined，則表示不需要傳入任何參數(shù)，從ECMAScript5開始可以使用類數(shù)組對象。

call
語法
fun.call(thisArg,arg1,arg2,...)
參數(shù)
thisArg
同上apply
arg1,agr2,...
指定的參數(shù)列表

bind
語法
fun.bind(thisArg[,arg1[,arg2[,...]]])
參數(shù)
thisArg
當綁定函數(shù)被調用時，該參數(shù)會作為原函數(shù)運行時的this指向。當使用new操作符調用綁定函數(shù)時，該參數(shù)無效。
arg1,arg2,...
當綁定函數(shù)被調用時，這些參數(shù)將置于實參之前傳遞給被綁定的方法。

在總結一下：
apply,call,bind都是用來改變函數(shù)的this對象的指向；
第一個參數(shù)都是this要指向的對象，也就是指定的上下文；
都可以利用后續(xù)參數(shù)傳參；
apply,call是立即調用，bind是返回對應函數(shù)，需要手動調用。

云服務器 GPU云服務器 JS中bind、call和apply的作 apply與call的區(qū)別 js里面的this js中的call和apply

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/92250.html

淺談-this

摘要：回調函數(shù)中調用在回調函數(shù)中一般有兩種情況回調函數(shù)為匿名函數(shù)時，回調函數(shù)的會指向，需要對回調函數(shù)。回調函數(shù)為箭頭函數(shù)時，回調函數(shù)的會指向他的直接上層。淺談-this this簡單而又神秘，使用場景多變而又復雜，這造就了它成為了初級javascript開發(fā)人員不愿接觸的東西，高級javascript都想探究的東西。文本亦是對this的致敬。 this是什么？ this是當前執(zhí)行環(huán)境...

archieyang 2019-08-23 16:16 評論0 收藏0
淺談call()、apply()、bind()方法

摘要：函數(shù)調用方法一般我們是這樣調用函數(shù)的和現(xiàn)在我們說一說方法和方法。他們都是調用一個對象的方法，以另一個對象替換當前對象。例如方法在上面的例子中，，意思就是用來替換。和方法比較類似，其作用都是改變上下文的。 call(), apply(), bind() 函數(shù)調用方法一般我們是這樣調用函數(shù)的： function add(x){ console.log(x) } add(2)//2...

zhangrxiang 2019-08-21 12:02 評論0 收藏0
淺談 javascript 中的this綁定問題

摘要：綁定使用方式進行調用函數(shù)時，會發(fā)生構造函數(shù)的調用。先上圖，然后根據(jù)文字閱讀使用調用函數(shù)之后，該函數(shù)才作為構造函數(shù)進行調用，構造一個全新的對象賦值給，而對象的指向了的對象，的對象有一個屬性指向的構造函數(shù)這個就是的原型鏈，也是的特性。 javascript語言是在運行時前即進行編譯的，而this的綁定也是在運行時進行綁定的。也就是說,this實際上是在函數(shù)被調用時候發(fā)生綁定的，它指向什么完...

duan199226 2019-08-22 16:18 評論0 收藏0
call,apply and bind in JavaScript

摘要：文章盡量使用大量實例進行講解，它們的使用場景。在嚴格模式下，函數(shù)被調用后，里面的默認是后面通過調用函數(shù)上的和方法，該變指向，函數(shù)里面的指向。利用，可以傳入外層的上下文。同樣適用的還有，里面的對象，它也是一種類數(shù)組對象。 call,apply and bind in JavaScript 在ECMAScript中，每個函數(shù)都包含兩個繼承而來的方法：apply() 和 call(),這兩個...

JohnLui 2019-08-22 15:19 評論0 收藏0
js基礎深入淺出

摘要：當多個事件觸發(fā)的時候，會把異步事件依次的放入里等同步事件執(zhí)行完之后，再去隊列里一個個執(zhí)行拾遺常用方法總結面試的信心來源于過硬的基礎參考高級程序設計你所不知道的深入淺出知識點思維導圖經典實例總結那些剪不斷理還亂的關系持續(xù)不斷更新。。。基本類型和引用類型 vue props | Primitive vs Reference Types 基本類型和字面值之間的區(qū)別基本類型和字面值相等，...

phodal 2019-08-20 16:21 評論0 收藏0