上篇我在文中介绍关于 this 的使用和几个 this 的使用场景,那么这篇我讲解一下在 this 在这写场景是如何应用的。

1、在函数外部使用this
在我们不知道 this 是什么的时候,我们可以先试着输出一下 this

<script>
   //在函数外部使用this,this就是指的 window 全局对象
   alert(this);       //弹出的是 [object Window]

   //全局变量都可以看做是 window 对象的属性
   var x = 1;
   var y = 2;
   alert(window.x);   // x 为 1
   alert(this.y);          // y 为 2
</script>

这时我们发现在函数外 this 弹出的内容是 [object Window] ,说明这时的 this 就是指的 window 对象的一个属性。

2、在函数内部调用this

<script>
   //在函数内部调用的this
   var x = 1;
   function test(){
    var x = 3;
    alert(x);   //x 为 3;
    alert(this.x);  //x 为 1;
    alert(this);    //this 的对象是window
   }
   test();
</script>

在函数内部调用 this 时,我们也发现了,this 并不是我们想象中的一样,在test()函数里面的 x = 3,而是指的函数外边的变量 x = 1。

3、用new关键字来调用this

<script>
   //用new来调用,那么绑定的将是创建的对象
   var x = 1;
   function test(){
    this.x = 100;
   }
   var obj = new test();    // 对象实例化
   alert(x);            // x 为 1
   alert(obj.x);        // x 为 100
</script>

这时函数 test() 在实例化对象之后,this.x 里面的 x 就是变量 obj 的属性,访问属性的方法是 属性名‘.’属性值。

4、作为对象的方法调用this

<script>
   //作为某个对象的方法调用,这时的 this 就指这个上级对象
   var x = 1;
   function test(){
    alert(this.x);
   }
   var objo = {};
   objo.x = 1000;
   objo.m = test;
   alert(x);        // x 为 1
   objo.m();        // 弹出 1000
</script>

首先弹出的第一个 x 是等于 1,没问题,全局变量 x = 1,但是我们发现 objo.m() 弹出的 1000 就难以理解了,其实在 var objo = {};这个步骤和上面的实例化差不多,也是把对象给一个变量,也是建立对象的最基本的类型。现在对象 objo 里面设置了一个属性和一个方法 x = 1000; test(test是上面函数的方法名,如果直接 alert( test )的话,弹出来的是一个 test 整个的函数 function test(){alert(this.x)}),根据下面的代码可以看出这里的 this 所指的就是变量 objo 的属性方法 m 函数外的变量 x = 1000,这里还有一个知识点,在函数内部可以访问外部的属性,但是外部不能访问函数内部的属性,要怎么能做到内外互通呢,那就要用到闭包了,这个下篇文章再详细介绍。

<script>
   //作为某个对象的方法调用,这时的 this 就指这个上级对象
   var x = 1;
   function test(){
    alert(this.x);
   }
   var objo = {};
   objo.x = 1000;
   objo.m = function(){
    alert(this);    //弹出 [object Object]
    /*弹出的是 { 'x' : 1000 },其中 JSON.stringify() 这个函数时解析对象里面的内容排列出来,其中带三个参数,
    *第一个是要解析的对象,第二个可以选择 null,第三个数字1,2,3,4... (为了更好的观看选择 4 )
    */
    alert(JSON.stringify(this,null,4));
    alert(this.x);
   };
   alert(x);        // x 为 1
   objo.m();        // 弹出 1000
</script>

5、使用Apply,Call方法调用this

<script>
   //用Apply,Call方法调用 this ,改变函数运行的作用域
   var x = 1;
  function test(){
    alert(this.x);
  }
  var objo = {};
  objo.x = 1000;
  objo.m = test;
  objo.m.apply();    //弹出 1
</script>

这里简单的介绍一下关于 Apply 和 Call 方法,两个都是可以改变函数运行时的作用域,在我们使用面向对象编程的时候经常会使用到,常见很重要。它的第一个参数就表示改变后的调用这个函数的对象,所以 this 就是指这个参数。
上面的代码可能有些人看不太明白,我把代码分解一下,在针对上面的几条再解释一遍。

<script>
   //用Apply,Call方法调用 this ,改变函数运行的作用域
   var x= 1;
   function testss(){
    alert(this.x);      //弹出的是 1
   }
   var objo = {
    x : 1000,
    m : function(){
       alert(this.x);
    }
   };
   var objoo = {
    x : 2000;
   }
   alert(this);         //弹出 [object Window] 这个就不在多说,上面介绍的很清楚了
   objo.m();            //弹出 1000 ,这里的 this 指的是 objo 的属性变量 x = 1000,内部访问外部变量,没问题
   objo.m.apply();      //弹出 1 ,这里就是使用了Apply方法 改了函数运行的作用域,使得 this 指向的是 window 全局对象
   objo.m.apply(objoo);     //弹出 2000
</script>

Apply和Call方法使用是一样的,之后后面带的参数形式不同 Call(this,’_x’,’_y’),以逗号分隔开,而 Apply(this,[‘_x’,’_y’]) 以中括号。
以上就是 this 的大致用法和简单的应用场景,当然 this 还有很多的功能,比如事件函数的监听等等,只有不断学习,才能慢慢的知道熟练运用。