Javascript 中 this 指向

this是函数运行时，在函数体内部自动生成的一个对象，只能在函数体内部使用。

一般分纯函数调用、作为对象方法调用、构造函数调用、apply调用……案例涉及情况较多，分的较细。
不多说，通过代码感受一下，this指向~

例1：
单独的this，指向的是window对象；
定时器中的this，也指向window。

console.log(this)  //winxow

setInterval(function () {
       console.log(this); // window
}, 1000);

函数调用

例2：属于全局性调用，this代表全局对象
宽松模式：this指向window；

function a() {
  var user = '黑夜';
  console.log(this);  //window
  console.log(this.user);  //undefined
}
a();

解：window对象中不存在user属性，所以this.user 的结果是undefined。

---

严格模式：this指向undefined；

function a() {
  var user = '黑夜';
  console.log(this);   //undefined
  console.log(this.user);  //报错
}
a();

作为对象方法调用

例三： this指向 “直接” “最后” 调用它的对象

函数作为某个对象的方法调用，这时this就指这个上级对象。

var obj = {
 user : '黑夜',
  fun : function(){
    console.log(this.user);  //黑夜
  }
}
obj.fun();
window.obj.fun();

fun函数中有this，obj直接调用fun函数，此时this指向obj对象。

ps：我们创建的全局变量实际上是给window添加属性，所以obj.fun()和window.obj.fun()结果是一样的。

---

下面看一个多级调用的this指向↓：（理解何为 “直接” 调用）

var obj = {
 a : '黑夜',
  b : 10, 
  c : {
    a: '世界',
    fun: function() {
      console.log(this.a);  //世界
      console.log(this.c);  //undefined
    }
  }
}
obj.c.fun();

this在fun函数中，fun被 c 调用，this指向c；c又被obj调用，所以this指向obj。NONONO！Stop！！！

解：this指向直接调用它的对象。obj调用c，c调用fun函数，c是最后直接调用fun函数的对象，所以this指向对象c。对象中有a属性，所以this.a→世界；c对象中没有c属性，this.c → undefined。

这个例子对调用this的上一级 “直接” 对象解释的很充分，所谓的上一级就是父辈，而非祖辈。

---

再看一个多级调用的this指向↓：（感受什么是 “最后” 调用）

var obj = {
  a : '黑夜',
  b : 10,
  c : {
    a: '世界',
    fun: function() {
      console.log(this.a);  //undefined
    }
  }
}
var three = obj.c.fun;
three();

this不是指向c吗？c对象里有a，为什么是undefined呢？
稍安，请看下面的代码。

 var three = obj.c.fun;  //fun函数赋值给three，函数未执行
 three = function() {
		   console.log(this.a); 
		 }
 three();  //此时才执行（函数调用，非严格模式this指向window）

赋值不等于调用，fun函数赋值给变量three时，函数未执行；
到three()这函数才被调用，调用three是window。window对象中没有a属性，所以是undefined。

上一个例子是 obj.c.fun() 直接执行，这个例子是var three = obj.c.fun先赋值， three(); 再执行。重点是：谁最后直接调用含有this的函数，函数中的this就指向谁。

---

例四：事件对象也一样
this 指向了触发事件的 DOM 元素本身

box.onclick = function(){
	console.log(this.innerHTML);  //this指向box
}

总结下来就是一句话：是谁调用的，this就指向谁

---

构造函数

例五：new 关键字
所谓构造函数是：通过这个函数，生成一个新对象。这时，this就指这个新对象

function Fun(){
  this.user = "黑暗";
}
var a = new Fun();
console.log(a.user); //黑暗

用new操作符创建对象时发生的事情：
第一步: 创建一个Object对象实例。
第二步: 将构造函数的执行对象赋给新生成的这个实例。
第三步: 执行构造函数中的代码
第四步: 返回新生成的对象实例

当new关键字 遇到 构造函数中有 return 时 this的指向，情况如下：↓

情况1：返回 string / number / Boolean / undefined / null

function fn(){
 this.user = '黑夜';
  return '字符串'; // number  Boolean undefined null  
}
var a = new fn;
console.log(a.user); //黑夜
console.log(a);  //fn { user: "黑夜" }

情况2：返回 function

function fn(){
 this.user = '黑夜';
  return function(){};
}
var a = new fn;
console.log(a.user); //undefined
console.log(a);  //ƒ (){}

情况3：返回 object

function fn(){
 this.user = '黑夜';
  return {user:'世界'};
}
var a = new fn;
console.log(a.user); //undefined
console.log(a);  //{user: "世界"}

如果返回值是一个对象，那么this指向的就是那个返回的对象；
如果返回值不是一个对象，那么this还是指向函数的实例。

参照文章的链接地址，请点击：“ 追梦子博客 ”

ps：若要问return function的时候，为什么this指向是undefined（返回的对象）。每个function本身是Function的实例，也就是说function的原型指向Function.prototype，而Function的原型指向的是Object.prototype，请熟悉js原型链，不多赘述~

---

关于new的过程可以看一下下面的代码

function Person(name) {
    this.name = name;
}
var p = new Person("黑夜");

以上代码在调用时,会变成如下：

var p = (Person (name) {
var _newObj = {   // 0
	constructor: Person;  // 1
	__proto__: Person.prototype;  // 2
};
_newObj.constructor(name);   // 3
    return _newObj;   // 4
})();

解析：

1. 创建一个新的对象,_newObj;
2. 将对象的constructor赋值为Person,即构造器函数;
3. 将对象的__proto__属性赋值为Person.prototype,即原型链的概念;
4. 使用构造器函数的方法设置name属性this.name = name;可以转成_newObj.constructor.call(_newObj,
   name),此时的this就是指向_newObj,由于call的原因;
5. 返回改对象给p变量.

本段内容转自原文：https://blog.youkuaiyun.com/w13508763507/article/details/83449359

---

改变this指向（人为改变）

例六：this指向call,aplay,bind的第一个参数
apply()是函数的一个方法，作用是改变函数的调用对象。它的第一个参数就表示改变后的调用这个函数的对象。因此，这时this指的就是这第一个参数。

先看一个点击事件

box.onclick = function(){
　　function fn(){
　　　　alert(this);  //this指向window
　　}
　　fn();  
};

函数调用，非严格模式下，this指向window。想让this指向box，一般将this保存下来，如下：↓

box.onclick = function(){
　　var _this = this;
　　function fn(){
　　　　alert(_this);
　　}
　　fn(); //this指向box
};

还有一些情况，有时我们想人为改变this指向，这时call、apply、bind就派上用场了。

先看明白下面的代码↓

var name = "黑夜", age = 10;
var obj = {
	 name : '白天',
	 oAge :  this.age,
	 fun : function(){
		console.log( this.name )
	}
}
obj.oAge ; // 10
obj.fun ();  //白天

1、call

var age= 10;
var obj = {
	 age: 20,
	 fun : function(){
		console.log( this.age)
	}
}
var obj2 = {
	age: 80
]
obj.fun.call(obj2);  // 80
obj.fun.apply(obj2);  // 80
obj.fun.bind(obj2)();  // 80

call 、bind 、 apply 这三个函数的第一个参数是 this 的指向对象。
call、apply直接执行；
bind 返回的是一个新的函数，你必须调用它才会被执行。
call 的参数是直接放进去的，第二第三第 n 个参数全都用逗号分隔，直接放到后面 obj.myFun.call(db,‘成都’, … ,‘string’ )。

apply 的所有参数都必须放在一个数组里面传进去 obj.myFun.apply(db,[‘成都’, …, ‘string’ ])。

bind 除了返回是函数以外，它 的参数和 call 一样。

当然，三者的参数不限定是 string 类型，允许是各种类型，包括函数 、 object 等等！

本段内容来自：JavaScript 中 call()、apply()、bind() 的用法

后续补充中……