• 中文
    • English
  • 注册
  • 查看作者
    • 7:JS中this关键字

      一.  前言

      js的this指代的东西有以下三种情况:

      • 直接使用this,指的是window对象

      • 在对象的方法中使用this,指的是当前对象

      • 在标签的事件属性中使用this,指的是当前标签

      接下来针对上面的三种情况,分别举例说明。

      二. 直接使用this

      上面我们已经,直接使用this,this指的就是window对象:

      <script type="text/javascript">
          console.log(window);
          console.log(this); //输出的内容和上面一样
      </script>

      输出如下图:

      7:JS中this关键字

      可以看到alert也是window的一个对象,所以我们也可以采用window.alert()的方式来调用alert;除了上面的直接使用,我们还可以把this放在函数中,效果和直接使用上面的直接使用this是一样的。

      <script type="text/javascript">
         function zj() {
             console.log(this);
         }
         zj();
      </script>

      三.  对象方法中使用this

      在对象的方法中使用this,指的不再是window对象,此时的this指的是当前类的 对象:

      <script type="text/javascript">
         function f() {
             console.log(this);
         }
          var book ={
              id:1001,
              name:"西游记",
              author:"吴承恩",
              price:9.9,
              show:function () {
                  console.log(this);
              }
          };
          book.show();
          //{id: 1001, name: "西游记", author: "吴承恩", price: 9.9, show: ƒ}
             console.log(this); //见下图
      </script>

      此时我们再输出一下window对象可以看到,book类以及f函数,都可以在window对象中找到。也就是说,声明的函数和对象会默认保存在window对象中。

      7:JS中this关键字

      四.  在标签的事件属性中使用this

      在标签的事件属性中使用this,this指的便是当前标签,首先我们准备一个方法,传入x,返回x,我们传入this,返回了window对象:

      <script type="text/javascript">
          function aj(x) {
              console.log(x);
          }
          aj(this); //输出window对象
      </script>

      接下来,我们在某个标签的事件中,调用aj方法,输出内容将不再是window对象,而是当前标签:

      <body>
      <!--鼠标点击的时候调用aj方法,传入this-->
      <button id="btn1" onclick="aj(this)" >按钮1</button>
      <!--输出:<button id="btn1"onclick="aj(this)">按钮1</button>-->
      <script type="text/javascript">
          function aj(x) {
              console.log(x);
          }
      </script>
      </body>

      再以a标签举例:

      <body>
      <button id="btn1" onclick="aj(this)" >按钮1</button>
      <a href="#" onclick="aj(this)">链接</a>
      <!--输出<a href="#" onclick="aj(this)">链接</a>-->
      <script type="text/javascript">
          function aj(x) {
              console.log(x);
          }
      </script>
      </body>

      山东省
    • 0
    • 0
    • 0
    • 1.3k
    • 请登录之后再进行评论

      登录

      赞助本站

      • 支付宝
      • 微信
      • QQ

      感谢一直支持本站的所有人!

      单栏布局 侧栏位置: