每日深入学习记录前端面试题，争取早日成为面霸
面向对象语言中 this 表示当前对象的一个引用。
但在 JavaScript 中 this 不是固定不变的，它会随着执行环境的改变而改变。
-
在方法中，this 表示该方法所属的对象。
-
如果单独使用，this 表示全局对象。
-
在函数中，this 表示全局对象。
-
在函数中，在严格模式下，this 是未定义的(undefined)。
-
在事件中，this 表示接收事件的元素。
-
类似 call() 和 apply() 方法可以将 this 引用到任何对象。
方法中的this
var person = {
firstName: "John",
lastName : "Doe",
fullName : function() {
return this.firstName + " " + this.lastName;
}
};
person.fullName() // John Doe
在对象方法中， this 指向调用它所在方法的对象。
在上面一个实例中，this 表示 person 对象。
fullName 方法所属的对象就是 person。
单独使用 this
var person = this // [object Window]
单独使用 this，则它指向全局(Global)对象。
在浏览器中，window 就是该全局对象为 [object Window]:
ps: 严格模式下，如果单独使用，this 也是指向全局(Global)对象。
函数中使用 this（默认）
function myFunction() {
return this; // [object Window]
}
在函数中，函数的所属者默认绑定到 this 上。
在浏览器中，window 就是该全局对象为 [object Window]:
ps: 严格模式下，函数是没有绑定到this下，this是undefined
事件中的 this
在 HTML 事件句柄中，this 指向了接收事件的 HTML 元素：
<button onclick="this => buttonHtml对象">
点我
</button>
对象方法中绑定
下面实例中，this 是 person 对象，person 对象是函数的所有者：
var person = {
firstName : "John",
lastName : "Doe",
id : 5566,
myFunction : function() {
return this;
}
};
person.myFunction() // [object Object]
显式函数绑定
在 JavaScript 中函数也是对象，对象则有方法，apply 和 call 就是函数对象的方法。这两个方法异常强大，他们允许切换函数执行的上下文环境（context），即 this 绑定的对象。
在下面实例中，当我们使用 person2 作为参数来调用 person1.fullName 方法时, this 将指向 person2, 即便它是 person1 的方法：
var person1 = {
fullName: function() {
return this.firstName + " " + this.lastName;
}
}
var person2 = {
firstName:"John",
lastName: "Doe",
}
person1.fullName.call(person2); // 返回 "John Doe"
this隐式绑定
隐式绑定
什么是隐式绑定呢，如果函数调用时，前面存在调用它的对象，那么this就会隐式绑定到这个对象上。
function fn() {
console.log(this.name);
};
let obj = {
name: '听风是风',
func: fn
};
obj.func() //听风是风
如果函数调用前存在多个对象，this指向距离调用自己最近的对象。
function fn() {
console.log(this.name);
};
let obj = {
name: '行星飞行',
func: fn,
};
let obj1 = {
name: '听风是风',
o: obj
};
obj1.o.func() //行星飞行
那如果我们将obj对象的name属性注释掉，现在输出什么呢？
function fn() {
console.log(this.name);
};
let obj = {
func: fn,
};
let obj1 = {
name: '听风是风',
o: obj
};
obj1.o.func() // undefined
大家千万不要将作用域链和原型链弄混淆了，obj对象虽然obj1的属性，但它两原型链并不相同，并不是父子关系，由于obj未提供name属性，所以是undefined。
既然说到原型链，那我们再来点花哨的，我们再改写例子，看看下面输出多少：
function Fn() {};
Fn.prototype.name = '时间跳跃';
function fn() {
console.log(this.name);
};
let obj = new Fn();
obj.func = fn;
let obj1 = {
name: '听风是风',
o: obj
};
obj1.o.func() //时间跳跃
这里输出时间跳跃，虽然obj对象并没有name属性，但顺着原型链，找到了产生自己的构造函数Fn，由于Fn原型链存在name属性，所以输出时间跳跃了。
隐式丢失
在特定情况下会存在隐式绑定丢失的问题，最常见的就是作为参数传递以及变量赋值，先看参数传递：
var name = '行星飞行';
let obj = {
name: '听风是风',
fn: function () {
console.log(this.name);
}
};
function fn1(param) {
param();
};
fn1(obj.fn);//行星飞行
这个例子中我们将 obj.fn 也就是一个函数传递进 fn1 中执行，这里只是单纯传递了一个函数而已，this并没有跟函数绑在一起，所以this丢失这里指向了window。
第二个引起丢失的问题是变量赋值，其实本质上与传参相同，看这个例子：
var name = '行星飞行';
let obj = {
name: '听风是风',
fn: function () {
console.log(this.name);
}
};
let fn1 = obj.fn;
fn1(); //行星飞行
注意，隐式绑定丢失并不是都会指向全局对象，比如下面的例子：
var name = '行星飞行';
let obj = {
name: '听风是风',
fn: function () {
console.log(this.name);
}
};
let obj1 = {
name: '时间跳跃'
}
obj1.fn = obj.fn;
obj1.fn(); //时间跳跃
虽然丢失了 obj 的隐式绑定，但是在赋值的过程中，又建立了新的隐式绑定，这里this就指向了对象 obj1。
new绑定
准确来说，js中的构造函数只是使用new 调用的普通函数，它并不是一个类，最终返回的对象也不是一个实例，只是为了便于理解习惯这么说罢了。
那么new一个函数究竟发生了什么呢，大致分为三步：
1.以构造器的prototype属性为原型，创建新对象；
2.将this(可以理解为上句创建的新对象)和调用参数传给构造器，执行；
3.如果构造器没有手动返回对象，则返回第一步创建的对象
这个过程我们称之为构造调用，我们来看个例子：
function Fn(){
this.name = '听风是风';
};
let echo = new Fn();
echo.name//听风是风
在上方代码中，构造调用创建了一个新对象echo，而在函数体内，this将指向新对象echo上（可以抽象理解为新对象就是this）。
this绑定优先级
显式绑定 > 隐式绑定 > 默认绑定
new绑定 > 隐式绑定 > 默认绑定
为什么显式绑定不和new绑定比较呢？因为不存在这种绑定同时生效的情景，如果同时写这两种代码会直接抛错，所以大家只用记住上面的规律即可。
function Fn(){
this.name = '听风是风';
};
let obj = {
name:'行星飞行'
}
let echo = new Fn().call(obj);//报错 call is not a function
那么我们结合几个例子来验证下上面的规律，首先是显式大于隐式：
//显式>隐式
let obj = {
name:'行星飞行',
fn:function () {
console.log(this.name);
}
};
obj1 = {
name:'时间跳跃'
};
obj.fn.call(obj1);// 时间跳跃
其次是new绑定大于隐式：
//new>隐式
obj = {
name: '时间跳跃',
fn: function () {
this.name = '听风是风';
}
};
let echo = new obj.fn();
echo.name;//听风是风
箭头函数的this
ES6的箭头函数是另类的存在，为什么要单独说呢，这是因为箭头函数中的this不适用上面介绍的四种绑定规则。
准确来说，箭头函数中没有this，箭头函数的this指向取决于外层作用域中的this，外层作用域或函数的this指向谁，箭头函数中的this便指向谁。有点吃软饭的嫌疑，一点都不硬朗，我们来看个例子：
function fn() {
return () => {
console.log(this.name);
};
}
let obj1 = {
name: '听风是风'
};
let obj2 = {
name: '时间跳跃'
};
let bar = fn.call(obj1); // fn this指向obj1
bar.call(obj2); //听风是风
为啥我们第一次绑定this并返回箭头函数后，再次改变this指向没生效呢？
前面说了，箭头函数的this取决于外层作用域的this，fn函数执行时this指向了obj1，所以箭头函数的this也指向obj1。除此之外，箭头函数this还有一个特性，那就是一旦箭头函数的this绑定成功，也无法被再次修改，有点硬绑定的意思。
当然，箭头函数的this也不是真的无法修改，我们知道箭头函数的this就像作用域继承一样从上层作用域找，因此我们可以修改外层函数this指向达到间接修改箭头函数this的目的。
function fn() {
return () => {
console.log(this.name);
};
};
let obj1 = {
name: '听风是风'
};
let obj2 = {
name: '时间跳跃'
};
fn.call(obj1)(); // fn this指向obj1,箭头函数this也指向obj1
fn.call(obj2)(); //fn this 指向obj2,箭头函数this也指向obj2
