JavaScript this 关键字的指向

最新推荐文章于 2024-07-18 20:54:54 发布

小码本码

最新推荐文章于 2024-07-18 20:54:54 发布

阅读量513

点赞数 11

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

本文链接：https://blog.csdn.net/qq_63044079/article/details/140098274

版权

前端专栏收录该内容

6 篇文章 0 订阅

订阅专栏

面向对象语言中 this 表示当前对象的一个引用。

但在 JavaScript 中 this 不是固定不变的，它会随着执行环境的改变而改变。

1.在方法中，this 表示该方法所属的对象。

<body>
    <div id="div">
    </div>
    <script type="text/javascript">  
        // this在方法中指的是该方法所属的对象
      var object = {
        name:'李明',
        age:9,
        ff:function fun(){
            console.log(this.name);
            document.getElementById('div').innerHTML = this.name + '现在' + this.age +'岁'
        }
      }
      object.ff();
    </script>
   
</body>

2.如果单独使用，this 表示全局对象。严格模式下单独使用this也表示全局变量。

<body>
    <div id="div">
    </div>
    <script type="text/javascript">  
        // this单独使用指的是全局对象，浏览器的全局对象是Object window
        var x = this;
        document.getElementById('div').innerHTML = x;
     
    </script>
   
</body>

3.在函数中，this 表示全局对象。

 <script type="text/javascript">  
        // this在函数中也指的是全局变量
        function fun(){
            console.log(this);
            return this;
           
        }
         document.getElementById('div').innerHTML = fun();
     
    </script>

4.在函数中，在严格模式下，this 是未定义的(undefined)。

 <script type="text/javascript">  
        // this在函数中严格模式下指的是undefined
        "use strict";
        function fun(){
            console.log(this);
            return this;
           
        }
         document.getElementById('div').innerHTML = fun();
     
    </script>

5.在事件中，this 表示接收事件的元素。

  <div id="div">
        <button  onclick="this.style.display='none'">点击消失</button>
       
    </div>

6.类似 call() 和 apply() 方法可以将 this 引用到任何对象。

在 JavaScript 中函数也是对象，对象则有方法，apply 和 call 就是函数对象的方法。这两个方法异常强大，他们允许切换函数执行的上下文环境（context），即 this 绑定的对象。

<script type="text/javascript">  
        // 在JavaScript中函数也是对象，对象则有方法故call（）和apply（）就是函数对象的两个方法，
        //这俩个方法可以绑定this，即可以改变this的指向。
        var object1={
            name:'李明',
            age:9,
        }
        var object2={
            fun:function ff(){
                document.getElementById('div').innerHTML = this.name + this.age;
            }
        }
        object2.fun.call(object1);
       
    </script>