小谈JavaScript中this的用法

  "this"关键字是JavaScript中广泛应用的一种特性,但它经常也是这门语言中最容易混淆和误解的特性。那么"this"的实际意义是什么?它是如何求值的?

  这里我把 this 出现的场景分为四类,简单的说就是:

    •  普通函数调用

    •  作为方法来调用

    •  作为构造函数来调用

    •  通过 apply 或 call 方法来调用 


  下面我们分别举例说明一下:

  1)作为普通函数调用时

<script type="text/javascript">
function first(){
this.a="100";
console.log(this); //输出window
console.log(this.a); //输出100
}
first();
</script>

在这段代码中函数first作为普通函数调用,实际上first是作为全局对象window的一个方法来进行调用的,即window.first();

所以这个地方是window对象调用了first方法,那么函数first当中的this即指window,同时window还拥有了另外一个属性a,值为100.

<script type="text/javascript">
var a=100;
function first(){
console.log(this.a);
}
first(); //输出100
</script>

同样这个地方first作为window的方法来调用,在代码的一开始定义了一个全局变量a,值为100

它相当于window的一个属性,即window.a=100,又因为在调用first的时候this是指向window的,因此这里会输出100


  2)作为方法来调用时

<script type="text/javascript">
var a = 100;
var obj = {
a:100,
b:function(){
console.log(this.a);
}
}
obj.b(); //输出 100
//这里是obj对象调用b方法,很显然this关键字是指向obj对象的,所以会输出a </script>

  这种情况非常容易理解,b( ) 属于对象 obj,并由 obj进行调用,当执行 obj.b( ) 时,函数是作为对象obj的方法调用的,因此函数体内的this指向的是obj对象,所以会输出100。

  再换种形式:

<script type="text/javascript">
var obj1 = {
a:100,
b:function(){
console.log(this.a);
}
}
var obj2 = {
a:100,
c:first.b
}
obj2.c(); //输出 100
</script>

  这个例子中,虽然b方法是在obj1这个对象中定义,但是调用的时候却是在obj2这个对象中调用,因此this对象指向obj2

 


 

  3)作为构造函数来调用

  先来科普一下构造函数,官方解释为:使自己的对象多次复制,同时实例根据设置的访问等级可以访问其内部的属性和方法。当对象被实例化后,构造函数会立即执行它所包含的任何代码。总与new运算符一起使用在创建对象的语句中。

  简而言之,就是通过这个函数生成一个新对象(object)。这时,this就指这个新对象。  

<script type="text/javascript">
var a = 2;
   function test(){
     this.a = 1;
   }
   var o = new test();
   console.log(a); //输出结果为 2
console.log(o.a) //输出结果为 1
</script>

  结果很显然,this指代的就是新对象new test( )。


 

  4)通过 apply 方法来调用

  

<script type="text/javascript">
var a = 0;
function test() {
console.log(this.a);
}
var o = {};
o.a = 1;
o.b = test;
o.b.apply(); //输出结果为 0
o.b.apply(o);//输出结果为 1
</script>

  当apply没有参数时,表示为全局对象。所以值为0。

  当给了参数之后,结果变为了1,说明这是this代表的是对象o

  以上就是今天的内容了,

  大家在这里需要注意的是要能够理清 this 所引用的对象到底是哪一个。

  但是不管按那种方法来调用,请记住一点:谁调用这个函数或方法,this关键字就指向谁。

上一篇:mybatis 一对一关联


下一篇:Django之知识总结