zoukankan      html  css  js  c++  java
  • this 指向问题, 三个例子

    'use strict';
    var a = 20;
    function foo () {
        var a = 1;
        var obj = {
            a: 10,
            c: this.a + 20,
            fn: function () {
                return this.a;
            }
        }
        return obj.c;
    
    }
    console.log(foo());    //
    console.log(window.foo());  // ?

    首先明确一点, 一个函数如果独立调用, 比如直接 foo(), this在严格模式下是 undefined , 在非严格模式下会自动转向到window

    第二点就是 在进入新的函数作用域, this才会发生改变;

    所以执行 foo() 会报错, this未定义;

    如果在非严格模式下, this.a 就是window.a  = 20 , 虽然obj是调用者,  但 this.a + 20 不在一个函数体中,  执行 obj.c的时候 

    并没有创建新的作用域, 所以this没有发生改变, 依然执行window

    第三点是 谁调用函数, this会指向谁, 并且调用后要立即执行

     执行 window.foo,  this.a为20;

    var a = 20;
    var foo = {
        a: 10,
        getA: function () {
            return this.a;
        }
    }
    console.log(foo.getA()); // 10
    
    var test = foo.getA;
    console.log(test());  // 20

    foo.getA()中,getA是调用者,他不是独立调用,被对象foo所拥有,因此它的this指向了foo。

    test()作为调用者,尽管他与foo.getA的引用相同,但是它是独立调用的,

    因此this指向undefined,在非严格模式,自动转向全局window。

    function foo() {
        console.log(this.a)
    }
    
    function active(fn) {
        fn(); // 真实调用者,为独立调用
    }
    
    var a = 20;
    var obj = {
        a: 10,
        getA: foo
    }
    
    active(obj.getA); //20

    这个列子也一样, fn真正执行的时候,  其实obj并没有调用getA;  只是引用相同而已。

  • 相关阅读:
    java发送qq邮件
    HTTP3次握手和4次挥手
    Bootstrap面试题
    Bootstrap
    响应式布局
    JQuery思维导图
    JQuery相关知识点和面试题
    CSS思维导图
    前端面试题
    CSS3实现跑马效果
  • 原文地址:https://www.cnblogs.com/dhsz/p/8444356.html
Copyright © 2011-2022 走看看