了解JS中的this,有几个知识点需要知道。1,关于闭包。2,词法环境。3,回调函数。4,箭头函数。
1.闭包
首先,我们来说闭包,我们看看MDN中的闭包的定义。一个函数和对其周围状态(lexical environment,词法环境)的引用捆绑在一起(或者说函数被引用包围),这样的组合就是闭包(closure)。也就是说,闭包让你可以在一个内层函数中访问到其外层函数的作用域。在 JavaScript 中,每当创建一个函数,闭包就会在函数创建的同时被创建出来。
function makeFunc() {
var name = "Mozilla";
function displayName() {
alert(name);
}
return displayName;
}
var myFunc = makeFunc();
myFunc();
运行这段代码的效果和之前 init()
函数的示例完全一样。其中不同的地方(也是有意思的地方)在于内部函数 displayName()
在执行前,从外部函数返回。
第一眼看上去,也许不能直观地看出这段代码能够正常运行。在一些编程语言中,一个函数中的局部变量仅存在于此函数的执行期间。一旦 makeFunc()
执行完毕,你可能会认为 name
变量将不能再被访问。然而,因为代码仍按预期运行,所以在 JavaScript 中情况显然与此不同。
原因在于,JavaScript中的函数会形成了闭包。 闭包是由函数以及声明该函数的词法环境组合而成的。该环境包含了这个闭包创建时作用域内的任何局部变量。在本例子中,myFunc
是执行 makeFunc
时创建的 displayName
函数实例的引用。displayName
的实例维持了一个对它的词法环境(变量 name
存在于其中)的引用。因此,当 myFunc
被调用时,变量 name
仍然可用,其值 就被传递到alert
中。
下面是一个更有意思的示例 — 一个 makeAdder
函数:
function makeAdder(x) {
return function(y) {
return x + y;
};
}
var add5 = makeAdder(5);
var add10 = makeAdder(10);
console.log(add5(2)); // 7
console.log(add10(2)); // 12
在这个示例中,我们定义了 makeAdder(x)
函数,它接受一个参数 x
,并返回一个新的函数。返回的函数接受一个参数 y
,并返回x+y
的值。
从本质上讲,makeAdder
是一个函数工厂 — 他创建了将指定的值和它的参数相加求和的函数。在上面的示例中,我们使用函数工厂创建了两个新函数 — 一个将其参数和 5 求和,另一个和 10 求和。
add5
和 add10
都是闭包。它们共享相同的函数定义,但是保存了不同的词法环境。在 add5
的环境中,x
为 5。而在 add10
中,x
则为 10。
2.词法环境
在了解了闭包之后,我们来看看闭包中的词法环境(Lexical Enviroment)。
在JavaScript中,每个运行的函数,代码块,以及整个脚本,都有一个被称为词法环境(Lexical Enviroment)的内部关联对象。
词法环境由两部分组成:
1. 环境记录(Enviroment Record)——一个存储所有局部变量作为其属性(包括一些其他信息,例如this的值)的对象
2,对外部词法环境的引用,与外部代码相关联。
一个“变量”只是 环境记录 这个特殊的内部对象的一个属性。“获取或修改变量”意味着“获取或修改词法环境的一个属性”。
举个例子,这段没有函数的简单的代码中只有一个词法环境:
这就是所谓的与整个脚本相关联的 全局 词法环境。
在上面的图片中,矩形表示环境记录(变量存储),箭头表示外部引用。全局词法环境没有外部引用,所以箭头指向了 null
。
在这里,我们就是举一个列子来说明,每个函数都有自己的词法环境,并且词法环境中包括this信息,而this信息在创建的时候是不会有值的,他是随着代码的执行计算出来的。
3.回调函数。
上图是回调函数在危机百科中的介绍,我觉得主要的一句话是:回调函数和原始调用者处于相同的抽象层。
4.箭头函数
箭头函数有些特别:它们没有自己的 this
。如果我们在这样的函数中引用 this
,this
值取决于外部“正常的”函数。
有了这些铺垫我们再来看,btn.onclick中的代码
let btn = document.getElementById('btn');
btn.onclick = function(){
setTimeout(function(){console.log(this)},1000)
}
先看一下function函数的this。正常的function函数的this逻辑很简单,谁调用我,我的this就指向谁,在setTimeout中的function是与setTimeout处于同一抽象层的(是挂载在window对象身上的),且它是由setTimeout计数之后由window来调用的,所以这里的this就是window对象。
再来看箭头函数中的this
let btn = document.getElementById('btn');
btn.onclick = function(){
setTimeout(()=>{console.log(this);},1000)
}
箭头函数没有自己的this意思就是,在箭头函数的词法环境中的环境记录中是没有this的定义的。那如果它需要用this怎么办,就需要到外部环境引用中去找this。箭头函数的外部环境引用,this
值取决于外部“正常的”函数。箭头函数的外部有一个正常的function, 这个function是由btn来调用的,所以正常函数的this是btn。那箭头函数就把它的this拿过来,在它里面用。所以箭头函数的this对象就指向的是btn。
初学JS,感觉很多知识点不是很贯通,如果有说错的地方,欢迎大佬批评指正。感谢感谢。