JavaScript|this

最新推荐文章于 2022-11-23 15:23:06 发布

Alan_Lowe

最新推荐文章于 2022-11-23 15:23:06 发布

阅读量115

点赞数 2

分类专栏： # JavaScript 文章标签： javascript this

本文链接：https://blog.csdn.net/qq_45985728/article/details/119701709

版权

JavaScript 专栏收录该内容

27 篇文章 1 订阅

订阅专栏

JavaScript|this

1.在方法中

在方法中，this关键字指向的是当前方法所属的对象：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>this</title>
  <script>
    var personName = {
      firstName:"",
      lastName:"",
      displayName : function (){
        // 方法中this指向该方法所属对象
        document.getElementById("p1").innerHTML = this.firstName + this.lastName;
      }
    }
    function Make(){
      // 把personName这个对象的值从新修改了过后再调用它的方法
      personName.firstName = document.getElementById("input1").value;
      personName.lastName = document.getElementById("input2").value;
      personName.displayName();
    }
  </script>
</head>
<body>

请输入你的姓：
<input type="text" id="input1">
<br>
请输入你的名：
<input type="text" id="input2">
<br>
<button onclick="Make()">显示</button>
<p id="p1" style="display: inline-block">你的姓名</p>

</body>
</html>

在这里插入图片描述

2.object Window

在单独使用this，或者在非类中的函数使用this，都是指向window的，也就是全局对象object Window。

在严格模式下非类中的函数使用this是undefined。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>this</title>
</head>
<body>

<p id="p1"></p>
<p id="p2"></p>
<script>
    // 单独使用this指向全局对象，即object Window
    document.getElementById("p1").innerHTML = this;
    // 非对象的函数中默认this指向全局对象，即object Window
    document.getElementById("p2").innerHTML = Fun();
    function Fun(){
        return this;
    }
</script>

</body>
</html>

在这里插入图片描述

3.事件中的this

事件中的this指向了接收事件的HTML元素：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>this</title>
</head>
<body>

<button onclick="Fun(this)">点击消失</button>
<script>
    function Fun(x){
        // 事件中this指向接受事件的元素
        x.style.display = "none";
    }
</script>

</body>
</html>