关于开源项目介绍:JavaScript中的this

一、在全局作用域中调用一个函数时，this 总是指向 Global 对象（浏览器中就是 window 对象）

var name = 'May';
var getName = function() {console.log(this === window); //true
  console.log(this.name);  // 'May'
}
getName(); 

二、当函数作为对象里的办法被调用时，this 指向该对象

var name = 'May';
var obj = {
  name: 'Lily',
  getName: function() {console.log(this.name); // 'Lily'
  }
}
obj.getName(); 

三、当一个函数用作构造函数时（应用 new 关键字），this 指向正在结构的新对象。如果构造函数返回的值不是一个对象，则默认返回 this 对象，看例子。

function Name() {this.name = 'May';}
var obj = new Name();
console.log(obj.name); // 'May' 

function Name() {
  this.name = 'May';
  return 'Lily';
}
var obj = new Name();
console.log(obj.name); // 'May'，因为返回的是字符串而不是对象 

function Name() {
  this.name = 'May';
  return {name: 'Lily'};
}
var obj = new Name();
console.log(obj.name); // 'Lily' 

四、事件监听中的 this

被内联解决函数调用时，this 指向所在的 DOM 元素

<div id="test" onclick="alert(this.id)">Click</div> 

下面的 alert 显示 test，但只有外层代码的 this 是这样的，如果像以下这种状况，this 会指向 window 对象（非严格模式下），所以 alert 显示 undefined，因为 window 中没有定义 id

<div id="test" onclick="(function(){alert(this.id);})()">
  Click2
 </div> 

当作为一个 DOM 事件处理函数时，this 指向触发事件的元素

<div id="test">A</div>
document.getElementById('test').onclick = function() {console.log(this.id); // test 元素
} 

五、apply() 和 call()

这两个办法的用处都是在特定的作用域中调用函数，等同于设置函数体内 this 对象的值，扭转 this 指向。

apply() 接管两个参数，第一个是在其中运行函数的作用域（this 值），第二个是参数数组。

call() 与 apply() 办法作用雷同，区别仅在于承受参数的形式不同，call() 第一个参数是 this 值，传递给函数的参数必须一一列出来。

var name = 'May';
var obj = {
    name: 'Lily',
    getName: function() {console.log(this.name);
    }
}
obj.getName.apply({name: 'Mary'}); // 'Mary'
obj.getName.apply(window); // 'May'

obj.getName.call({name: 'Jay'}); // 'Jay'
obj.getName.call(window); // 'May' 

// apply() 与 call() 传参示例
function add(a, b) {return a + b + this.num;}
var o = {num: 1};
console.log(add.apply(o, [4, 3])); // 4+3+1 = 8
console.log(add.call(o, 2, 2)); // 2+2+1 = 5 

六、bind()

bind() 办法被调用时，返回一个新的函数，新的函数的 this 被永恒绑定到了 bind 的第一个参数（bind 的其余参数将作为新函数的参数供调用时应用）

var name = 'May';
var obj = {
    name: 'Lily',
    getName: function(name) {console.log(this.name);
        console.log(name);
    }
}
var getName = obj.getName.bind({name: 'Bind'}, 'Test');
getName(); // 'Bind' 'Test' 

七、箭头函数中的 this

箭头函数的 this 值是定义时所在的对象而不是执行时所在的对象。

var name = 'May';
var obj = {
  name: 'Lily',
  getName: () => {console.log(this.name);
  }
}
obj.getName(); // 输入的是 'May' 而不是 'Lily' 

总结：

绝大多数状况下，函数的 this 值取决于函数执行时的环境，而非函数申明时的环境。但箭头函数的 this 值放弃为闭合词法上下文的值，就是定义时所在的对象而不是执行时所在的对象。