有关JavaScript的this自己做个小实验

引言

网上关于this的文章那么多,大家肯定都看得差不多了,但是哪些this的文章大多都比较初级,没我遇到问题都去看,然后看完觉得牛逼、我懂了,结果每次再遇到问题,我就不懂了,又得去搜,嘤嘤嘤难受,于是秉着实践出真知的原则,我开始做自己的小实验。这个文章可能会根据我遇到的问题持续更新,也有可能我没遇到问题(maybe 懒),就没有做小实验。

开始小实验

首先关于箭头函数

题目描述:箭头函数的this使它宿主对象的上下文,普通函数的this指向调用它的函数,大家应该都知道,那么如果中间经过了很多层的调用呢,也就是a.b.c.d.function()
看实验(我只写了一层,因为懒(其实是自己太多层绕不明白)

var obj1={
    name:'manman',
    age:19,
    gender:'woman',
    console:function(){
        obj2.console(()=>{
            console.log(this.name);
        })
    }
}

var obj2={
    name:'qiutu',
    age:25,
    gender:'woman',
    console:function(callback){
        callback();
    }
}

obj1.console();

返回什么啊,普通函数的话肯定是返回‘qiutu’对吧(其实不对!!),但是这里返回了‘manman’,为什么,因为箭头函数的this绑定的是宿主的对象呀呀呀,我们看一眼返回值

manman

我们再看看普通函数的情况

var obj1={
    name:'manman',
    age:19,
    gender:'woman',
    console:function(){
        obj2.console(function(){
            console.log(this.name);
        })
    }
}

var obj2={
    name:'qiutu',
    age:25,
    gender:'woman',
    console:function(callback){
        console.log(callback);
        callback();
    }
}

obj1.console();

返回值:

undefined

嘤嘤嘤,黑人问号,哦~~原来是没有对象调用它,匿名函数没有调用它的对象本来默认会是window,but,我这里在vscode上面跑的,采用的node环境,所以啦默认对象变成了undefine一个空空的东东欸嘿嘿。
so结论:箭头函数的this绑定的是宿主的对象(不管中间多少层调用),匿名函数没有调用它的对象会变成默认对象。

对于函数的参数中的this!

题目描述:给函数传参数的时候,如果是a(this.b)这样子的,这时候参数中的this是指向的什么呢?
这个还是真的没怎么搜到,很难受,自己试一下吧

var age=90
var obj1={
    name:'manman',
    age:19,
    gender:'woman',
    console:function(age){
        console.log(this.age);
        console.log(age);
    }
}

obj1.console(this.age);

本来我在vscode上面跑的,又undefine了,嘤嘤嘤,我去浏览器的devtools上面去跑了,跑出来结果为19、90,也就是说,参数传进去时this是这条语句执行环境下的this(作用域导致嘻嘻嘻),但是函数执行的内部的this便是之前一样调用此函数的对象的this。

展开阅读全文
©️2020 CSDN 皮肤主题: 大白 设计师: CSDN官方博客 返回首页
实付0元
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值