Js 中的 this

Js 中 this 的理解

 

this 是啥 ？

 

this是 JavaScript 語言的一個關鍵字，它代表函數運行時，自動生成的一個內部對象，只能在函數內部使用; 隨着函數使用場合的不同，this的值會發生變化。但是有一個總的原則，那就是this指的是調用函數的那個對象。

先搞明白一個很重要的概念 —— this的值是在執行的時候才能確認，定義的時候不能確認！為什么呢 —— 因為this是執行上下文環境的一部分，而執行上下文需要在代碼執行之前確定，而不是定義的時候。查看執行上下文

 

我的理解：this 總是指向類的當前實例，this不能賦值；也就是說 this 不能脫離 類/對象 ，總結下來，this的指向大致分為4種情況

 

1.純粹的函數調用，this指向全局對象window.

var x = 1;
function test() {
   console.log(this.x);
}
test();  // 1

2.嚴格模式下"use strict"，指向 undefined.

"use strict";
var x = 1;
function test() {
   console.log(this.x);
}
test();  // undefined

3.對象的方法里調用，this指向調用該方法的對象

function test() {
  console.log(this.x);
}
var obj = {};
obj.x = 1;
obj.m = test;

obj.m(); // 1

4.構造函數里的this，指向創建出來的實例，這里的 全局 x 始終是 1 ；說明了 this 指向構造函數創建的實例。

var x = 1;
function test() {
　this.x = 2;
}
var obj = new test();
obj.x // 2
x //1

 

那么this的指向能不能更改呢 ？

答案是當然可以的，call / apply / bind ；我們都知道call apply bind都可以改變函數調用this的指向。

call跟apply的用法幾乎一樣，唯一的不同就是傳遞的參數不同，call只能一個參數一個參數的傳入。

apply則只支持傳入一個數組，哪怕是一個參數也要是數組形式。最終調用函數時候這個數組會拆成一個個參數分別傳入。

我的理解：a.call(b,arg1,arg2..) 就是a對象的方法應用到b對象上 ; 調用call的對象必須是一個函數對象,因為 call這個方法是在Function的prototype里的，因此 a 對象的共有屬性也會應用到 b 對象上；(所謂的繼承，apply同理)。我們實踐一下：

 

實踐一下 call / apply：

var x = 0;
function test() {
　console.log(this.x);
}
var obj = {};
obj.x = 1;
obj.m = test;
//apply 的方式
obj.m.apply()  // 0
obj.m.apply(obj);  //1
//call 的方式
obj.m.call()  // 0
obj.m.call(obj);  //1

至於bind方法，他是直接改變這個函數的this指向 並且返回一個新的函數，之后再次調用這個函數的時候this都是指向bind綁定的第一個參數。

使用：fun.bind(thisFun);

var a = {
    b: function() {
      var func = function() {
        console.log(this.c);
      }
      func.bind(this)();
    },
    c: 'hello'
  }
  a.b(); // hello
  console.log(a.c); // hello