蛋疼的JavaScript(二)this
2024-09-05 10:33:13
### 烦人的this
JavaScript的表现与之前学的任何传统的语言都不一样，这个就很烦人，这几天把这个坑扫除了
### this到底指向什么
总的来说，总结下，this其实取决于调用者的上下文环境，好比直接调用函数，是在全局作用域下的，就是直接this就是Window
```javascript
function fn(){
console.log(this)
}
fn()//Window
```
而如果将作为对象中的属性，objA.objB.fun（）这个时候this就是objB
```javascript
function fn(){
console.log(this)
}
objA={
a:123,
myfun:fun
}
objA.fun()//objA
```
同样的道理可以延伸到对象的事件，注册事件其实就是将对应对象的上下文环境中的某个属性例如click绑定一个函数，这样的话，函数内部的this就是调用者本身
```javascript
document.querySelector("#btn").onclick = function(){
console.log(this)
}//<input type="button"/>
```
需要注意的是，理解什么是上下文环境，千万不要把上下文环境错认为就是所谓的作用域
```javascript
function fnChain_1() {
console.log(this)
fnChain_2()
}
function fnChain_2() {
console.log(this)
fnChain_3()
}
function fnChain_3() {
console.log(this)
}
fnChain_1()
//三个都是Window
```
上面实例代码是错误理解上下问环境的典范
### ES6的this
ES6引入了箭头函数，这时this的表现与我们之前接触的又不一样了，具体不同点如下:
+ 普通的函数的this取决于调用上下文
+ 而ES6里面的this是继承父执行上下文的this
实例代码如下：
```javascript
//代码来自于https://blog.csdn.net/qq_38563845/article/details/78145814
var name = "window";
var obj = {
name: 'obj',
//普通函数
one: function(){
console.log(this.name)
},
//箭头函数
two: ()=> {
console.log(this.name)
},
//普通函数中的箭头函数
three: function(){
(()=>{
console.log(this.name)
})()
},
//多层箭头函数
four: ()=> {
(()=>{
console.log(this.name)
})()
}
}
obj.one(); //obj
obj.two(); //window
obj.three(); //obj
obj.four() //window
```
下面分析我们的想法来个例子：
```javascript
function foo() {
return () => {
return () => {
return () => {
console.log(this);
};
};
};
}
foo()()()()//Window
```
如果将上面的代码改为：
```javascript
foo().call({a:"HelloWorld"})()()()
//{a:"HelloWorld"}
```
至于call是干什么的，接下来来解释
最新文章
- ABP理论学习之功能管理
- Modern OpenGL用Shader拾取VBO内单一图元的思路和实现
- Wix 安装部署教程(七) 获取管理员权限
- Java 操作 EXCEL
- Isim你不得不知道的技巧（整理）
- git subproject commit xxxxxxxxxxxxxxxxxxxxx -dirty
- js blog
- idea空包自动叠加问题
- JEESZ-Redis分布式缓存安装和使用
- PAT1083:List Grades
- Python random() 函数
- logstash/conf.d文件编写
- vue自定义滚动条
- bootstrap 使用总结
- interface中定义default方法和static方法
- MikroTik RouterOS获取在线终端和在线IP总数并自动对IP做限速（转）
- Elasticsearch学习之深入聚合分析五---案例实战
- BZOJ第一页刷题计划
- JavaScript中的不可变性(Immutability)
- 自从教学弟学会了Python，他每天都爬一些好不正经的图片！