this+call、apply、bind的區別與使用

http://www.ruanyifeng.com/blog/2018/06/javascript-this.html

http://www.javashuo.com/article/p-optnjegs-hn.html

在函數中 this 到底取何值，是在函數真正被調用執行的時候肯定下來的，函數定義的時候肯定不了。

由於 this 的取值是函數執行上下文(context)的一部分，每次調用函數，都會產生一個新的執行上下文環境。當代碼中使用了 this，這個 this 的值就直接從執行的上下文中獲取了，而不會從做用域鏈中搜尋。

關於 this 的取值，大致上能夠分爲如下七種狀況：
因爲嚴格模式下，禁止this指向全局對象，因此如下示例均運行在非嚴格模式下

狀況一：全局 & 調用普通函數
在全局環境中，this 永遠指向 window。

console.log(this === window); //true
普通函數在調用時候(注意不是構造函數，前面不加 new)，其中的 this 也是指向 window。

var x = 10;
function foo(){
console.log(this); //Window
console.log(this.x); //10
}
foo();

匿名函數中的this指向全局對象window

var x = 10;
var foo(){
　　a: 20,　　　
　　fn:(function(){

　　alert(this.a);

})()
}

foo.fn//10
foo();

setInterval和setTimeout定時器中的this指向全局對象window

狀況二：構造函數
所謂的構造函數就是由一個函數 new 出來的對象，通常構造函數的函數名首字母大寫，例如像 Object，Function，Array 這些都屬於構造函數。

function Foo(){
this.x = 10;
console.log(this); //Foo {x:10}
}
var foo = new Foo();
console.log(foo.x); //10
上述代碼，若是函數做爲構造函數使用，那麼其中的 this 就表明它即將 new 出來的對象。

可是若是直接調用 Foo 函數，而不是 new Foo()，那就變成狀況1，這時候 Foo() 就變成普通函數。

function Foo(){
this.x = 10;
console.log(this); //Window
}
var foo = Foo();
狀況三：對象方法
若是函數做爲對象的方法時，方法中的 this 指向該對象。

var obj = {
x: 10,
foo: function () {
console.log(this); //Object
console.log(this.x); //10
}
};
obj.foo();
注意：如果在對象方法中定義函數，那麼狀況就不一樣了。

var obj = {
x: 10,
foo: function () {
function f(){
console.log(this); //Window
console.log(this.x); //undefined
}
f();
}
}
obj.foo();
能夠這麼理解：函數 f 雖然是在 obj.foo 內部定義的，但它仍然屬於一個普通函數，this 仍指向 window。

在這裏，若是想要調用上層做用域中的變量 obj.x，可使用 self 緩存外部 this 變量。

var obj = {
x: 10,
foo: function () {
var self = this;
function f(){
console.log(self); //{x: 10}
console.log(self.x); //10
}
f();
}
}
obj.foo();
若是 foo 函數不做爲對象方法被調用：

var obj = {
x: 10,
foo: function () {
console.log(this); //Window
console.log(this.x); //undefined
}
};
var fn = obj.foo;
fn();
obj.foo 被賦值給一個全局變量，並無做爲 obj 的一個屬性被調用，那麼此時 this 的值是 window。

狀況四：構造函數 prototype 屬性
function Foo(){
this.x = 10;
}
Foo.prototype.getX = function () {
console.log(this); //Foo {x: 10, getX: function}
console.log(this.x); //10
}
var foo = new Foo();
foo.getX();
在 Foo.prototype.getX 函數中，this 指向的 foo 對象。不只僅如此，即使是在整個原型鏈中，this 表明的也是當前對象的值。

狀況五：函數用 call、apply或者 bind 調用。
var obj = {
x: 10
}
function foo(){
console.log(this); //{x: 10}
console.log(this.x); //10
}
foo.call(obj);
foo.apply(obj);
foo.bind(obj)();
當一個函數被 call、apply 或者 bind 調用時，this 的值就取傳入的對象的值。

狀況六：DOM event this
在一個 HTML DOM 事件處理程序裏，this 始終指向這個處理程序所綁定的 HTML DOM 節點：

function Listener(){
document.getElementById('foo').addEventListener('click', this.handleClick); //這裏的 this 指向 Listener 這個對象。不是強調的是這裏的 this
}
Listener.prototype.handleClick = function (event) {
console.log(this); //<div id="foo"></div>
}
var listener = new Listener();
document.getElementById('foo').click();
這個很好理解，就至關因而給函數傳參，使 handleClick 運行時上下文改變了，至關於下面這樣的代碼：

var obj = {
x: 10,
fn: function() {
console.log(this); //Window
console.log(this.x); //undefined
}
};
function foo(fn) {
fn();
}
foo(obj.fn);
你也能夠用經過 bind 切換上下文:

function Listener(){
document.getElementById('foo').addEventListener('click',this.handleClick.bind(this));
}
Listener.prototype.handleClick = function (event) {
console.log(this); //Listener {}
}
var listener = new Listener();
document.getElementById('foo').click();
前六種狀況其實能夠總結爲： this 指向調用該方法的對象。

狀況七：箭頭函數中的 this
當使用箭頭函數的時候，狀況就有所不一樣了：箭頭函數內部的 this 是詞法做用域，由上下文肯定。

var obj = {
x: 10,
foo: function() {
var fn = () => {
return () => {
return () => {
console.log(this); //Object {x: 10}
console.log(this.x); //10
}
}
}
fn()()();
}
}
obj.foo();
如今，箭頭函數徹底修復了 this 的指向，this 老是指向詞法做用域，也就是外層調用者 obj。

若是使用箭頭函數，之前的這種 hack 寫法：

var self = this;
就再也不須要了。

var obj = {
x: 10,
foo: function() {
var fn = () => {
return () => {
return () => {
console.log(this); // Object {x: 10}
console.log(this.x); //10
}
}
}
fn.bind({x: 14})()()();
fn.call({x: 14})()();
}
}
obj.foo();
因爲 this 在箭頭函數中已經按照詞法做用域綁定了，因此，用 call()或者 apply()調用箭頭函數時，沒法對 this 進行綁定，即傳入的第一個參數被忽略。

【複合場景1】

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21

var someone = {   name: "Bob" ,   showName: function (){    alert( this .name);   } }; var other = {   name: "Tom" ,   showName: someone.showName } other.showName();　　 //Tom   //以上函數至關於   var other = {   name: "Tom" ,   showName: function (){    alert( this .name);   } } other.showName();　　 //Tom

【複合場景2】

?

1 2 3 4 5 6 7 8 9 10 11 12

var name = 2; var a = {   name: 3,   fn: ( function (){    alert( this .name);   })(),   fn1: function (){    alert( this .name);   } } a.fn; //2[匿名函數中的this指向全局對象] a.fn1(); //3[對象內部函數的this指向調用函數的當前對象]

【複合場景3】

?

 

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31

var name = "Bob" ; var nameObj ={   name : "Tom" ,   showName : function (){   alert( this .name); },   waitShowName : function (){    var that = this ;    setTimeout( function (){     that.showName();    }, 1000);   } }; nameObj.waitShowName(); //"Tom"[that=this改變this的指向，使this從指向全局變量變化到指向nameObj]   var name = "Bob" ; var nameObj ={   name : "Tom" ,   showName : function (){    alert( this .name);   },   waitShowName : function (){    var that = this ; //that指向nameObj    setTimeout( function (){     ( function (){      alert( this .name);     })();    }, 1000);   } }; nameObj.waitShowName(); // 'Bob'[造成匿名函數，this指向全局變量]

 

細說 call、apply 以及 bind 的區別和用法

call 和 apply 的共同點

它們的共同點是，都可以改變函數執行時的上下文，將一個對象的方法交給另外一個對象來執行，而且是當即執行的。

爲什麼要改變執行上下文？舉一個生活中的小例子：平時沒時間作飯的我，週末想給孩子燉個醃篤鮮嚐嚐。可是沒有適合的鍋，而我又不想出去買。因此就問鄰居借了一個鍋來用，這樣既達到了目的，又節省了開支，一箭雙鵰。

改變執行上下文也是同樣的，A 對象有一個方法，而 B 對象由於某種緣由，也須要用到一樣的方法，那麼這時候咱們是單獨爲 B 對象擴展一個方法呢，仍是借用一下 A 對象的方法呢？固然是借用 A 對象的啦，既完成了需求，又減小了內存的佔用。

另外，它們的寫法也很相似，調用 call 和 apply 的對象，必須是一個函數 Function。接下來，就會說到具體的寫法，那也是它們區別的主要體現。

call 和 apply 的區別

它們的區別，主要體如今參數的寫法上。先來看一下它們各自的具體寫法。

call 的寫法

Function.call(obj,[param1[,param2[,…[,paramN]]]])

須要注意如下幾點：

• 調用 call 的對象，必須是個函數 Function。
• call 的第一個參數，是一個對象。 Function 的調用者，將會指向這個對象。若是不傳，則默認爲全局對象 window。
• 第二個參數開始，能夠接收任意個參數。每一個參數會映射到相應位置的 Function 的參數上。可是若是將全部的參數做爲數組傳入，它們會做爲一個總體映射到 Function 對應的第一個參數上，以後參數都爲空。

function func (a,b,c) {} func.call(obj, 1,2,3) // func 接收到的參數其實是 1,2,3 func.call(obj, [1,2,3]) // func 接收到的參數其實是 [1,2,3],undefined,undefined

apply 的寫法

Function.apply(obj[,argArray])

須要注意的是：

• 它的調用者必須是函數 Function，而且只接收兩個參數，第一個參數的規則與 call 一致。
• 第二個參數，必須是數組或者類數組，它們會被轉換成類數組，傳入 Function 中，而且會被映射到 Function 對應的參數上。這也是 call 和 apply 之間，很重要的一個區別。

func.apply(obj, [1,2,3]) // func 接收到的參數其實是 1,2,3 func.apply(obj, { 0: 1, 1: 2, 2: 3, length: 3 }) // func 接收到的參數其實是 1,2,3

什麼是類數組？

先說數組，這咱們都熟悉。它的特徵有：能夠經過角標調用，如 array[0]；具備長度屬性length；能夠經過 for 循環或forEach方法，進行遍歷。

那麼，類數組是什麼呢？顧名思義，就是具有與數組特徵相似的對象。好比，下面的這個對象，就是一個類數組。

let arrayLike = { 0: 1, 1: 2, 2: 3, length: 3 };

類數組 arrayLike 能夠經過角標進行調用，具備length屬性，同時也能夠經過 for 循環進行遍歷。

類數組，仍是比較經常使用的，只是咱們平時可能沒注意到。好比，咱們獲取 DOM 節點的方法，返回的就是一個類數組。再好比，在一個方法中使用 arguments 獲取到的全部參數，也是一個類數組。

可是須要注意的是：類數組沒法使用 forEach、splice、push 等數組原型鏈上的方法，畢竟它不是真正的數組。

call 和 apply 的用途

下面會分別列舉 call 和 apply 的一些使用場景。聲明：例子中沒有哪一個場景是必須用 call 或者必須用 apply 的，只是我的習慣這麼用而已。

call 的使用場景

一、對象的繼承。以下面這個例子：

function superClass () { this.a = 1; this.print = function () { console.log(this.a); } } function subClass () { superClass.call(this); this.print(); } subClass(); // 1

subClass 經過 call 方法，繼承了 superClass 的 print 方法和 a 變量。此外，subClass 還能夠擴展本身的其餘方法。

二、借用方法。還記得剛纔的類數組麼？若是它想使用 Array 原型鏈上的方法，能夠這樣：

let domNodes = Array.prototype.slice.call(document.getElementsByTagName("*"));

這樣，domNodes 就能夠應用 Array 下的全部方法了。

apply 的一些妙用

一、Math.max。用它來獲取數組中最大的一項。

let max = Math.max.apply(null, array);

同理，要獲取數組中最小的一項，能夠這樣：

let min = Math.min.apply(null, array);

二、實現兩個數組合並。在 ES6 的擴展運算符出現以前，咱們能夠用 Array.prototype.push來實現。

let arr1 = [1, 2, 3]; let arr2 = [4, 5, 6]; Array.prototype.push.apply(arr1, arr2); console.log(arr1); // [1, 2, 3, 4, 5, 6]

bind 的使用

最後來講說 bind。在 MDN 上的解釋是：bind() 方法建立一個新的函數，在調用時設置 this 關鍵字爲提供的值。並在調用新函數時，將給定參數列表做爲原函數的參數序列的前若干項。

它的語法以下：

Function.bind(thisArg[, arg1[, arg2[, ...]]])

bind 方法 與 apply 和 call 比較相似，也能改變函數體內的 this 指向。不一樣的是，bind 方法的返回值是函數，而且須要稍後調用，纔會執行。而 apply 和 call 則是當即調用。

來看下面這個例子：

function add (a, b) {
    return a + b; } function sub (a, b) { return a - b; } add.bind(sub, 5, 3); // 這時，並不會返回 8 add.bind(sub, 5, 3)(); // 調用後，返回 8

若是 bind 的第一個參數是 null 或者 undefined，this 就指向全局對象 window。

總結

call 和 apply 的主要做用，是改變對象的執行上下文，而且是當即執行的。它們在參數上的寫法略有區別。

bind 也能改變對象的執行上下文，它與 call 和 apply 不一樣的是，返回值是一個函數，而且須要稍後再調用一下，纔會執行。