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

谁践踏了优雅 2022-01-21 20:09 339阅读 0赞

一、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的实例代码：

1.  函数是否通过 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)  
实例代码：

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

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

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

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

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

二、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的值