Javascript的this用法

发布时间 - 2026-01-10 22:33:23    点击率:

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。

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持!


# js  # this  # JavaScript中this的用法实例分析  # JS作用域闭包、预解释和this关键字综合实例解析  # JavaScript中this的四个绑定规则总结  # 几句话带你理解JS中的this、闭包、原型链  # javascript this详细介绍  # JavaScript中的this使用详解  # 老生常谈 js中this的指向  # js老生常谈之this  # constructor  # prototype全面解析  # JS中改变this指向的方法(call和apply、bind)  # 深入理解javascript中的 “this”  # 第一个  # 我对  # 指的是  # 的是  # 这是  # 还可以  # 这段  # 四种  # 自动生成  # 为空  # 没变  # 有一个  # 变成了  # 那就是  # 全局变量  # 结果是  # 只能在  # 证明了  # Javascript  # function 


相关栏目: 【 网站优化151355 】 【 网络推广146373 】 【 网络技术251813 】 【 AI营销90571


相关推荐: HTML 中如何正确使用模板变量为元素的 name 属性赋值  Laravel如何实现全文搜索功能?(Scout和Algolia示例)  node.js报错:Cannot find module 'ejs'的解决办法  Linux系统命令中screen命令详解  JavaScript Ajax实现异步通信  Laravel如何处理文件上传_Laravel Storage门面实现文件存储与管理  Laravel如何编写单元测试和功能测试?(PHPUnit示例)  laravel怎么配置和使用PHP-FPM来优化性能_laravel PHP-FPM配置与性能优化方法  通义万相免费版怎么用_通义万相免费版使用方法详细指南【教程】  香港服务器网站测试全流程:性能评估、SEO加载与移动适配优化  微信小程序 canvas开发实例及注意事项  INTERNET浏览器怎样恢复关闭标签页_INTERNET浏览器标签恢复快捷键与方法【指南】  Laravel怎么实现验证码功能_Laravel集成验证码库防止机器人注册  html5怎么画眼睛_HT5用Canvas或SVG画眼球瞳孔加JS控制动态【绘制】  javascript中数组(Array)对象和字符串(String)对象的常用方法总结  Claude怎样写约束型提示词_Claude约束提示词写法【教程】  Laravel如何使用Service Provider注册服务_Laravel服务提供者配置与加载  Python3.6正式版新特性预览  jQuery validate插件功能与用法详解  详解jQuery中基本的动画方法  LinuxShell函数封装方法_脚本复用设计思路【教程】  香港服务器部署网站为何提示未备案?  Windows11怎样设置电源计划_Windows11电源计划调整攻略【指南】  深圳防火门网站制作公司,深圳中天明防火门怎么编码?  为什么php本地部署后css不生效_静态资源加载失败修复技巧【技巧】  香港服务器WordPress建站指南:SEO优化与高效部署策略  网站制作怎么样才能赚钱,用自己的电脑做服务器架设网站有什么利弊,能赚钱吗?  手机网站制作与建设方案,手机网站如何建设?  Laravel如何使用Spatie Media Library_Laravel图片上传管理与缩略图生成【步骤】  实现点击下箭头变上箭头来回切换的两种方法【推荐】  如何批量查询域名的建站时间记录?  如何快速建站并高效导出源代码?  Laravel如何实现邮件验证激活账户_Laravel内置MustVerifyEmail接口配置【步骤】  JavaScript如何实现倒计时_时间函数如何精确控制  东莞市网站制作公司有哪些,东莞找工作用什么网站好?  Laravel如何监控和管理失败的队列任务_Laravel失败任务处理与监控  Laravel如何实现邮箱地址验证功能_Laravel邮件验证流程与配置  Laravel怎么使用Collection集合方法_Laravel数组操作高级函数pluck与map【手册】  关于BootStrap modal 在IOS9中不能弹出的解决方法(IOS 9 bootstrap modal ios 9 noticework)  laravel怎么用DB facade执行原生SQL查询_laravel DB facade原生SQL执行方法  如何确保西部建站助手FTP传输的安全性?  如何在云虚拟主机上快速搭建个人网站?  Laravel如何与Vue.js集成_Laravel + Vue前后端分离项目搭建指南  JavaScript实现Fly Bird小游戏  弹幕视频网站制作教程下载,弹幕视频网站是什么意思?  哪家制作企业网站好,开办像阿里巴巴那样的网络公司和网站要怎么做?  浅谈Javascript中的Label语句  ,在苏州找工作,上哪个网站比较好?  Laravel怎么上传文件_Laravel图片上传及存储配置  jquery插件bootstrapValidator表单验证详解