JavaScript this 关键字的多场景指向与 call/apply/bind 用法详解

var name = 'name1';
console.log(name);               // "name1"
this.name = 'name2';
console.log(name);               // "name2"
console.log(this.name);          // "name2"
window.name = 'name3';
console.log(name);               // "name3"
console.log(this.name);          // "name3"
console.log(window.name);        // "name3"

// 案例1
function test() {
  this.x = 1;
  alert(this.x);  // 1
}
test();
 
// 案例2
var x = 1;
function test() {
  alert(this.x);  // 1
}
test();
 
// 案例3
var x = 1;
function test() {
  this.x = 0;
}
test();
alert(x);  // 0

var btn = document.getElementById("btn");
btn.onclick = function() {
  this.value = "按钮";  // this 指向 btn 元素
}

<button onclick="fun(this)">点击</button>
<script>
function fun(_this) {
  console.log(_this);  // 输出当前点击的 button 元素
}
</script>

var obj = {
  name: 'jack',
  say: function() {
    console.log('obj中的this', this.name);  // this 指向 obj
  }
}
obj.say();  // "obj中的this jack"

// 问题示例
box1.onclick = function() {
  var num = 0;
  setInterval(function() {
    num++;
    this.innerHTML = str.substring(0, num);  // this 指向 window，无法正常工作
  }, 100);
}
 
// 解决方案一：使用变量保存 this
box1.onclick = function() {
  var _this = this;  // 保存当前 this 指向
  var num = 0;
  setInterval(function() {
    num++;
    _this.innerHTML = str.substring(0, num);  // 使用保存的 this
  }, 100);
}
 
// 解决方案二：使用箭头函数
box1.onclick = function() {
  var num = 0;
  setInterval(() => {  // 箭头函数继承外部 this
    num++;
    this.innerHTML = str.substring(0, num);  // this 指向 box1
  }, 100);
}

var obj = {
  name: "jack",
  say: () => {
    console.log(this.name);  // this 指向全局对象，而非 obj
  }
};

function fun2(a, b) {
  console.log(a + b);  // 30
  console.log(this);   // 指向 box1 元素
}
 
box1.onclick = function() {
  fun2.call(this, 10, 20);  // 改变 this 指向为当前元素
}

function fun2(a, b) {
  console.log(a + b);  // 30
  console.log(this);   // 指向 box1 元素
}
 
box1.onclick = function() {
  fun2.apply(this, [10, 20]);  // 参数以数组形式传递
}

var arr = [56, 76, 45, 34, 87, 98];
var max = Math.max.apply(null, arr);  // 98
// 等价于 ES6 的扩展运算符
var max = Math.max(...arr);  // 98

function fun() {
  console.log(this);  // 指向 box1 元素
}
 
box1.onclick = function() {
  var newFun = fun.bind(this);  // 绑定 this 指向
  newFun();  // 手动调用新函数
}