JavaScript教程:this使用实例

杨文山的事情

杨文山的事情

2016-02-20 01:07

人生本是一个不断学习的过程,在这个过程中,图老师就是你们的好帮手,下面分享的JavaScript教程:this使用实例懂设计的网友们快点来了解吧!

this是Javascript语言的一个关键字。

它代表函数运行时,自动生成的一个内部对象,只能在函数内部使用。比如,


  function test(){


    this.x = 1;


  }


随着函数使用场合的不同,this的值会发生变化。但是有一个总的原则,那就是this指的是,调用函数的那个对象。


下面分四种情况,详细讨论this的用法。


情况一:纯粹的函数调用


这是函数的最通常用法,属于全局性调用,因此this就代表全局对象Global。


请看下面这段代码,它的运行结果是1。


  function test(){


    this.x = 1;


    alert(this.x);


  }


  test(); // 1


为了证明this就是全局对象,我对代码做一些改变:


  var x = 1;


  function test(){


    alert(this.x);


  }


  test(); // 1


运行结果还是1。再变一下:


  var x = 1;


  function test(){


    this.x = 0;


  }


  test();


  alert(x); //0


情况二:作为对象方法的调用


函数还可以作为某个对象的方法调用,这时this就指这个上级对象。


  function test(){


    alert(this.x);


  }


  var o = {};

(本文来源于图老师网站,更多请访问http://m.tulaoshi.com/webkaifa/)


  o.x = 1;

(本文来源于图老师网站,更多请访问http://m.tulaoshi.com/webkaifa/)


  o.m = test;


  o.m(); // 1


情况三 作为构造函数调用


所谓构造函数,就是通过这个函数生成一个新对象(object)。这时,this就指这个新对象。


  function test(){


    this.x = 1;


  }


  var o = new test();


  alert(o.x); // 1


运行结果为1。为了表明这时this不是全局对象,我对代码做一些改变:

 


  var x = 2;


  function test(){


    this.x = 1;


  }


  var o = new test();


  alert(x); //2


运行结果为2,表明全局变量x的值根本没变。


情况四 apply调用


apply()是函数对象的一个方法,它的作用是改变函数的调用对象,它的第一个参数就表示改变后的调用这个函数的对象。因此,this指的就是这第一个参数。

 


  var x = 0;


  function test(){


    alert(this.x);


  }


  var o={};


  o.x = 1;

(本文来源于图老师网站,更多请访问http://m.tulaoshi.com/webkaifa/)


  o.m = test;


  o.m.apply(); //0


apply()的参数为空时,默认调用全局对象。因此,这时的运行结果为0,证明this指的是全局对象。


如果把最后一行代码修改为


  o.m.apply(o); //1


运行结果就变成了1,证明了这时this代表的是对象o。

展开更多 50%)
分享

猜你喜欢

JavaScript教程:this使用实例

Web开发
JavaScript教程:this使用实例

Javascript实例教程(19) 使用HoTMetal(1)

Web开发
Javascript实例教程(19) 使用HoTMetal(1)

s8lol主宰符文怎么配

英雄联盟 网络游戏
s8lol主宰符文怎么配

Javascript实例教程(19) 使用HoTMetal(7)

Web开发
Javascript实例教程(19) 使用HoTMetal(7)

Javascript实例教程(19) 使用HoTMetal(2)

Web开发
Javascript实例教程(19) 使用HoTMetal(2)

lol偷钱流符文搭配推荐

英雄联盟 网络游戏
lol偷钱流符文搭配推荐

Javascript实例教程(19) 使用HoTMetal(5)

Web开发
Javascript实例教程(19) 使用HoTMetal(5)

Javascript实例教程(19) 使用HoTMetal(3)

Web开发
Javascript实例教程(19) 使用HoTMetal(3)

lolAD刺客新符文搭配推荐

英雄联盟
lolAD刺客新符文搭配推荐

Excel密码破解超简单?这样加密别想破解

Excel密码破解超简单?这样加密别想破解

前端开发者使用JS框架的三个等级

前端开发者使用JS框架的三个等级
下拉加载更多内容 ↓