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

    1.this 全局作用域下默认指向window

    2. 函数的独立调用 this 指向window

    3. 被嵌套函数独立调用时 this指向window

    1 let obj = {
    2     a:20,
    3     foo:function(){
    4          function test(){
    5               console.log(this)
    6         }
    test()
    7 } 8 } 9 obj.foo();

    4.自执行函数 this指向window

     1 function foo () {
     2             (function test(){
     3                 console.log(this);
     4             })();
     5         };
     6 
     7         let obj = {
     8             a: 20,
     9             foo:foo
    10         }
    11         obj.foo();

      如果想访问obj的作用域 

    function foo () {
                // console.log(this)
                (function test(that){
                    console.log(that.a);
                })(this);
            };
    
            let obj = {
                a: 20,
                foo:foo
            }
            obj.foo();

     5.闭包中this指向window.

    let objs = {
                a: 20,
                foo: function(){
                    let c = this.a;
                    return function fn() {
                        console.log(this)
                        return c;
                    }
                }
            }
            let fns = objs.foo();
            fns()

    隐试绑定:

    1.当函数当做对象的方法被调用的时候this指向函数的直接对象「"点"前边的对象」

    function foo(){
                console.log(this)
            }
            let obj = {
                a: 20,
                foo: foo,
                obj1: {
                    a: 2,
                    foo:foo
                }
            }
            obj.foo();
            obj.obj1.foo()

      隐试绑定丢失 1 函数被赋值给了变量再调用  2.当函数被作为参数传递 3.内置函数 4.间接调用 都会导致this指向的丢失

    let a = 2;
            function foo(){
                console.log(this.a); //2 obj.foo()被赋值给了bar bar和obj没有关系造成了隐试绑定丢失 this指向window
            }
            let obj = {
                a: 20,
                foo: foo,
                obj1: {
                    a: 2,
                    foo:foo
                }
            }
            var bar = obj.foo;
            bar();

      隐试绑定丢失 2 函数被当作参数传递的时候 会造成隐试丢失.

        setTimeout this指向window 是因为隐试丢失setInterval 同

    let time = () =>{
                console.log(this);
            }
            let obj = {
                a: 20,
                fun: time
            }
            setTimeout(obj.fun,2000)

        间接调用

      

    //间接调用
            function fun (){
                console.log(this);
            }
            let obj = {
                a: 20,
                fn: fun
            }
            let p = { a: 1 };
            obj.fn(); //隐试调用 函数被当作对象的方法调用 this指向该函数的对象 obj
            (p.foo = obj.fn)(); //隐试丢失 间接调用 被赋值给了一个变量且立即执行 this指向window
            let b = obj.fn;
            b()//this指向window 函数被赋值给了一个变量去调用

        
             
    p.fn = obj.fn;
    p.fn() //this 指向p
     

    显式绑定

    //显式调用  call apply bind 改变this指向
            function fn(){
                console.log(this)
            }
            let obj = {
                a: 20
            }
            fn(); //window
            // fn.call(obj) //obj
            // fn.apply(obj) //改变为 obj
            fn.bind(obj)() //this 预设 

     数组迭代遍历的方法第二个参数也可以改变this指向

    let arr = [1, 2, 3, 4];
            let obj = {
                a: 2
            }
            arr.forEach(function(el){
                console.log(this, el)
            },obj)  //第二个参数显式绑定了this为obj

     箭头函数 箭头函数当作方法被调用的时候 this指向window

    let car = {
                speed: 60,
                run: ()=>{
                    console.log(this); //window
                }
            }
            car.run()
     
  • 相关阅读:
    HDU 3336 Count the string (KMP next数组运用——统计前缀出现次数)
    HDU 2594 Simpsons’ Hidden Talents (KMP——前缀后缀最长公共串)
    2015 Multi-University Training Contest 7 1011(DP)
    2015 Multi-University Training Contest 7 1005
    2015 Multi-University Training Contest 7 1007(DP)
    poj 2342 Anniversary party (树形dp)
    POJ 1611 The Suspects (并查集)
    poj 2236 Wireless Network(并查集)
    hdu 3591 The trouble of Xiaoqian(多重背包)
    hdu 2079 选课时间(母函数)
  • 原文地址:https://www.cnblogs.com/jshe/p/14321249.html
Copyright © 2011-2022 走看看