JavaScript之this

JavaScript之this

---

---

this是Javascript语言的一个关键字。当函数运行时，会在函数内部自动生成一个this对象。我们先来看一道题。

var button = {
  clicked: false,
  click: function() {
    this.clicked = true;
    console.log(button.clicked);
  }
};

var btn = document.querySelector('.button');

/* ---------- 我是分割线 ----------- */

// 1.请问如下点击按钮后控制台打印的结果是？this指向？
btn.addEventListener('click', button.click, false);

/* ---------- 我是分割线 ----------- */
// 2.请问如下点击按钮后控制台打印的结果是？this指向？
btn.addEventListener('click', function() {
  button.click();
}, false);

第一问的答案是：false 和 btn DOM对象。
第二问的答案是：true 和 button对象。
如果你已经得出了正确答案，这篇内容可以直接略过。

---

直接调用函数

直接函数调用，函数的this默认指向的是全局Window对象。

function getThis() {
  return this;
}

getThis();          // Window

然而在严格模式下，this值不再默认指向Window，而是undefined。

"use strict";

function getThis() {
  return this;
}

getThis();      // undefined

---

作为对象方法调用

当函数被作为对象的方法进行调用时，this值默认指向该对象。

function getThis() {
  return this;
}

const foo = {};
foo.getThis = getThis;

foo.getThis();      // Object {getThis: function}

---

作为构造函数调用

当函数被作为构造函数进行调用时，this值默认指向该实例对象。

function Man(name) {
  this.name = name;
  console.log(this);
}

let someBody = new Man('John');         // Man {name: "John"}

---

作为DOM事件函数调用

当函数被作为DOM事件的callback进行调用时，this值默认指向该DOM对象。

button.onclick = function() {
  console.log(this);      // <button class="button">button</button>
};

---

绑定this

如果函数通过bind, call, apply 和 箭头函数绑定了this值的话，this则指向为绑定的值。