JS JavaScript中的this
this
是JavaScript
語言中的一個關鍵字
它是函數運行時,在函數體內部自動生成的一個對象,只能在函數體內部使用。
function test() {
this.x = 1;
}
那麼,this
的值是什麼呢?
函數在不同使用場合,this
有不同的值。總之,this
就是函數運行時所在的環境對象。
情況一:純粹的函數調用
這是函數的最常通用法,屬於全局性調用,因此this
就代表全局對象。
var x = 1;
function test() {
console.log(this.x);
}
test(); // 1
情況二:作爲對象的方法調用
函數還可以作爲某個對象的方法調用,這時this
就指這個上級對象
function test() {
console.log(this.x);
}
var obj = {};
obj.x = 1;
obj.m = test;
obj.m(); // 1
情況三:作爲構造函數調用
構造函數就是通過這個函數可以生成一個新對象。這時,this
就指這個新對象
function test() {
this.x = 1;
}
var obj = new test();
obj.x // 1
爲了表明這時this
不是全局對象,下面代碼:
var x = 2;
function test() {
this.x = 1;
}
var obj = new test();
x // 2
運行結果爲2
,表明全局變量x
的值沒有變化
情況四:apply調用
apply()
是函數的一個方法,作用是改變函數的調用對象。它的第一個參數就表示改變後的調用這個函數的對象。因此,這時this
指的就是這個參數。
var x = 0;
function test() {
console.log(this.x);
}
var obj = {};
obj.x = 1;
obj.m = test;
obj.m.apply() // 0
apply()
的參數爲空時,默認調用全局變量。因此,這時運行結果爲0
,證明this
指的是全局對象。
如果把最後一行代碼修改成
obj.m.apply(obj); //1
運行結果就變成1
,證明這時this
代表的對象是obj
改變this的指向有以下幾種方法
- 使用
ES6
的箭頭函數 - 在函數內部
_this=this
- 使用
apply
、call
、bind
-
new
實例化一個對象
其實this
的指向,始終堅持一個原理:this
永遠指向最後調用它的那個對象。
例1:
var name = "windowsName";
function a() {
var name = "Cherry";
console.log(this.name); // windowsName
console.log("inner:" + this); // inner: Window
}
a();
console.log("outer:" + this) // outer: Window
這裏我們使用嚴格模式,如果使用嚴格模式的話,全局對象就是 undefined
,那麼就會報錯 Uncaught TypeError: Cannot read property 'name' of undefined
。
例2:
var name = "windowsName";
var a = {
name: "Cherry",
fn : function () {
console.log(this.name); // Cherry
}
}
a.fn();
例3:
var name = "windowsName";
var a = {
name: "Cherry",
fn : function () {
console.log(this.name); // Cherry
}
}
window.a.fn();
例4:
var name = "windowsName";
var a = {
// name: "Cherry",
fn : function () {
console.log(this.name); // undefined
}
}
window.a.fn();
例5:
var name = "windowsName";
var a = {
name : null,
// name: "Cherry",
fn : function () {
console.log(this.name); // windowsName
}
}
var f = a.fn;
f();
爲什麼不是 Cherry
,這是因爲雖然將 a
對象的 fn
方法賦值給變量 f
了,“this
永遠指向最後調用它的那個對象”,由於剛剛的 f
並沒有調用,所以 fn()
最後仍然是被 window
調用的。所以 this
指向的也就是 window
。
例6:
var name = "windowsName";
function fn() {
var name = 'Cherry';
innerFunction();
function innerFunction() {
console.log(this.name); // windowsName
}
}
fn()