你必须知道的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();  //猜猜这里的输出

相关文章

  • js判断浏览器的环境(pc端,移动端,还是微信浏览器)

    js判断浏览器的环境(pc端,移动端,还是微信浏览器)

    这篇文章主要介绍了js判断浏览器的环境(pc端,移动端,还是微信浏览器),文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-01-01
  • 浅析JavaScript中var that=this

    浅析JavaScript中var that=this

    this是Javascript语言的一个关键字。它代表函数运行时,自动生成的一个内部对象,只能在函数内部使用。接下来通过本文给大家分享JavaScript中var that=this所代表的意思,需要的朋友参考下吧
    2017-02-02
  • 实例分析JS与Node.js中的事件循环

    实例分析JS与Node.js中的事件循环

    本篇文章通过实例给大家详细分析了JS与Node.js中的事件的原理以及用法,大家学习一下吧。
    2017-12-12
  • 分离式javascript取当前element值的代码

    分离式javascript取当前element值的代码

    比较不错的分离式js代码,获取element的值,大家注意下,运行后的效果是32之类的值,其实主要是没有强制转换成数字,所以大家可以加上
    2008-05-05
  • jquery中live()方法和bind()方法区别分析

    jquery中live()方法和bind()方法区别分析

    这篇文章主要介绍了jquery中live()方法和bind()方法区别,结合实例形式简单分析了live()方法和bind()方法的功能、使用方法与用法区别,需要的朋友可以参考下
    2016-06-06
  • javascript淡入淡出效果的实现思路

    javascript淡入淡出效果的实现思路

    这个思路是最近写XScroll.js类的时候想明白的。平常我们说的淡入淡出效果,一般分成两部分,一半是淡入,另一半就是淡出了。不过经过分析,我觉得其实只需要一半就行了
    2012-03-03
  • JavaScript使用canvas实现flappy bird全流程详解

    JavaScript使用canvas实现flappy bird全流程详解

    这篇文章主要介绍了JavaScript使用canvas实现flappy bird流程,canvas是HTML5提供的一种新标签,它可以支持JavaScript在上面绘画,控制每一个像素,它经常被用来制作小游戏,接下来我将用它来模仿制作一款叫flappy bird的小游戏
    2023-03-03
  • 深入浅析同源策略和跨域访问

    深入浅析同源策略和跨域访问

    同源策略(Same origin policy)是一种约定,它是浏览器最核心也最基本的安全功能,如果缺少了同源策略,则浏览器的正常功能可能都会受到影响。可以说Web是构建在同源策略基础之上的,浏览器只是针对同源策略的一种实现
    2015-11-11
  • js实现延时加载Flash的方法

    js实现延时加载Flash的方法

    这篇文章主要介绍了js实现延时加载Flash的方法,较为详细的分析了通过元素替换实现JavaScript延时加载flash的相关原理与实现技巧,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-11-11
  • javascript replace()正则替换实现代码

    javascript replace()正则替换实现代码

    javascript-replace()基础,一次完成将"<,>"替换"&lt;&gt;"实例
    2010-02-02

最新评论