JavaScript-读 You Dont Know JS,this到底是什么

前端技术更新很快,几个月前我还在写React,现在又有人建议我学学Vue了。思考之后决定先沉下心来补补JavaScript基础。You Dont Know JS一系列书不错。这一系列博客是我读这本书以后总结的干货。

为什么要使用this

知乎的习惯是先问是什么,再问为什么,到这篇博客却要翻过来讲。如果没有需要使用this的场景,那我们就没必要知道this到底是什么了。
请看下面的例子:

// 使用this的动机
function tellName(){
   
    console.log('name is', this.name);
}
let personOne = {
    name: 'Claire'
}
let personTwo = {
    name: 'LYY'
}
tellName.call(personOne);
tellName.call(personTwo);

控制台打印结果:
这里写图片描述

从以上this的使用中可以发现,我们在写代码时候往往希望一个函数在不同环境下行为风格一致但是具体表现不一样,也就是使用当前环境下的同名变量进行相同工序的“加工”,变量的具体值不同但“加工”工序相同。当然可以选择把这个“环境”作为参数传入函数,但this是一个更优雅的选择。

如何确定本次函数调用的this

我们现在模糊知道this是一个和调用环境相关的东西,但是很多时候我们还是不知道如何确定this。在说明如何确定本次调用this之前,请明确以下几点。

  • this不是编写时候绑定的,而是运行时绑定的,它依赖于函数调用的上下文条件,也就是说this与函数声明的位置无关,反而和函数被调用的方式有关
  • 当一个函数被调用时,会建立一个活动记录,被称为执行环境。这个记录包含函数是从何处(call-stack, 调用栈)被调用的,函数是如何被调用的,被传递了什么参数等信息,其中还包括了函数执行期间将被使用的this引用

你知道这段函数打印出什么吗

下面是一个使用this的例子:

// 通用例子
function foo(num){
   
    console.log('foo: ' + num);

    
  • 6
    点赞
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值