前端面试系列-JavaScript-this指向问题(附面试例题)

一、对this的产生原因分析和了解

1. this指的是函数运行时所在的环境（即调用的对象）。
2. JavaScript 语言之所以有this的设计，跟内存里面的数据结构有关系

对于普通对象的保存：实际对象属性的值就是值；
对于函数的保存：实际函数属性的值是函数的地址；（而函数本身，可理解为：它不属于任何一个对象，相当于一个全局对象。所以，函数在不同场景下运行，this就是不同的场景了，不过都是执行时的环境）
同时，函数，可以作为一个参数（值）被调用，被传播。同时，在函数体内部，允许引用当前环境的其他变量（可以引用当前环境的其他变量。但当前环境是不确定的，所以会出现不同的值）

当函数被作为某个对象调用时，this等于那个对象，
匿名函数具有全局性，this对象通常指向window。

这里放个例题

var name = "global";
var obj = {
  name : "Smiley",
  sayName : function(){
    console.log(name); 
  }
}
obj.sayName();//global

var name = "global";
var obj = {
  name : "Smiley",
  sayName : function(){
    console.log(this.name); 
  }
}
obj.sayName();//Smiley

二、this绑定详解

this 实际上是在函数被调用时发生的绑定，它指向什么地方完全取决于函数在哪里被调用。

注意：箭头函数并没有自己的this，被定义在哪里，this就指向谁。

1 默认绑定（绑定在全局作用域）

即在调用函数时，函数不带任何修饰，也就是“光秃秃”的调用（即没有任何修饰的调用），就会应用默认绑定规则, 默认绑定指向全局作用域。

2 隐式绑定

当函数在调用时，如果函数有所谓的“落脚点”，即有上下文对象（即调用时.前面的对象）时，隐式绑定规则会把函数中的 this 绑定到这个上下文对象。

在非严格模式下this为undefined时会返回window，严格模式下 this 返回 undefined。

3 显式绑定：apply,call,bind

三种显式绑定方法：

• fun.apply(thisArg, [argsArray])
• func.call(thisArg, arg1, arg2, …)
• func.bind(thisArg[, arg1[, arg2[, …]]])

注意：bind返回一个新函数，这个函数已经制定了执行上下文（这表示执行上下文在之后不可改变了），而返回这个新函数可以接受参数（即在绑定的执行上下文中，以参数为入参执行函数）。

4 new 绑定

通过 new 操作符调用构造函数时发生的 this 绑定。

实际上：new 和 bind应该很类似。只是一个在创建时执行，一个在执行过程中执行。（不过还是很不同的，见下文区别）

5 bind 和 new 的区别

bind只能被函数调用。而new 返回的是一个对象。即new 之后，函数的执行上下文就不可以被改变了，bind不行，显示绑定的三种形式都不行。所以new 绑定 的优先级最高。

6 四种绑定的优先级和区别

默认绑定 < 隐式绑定 < 显式绑定 < new 绑定

7.几种调用场景

var obj = {
	a: 1,
	b: function () {
		console.log(this);
	}
}

1. 作为对象调用时，指向该对象 obj.b(); // 指向obj
2. 作为函数