JavaScript this 指向问题

2017/07/28 | 2分钟阅读 | 更新于 2017/07/28

全局上下文

无论是否在严格模式下，在全局运行上下文中（在任何函数体外部）this都指代全局对象。

From: this - JavaScript | MDN

/* 浏览器环境中 ↓ */
console.log(this === window); // => true

在函数内部， this 指向与函数的调用方法有关

var o = {
  name: "o",
  fo: function () {
    console.info(this.name);
  },
};

o.fo(); // => 'o'

var o2 = {
  name: "o2",
};
o2.fo = o.fo;

o2.fo(); // => 'o2'

var name = "window";
var fo = o.fo;

fo(); // => 'window'
// OR
window.fo(); // => 'window'

严格模式下有所不同

在严格模式下，如果this未被执行的上下文环境定义，那么它将会默认为undefined。

this - JavaScript | MDN

var name = 'window'
var fn = () {
    console.log( this.name )
}
fn() // Uncaught TypeError: Cannot read property 'name' of undefined
window.fn() // => 'window'

构造函数中的 this 指向新的对象

function Book() {
  this.name = "book";
  this.fo = function () {
    console.info(this.name);
  };
}
var b = new Book();

b.fo(); // => 'book'

call 和 apply 以及 bind

fn.call 和 fn.apply 的第一个参数为 this 对象，指定调用该函数时的 this 指向

var example = {
    0: 'Hello',
    1: 'World',
    2: '!'
}
[].join.apply( example )
[].join.call( example )
/* 相当于 */
example.slice()
/* example 显然没有 .slice 方法，但是它作为一个类数组的对象，也可以被 slice 处理，只要改一下 slice 执行时的 this 对象 */

bind 可以将一个方法的 this 对象绑定为某个对象：

var $ = document.querySelector.bind(document);

箭头函数体内的 this 对象，就是定义时所在的对象

函数体内的 this 对象，就是定义时所在的对象，而不是使用时所在的对象。

From: 函数的扩展 - ECMAScript6入门

var item = {
    name: 'item',
    fn () {
        console.log( this.name )
    },
    fo: () => {
        console.log( this.name )
    }
}
var copy = {
    name: 'copy'
    fn: item.fn,
    fo: item.fo
}
item.fn() // => 'item'
item.fo() // => 'item'
copy.fn() // => 'copy'
copy.fo() // => 'item'

其它情况

DOM事件处理函数中的 this

当函数被用作事件处理函数时，它的this指向触发事件的元素（一些浏览器在使用非addEventListener的函数动态添加监听函数时不遵守这个约定）。

内联事件处理函数中的 this

当代码被内联处理函数调用时，它的this指向监听器所在的DOM元素：