javascript this詳細講解（圖文教程）

這篇文章主要介紹了javascript this詳細介紹的相關資料,需要的朋友可以參考下

this的值是在運行時確定的

# JS中的this究竟代表什麼，這是在程式運行時根據上下文環境決定，可以分為以下幾種情況。

1. 全域作用域中的this

在全域作用域中，this指向window物件。

console.log(this);//指向window对象

this.x = 5//在全局作用域内创建一个x
//与this.x = 5的等价情况：
//var x = 5;
//x = 5;

在全域作用域中執行var x=5，其實是要為window物件建立一個屬性x，並令其等於5。

若定義變數時不加var，JS會認為變數為全域變量，會將其當作window物件的屬性。

2. 函數中的this

JS中函數有兩種，直接呼叫的函數稱為普通函數，透過new建立物件的函數稱為建構函數。

2.1 建構子中的this

建構子的this指向它所建立的對象，如：

function Person(name){
  this.name = name;//this指向该函数创建的对象person
}
var person = new Person("chaimm");

2.2 普通函數中的this

#普通函數的this指向window物件。
若上述例子，直接執行Perosn函數，則其中this代表window對象，因此該函數執行後會建立一個全域的name。

function Person(name){
  this.name = name;//this指向window
}
Person("chai");//当作普通函数执行，this指向window对象

3. 物件中的this

物件中的this指向當前對象，如：

var person = {
  name : "chaimm",
  getName : function(){
    return this.name;
  }
}

上述程式碼中this指向函數getName所屬的對象。

但是，如果一個物件的函數中又嵌套了一個函數，這個函數的this指向的卻是window，而並不是其外層的物件。

var person = {
  name : "chaimm",
  setName : function(name){
    (function(name){
      this.name = name; //此时this并不代表person对象，而是代表window对象
    })(name);
  }
}

上述範例中，person物件中有一個getName函數，而getName函數內部又有一個函數，這個函數內部的this指向window對象，而非person對象，這是JS的一個bug！一般作如下處理，規避這個bug：

var person = {
  name : "chaimm",
  setName : function(name){
    var thar = this;//将this赋给that
    (function(name){
      that.name = name;//此时that指向person对象
    })(name);
  }
}

我們在person物件的第一層函數中，將this賦給局部變數that，然後在第二層函數中使用that，此時that指向person對象，可對person的屬性進行操作。

注意：若將一個物件中的函數賦給一個變數後，再透過該變數呼叫這個函數，此時該函數中的this指向window，而非該對象，如下所示：

var person = {
  name : "chaimm",
  getName : function(){
    return this.name;
  }
}

//将getName函数赋给一个新的变量
var newGetName = person.getName;
//通过新的变量调用这个函数，这个函数中的this将指向window
newGetName();//若全局作用域中没有name，则将返回undefined

4. 用call和apply函數給this開掛

這兩個函數都能手動指定被呼叫函數內部的this指向哪個物件。

//定义一个构造函数
var Person = function(name){
  this.name = "";
  this.setName = function(name){
    this.name = name;
  }
}

//创建两个对象
var personA = new Person("A");
var personB = new Person("B");

//使用personA的setName函数去修改personB的name属性
personA.setName.apply(personB,["C"]);

apply用法

物件A.函數名稱.apply(物件B, 參數清單);
當物件B作為apply的第一個參數傳給apply時，物件A的函數中this就指向了物件B，此時物件A的該函數對this的操作將會作用在物件B上，由此實現了用物件A去呼叫物件B的函數。

上面是我整理給大家的，希望今後對大家有幫助。

相關文章：

Javascript this 的一些學習總結

#JavaScript This 的六道坎

#詳細介紹JavaScript this 到底指向什麼？ （圖文）

以上是javascript this詳細講解（圖文教程）的詳細內容。更多資訊請關注PHP中文網其他相關文章！