浅释js中this
<!DOCTYPE html>
<html>
<head></head>
<body>
<script type="text/javascript">
/*
* 对js this的探讨
*/
//情况一 隐式调用
var a = 2;
function _f1(){
console.log(this.a)
}
_f1.a = 1;
_f1();//这里是隐式调用 真正调用_f1()函数的是window 因此在_f1中的this指向了全局
function _f2(){
this.a = 3;//这里的this指向全局 因为是window调用
setTimeout(function(){
console.log(this.a);
},1000)
}
_f2()//输出3
//那么我们如何才能使这个this能指回对应的函数或者对象呢？
//方法一： 直接在函数中使用该函数
var a = 2;
function _f1(){
console.log(_f1.a)
}
_f1.a = 1;
_f1();//输出1
//方法二：使用call()或者apply() 将函数内部的this强制转给某个对象
var a = 2;
function _f1(){
this.a = 4
console.log(this.a)
}
_f1.call(_f1);//输出4
_f1.bind(_f1)//输出4
function _f3(a,b){
console.log("a:"+a+"b:"+b);
}
_f3.apply(Object.create(null),[1,2]) //这里使用create来创建个空对象来占位
//方法三:使用一个变量存储 当前this 这样做的目的是让它成为局部全局变量 可以让闭包直接调用
function _f2(){
var _this = this;
setTimeout(function(){
console.log(_this.a);
},1000)
}
// //也可以这样写
function _f2(){
setTimeout(function(){
console.log(this.a);
}.bind(this),1000)
}
//当然我们还可以借助对象的方式
function _f1(){
console.log(this.a)
}
var a = 1;
var obj = {
a:2,
fun:_f1
}
obj.fun()//输出2 这里其实完整是这样表示 window.obj.fun(); 但是这里的this指向了obj 谁调用就指向谁
//方式四：使用箭头函数 在箭头函数中this的指向 是 在谁的作用域创建的就指向谁
var _f1 = () =>{
this.a = 2;
console.log(this.a)
}
总结:this的指向并不是简单的指向函数本身或者是对象本身,它的指向是根据执行的上下文关系来决定的 在es5之前的规律是
谁调用就指向谁(就近原则)
箭头函数则是 在谁的作用域创建的就指向谁
由new调用的绑定到新创建的对象中
由call或者apply或者是bind()调用的绑定到指定的对象
默认情况 如果是严格模式下报错,否则绑定到window全局
</script>
</body>
</html>
本文地址：https://blog.csdn.net/weixin_41421227/article/details/85990519