对于js中的this指向的深入理解

一、this的指向

1. this的指向是指谁调用它，那么this就指向谁

2. 全局环境中的this
   1）浏览器环境：无论是否在严格模式下，在全局执行环境中（在任何函数体外部）this 都指向全局对象 window
   2）node 环境：无论是否在严格模式下，在全局执行环境中（在任何函数体外部），this 都是空对象 {}

3. 是否是 new 绑定
   1）如果是 new 绑定，并且构造函数中没有返回 function 或者是 object，那么 this 指向这个新对象
   2）构造函数返回值不是 function 或 object，这种情况下 this 指向的是新到的对象
   实例代码：

	function Person(age){
        this.age = age;
    }

    // 23
    // this指向的是这个新的对象
    let person1 = new Person("23");
    console.log(person1.age);

3）构造函数返回值是 function 或 object，这种情况下 this 指向的是返回的对象
实例代码：

 	function Person2(age){
        this.age = age;
        let obj = {a:"21"};
        return obj;
    }

    // undefined
    let person2 = new Person2("hello");
    console.log(person2.age);

4）new的实现原理
创建一个新对象
这个新对象会被执行 [[原型]] 连接
属性和方法被加入到 this 引用的对象中。并执行了构造函数中的方法
如果函数没有返回其他对象，那么 this 指向这个新对象，否则 this 指向构造函数中返回的对象
5）new的实例代码：

	function New(func){
        let target = {};
        target._proto_ = func.prototype;
        let res = func.call(target);
        // 排除null的情况
        if(res && typeof(res) == "object" || typeof(res) == "function"){
            return res;
        }
        return target;
    }

4. 函数是否通过 call,apply 调用，或者使用了 bind 绑定，如果是，那么this绑定的就是指定的对象为显式绑定
   1）显示绑定的实例代码：

	function info(){
        console.log(this.age);
    }

    var person3 = {
        age:26,
        info
    };
    var age = 21;
    var info = person3.info;
    // 26
    info.call(person3);
    // 26
    info.apply(person3);
    // 26
    info.bind(person3)();

2）如果 call,apply 或者 bind 传入的第一个参数值是 undefined 或者 null，严格模式下 this 的值为传入的值 null /undefined。非严格模式下，实际应用的默认绑定规则，this 指向全局对象(node环境为global，浏览器环境为window)
实例代码：

	function info2(){
        // node环境中，非严格模式为global,严格模式为null
        // 浏览器环境中，非严格模式为window，严格模式为null
        console.log(this);
        console.log(this.age);
    }

    var person4 = {
        age:20,
        info2
    };
    // Window {postMessage: ƒ, blur: ƒ, focus: ƒ, close: ƒ, parent: Window, …}
    // 24
    var age = 24;
    var info2 = person4.info2;
    // 严格模式下会报错
    // 非严格模式下，node输出undefined，全局变量age不会挂在global
    // 非严格模式下，浏览器环境中输出24,全局变量age会挂在window
    info2.call(null);

5.隐式绑定，函数的调用是在某个对象上触发的，即调用位置上存在上下文对象。典型的隐式调用为: xxx.fn()
1）隐式绑定的实例代码：

	function info3(){
        console.log(this.age);
    }
    var person5 = {
        age:26,
        info3
    }
    // 26
    // 执行的是隐式绑定
    var age = 18;
    person5.info3();

6. 默认绑定，在不能应用其它绑定规则时使用的默认规则，通常是独立函数调用
   1）默认绑定的实例代码：

	// 非严格模式： node环境，执行全局对象 global，浏览器环境，执行全局对象 window
    // 严格模式：执行 undefined
    function info4(){
        console.log(this.age);
    }
    // 28
    // 严格模式下会报错，this是undefined
    // 非严格模式下，node环境会输出undefined，浏览器环境输出28
    var age = 28;
    info4();

7. 箭头函数的情况
   1）箭头函数没有自己的this，继承外层上下文绑定的this
   实例代码：

	let obj = {
        age:27,
        info:function(){
            return() => {
                // this继承的是外层上下文绑定的this
                console.log(this.age);
            }
        }
    };
    
    let person6 = {age:26};
	// 27
    let info5 = obj.info();
    info5();

    // 26
    let info6 = obj.info.call(person6);
    info6();

二、this指向的面试题总结

1. 如何正确的判断this? 箭头函数的this是什么？
   1）this的绑定规则有四种：默认绑定，隐式绑定，显式绑定，new绑定
   2）函数是否在 new 中调用(new绑定)，如果是，那么 this 绑定的是新创建的对象，前提是构造函数中没有返回对象或者是function，否则this指向返回的对象/function
   3）函数是否通过 call,apply 调用，或者使用了 bind (即硬绑定)，如果是，那么this绑定的就是指定的对象
   4）函数是否在某个上下文对象中调用(隐式绑定)，如果是的话，this 绑定的是那个上下文对象，一般是 obj.foo()
   5）如果以上都不是，那么使用默认绑定，如果在严格模式下，则绑定到 undefined，否则绑定到全局对象
   6）如果把 null 或者 undefined 作为 this 的绑定对象传入 call、apply 或者 bind, 这些值在调用时会被忽略，实际应用的是默认绑定规则
   7）箭头函数没有自己的 this, 它的this继承于上一层代码块的this

2. 判断下面this的值

var number = 6;
    var obj2 = {
        number:8,
        fn1:(function(){
            var number;
            // 12
            this.number *= 2;
            number = 3;
            return function(){
                var num = this.number;
                this.number *= 2;
                console.log(num);
                number *= 3;
                console.log(number);
            }
        })()
    };

    // 12 9 8 27 24
    var fn1 = obj2.fn1;
    fn1.call(null);
    obj2.fn1();
    console.log(window.number);