js中this的指向

最新推荐文章于 2024-06-03 10:37:33 发布

Zang_WS

最新推荐文章于 2024-06-03 10:37:33 发布

阅读量252

点赞数 1

分类专栏：前端笔记文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/weixin_41759744/article/details/125297281

版权

前端笔记专栏收录该内容

21 篇文章 6 订阅

订阅专栏

1.单独使用 this，它指向全局(Global)对象。

<script>
var x = this;
document.getElementById("demo").innerHTML = x;  // [Object Window]
</script>
</html>

2.在对象方法中， this 指向调用它所在方法的对象。

<script>
// 创建一个对象
var person = {
  firstName: "John",
  lastName : "Doe",
  id     : 5566,
  fullName : function() {
    return this.firstName + " " + this.lastName;
  }
};
 
// 显示对象的数据
document.getElementById("demo").innerHTML = person.fullName(); // John Doe
</script>

3.函数使用中，this 指向函数的所属者。

<script>
document.getElementById("demo").innerHTML = myFunction();  // [Object Window]
function myFunction() {
  return this;
}
</script>
// 因为函数中的this指向函数上一级的作用域，那便是全局作用域。

4.严格模式下函数是没有绑定到 this 上，这时候 this 是 undefined。

5.在 HTML 事件句柄中，this 指向了接收事件的 HTML 元素。

<body>
<button onclick="this.style.display='none'">点我后我就消失了</button>
</body>

6.apply 和 call 允许切换函数执行的上下文环境（context），即 this 绑定的对象，可以将 this 引用到任何对象。

<script>
var person1 = {
  fullName: function() {
    return this.firstName + " " + this.lastName;
  }
}
var person2 = {
  firstName:"John",
  lastName: "Doe",
}
var x = person1.fullName.call(person2); 
document.getElementById("demo").innerHTML = x;   // John Doe
</script>
// 本来person1对象中方法中的this指向的是person1对象，但使用了call()之后，将this指向改变，指向了person2。

扩展：
call&apply&bind的区别
首先了解三个的作用是一样的，是用来改变this的指向。

它们的区别主要是在于方法的实现形式和参数传递上的不同。

1.函数.call(对象,arg1,arg2....)
2.函数.apply(对象，[arg1,arg2,...])
3.函数.bind(对象,arg1,arg2,....)() 注：bind返回的是一个函数体，并不会直接执行函数

function show(sex){
	console.log("姓名为"+this.yourname+",性别为"+sex);
 
}
var person={
	yourname:"张三",
	age:14
};
show.call(person,"男");//姓名为张三,性别为男
show.apply(person,['女']);//姓名为张三,性别为女
show.bind(person,"未知")();//姓名为张三,性别为未知

Zang_WS

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
js中this的指向

1.单独使用 this，它指向全局(Global)对象。2.在对象方法中， this 指向调用它所在方法的对象。3.函数使用中，this 指向函数的所属者。4.严格模式下函数是没有绑定到 this 上，这时候 this 是 undefined。5.在 HTML 事件句柄中，this 指向了接收事件的 HTML 元素。6.apply 和 call 允许切换函数执行的上下文环境（context），即 this 绑定的对象，可以将 this 引用到任何对象。扩展：call&apply&bind的区别
复制链接

扫一扫