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

    • 什么是this

        this是在函数调用时建立的一个绑定,this不是在编写的时候绑定的,而是在运行时绑定的,他依赖于函数调用的上下文关系,this绑定与他的调用点有关,而与函数的声明位置无关。

    • 调用点:函数在代码中被调用的位置。
    • 3种this绑定的规则

        1 默认绑定:这种绑定规则是在没有其他规则时使用,常见有:独立函数调用(如下)

    function foo(){ 
        console.log( this.a ); 
    } 
    var a = 2; 
    foo();// 2 此时foo是在全局中被调用的,所以this指向了全局对象,this.a相当于window.a,故输出2

        2 隐含绑定    

    function foo() {
        console.log( this.a );
    }
    
    var obj = {
        a: 2,
        foo: foo
    };
    
    obj.foo(); // 2 this此时指向obj,所以this.a相当于obj.a 

         隐含绑定丢失

    function foo() {
        console.log( this.a );
    }
    
    function doFoo(fn) {
        // `fn` 只不过`foo`的另一个引用
    
        fn(); // <-- 调用点!
    }
    
    var obj = {
        a: 2,
        foo: foo
    };
    
    var a = "global"; // `a`也是一个全局对象的属性
    
    doFoo( obj.foo ); // "global",doFoo()调用时this指向全局,所以指向this.a是会调用全局属性a而不是obj中的a

        3 明确绑定 使用call apply bind(硬绑定,解决this丢失的问题)

    function foo() {
        console.log( this.a );
    }
    
    var obj = {
        a: 2
    };
    var a = "global";
    
    foo.call( obj ); // 2
    • 绑定的优先级  明确绑定 > 隐含绑定 > 默认绑定
    • 绑定类型判定

        函数是否用call apply bind调用,是就是明确绑定 -> 函数环境对象调用的话就是隐含绑定 -> 默认绑定

    • 特例

        明确绑定中的参数this的指向为null和undefined的时候采用默认绑定

        间接引用:

    function foo() {
        console.log( this.a );
    }
    
    var a = 2;
    var o = { a: 3, foo: foo };
    var p = { a: 4 };
    
    o.foo(); // 3
    (p.foo = o.foo)(); // 2 赋值表达式p.foo = o.foo的 结果值 是一个刚好指向底层函数对象的引用。如此,起作用的调用点就是foo(),而非你期待的p.foo()o.foo()。根据上面的结果,默认绑定 规则适用。

        箭头函数 :一旦绑定就不会被覆盖   

    function foo() {
      // 返回一个arrow function
        return (a) => {
        // 这里的`this`是词法上从`foo()`采用
            console.log( this.a );
        };
    }
    
    var obj1 = {
        a: 2
    };
    
    var obj2 = {
        a: 3
    };
    
    var bar = foo.call( obj1 ); //bar是return的箭头函数的引用,已经指向obj1,此后不在覆盖
    bar.call( obj2 ); // 2, 不是3!
  • 相关阅读:
    如何进行有效沟通避免出现误会
    如何进行有效沟通
    怎样提高自己的团队合作能力
    javaScript简介
    css文本格式详解
    css简介及相关概念
    WebGL10---3D模型的加载与使用
    Canvas绘图与动画详解
    Canvas绘制时钟
    WebGL9----将canvas作为纹理,将动画作为纹理(2)
  • 原文地址:https://www.cnblogs.com/171220-barney/p/8556077.html
Copyright © 2011-2022 走看看