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()
     
  • 相关阅读:
    Java实现 蓝桥杯VIP 算法训练 字符删除
    Java实现 蓝桥杯VIP 算法训练 字符删除
    Java实现 蓝桥杯VIP 算法训练 字符删除
    Java实现 蓝桥杯VIP 算法训练 字符删除
    Java实现 蓝桥杯VIP 算法训练 字符删除
    Java实现 蓝桥杯VIP 算法训练 字符串编辑
    Java实现 蓝桥杯VIP 算法训练 字符串编辑
    Java实现 蓝桥杯VIP 算法训练 字符串编辑
    Java实现 蓝桥杯VIP 算法训练 字符串编辑
    Java实现 蓝桥杯VIP 算法训练 字符串编辑
  • 原文地址:https://www.cnblogs.com/jshe/p/14321249.html
Copyright © 2011-2022 走看看