js中this指向问题

最新推荐文章于 2024-11-02 19:19:35 发布

码农阿茹

最新推荐文章于 2024-11-02 19:19:35 发布

阅读量72

点赞数

文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/m0_69674158/article/details/125265967

版权

使用 JavaScript 开发的时候，很多开发者多多少少会被 this 的指向搞蒙圈，但是实际上，关于 this 的指向，记住最核心的一句话：哪个对象调用函数，函数里面的this指向哪个对象。

下面分几种情况谈论下：

一：在普通函数中的this：window

在html中调用
dom事件注册中：事件对象（dom）

function fn(){
   alert(this.username);//undefined
}
fn();`

二：对象中的this：对象本身

就是那个函数调用，this指向哪里

window.b=2222
let obj={
    a:111,
    fn:function(){
        alert(this.a);//111
        alert(this.b);//undefined
    }
}
obj.fn();

三：全局方法中this：window（setinterval，setTimeout）

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<p οnclick="fun1(this)">普通</p>
		<p class="dom">时间注册dom</p>
		<script type="text/javascript">
			var age =50;
			var obj ={
				name:"mumu",
				age:18,
				say:function(){
					console.log(this.age);
				},
				grow:function(){
					window.setInterval(function(){
						this.age++;
						console.log(this.age);
					},3000)
				}
			}
			obj.grow()
		
		</script>
	</body>
</html>

四：箭头函数的this指向上一层作用域的this

let obj={
    a:222,
    fn:function(){    
        setTimeout(function(){console.log(this.a)})
    }
};
obj.fn();//undefined

五：call，apply和bind中this指向的是函数call的第一个参数

apply和call简单来说就是会改变传入函数的this。call和apply都是执行一个函数，用第一个参数冒充函数的this，apply参数用的是数组形式。bind把bind的第一个参数作为this，创建一个新的函数，并可以指定默认参数。

function add（a，b）{
console.log(this,a,b);}
add.call({name:"zz"},4,5);
//add.apply({name:"zz"}[8,7]);//传递方式是数组

码农阿茹

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫