浅谈this关键字

Posted 2020-10-26 -yu-ze-

在我学习this关键字的时候,通过查找资料总结出一些this的特殊用法,

供大家参考,代码里面有我总结的分析过程!

箭头函数里的this:

 var username = "全局";
    var obj = {
        username: ‘张举欣‘,
        say() {
            setTimeout(function() {
                console.log(this.username)
                //这里的this指向的是定时器,进而指向window
            })
            setTimeout(() => {
                //箭头函数里的this指的是宿主对象         
                //没有宿主对象,默认是window
                console.log(this.username);

            })
        }
    }
    obj.say()

易混淆的this

window.val = 1;
    var obj = {
        val: 2,
        dbl: function() {
            this.val *= 2; //4
            val *= 2; //2
            console.log(val); //2
            console.log(this.val); //4
        }
    };
    // 说出下面的输出结果
    obj.dbl();
    var func = obj.dbl;
    func();

// 结果是: 2 4 8 8
/*val变量在没有指定对象前缀,默认从函数中找,找不到则从window中找全局变量

即 val *=2 就是 window.val *= 2

this.val默认指的是 obj.val ;因为 dbl()第一次被obj直接调用

<2>14行代码调用

func() 没有任何前缀,类似于全局函数,即 window.func调用,所以

第二次调用的时候, this指的是window, val指的是window.val

第二次的结果受第一次的影响*/

下面在来看一段代码

    var obj = {
        func: function() {
            console.log(‘我是func‘);
        },
        say: function() {
            // 此时的this就是obj对象  
            setTimeout(function() {
                console.log(this);
                this.func()
                //使用bind绑定this指向obj
            }.bind(this));
        }
    }
    obj.say(); // obj

在这里,使用bind绑定this,改变指针的指向!

    var obj = {
        say: function() {
            var f1 = () => {
                console.log(this); // obj
                setTimeout(() => {
                    console.log(this); // obj
                })
            }
            f1();
        }
    }
    obj.say()

  //因为f1定义时所处的函数 中的 this是指的 obj, setTimeout中的箭头函数this继承自f1, 所以不管有多层嵌套,都是 obj
没有宿主对象的情况

var obj = {
        say: function() {

            var f1 = function() {
                console.log(this); // window, f1调用时,没有宿主对象,默认是window
                setTimeout(() => {
                    console.log(this); // window
                })
            };
            f1();
        }
    }
    obj.say()

//结果: 都是 window,因为 箭头函数在定义的时候它所处的环境相当于是window, 所以在箭头函数内部的this函数window

 

最后注意
//使用箭头函数,可以让我们解决一些在匿名函数中 this指向不正确的问题; 但是要注意在和普通函数混合的时候,this的指向可能是window !