本文主要和大家分享JS中this取值的四種模式，希望能幫助到大家。

一、函數簡介

在Javascript中每一個函數的內部，除了聲明時定義的形式參數外，每個函數還附加了兩個參數：this 和 arguments。

參數arguments是一個數組類型的變量，數組中的值就是實際調用函數時傳進來的參數列表。在定義函數時會有函數的形式參數parameters，在具體調用函數時，當實際參數arguments的個數與形式參數parameters的個數不匹配時，不會導致運行時錯誤。如果實際參數過多，超出的參數值會被忽略掉。如果實際參數值過少，缺少的值會被替換為undefined。函數執行時不會對參數值進行類型校驗，也就是說任何類型的值都可以傳遞給任何參數。

參數 this在面向對象編程語言中是非常重要的概念，它是指具體的類對象的實例，也就是類new出來的那個具體的對象本身。但是在Javascript中的this的值取決于調用的模式。在Javascript中一共有四種調用模式：方法調用模式、函數調用模式、構造器調用模式和apply調用模式。

二、方法調用模式

當一個函數被定義在一個對象的屬性上，這時我們稱這個函數是這個對象的一個方法。當這個方法被調用時，這個函數內部的this指向的就是該對象，示例如下：

var obj = {    value: 1,
    add: function() {        // 這里的 this 是綁定在 obj 這個對象上的
        this.value += 1;        return this.value;
    }
};
console.info(obj.add()); // 2console.info(obj.add()); // 3

obj.add方法可以通過this訪問自己所屬對象obj，所以它能從對象中取值或對對象進行修改。this到對象的綁定發生在方法被調用的時候。 通過this可取得它們所屬對象的上下文的方法稱為公共方法。

三、函數調用模式

當一個函數并非一個對象的屬性時，那么它就是被當做一個函數來調用的。

例一

var a = 1;var add = function(b) {
  // 這里的 this 是綁定在全局作用于 window 上的
  return this.a + b;
};
console.info(add(2)); // 3

例二

var a = 1;var obj = {
  a: 2,
  add: function(b) {

    var innerAdd = function(innerB) {
      // 這里的 this 綁定的還是 window 對象上的 this
      return this.a + innerB;
    };
    console.info(innerAdd(0)); // 1
    // 這里的 this 是綁定在 obj 對象上的
    return this.a + b;
  }
};
console.info(obj.add(0)); // 2

以上兩例可以看出，以此模式調用函數時，this被綁定到了全局對象上。如果依照方法調用模式推理的話，這里的this應該被綁定到外部函數上，但是這個設計缺陷也不是無法解決的，我們可以將外部函數的this賦值給一個變量。如下示例：

例三

var a = 1;var obj = {
  a: 2,
  add: function(b) {
    // 將綁定在 obj 對象上的 this 賦值給變量 that
    var that = this;    var innerAdd = function(innerB) {
      // 這里調用的是變量 that,這個 that 是綁定在 obj 對象上的
      return that.a + innerB;
    };
    console.info(innerAdd(0)); // 2
    // 這里的 this 是綁定在 obj 對象上的
    return this.a + b;
  }
};
console.info(obj.add(0)); // 2

四、構造器調用模式

如果在一個函數前帶上new來調用，那么內部會創建一個連接到該函數的prototype成員的新對象，同時this會被綁定到那個新對象上。

如果函數定義時內部存在return關鍵詞，這時return 出去的就是this(新創建的對象)。

// 定義一個 Person 函數（類）var Person = function(name) {  // 這里的 this 綁定的就是 new 出來的那個實例對象
  this.name = name;
};// 定義 Person 函數（類）的原型對象Person.prototype = {
  run: function() {    
    console.info(this.name + '的 run 方法。');
  }
};var lily = new Person('lily');
lily.run(); // lily的 run 方法。

提示：一個函數，如果定義的目的就是結合 new 前綴來調用，那它就被稱為構造函數。并且按照約定，它們定義的函數名以大寫字母開頭。

五、apply調用模式

因為Javascript是一門函數式的面向對象編程語言，所以函數也可以擁有方法，apply就是Function.prototype上的一個方法。

apply方法讓我們構建一個參數數組傳遞給調用函數，它還可以容許我們選擇this的值。apply方法接受兩個參數，第一個是要綁定 this 的值，第二個就是這個函數執行時的實參 參數 數組了。

例一

var add = function(a, b) {
  return a + b;
};var result = add.apply(null, [1, 2]);
console.info(result); // 3

例二

var obj = {
  name: 'obj',
  introduction: function() {
    console.info('My name is ' + this.name);
  }
};
obj.introduction.apply(obj, []); // My name is objvar anotherObj = {
  name: 'anotherObj'};

obj.introduction.apply(anotherObj, []); // My name is anotherObj

總結：以上就是Javascript中用到this的幾種情況了，在面向對象中搞清楚this的指向是非常重要的，在Javascript中也同等重要。

相關推薦：

javascript函數中的this的四種綁定形式

JS中的this、apply、call、bind實例分享

html的標簽中的this應該如何使用

以上就是四種JS中this取值模式的詳細內容，更多請關注php中文網其它相關文章！