位置: 编程技术 - 正文

JavaScript基础之this详解(javascript基础编程)

编辑:rootadmin

推荐整理分享JavaScript基础之this详解(javascript基础编程),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:javascript基础入门教程,javascript语言基础,javascript+,javascript教程chm,javascript+,javascript tr,javascript tr,javascript tr,内容如对您有帮助,希望把文章链接给更多的朋友!

JavaScript的this和Java等面向对象语言中的this大不一样,bind()、call()和apply()函数更是将this的灵活度进一步延伸。

为了保证可读性,本文采用意译而非直译。另外,本文版权归原作者所有,翻译仅用于学习。

如果对JavaScript的关键字this理解不够深刻,有时候会掉入意想不到的坑。在这里我们总结了5条通用规则来帮助你判断this到底指向什么。虽然没有囊括所有的情况,但日常大部分情况都可以使用这些规则来正确推断。

this的值通常是由所在函数的执行环境决定,也就是说要看函数是如何被调用的;同一个函数每一次调用,this都可能指向不同的对象;

全局对象 (Global Object)

打开Chrome浏览器开发者面板(Windows: Ctrl + Shift + J)(Mac: Cmd + Option + J),并且输入:

console.log(this);

看看输出了什么?

window对象! 因为在全局作用域下,this指向全局对象。在浏览器中全局对象就是window对象。为了让你更加清楚理解为什么this会指向window对象,我们来看另外一个例子:

var myName = 'Brandon';我们可以通过在控制台输入myName来访问其值:

其实,所有在全局定义的变量都绑定到window对象。我们来做如下测试:

现在我们将this放到函数内部,看看有何效果。

你会发现this依然指向全局的window对象。因为this关键字没有处于一个声明的对象内部,默认指向全局window对象。这一点可能对于大部分初学者来说有点难以理解。当读完这篇文章,你就会豁然开朗。注意:如果在strcit模式下,上面的例子中this为undefined。

声明的对象 (Declared Object)

当this关键字在一个声明对象内部使用,其值会被绑定到调用该this的函数的最近的父对象。我们用例子来说明这个问题:

在被声明的对象person中的full函数里面使用了this, 那么调用this的full函数的最近的父对象就是person, 因此,this指向person。

为了更好的描述this实际上是指向person对象的,你可以拷贝如下代码到浏览器控制台,将this打印出来。

我们接下来看一个更复杂的例子:

在这里我们有嵌套的对象,在这个时候,this分别指向谁呢? 我们将其打印出来看一看:

你会发现满足我们前面所描述的规则:其值会被绑定到调用this的函数的最近的父对象。

new关键字

JavaScript基础之this详解(javascript基础编程)

当使用new关键字构建一个新的对象,this会绑定到这个新对象。我们来看一个例子:

根据第一条规则,你可能会推断this指向全局对象。但是如果我们使用new关键字来声明一个新的变量,Car函数中的this将会绑定一个新的空对象,然后初始化this.make和this.model的值。

call, bind, 和apply

我们可以显示的在call(),bind(),apply()中设置this的绑定对象。这三个函数很类似,但是我们需要注意它们微小的区别。

<!-- call可以接收任意个数的参数,其中第一个必须是一个this对象,其余依次是所有的参数。 -->

我们来看一个例子:

add函数输出NaN, 因为this.a和this.b未定义。

现在我们引入对象,并且使用call()和apply()来调用:

当我们使用add.call(),第一个参数是this需要绑定的对象,剩下的是add函数本来的参数。因此,this.a指向ten.a,this.b指向ten.b。add.apply()也类似,除了第二个参数是一个数组,用于存储add函数的参数。

bind()函数和call()类似,但是bind()函数不会立即被调用。bind()函数会返回一个函数,并且将this绑定好。接下来我们来用例子来帮助理解bind()函数的应用场景:

执行:

如果我们想使用large.a的值,而不是small.a呢? 我们可以使用call/apply:

但是,如果我们现在还不知道这三个参数应该传入什么值,应该怎么办呢? 我们可以使用bind:

var bindTest = small.go.bind(large, 2);

如果我们将bindTest在控制台下打印出来,我们会看到:

注意:该函数已经将this绑定到large对象,并且传入了第一个参数b。所以,我们接下来是需要传入余下的参数即可:

箭头函数(=>)

因为需要很大的篇幅,我们会专门写一篇博客来介绍。

结论

当你读完这篇博客,你应该可以理解大多数情况下this指向的对象。接下来我们来总结一下:

this的值通常是由当前函数的执行环境所决定;在全局作用域,this指向全局对象 (window对象);当使用new关键字声明,this指向新建对象;我们可以使用call(), bind(), apply()来设置this;箭头函数不会绑定this。

原文: JavaScript: The Keyword ‘This' for Beginners

译者: Fundebug

JS失效 提示HTML: (UNICODE 字节顺序标记)的代码页 utf-8 覆盖(META 标记)的冲突的代码页 utf-8 经过分析发现,这个是因为页面中html与js编码不一致导致的,一般情况最好统一标准的utf8的上网找了找,木有找到相关的解决办法,索性自己试了试。

JavaScript简介_动力节点Java学院整理 JavaScript是一种基于对象(Object)和事件驱动(EventDriven)并具有安全性能的脚本语言。使用它的目的是与HTML超文本标记语言实现在一个Web页面中连接多个对象

JS之if语句对接事件动作逻辑(详解) if函数的实现步骤:function+名字()指定id,指定开关(display:noneorblock)if+else构成逻辑控制开关决定在哪里安置一个灯泡,指定一个id给某个标签把开关用电线连

标签: javascript基础编程

本文链接地址:https://www.jiuchutong.com/biancheng/376072.html 转载请保留说明!

上一篇:JavaScript箭头(arrow)函数详解(js 箭头表达式)

下一篇:JS失效 提示HTML1114: (UNICODE 字节顺序标记)的代码页 utf-8 覆盖(META 标记)的冲突的代码页 utf-8(js运行时错误)

  • 纳税人识别号是什么哪里可以查到
  • 理事单位和事业单位的区别
  • 购房尾款发票什么时候开
  • 融资租赁可以确认为资产吗
  • 设计费用计入产品成本吗
  • 租赁合同印花税率
  • 无形资产建造期间的摊销记在哪里
  • 建筑企业一般纳税人简易计税办法
  • 企业所得税研发费用怎么填
  • 不得抵扣的进项税额的情形有
  • 企业税收标准是多少
  • 银行如何做存款
  • 增值税普票没有校验码
  • 应收账款核销后收回
  • 应付账款是负数怎么回事
  • 销售货物多收款怎么处理
  • 服务费可以不退吗
  • 分公司可以合伙吗
  • 已抵扣发票红冲后发票还给对方公司
  • 重庆个人住房房产税申报
  • 税控盘续费会计分录怎么做
  • 企业为员工缴付养老保险
  • 旅行社代订住宿发票能报销吗
  • 积分返现活动
  • 小规模纳税人每季度超过30万交税
  • 工程预缴增值税2019最新规定
  • 企业进口葡萄酒税率多少
  • 工资扣税标准计算方法
  • 发票金额小于之前的金额
  • 小企业原材料包括
  • 企业所得税避税的方法
  • 附加税异地预缴如何申报
  • 应付票据到期怎么处理
  • 减征增值税的项目
  • gcasSWUpdater.exe是什么进程 有什么作用 gcasSWUpdater进程查询
  • 销售产品应交的消费税分录
  • php批量更新数据库
  • 前端uniapp写表格
  • 销售使用过的固定资产3%减按2%
  • 在双方发生纠纷时品牌授权书的法律意义
  • 废旧物资回收税收优惠政策2022
  • php的foreach循环语句
  • 虚拟机安装win11提示无法运行
  • uniapp开发app视频教程
  • sort文件名
  • 高新技术企业认定八大条件
  • 股东投钱一般怎么投
  • 影响公司股利分成的因素
  • 一般纳税人企业所得税怎么征收
  • SQLServer2005与SQLServer2008数据库同步图文教程
  • sqlserver2005导出数据
  • 工伤保险退费了是什么意思
  • 企业管理费用科目有哪些
  • 小规模纳税人开专票需要交税吗
  • 原材料计入什么摘要
  • 市场开发费用会计分录
  • 代理进口的增值税是多少
  • 党费返还款怎么做分录
  • 其他权益工具投资公允价值变动计入什么科目
  • 对方开商业承兑汇票给我们
  • 进项税包含
  • 分期付款购无形资产怎么入账?
  • 工资达不到5000个人所得税
  • 行政单位经费支出审批权限
  • mysql %d
  • Mysql inner join on的用法实例(必看)
  • 开启 windows server
  • ubuntu系统怎么更新
  • ubuntu安装配置静态ip地址
  • win7没有nvidia控制面板怎么调节亮度
  • 电脑系统脚本错误
  • 我是如何从0开始做到年入1000+万的
  • cocoscreator lua
  • bat弹窗
  • 如何开发一个新的向量库
  • 谷歌的全球化发展战略
  • 开发票 税收编码
  • 海淀区地税局电话
  • 棚户区改造的回迁房能办房产证吗
  • 新公司办理发票税控机流程?
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设