JS学习——this 关键词
学习内容来源：JavaScript this 关键词、JavaScript 函数 Call、JavaScript 函数 Apply
JavaScript this 关键词
JavaScript this 关键词指的是它所属的对象。
它拥有不同的值，具体取决于它的使用位置：
- 在方法中，this 指的是所有者对象。
- 单独的情况下，this 指的是全局对象。
- 在函数中，this 指的是全局对象。
- 在函数中，严格模式下，this 是 undefined。
- 在事件中，this 指的是接收事件的元素。
方法中的 this
在对象方法中，this 指的是此方法的“拥有者”。
例子：
// person 对象是 fullName 方法的拥有者。
var person = {
firstName: "Bill",
lastName : "Gates",
id : 678,
fullName : function() {
return this.firstName + " " + this.lastName;
}
};
单独的 this
1、在单独使用时，拥有者是全局对象，因此 this 指的是全局对象。在浏览器窗口中，全局对象是 [object Window]。
2、在严格模式中，如果单独使用，那么 this 指的是全局对象 [object Window]
函数中的 this（默认）
在 JavaScript 函数中，函数的拥有者默认绑定 this。因此，在函数中，this 指的是全局对象 [object Window]。
函数中的 this（严格模式）
JavaScript 严格模式不允许默认绑定。因此，在函数中使用时，在严格模式下，this 是未定义的（undefined）。
事件处理程序中的 this
在 HTML 事件处理程序中，this 指的是接收此事件的 HTML 元素
例子：
// this 指向 button 这个 HTML 元素，点击之后button 样式被加上了 display: none;
<button onclick="this.style.display='none'">
点击来删除我！
</button>
显式函数绑定
call() 和 apply() 方法是预定义的 JavaScript 方法。它们都可以用于将另一个对象作为参数调用对象方法。
JavaScript 函数 Call
JavaScript call() 方法
它可以用来调用所有者对象作为参数的方法。通过 call()，您能够使用属于另一个对象的方法。
例子：
// 本例调用 person 的 fullName 方法，并用于 person1
var person = {
fullName: function() {
return this.firstName + " " + this.lastName;
}
}
var person1 = {
firstName:"Bill",
lastName: "Gates",
}
var person2 = {
firstName:"Steve",
lastName: "Jobs",
}
person.fullName.call(person1); // 将返回 "Bill Gates"
带参数的 call() 方法
例子：
// 调用 person 的 fullName 方法，用于 person1，并传入参数
var person = {
fullName: function(city, country) {
return this.firstName + " " + this.lastName + "," + city + "," + country;
}
}
var person1 = {
firstName:"Bill",
lastName: "Gates"
}
person.fullName.call(person1, "Seattle", "USA");
JavaScript 函数 Apply
apply() 方法与 call() 方法非常相似。
call() 和 apply() 之间的区别
call() 方法分别接受参数。
apply() 方法接受数组形式的参数。
如果要使用数组而不是参数列表，则 apply() 方法非常方便。
在数组上模拟 max 方法
// 可以使用 Math.max() 方法找到（数字列表中的）最大数字
Math.max(1, 2, 3); // 会返回 3
// JavaScript 数组没有 max() 方法，因此您可以应用 Math.max() 方法，第一个参数（null）无关紧要
Math.max.apply(null, [1, 2, 3]); // 会返回 3
JavaScript 箭头函数
例子：
// 常规函数
hello = function() {
return "Hello World!";
}
// 箭头函数
hello = () => {
return "Hello World!";
}
// 如果函数只有一个语句，并且该语句返回一个值，则可以去掉函数的花括号和 return 关键字
// 注意：这仅在函数只有一条语句时才有效。
hello = () => "Hello World!";
// 如果有参数，则将它们传递到括号内
hello = (val) => "Hello " + val;
// 如果只有一个参数，也可以略过括号
hello = val => "Hello " + val;
this 指向
使用箭头函数没有对 this 的绑定。
在常规函数中，关键字 this 表示调用该函数的对象，可以是窗口、文档、按钮或其他任何东西。
对于箭头函数，this 关键字始终表示定义箭头函数的对象。
1、对于常规函数，this 表示调用该函数的对象
// 常规函数：
hello = function() {
document.getElementById("demo").innerHTML += this;
}
// window 对象调用该函数：[object Window]
window.addEventListener("load", hello);
// button 对象调用该函数：[object HTMLButtonElement]
document.getElementById("btn").addEventListener("click", hello);
2、对于箭头函数，this 表示函数的拥有者
// 箭头函数：
hello = () => {
document.getElementById("demo").innerHTML += this;
}
// window 对象调用该函数：[object Window]
window.addEventListener("load", hello);
// button 对象调用该函数：[object Window]
document.getElementById("btn").addEventListener("click", hello);
