js中this的指向

Posted 2021-03-19 赵洲-笔记

JavaScript 中 this 不是固定不变的，它会随着执行环境的改变而改变

 

严格模式（‘use strict‘）

　　1.非严格模式下，全局作用域下的this指向window


　　2.严格模式下，全局作用域下的this指向undefined

    ‘use strict‘
    function X() {
        console.log(this);
    }
    X(); // 严格模式输出undefined，非严格模式输出Window

 

非严格模式讨论

　　1.在对象方调用方式中， this指向调用它所在方法的对象

    var X = {
        A: ‘XA‘,
        B: function() {
            console.log(this.A);
        }
    };
    X.B();//输出XA

　　2.在嵌套对象调用方式中，this指向最终调用对象

    var A = ‘A‘;
    var X = {
        A: ‘XA‘,
        B: function() {
            console.log(this.A);
        }
    };
    var B = X.B;
    B();//输出‘A‘

　　3.构造函数中this指向由return返回值确定（普通返回值指向对象实例本身，复杂对象返回值指向新对象）

    function X() {
      this.A = ‘XA‘;
      return ‘‘;//当前情况结果输出XA
      //return {A:‘RA‘};//当前情况结果输出RA
    }
    var Y = new X();
    console.log(Y.A)

　　4.在html事件句柄中，this指向了接收事件的HTML元素

<button onclick="this.style.display=‘none‘">点击消失</button>

　　5.apply、call、bind绑定时，this指向第一个参数

    var A = {a:‘Aa‘};
    var B = {a:‘Ba‘};
    function X() {
        console.log(this.a);
    }
    X.call(A,B); // 输出Aa

　　6.箭头函数的this指向为定义箭头函数的this（等同于上一级this）

    var A = ‘A‘;
    var X = {
      A: ‘XA‘,
      //Y: () => {console.log(this.A)}//该情况输出A
      Y: function() {console.log(this.A)}//该情况输出XA
    }
    X.Y(); 

　　7.定时器（setTimeout、setInterval）调用 在定时器中，this指向window

    var A = ‘A‘;
    var X = {
      A: ‘XA‘,
      Y: setTimeout(function() {console.log(this.A)}, 1000)
    }
    X.Y; //输出A