JavaScript this

Posted 2021-03-01 量变 => 质变

面向对象语言中 this 表示当前对象的一个引用。但在 javascript 中 this 不是固定不变的，它会随着执行环境的改变而改变。

• 单独使用(包括严格模式下)，this 表示全局对象
• 在函数中，this 表示全局对象
• 在函数中，在严格模式下，this 是未定义的(undefined)
• 在对象方法中，this 表示该方法所属的直接对象
• 在事件中，this 表示接受事件的元素
• 类似 call()、apply()、bind() 方法可以将 this 引用到任何对象

this 的指向在函数定义的时候是确定不了的，只有函数执行的时候才能确定 this 到底指向谁，实际上 this 最终指向的是那个调用它的对象。

单独使用 this

单独使用 this，则它指向全局(Global)对象。在浏览器中，Window 就是该全局对象。

var x = this;
x // [object Window] 

严格模式下，如果单独使用，this 也是指向全局(Global)对象。

"use strict";
var x = this;
x // [object Window]

函数中使用 this

在函数中，this 指向调用函数的对象

var color = ‘Global color‘; 

function myFunction() {
  var color = ‘Function color‘;

  console.log(color); // ‘Function color‘  
  console.log(this); // [Object Windwo]
  console.log(this.color); // ‘Global color‘
}
myFunction(); // 实质是全局对象window在调用函数 ==> window.myFunction();

在严格模式下，this 是 undefined

"use strict"
var color = ‘Global color‘; 

function myFunction() {
  var color = ‘Function color‘;

  console.log(color); // ‘Function color‘  
  console.log(this); // undefined
  console.log(this.color); // TypeError: Cannot read property ‘color‘ of undefined
}
myFunction(); 

对象方法中使用 this

在对象方法中，this 表示该方法所属的直接对象

var color = ‘Global color‘; 

function myFunction() {
  var color = ‘Function color‘;

  console.log(color); // ‘Function color‘  
  console.log(this); // [Object myObj]
  console.log(this.color); // ‘Object color‘
}
var myObj = {
  color: ‘Object color‘, 

  foo: myFunction
};

myObj.foo();

有嵌套对象的场景(下列代码中 myFunction 方法所属的直接对象为 subObj )：

var color = ‘Global color‘; 

function myFunction() {
  var color = ‘Function color‘;

  console.log(color); // ‘Function color‘  
  console.log(this); // [Object subObj]
  console.log(this.color); // ‘SubObject color‘
}
var subObj = {
  color: ‘SubObject color‘,
  foo: myFunction
};
var myObj = {
  color: ‘Object color‘, 

  subObj: subObj
};

myObj.subObj.foo();

对象普通属性中使用 this

对象属性由 普通属性 + 方法 构成，当对普通属性使用 this. 赋值时，this 始终指向全局对象(?? 没有完全理解)

// 示例一(观察 myFunction 中 this.dangerColor 的输出)
var color = ‘Global color‘; 
var dangerColor = ‘Global Danger color‘;

function myFunction() {
  var color = ‘Function color‘;

  console.log(color); // ‘Function color‘  
  console.log(this); // [Object myObj]
  console.log(this.color); // ‘Object color‘
  console.log(this.dangerColor); // ‘Global Danger color‘
}
var myObj = {
  color: ‘Object color‘, 
  dangerColor: this.dangerColor, // 此处 this 指向全局对象 Window
  foo: myFunction
};

myObj.foo();

// 示例二，有嵌套对象的场景，父对象、子对象单独定义(观察 myFunction 中 this.dangerColor 的输出)
var color = ‘Global color‘; 
var dangerColor = ‘Global Danger color‘;

function myFunction() {
  var color = ‘Function color‘;

  console.log(color); // ‘Function color‘  
  console.log(this); // [SubObject myObj]
  console.log(this.color); // ‘SubObject color‘
  console.log(this.dangerColor); // ‘Global Danger color‘ (?? 这个输出有点不太理解)
}
var subObj = {
  color: ‘SubObject color‘,
  dangerColor: this.dangerColor, // 此处 this 就确定了? 指向全局对象 Window? （?? 不太理解）
  foo: myFunction
};
var myObj = {
  color: ‘Object color‘, 
  dangerColor: ‘Object Danger color‘,

  subObj: subObj
};

myObj.subObj.foo();

// 示例三，有嵌套对象的场景，子对象直接在父对象总定义(观察 myFunction 中 this.dangerColor 的输出)
var color = ‘Global color‘; 
var dangerColor = ‘Global Danger color‘;

function myFunction() {
  var color = ‘Function color‘;

  console.log(color); // ‘Function color‘  
  console.log(this); // [SubObject myObj]
  console.log(this.color); // ‘SubObject color‘
  console.log(this.dangerColor); // ‘Global Danger color‘ (?? 这个输出有点不太理解)
}

var myObj = {
  color: ‘Object color‘, 
  dangerColor: ‘Object Danger color‘,
  // 子对象直接在父对象中定义
  subObj: {
    color: ‘SubObject color‘,
    dangerColor: this.dangerColor, // 此处 this 就确定了? 指向全局对象 Window? （?? 不太理解）
    foo: myFunction
  }
};

myObj.subObj.foo();

说明：当对 对象普通属性使用 this. 赋值时，感觉 this 始终指向全局对象，目前还不太理解??

事件中的 this

在 html 事件句柄中，this 指向了接收事件的 HTML 元素

<button onclick="this.style.display=‘none‘">点我后我就消失了</button>