环境对象this
-
1.定义：指的是函数内部特殊的变量this,它代表着当前函数运行时所处的环境。this到底指向谁，是根据当时环境有关系的。
-
2.作用
弄清楚this的指向，可以让我们代码更简洁
ps:每个函数里面都有this环境对象
- 3.代码举例:
function fn(){
console.log(this); //window
}
fn();
总结:普通函数里面this指向的是window对象
- 4.代码举例：
<button>点击</button>
<script>
const btn = document.querySelector('button');
btn.addEventListener('click',function (){
console.log(this); //<button>点击</button>，指向btn对象
})
</script>
总结:this指向函数的调用者，此题中的this指向btn对象
- 5.函数的调用方式不同，this所指代的对象也不同，所以this是一个对象
- 6.谁调用,this就是谁-这是判断this指向的粗略规则
* 7.代码举例
setTimeout(function (){
console.log(this); //windows,指向window对象
},1000)
-
8.箭头函数中并不存在this，箭头函数会从他的上一级寻找this。
-
9.箭头函数会默认帮我们绑定外层this的值,所以在箭头函数中this的值和外层的this是一样的。
-
10.箭头函数中的this引用的就是最近作用域中的this。
-
11.向外层作用域中，一层一层查找this,直到有this的定义。
- 12.代码举例:
const user = {
name: ‘小明’;
//该箭头函数中的this为函数声明环境中this一致
walk:() => {
console.log(this);
}
}
总结:此时函数的this是对象user的所处环境window
13.代码举例
<button>点击,/button>
//DOM节点
const btn = document.querySelector('.btn');
btn.addEventListener('click', ()=>{
console.log(this);
//箭头函数,，此时this指向了window
});
//普通函数 此时this指向了DOM对象
btn.addEventListener(‘click’, function (){
cosnole.log(this); //btn对象 ，<button>点击</buttom>
})
14.箭头函数不适用于构造函数、原型函数、DOM事件函数的等等。
15.this的指向是可以改的，有3个方法可以动态指定普通函数中的this指向，分别是
call()、 apply() 、bind()
9.call()方法
-
使用call方法调用函数，同时指定被调用函数中的this值
-
语法：fun.call(thisArg,arg1,arg2,...)
-
thisArg: 在fun函数运行时指定的this值
-
arg1,arg2:传递的行参
-
返回值就是函数的返回值，因为call方法就是调用函数
