浅释js中this

作者: -除膜慰道-
来源: 51数据库
2021-07-07

<!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>