JS中this的指向

什么是this?

  • 它是函数运行时,在函数体内部自动生成的一个对象,只能在函数体内部使用。
  • JS中this的指向,取决于调用的模式(调用对象),JavaScript中有四种调用模式:

一、函数调用模式

  • 函数的最通常用法,属于全局性调用,因此this就代表全局对象。
    <script type="text/javascript">
        var x = 1;
        function test() {
           console.log(this.x);
        }
        test();     // 1
    </script>

二、方法调用模式

  • 函数还可以作为某个对象的方法调用,这时this就指这个上级对象。
    <script type="text/javascript">
        function test() {
          console.log(this.x);
        }

        var obj = {};
        obj.x = 1;
        obj.m = test;

        obj.m();         // 1

    </script>

三、构造器调用模式

  • 所谓构造函数,就是通过这个函数,可以生成一个新对象。这时,this就指这个新对象。
    <script type="text/javascript">
        function test() {
         this.x = 1;
        }

        var obj = new test();
        obj.x // 1

    </script>

四、call()、apply()调用模式

  • apply、call方法可以让我们设定调用者中的this指向谁。
    <script type="text/javascript">
        function showValue(){
          console.log(this.value);
        }
        var obj={
          value:4
        }
        showValue.call(obj)     //输出4,this指向了obj对象
    </script>
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 葡萄藤PPT JS中this的指向 大家好,我是IT修真院郑州分院第6期的学员王栋,一枚正直、纯洁、善良的前端程序...
    17064阅读 634评论 0 2
  • 1.背景介绍 this是Javascript语言的一个关键字。它代表函数运行时,自动生成的一个内部对象。 this...
    lx2487阅读 306评论 0 0
  • JS中this的指向 【成都小课堂】 1.背景介绍 2.知识剖析 3.常见问题 4.解决方案 5.编码实战 6.扩...
    何华飒阅读 405评论 0 0
  • 大家好,我是IT修真院北京分院第22期的学员杨纲,一枚正直纯洁善良的WEB前端程序员。 1.背景介绍 this对象...
    古碑先生阅读 526评论 0 1
  • JS中this的指向 1.背景介绍 2.知识剖析 3.常见问题 4.解决方案 5.编码实战 6.扩展思考 7.参考...
    冷眸_c6b8阅读 187评论 0 0