js中的this指向

有以下六点：1.单独使用 this，它指向全局(Global)对象。2.在对象方法中， this 指向调用它所在方法的对象。3.函数使用中，this 指向函数的所属者。4.严格模式下函数是没有绑定到 this 上，这时候 this 是 undefined。5.在 HTML 事件句柄中，this 指向了接收事件的 HTML 元素。6.apply 和 call 允许切换函数执行的上下文环境（conte

雾眠气泡水@

5078人浏览 · 2021-11-23 19:02:38

雾眠气泡水@ · 2021-11-23 19:02:38 发布

有以下六点：

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

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

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

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

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

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

单独使用this时

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>单独使用this</title>
</head>
<body>
<p id="demo"></p>
</body>

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

对象方法中使用this时

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>对象方法中使用this时</title>
</head>
<body>
<p id="demo"></p>
</body>


<script>
// 创建一个对象
var person = {
  firstName: "John",
  lastName : "Doe",
  id     : 5566,
  fullName : function() {
    return this.firstName + " " + this.lastName;
  }
};

// 显示对象的数据
document.getElementById("demo").innerHTML = person.fullName();
</script>
</html>

函数中使用this时

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>函数中使用this时</title>
</head>
<body>

<p id="demo"></p>

</body>

<script>
document.getElementById("demo").innerHTML = myFunction();
function myFunction() {
  return this;
}
</script>
</html>

因为函数中的this指向函数上一级的作用域，那便是全局作用域。

事件中使用this时

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>事件中使用this时</title>
</head>
<body>

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

</body>
</html>

点击一下“点我后我就消失了”这串字，它会消失。说明this是指向该元素的。

使用call或apply时

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>使用call来改变this的指向</title>
</head>
<body>

<p id="demo"></p>

</body>


<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; 
</script>

</html>

本来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,"未知")();//姓名为张三,性别为未知