js中this指向问题

最新推荐文章于 2024-06-07 23:26:45 发布

qaq8_qaq

最新推荐文章于 2024-06-07 23:26:45 发布

阅读量125

点赞数

文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.csdn.net/qaq8_qaq/article/details/127376835

版权

一丶 this的默认绑定(this默认指向了window)

一丶 this的默认绑定(this默认指向了window)

1.全局环境下的this指向了window

console.log(this);   //window

2.函数独立调用，函数内部的this也指向了window

function fn(){
    console.log(this);   //window
};

fn();

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

        var obj = {
            a:2,
            foo:function(){
                //函数当做对象的方法调用 this指向了obj
                console.log(this.a);   //指向了obj中的a
                function test(){
                    console.log(this.a);   //window中的a
                };
                test();
            }
        };
        obj.foo();

4.IIFE(自执行函数) 自执行函数中内部的this指向了window

        var a = 10;
        function foo(){
            console.log(this.a);  //指向了obj中的a
            (function test(){
                console.log(this.a);   //window中的a
            })();
        };
        var obj = {
            a:2,
            foo:foo
        };
        obj.foo();

5.闭包中this默认指向了window

        var a = 0;
        var obj = {
            a:2,
            foo:function(){
                var c = this.a;     //指向了obj中的a
                return  function test(){
                    console.log(this.a);    //指向了window中的a
                    return c;
                }
            }
        };
        var fn = obj.foo();
        console.log(fn())

二丶隐式绑定

当函数当做方法来调用，this指向了它的直接对象

        function foo(){
            console.log(this.a)
        } ;
        var obj = {
            a:1,
            foo:foo,
            obj2:{
                a:2,
                foo:foo
            }
        } ;
        //foo()函数的直接对象是obj,this指向了直接对象obj
        obj.foo();  //指向了obj中的a
        obj.obj2.foo();     //指向了obj2中的a

三丶隐式丢失

隐式丢失就是指被隐式绑定的函数丢失了绑定对象，从而默认绑定到了window上

1.函数别名

        var a = 0;
        function foo(){
            console.log(this.a)
        };
        var obj={
            a:1,
            foo:foo
        };
        //把obj.foo赋值给bar，造成隐式丢失的情况，因为只是把obj.foo赋
        //值给bar变量，而bar与obj对象毫无关系
        var bar = obj.foo;    
        bar();  //指向了window中的a

2.参数传递

        var a = 0;
        function foo(){
            console.log(this.a)
        };
        function bar(fn){
            fn()
        };
        var obj = {
            a:1,
            foo:foo
        };
        //把obj.foo当做参数传递到bar函数中，有隐式的函数
        //赋值 fn=obj.foo,只是把foo函数赋值给了fn，而fn与obj对象毫无关系
        bar(obj.foo);   //指向了window中的a

3.内置函数setTimeout()和setInterval()第一个参数的回调函数中的this默认指向window

        var a = 0;
        function foo(){
            console.log(this.a)
        };
        var obj = {
            a:1,
            foo:foo
        };
        setTimeout(obj.foo,1000);   //指向了window中的a

4.间接调用

        var a = 0;
        var p ={a:2};
        function foo(){
            console.log(this.a)
        };
        var obj = {
            a:1,
            foo:foo
        };
        //将obj.foo函数对象赋值给p.foo函数，然后立即执行，相当于
        //仅仅是foo函数的立即调用，内部的this默认指向了window
        (p.foo = obj.foo)();    //指向了window中的a 
        p.foo = obj.foo;
        p.foo();    //指向了p中的a

5.其他情况指向了window的特殊情况

        var a = 0;
        function foo(){
            console.log(this.a)
        };
        var obj = {
            a:1,
            foo:foo
        };
        (obj.foo = obj.foo)();      //指向了window中的a
        (false || obj.foo)();       //指向了window中的a
        (1,obj.foo)();              //指向了window中的a

四丶显式绑定

1.call() apply() bind() 把对象绑定到this上，叫做显式绑定

        var a = 0;
        function foo(){
            console.log(this.a)
        };
        var obj = {
            a:1,
        };
        foo();              //指向了window中的a
        foo.call(obj);      //指向了obj中的a
        foo.apply(obj);      //指向了obj中的a
        var fn = foo.bind(obj);  
        fn();               //指向了obj中的a

2.硬绑定(显式绑定的一种,使得this不能再被改变)

        var a = 0;
        function foo(){
            console.log(this.a)
        };
        var obj = {
            a:1,
        };
        var bar = function(){
            foo.call(obj);
        };
        bar();      //指向了obj中的a
        setTimeout(bar,2000);        //指向了obj中的a
        bar.call(window);            //指向了obj中的a

3.forEach() map() filter() 等等方法中的this

        var id = 'window';
        function foo(el){
            console.log(el,this.id)
        };
        var obj = {
            id:'foo'
        };
        var arr = [1,2,3];
        arr.forEach(foo);       //指向了window中的id
        arr.forEach(foo,obj);   //指向了obj中的id

五丶箭头函数中的this

箭头函数中没有自己的this值，他的this都是来自作用域链，在作用域链中一层一层往上找

        var a = 0;
        const foo = () => {
            var a = 1 ;
            console.log(this.a);  //指向了window中的a
        };
        foo();

六丶 new绑定

1.使用new关键字创建实例化对象时this指向

        function foo(){
            //如果是new关键字来执行函数，相当于构造函数来实例化对
            //象，内部的this指向了当前的实例化对象

            console.log(this)   //指向了foo
        };
        var fn = new foo();
        console.log(fn);     //指向了foo

2.使用new关键字创建实例化对象并用return来返回对象时this指向

        function foo(){
            console.log(this);      //指向了foo
            //使用return关键字来返回对象的时候 ,实例化出来的对象是当前的返回对象
            return {
                name:'xiaoming'
            }
        };
        var fn = new foo();
        console.log(fn);        //指向了return中的对象

七丶严格模式下this的指向

1.独立调用的函数内部的this指向了undefined

        function foo(){
            'use strict';
            console.log(this);    //undefined
        };
        foo();

2.严格模式下函数的apply()和call()内部的this始终是他们的第一个参数

        var a=1;
        function foo(){
            'use strict';
            console.log(this);      //null
            console.log(this.a);    //读取不到
        };
        foo.call(null);