你必须知道的Javascript知识点之"this指针"的应用

 更新时间:2013年04月23日 09:47:32   作者:  
本篇文章小编为大家介绍,你必须知道的Javascript知识点之"this指针"的应用。需要的朋友参考下

很多人都知道this指针,这篇文章的主要目的是为了培训我们公司的新人。
默认的this指针指向
规则1
this指针默认指向方法调用时为其指定的对象,如:obj.fun(),fun方法体中的this指针指向obj。

复制代码 代码如下:

var user = { name: '段光伟' };
user.getName = function(){ return this.name; };
user.getName();  //返回‘段光伟'

复制代码 代码如下:

var user = { name: '段光伟' };
 user.getName = function(){ return this.name; };
 user.getName();  //返回‘段光伟'

 window.name = '李妞妞';
 window.getName = user.getName
 window.getName();  //返回‘李妞妞'
 getName();  //返回‘李妞妞'

规则2
如果在方法调用时没有为方法指定对象则this指针默认指向window,如:fun(),fun方法体中的this指针指向window。
复制代码 代码如下:

var fun = function(){
   return this;
 }
 fun();  //返回window对象

规则3没有在方法体中的代码可以看作执行在一个匿名方法,根据规则2可以推论出其this指针指向window。

 this  //window对象
改变this指针的默认指向
使用apply

复制代码 代码如下:

var user = { name: '段光伟' };
 user.hi= function(message){ return this.name+':'+message; };
 window.name = '李妞妞'
 user.hi('你好');  //输出‘段光伟:你好'
 user.hi.apply(window, ['你好']);  //输出‘李妞妞:你好'

使用call
复制代码 代码如下:

var user = { name: '段光伟' };
 user.hi= function(message){ return this.name+':'+message; };
 window.name = '李妞妞'
 user.hi('你好');  //输出‘段光伟:你好'
 user.hi.call(window, '你好');  //输出‘李妞妞:你好'

构造函数中的this指向
构造函数中的this指针默认指向执行正在构造的对象。
复制代码 代码如下:

var User = function(name){
    this.name = name;
 };
 User.prototype.hi = function(){
    return this.name;
 };
 var user = new User('段光伟');
 user.hi();  //输出‘段光伟'

最后的小测试
猜猜最后的输出时什么?
复制代码 代码如下:

var User = function(name){
     this.name = name;
  };
  User.prototype.hi = function(){
     return this.name;
  };
  var user = new User('段光伟');
  user.hi();  //输出‘段光伟'

 var hi = user.hi;

 hi();  //猜猜这里的输出

相关文章

  • setTimeout在类中使用的问题!

    setTimeout在类中使用的问题!

    setTimeout在类中使用的问题!...
    2007-04-04
  • 谈谈PHP中相对路径的问题与绝对路径的使用

    谈谈PHP中相对路径的问题与绝对路径的使用

    经常看到有人踩在了PHP路径的坑上面了,感觉有必要来说说PHP中相对路径的一些坑,以及PHP中绝对路径的使用,下面一起来看看。
    2016-08-08
  • JS鼠标滚动分页效果示例

    JS鼠标滚动分页效果示例

    在开发的时候为什么左边的数据出来比右边的慢呢?因为这里没有进行分页,左边的数据多,所以查询相对较慢。怎么解决此问题呢?下面小编给大家带来了JS鼠标滚动分页效果示例,需要的的朋友参考下吧
    2017-07-07
  • 微信小程序学习之wxs使用教程

    微信小程序学习之wxs使用教程

    这篇文章主要给大家介绍了关于微信小程序学习之wxs使用教程的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2021-05-05
  • 对frameset、frame、iframe的js操作示例代码

    对frameset、frame、iframe的js操作示例代码

    父框架到子框架的引用、子框架到父框架的引用、兄弟框架间的引用、不同层次框架间的互相引用具体实现如下,有此需求的朋友可以参考下
    2013-08-08
  • JS 树形递归实例代码

    JS 树形递归实例代码

    下面的代码是从实际项目中AJAX的回调部分 copy 出来的,使用了JS的递归,文本格式为JSON
    2010-05-05
  • javascript中this做事件参数相关问题解答

    javascript中this做事件参数相关问题解答

    有关this想必大家早有所耳闻,只不过在使用中不是那么在意而已,接下来为大家介绍下this做事件参数问题,感兴趣的你可不要错过了哈
    2013-03-03
  • javascript原型链学习记录之继承实现方式分析

    javascript原型链学习记录之继承实现方式分析

    这篇文章主要介绍了javascript原型链学习记录之继承实现方式,结合实例形式分析了javascript使用原型链实现继承的相关操作技巧与注意事项,需要的朋友可以参考下
    2019-05-05
  • 计算世界完全对称日的js代码,粗糙版

    计算世界完全对称日的js代码,粗糙版

    世界完全对称日,指的是公历纪年日期中数字左右完全对称的日期,这一天朋友们可以互送祝福同时让大家感叹时间的宝贵。
    2011-11-11
  • 分享十三个最佳JavaScript数据网格库

    分享十三个最佳JavaScript数据网格库

    数据网格可以帮助解决在 HTML 表格上对带有过滤、分页、排序、搜索以及内联编辑这些功能特性的大量数据集的处理问题,需要的朋友可以参考下
    2017-04-04

最新评论