技術標籤：筆記javascript

JS學習之this關鍵字–上

1.this關鍵字的含義:

this關鍵字是一個非常重要的語法點.毫不誇張地說,不理解它的含義,大部分開發任務都無法完成.

this可以用在建構函式之中,表示例項物件.除此之外,this還可以用在別的場合.但不管是什麼場合,this都有一個共同點:它總是返回一個物件.

簡單說:this就是屬性或方法"當前"所在的物件.

this.property

上面程式碼中,this就代表property屬性當前所在的物件.

下面是一個實際的例子

var person = {
  name: '張三',
  describe:
 
 function () {
    return '姓名：'+ this.name;
  }
};

person.describe()
// "姓名：張三"

上面程式碼中,this.name表示屬性所在的那個物件.由於this.name是在describe方法中呼叫,而describe方法所在的當前物件是person,因此this指向person ,this.name就是person.name.

由於物件的屬性可以賦給另一個物件,所以屬性所在的當前物件是可變的,即this的指向是可變的.

var A = {
  name: '張三',
  describe: function
 
 () {
    return '姓名：'+ this.name;
  }
};

var B = {
  name: '李四'
};

B.describe = A.describe;
B.describe()
// "姓名：李四"

上面程式碼中,A.describe屬性被賦給B,於是B.describe技術表示describe 方法所在的當前物件是B,所以this.name就指向B.name. 稍稍重構這個例子 this的動態指向就能看的更清楚.

function f() {
  return '姓名：'+ this.name;
}

var A = {
  name:
 
 '張三',
  describe: f
};

var B = {
  name: '李四',
  describe: f
};

A.describe() // "姓名：張三"
B.describe() // "姓名：李四"

上面程式碼中,函式f內部使用了this關鍵字,隨著f所在的物件不同,this的指向也不同.

只要函式被賦給另一個變數,this的指向就會變.

var A = {
  name: '張三',
  describe: function () {
    return '姓名：'+ this.name;
  }
};

var name = '李四';
var f = A.describe;
f() // "姓名：李四"

上面程式碼中,A.describe被賦值給變數f,內部的this就會指向f執行時所在的物件(本例是頂層物件)

再看一個網頁程式設計的例子

<input type="text" name="age" size=3 onChange="validate(this, 18, 99);">

<script>
function validate(obj, lowval, hival){
  if ((obj.value < lowval) || (obj.value > hival))
    console.log('Invalid Value!');
}
</script>

上面程式碼是一個文字輸入框,每當使用者輸入一個值,就會呼叫onChange回撥函式,驗證這個值是否在指定範圍.瀏覽器會向回撥函式傳入當前物件,因此this就代表傳入當前物件(即文字框),然後就可以從this.value上面讀到使用者的輸入值.

總結一下: js語言中,一切皆物件,執行環境也是物件,所以函式都是在某個物件之中執行,this就是函式執行時所在的物件(環境).這本來並不會讓使用者糊塗,但是js支援執行環境動態切換,也就是說,this的指向是動態的,沒有辦法事先確定到底指向哪個物件.