zoukankan      html  css  js  c++  java
  • js中this的指向

    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
  • 相关阅读:
    303. Range Sum Query
    【Leetcode】292. Nim Game
    【c++】函数默认参数
    [err]default argument given for parameter 3 of '***'
    [err]multiple definition of `***'
    【leetcode】290. Word Pattern
    【leetcode】283. Move Zeroes
    【leetcode】278. First Bad Version
    【leetcode】268. Missing Number
    【leetcode】263. Ugly Number
  • 原文地址:https://www.cnblogs.com/zhaozhou/p/12146243.html
Copyright © 2011-2022 走看看