热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

js函数的new调用与普通调用中this的差异问题

web前端|js教程javascript,this,普通web前端-js教程首先看一段代码感受一下this的作用。重庆时时彩计划源码,ubuntu刻录u盘,tomcat7启动慢,网

web前端|js教程js函数的new调用与普通调用中this的差异问题
Javascript,this,普通
web前端-js教程
首先看一段代码感受一下this的作用。
重庆时时彩计划源码,ubuntu刻录 u盘,tomcat7 启动慢,网络爬虫如何,php漏洞基准,河北站外seo优化关键词lzw

place='out'; function where(){ var place='in'; alert(place); //in alert(this.place); //out } where();

从中可以得知,place获得了函数内部的变量,而this.place则获得了外部的变量值。这是为什么呢?其实,this的作用是指向执行当前函数的外部环境对象。在这里执行where时的环境是全局环境,所以this指向global(在浏览器中是window),那么 this.place 得到的就是全局变量 place 了。

江苏快3php百度云源码,ubuntu 禅道安装,powerbi爬虫案例分析,php 查询ajax,seo is优化lzw
通过下面一段代码进行验证。
免费的分类信息系统源码,ubuntu系统哪个最好,优衣库爬虫,php中.tpl,老seo散lzw

place='out'; passer={ var place: 'in', askWhere: function(){ alert(this.place); //in }, }; passer.askWhere();

这里的this在askWhere指向的函数中,函数执行的外部环境是passer对象,所以 this 指向 passer 对象,this.place 得到的也就是 in 。

那么再看下面一段代码,new 会导致函数中的 this 出现哪些不同呢?

function Passer(){ this.place = 'in'; this.askWhere = function(){ alert( this.place ); //in } } alert(window.place); //undefined Tom = new Passer(); Tom.askWhere();

如果按照之前的理论分析,Passer 中的 this 指向 global ,那么this.place 应该是在全局环境中定义了place,为什么会出现window.place = undefined 的情况呢?

这里就体现出new 调用与普通调用的区别了。其实 new 操作时进行了一下几个步骤:

1.创建一个新的对象(并把空对象的__proto__属性设置为Passer.prototype)。2.将构造函数的作用域赋给新对象(此时this 指向了这个新对象)。3.执行构造函数中的代码(通过this 为这个新对象添加属性)4.返回新对象。

因此这里的this 实际上并没有指向全局,而是一个新的对象。那么执行askWhere 时函数内的this 也是指向这个新的对象内部的。

如果这里的构造函数Passer 进行普通调用,结果和我们最开始的分析是相符的。

总结:在对函数进行new 调用时this 的表现的根本原因在于创建了一个新的对象并将构造函数的作用域赋给新对象,这使得this 指向了新对象。其实this 指向执行当前函数的外部环境对象的作用是一直没变的。


推荐阅读
  • mui框架offcanvas侧滑超出部分隐藏无法滚动如何解决
    web前端|js教程off-canvas,部分,超出web前端-js教程mui框架中off-canvas侧滑的一个缺点就是无法出现滚动条,因为它主要用途是设置类似于qq界面的那种格 ... [详细]
  • 如何使用Java获取服务器硬件信息和磁盘负载率
    本文介绍了使用Java编程语言获取服务器硬件信息和磁盘负载率的方法。首先在远程服务器上搭建一个支持服务端语言的HTTP服务,并获取服务器的磁盘信息,并将结果输出。然后在本地使用JS编写一个AJAX脚本,远程请求服务端的程序,得到结果并展示给用户。其中还介绍了如何提取硬盘序列号的方法。 ... [详细]
  • PHP图片截取方法及应用实例
    本文介绍了使用PHP动态切割JPEG图片的方法,并提供了应用实例,包括截取视频图、提取文章内容中的图片地址、裁切图片等问题。详细介绍了相关的PHP函数和参数的使用,以及图片切割的具体步骤。同时,还提供了一些注意事项和优化建议。通过本文的学习,读者可以掌握PHP图片截取的技巧,实现自己的需求。 ... [详细]
  • 本文介绍了使用AJAX的POST请求实现数据修改功能的方法。通过ajax-post技术,可以实现在输入某个id后,通过ajax技术调用post.jsp修改具有该id记录的姓名的值。文章还提到了AJAX的概念和作用,以及使用async参数和open()方法的注意事项。同时强调了不推荐使用async=false的情况,并解释了JavaScript等待服务器响应的机制。 ... [详细]
  • 本文介绍了高校天文共享平台的开发过程中的思考和规划。该平台旨在为高校学生提供天象预报、科普知识、观测活动、图片分享等功能。文章分析了项目的技术栈选择、网站前端布局、业务流程、数据库结构等方面,并总结了项目存在的问题,如前后端未分离、代码混乱等。作者表示希望通过记录和规划,能够理清思路,进一步完善该平台。 ... [详细]
  • HTML5网页模板怎么加百度统计?
    本文介绍了如何在HTML5网页模板中加入百度统计,并对模板文件、css样式表、js插件库等内容进行了说明。同时还解答了关于HTML5网页模板的使用方法、表单提交、域名和空间的问题,并介绍了如何使用Visual Studio 2010创建HTML5模板。此外,还提到了使用Jquery编写美好的HTML5前端框架模板的方法,以及制作企业HTML5网站模板和支持HTML5的CMS。 ... [详细]
  • JavaScript和HTML之间的交互是经由过程事宜完成的。事宜:文档或浏览器窗口中发作的一些特定的交互霎时。能够运用侦听器(或处置惩罚递次来预订事宜),以便事宜发作时实行相应的 ... [详细]
  • 分享css中提升优先级属性!important的用法总结
    web前端|css教程css!importantweb前端-css教程本文分享css中提升优先级属性!important的用法总结微信门店展示源码,vscode如何管理站点,ubu ... [详细]
  • 从零基础到精通的前台学习路线
    随着互联网的发展,前台开发工程师成为市场上非常抢手的人才。本文介绍了从零基础到精通前台开发的学习路线,包括学习HTML、CSS、JavaScript等基础知识和常用工具的使用。通过循序渐进的学习,可以掌握前台开发的基本技能,并有能力找到一份月薪8000以上的工作。 ... [详细]
  • 单页面应用 VS 多页面应用的区别和适用场景
    本文主要介绍了单页面应用(SPA)和多页面应用(MPA)的区别和适用场景。单页面应用只有一个主页面,所有内容都包含在主页面中,页面切换快但需要做相关的调优;多页面应用有多个独立的页面,每个页面都要加载相关资源,页面切换慢但适用于对SEO要求较高的应用。文章还提到了两者在资源加载、过渡动画、路由模式和数据传递方面的差异。 ... [详细]
  • 本文介绍了互联网思维中的三个段子,涵盖了餐饮行业、淘品牌和创业企业的案例。通过这些案例,探讨了互联网思维的九大分类和十九条法则。其中包括雕爷牛腩餐厅的成功经验,三只松鼠淘品牌的包装策略以及一家创业企业的销售额增长情况。这些案例展示了互联网思维在不同领域的应用和成功之道。 ... [详细]
  • 本文介绍了Java后台Jsonp处理方法及其应用场景。首先解释了Jsonp是一个非官方的协议,它允许在服务器端通过Script tags返回至客户端,并通过javascript callback的形式实现跨域访问。然后介绍了JSON系统开发方法,它是一种面向数据结构的分析和设计方法,以活动为中心,将一连串的活动顺序组合成一个完整的工作进程。接着给出了一个客户端示例代码,使用了jQuery的ajax方法请求一个Jsonp数据。 ... [详细]
  • 本文总结了在编写JS代码时,不同浏览器间的兼容性差异,并提供了相应的解决方法。其中包括阻止默认事件的代码示例和猎取兄弟节点的函数。这些方法可以帮助开发者在不同浏览器上实现一致的功能。 ... [详细]
  • Oracle优化新常态的五大禁止及其性能隐患
    本文介绍了Oracle优化新常态中的五大禁止措施,包括禁止外键、禁止视图、禁止触发器、禁止存储过程和禁止JOB,并分析了这些禁止措施可能带来的性能隐患。文章还讨论了这些禁止措施在C/S架构和B/S架构中的不同应用情况,并提出了解决方案。 ... [详细]
  • 本文介绍了使用FormData对象上传文件同时附带其他参数的方法。通过创建一个表单,将文件和参数添加到FormData对象中,然后使用ajax发送POST请求进行文件上传。在发送请求时,需要设置processData为false,告诉jquery不要处理发送的数据;同时设置contentType为false,告诉jquery不要设置content-Type请求头。 ... [详细]
author-avatar
心窝子难受呢
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有