前端技术更新很快,几个月前我还在写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);