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()
 
原文地址:https://www.cnblogs.com/jshe/p/14321249.html