首頁  >  文章  >  web前端  >  javascript的this使用方法有哪些

javascript的this使用方法有哪些

coldplay.xixi
coldplay.xixi原創
2021-03-31 13:39:122058瀏覽

javascript的this使用方法:1、函數有所屬對象時,指向所屬對象;2、函數沒有所屬對象,指向全域對象;3、建構器中的this,指向新對象。

javascript的this使用方法有哪些

本教學操作環境:windows7系統、javascript1.8.5版,DELL G3電腦。

javascript的this使用方法:

1) 函數有所屬物件時:指向所屬物件

函數有所屬物件時,通常透過. 表達式調用,這時this 自然指向所屬物件。例如下面的範例:

var myObject = {value: 100};
myObject.getValue = function () {
 console.log(this.value); // 输出 100
 
 // 输出 { value: 100, getValue: [Function] },
 // 其实就是 myObject 对象本身
 console.log(this);
 
 return this.value;
};
 
console.log(myObject.getValue()); // => 100

getValue() 屬於物件 myObject,並由 myOjbect 進行 . 呼叫,因此 this 指向物件 myObject。

2) 函數沒有所屬物件:指向全域物件

var myObject = {value: 100};
myObject.getValue = function () {
 var foo = function () {
  console.log(this.value) // => undefined
  console.log(this);// 输出全局对象 global
 };
 
 foo();
 
 return this.value;
};
 
console.log(myObject.getValue()); // => 100

在上述程式碼區塊中,foo 函數雖然定義在getValue 的函數體內,但實際上它既不屬於getValue 也不屬於myObject。 foo 並沒有被綁定在任何物件上,所以當呼叫時,它的 this 指標指向了全域物件 global。

據說這是個設計錯誤。

3) 建構子中的this:指向新物件

js 中,我們透過new 關鍵字來呼叫建構函數,此時this 會綁定在該新對像上。

var SomeClass = function(){
 this.value = 100;
}
 
var myCreate = new SomeClass();
 
console.log(myCreate.value); // 输出100

順便說一句,在 js 中,建構子、普通函式、物件方法、閉包,這四者沒有明確界線。界線都在人的心中。

4) apply 和call 呼叫以及bind 綁定:指向綁定的物件

apply() 方法接受兩個參數第一個是函數運行的作用域,另外一個是一個參數數組(arguments)。

call() 方法第一個參數的意義與 apply() 方法相同,只是其他的參數需要一個個列舉出來。

簡單來說,call 的方式更接近我們平時呼叫函數,而 apply 需要我們將 Array 形式的陣列傳遞給它。它們是可以互相轉換的。

var myObject = {value: 100};
 
var foo = function(){
 console.log(this);
};
 
foo(); // 全局变量 global
foo.apply(myObject); // { value: 100 }
foo.call(myObject); // { value: 100 }
 
var newFoo = foo.bind(myObject);
newFoo(); // { value: 100 }

相關免費學習推薦:javascript影片教學

以上是javascript的this使用方法有哪些的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn