Javascript的this用法

转自:http://www.ruanyifeng.com/blog/2010/04/using_this_keyword_in_javascript.html

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 = {};

  o.x = 1;

  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;

  o.m = test;

  o.m.apply(); //0

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

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

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

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

(完)

转载于:https://www.cnblogs.com/bonelee/p/6104663.html

Javascript的this用法相关推荐

  1. JavaScript中foreach()用法及使用的坑

    JavaScript中foreach()用法及使用的坑 JavaScript中foreach是用于遍历数组的方法,将遍历到的元素传递给回调函数,遍历的数组不能是空的要有值. foreach 语法: [ ...

  2. javascript typeof的用法

    javascript typeof的用法 2007/07/31 18:49 经常会在js里用到数组,比如 多个名字相同的input, 若是动态生成的, 提交时就需要判断其是否是数组. if(docum ...

  3. Javascript:this用法

    #Javascript:this用法整理 pingan 于 星期三, 18/12/2013 - 22:32 提交 常用Javascript的人都知道,[this这个关键字在一个函式内究竟指向谁]的这个 ...

  4. php伪数组转换为数组,JavaScript伪数组用法实例

    在Javascript中什么是伪数组?伪数组(类数组):无法直接调用数组方法或期望length属性有什么特殊的行为,但仍可以对真正数组遍历方法来遍历它们.本文实例讲述了JavaScript伪数组用法, ...

  5. javascript中in用法介绍

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  6. js replace不改变原str_总结javascript replace高级用法

    详解javascript replace高级用法 在前端与后台交互的时候我们通常都需要将后台传递的数据绑定到html中,这个绑定数据的方式我们通常是使用jQuery或者使用原生的innerHTML进行 ...

  7. html mailto 乱码,JavaScript mailto的用法解析

    本节内容: JavaScript mailto的用法 在网页中经常见过这样的提示: 若您忘记了密码,可发邮件至:123@123.com 对于MAILTO 中文标题乱码的问题 是由于outlook的编码 ...

  8. JavaScript计时器的用法setTimeout()和setInterval()

    Javascript计时器的用法 当我们学习前端的时候定时器是一个重要的知识点,几乎现在的我们打开一个网页中的页面都会看见定时器的身影,京东淘宝的定时秒,轮播图.规定时间的界面跳转- 在JavaScr ...

  9. javascript:void(0);用法及常见问题解析

    void 操作符用法格式: javascript:void (expression) 下面的代码创建了一个超级链接,当用户以后不会发生任何事.当用户链接时,void(0) 计算为 0,但 Javasc ...

最新文章

  1. 工作中InnoDB引擎数据库主从复制同步心得
  2. ios 部分string颜色_ios 设置字符串中某段字符的颜色
  3. VB.net版机房收费系统——结账功能实现(调错与优化)
  4. 2851 菜菜买气球
  5. response.setHeader()的用法
  6. scrapy 中爬取时被重定向_一篇文章教会你理解Scrapy网络爬虫框架的工作原理和数据采集过程...
  7. 104. Maximum Depth of Binary Tree 二叉树的最大深度
  8. php通用的树型类创建无限级树型菜单
  9. javascript --- ES6模块与CommonJS模块的差异
  10. 查看操作系统版本linux_LINUX操作系统常用操作收录(二):查看文件内容命令小结...
  11. php sqlsrv 分页,Php+SqlServer如何实现分页显示
  12. 阿里云PolarDB重大更新:两大技术突破,传统数据库一键迁移上云
  13. 【数论】【Polya定理】poj1286 Necklace of Beads
  14. storyboard之 Segue
  15. echart 饼图标题title的详细参数配置
  16. Spring AOP的实现思想之动态代理
  17. css background背景拉伸
  18. 知名国产论坛,凉了!!!!
  19. 毕设项目 - 大数据+爬虫 疫情分析可视化
  20. 画法几何及计算机制图,画法几何及机械制图(第2版)范思冲-第十二章 计算机绘图基础.pptx...

热门文章

  1. 2014江苏省职称计算机,2014年江苏省职称计算机office多选题.doc
  2. vue component created没有触发_详解在Vue中使用TypeScript的一些思考(实践)
  3. mysql压力测试教程_Mysqlslap MySQL压力测试工具 简单教程
  4. oracle11gr2查看数据库状态,Oracle 11gR2数据库文件丢失后的恢复测试
  5. mabatisplus怎么给实体类自定义属性_如果你的角色属性可以自定义,你会怎么点?...
  6. react native 的赋值比较,空字符串以及undefined
  7. 单点登录系统(SSO)和Session共享解释
  8. 【深度学习入门到精通系列】Gamma变换(校正)
  9. python【蓝桥杯vip练习题库】PREV-52小数第n位(模拟)
  10. j90度度复数运算_看得懂的复数