如何延长作用域链_通过实例理解javaScript中的this到底是什么和它的词法作用域...

c28033d1c6d21d79fdba77c573775ac5.png

最近,听到李笑来说,讲解编程的过程中,举例子很重要。

而且,我最近看的各种javaScript工具书中的例子,也都有点复杂。

所以啊,我试着举一些简单又直观的例子,与各位苦学javaScript的同学,一起共勉!

这些例子里面,我将变量名称、函数名称尽量写短,让大家的精力,主要投入到理解逻辑,理解和整理思路上来,不要为长长的变量名、函数名称所干扰。

先抛出一个问题:

this是什么?this表达了什么?为什么要有this?

统计学生成绩的小例子,

对象s(scores的缩写)存储了三位同学的考试成绩,通过函数t(total的缩写)获得总分数,

var s= { ma: 90, li: 80, zhao: 70 }function t(n){ return n.ma+ n.li + n.zhao;}console.log("学生总成绩:"+t(s));

对象s被当做函数t的形参x,显式的传入了该函数内.

运行结果:

e7417ff9d6bd02bcb7a58f739a73907a.png

使用node命令查看

不使用参数的情况下,怎么办?

想隐式的传递对象,怎么办?

我们使用函数的上下文,函数的上下文,是除了函数的参数之外的、最常用的,让外部信息隐式的进入函数内的一种手段。

将上面的代码改一下:

var s= { ma: 90, li: 80, zhao: 70, t: t } function t(){ return this.ma + this.li + this.zhao; } console.log("学生总成绩:"+s.t());

上面的代码,去掉了函数t的形参,添加了this,然后在s对象内添加了函数t。

总结:函数的this是什么,前提条件是要看如何调用,不是看它如何定义。

再举一个大家生活中常见的例子,

大家出门时,要带上手机、钥匙、钱包,为了记住这些出门必带的东东,有人编了段子“伸手钥钱”,

那么,在javaScript中,我用函数调用链,把3样东西串起来,

3样东东,分别用拼音首字母代替:手机 --> sj , 钥匙 --> ys , 钱包 --> qb 。

我们想要的结果是,只需带上手机(执行函数sj),就能把3个东东都带上。

实例1:出门三件事:手机、钥匙、钱包

function sj(){ 'use strict';//使用严格模式 console.log('手机'); this.ys();}function ys(){ console.log('钥匙'); this.qb();}function qb(){ console.log('钱包');}sj();

上面的例子,试图跨越边界,使用this来隐式的引用函数的词法作用域,能成功吗?

先看结果:

341547955a0363e8538bb9a74a8be040.png

使用node命令查看

结果报错了,当然,我们使用了严格模式,在浏览器运行的结果:

0d2467037eb9f876a58535cfd5b3fef9.png

使用浏览器查看

上面的例子中,我们试图通过this.ys()来引用ys()函数,在严格模式下是不能成功的。(偷偷告诉你,非严格模式下chrome浏览器运行不报错)

想拿钥匙?

调用ys()最自然的方法是省略前面的this,请直接使用词法引用标示符ys()

51210936e92ffc94dd7159f8d2bda947.png

使用node命令和运行在浏览器的结果

通过这个例子使用this和不使用this的对比,我们知道了:

this在任何情况下都不指向函数的词法作用域。

我再补充一点调用位置的知识,

调用位置就是函数在代码中被调用的位置,不是声明的位置

调用栈——为了到达执行位置所调用的所有函数,

这两个小知识,还是通过上面那个例子来解释。

function sj(){//当前调用栈是sj(手机)//调用位置是全局作用域 console.log('手机'); ys();//ys(钥匙)的调用位置}function ys(){//当前调用栈是sj(手机)--> ys(钥匙)//当前调用位置在sj(手机)中 console.log('钥匙'); qb();//qb(钱包)的调用位置}function qb(){//当前调用栈是sj(手机)--> ys(钥匙)--> qb(钱包)//当前的调用位置在ys(钥匙)中 console.log('钱包');}sj();

理解了调用位置和调用栈,才能理解this的绑定过程。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/501261.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

word2vector数据集样式_这样做数据可视化驾驶舱,高端大气,一目了然,领导不点赞都难...

2020年了,数据可视化已经不是个新鲜词了,把数据以可视化图表的形式展示并没有多神奇,用Excel等传统的办公工具就可以轻松实现。以前传统数据分析报告就是ppt里贴图表,再配上分析结论,这种形式的数据呈现是静态的&#…

Linux的实际操作:文件目录类的实用指令(ln history)

1.ln 软连接也叫做符号链接,类似于windows的快捷方式,主要是存放了链接其它文件的路径 ln -s 原文件或者目录 软链接名 (功能:给原文件创建一个软链接) 案例:将/roo…

mysql 删除重复数据_日常答疑|MySQL删除重复数据踩过得坑

问题群友提问:MySQL这样删除重复数据为啥不成功呢?严小样儿:安排!咋一看,大家都说where子句里面应该使用极值函数,加个max就对了,这么简单!# 大家想象中这样写是对的,其实…

搜狗手机浏览器_搜狗推广开户费多少钱?【搜狗开户代理商】

搜狗开户流程提供落地页审核提供服务器ip 安排解析账户预存款4000币上传关键词及素材开启广告上线福如海广告,搜狗开户代理商全国行业开户,有无资质均可手机:18705657032【同微信】搜狗广告详细介绍搜狗广告展现形式PC端-搜狗搜索推广当网民在…

understand 6.0_软件工程专业篇-vc++6.0安装教程(解决win10不兼容)

在进行安装教程之前还是和大家说几句废话啊。VC6.0就是出品的一款开发C的IDE。所谓IDE就是:为了方便程序员开发,集成了代码编辑器、编译器、链接器、调试器等工具的集成开发环境。 现在外面企业已经很少有使用VC6.0的了,毕竟已经是将近17年前…

Linux的实际操作:时间日期类的实用指令(date cal)

1.date 显示当前日期 (1)date 显示当前时间 (2) date %Y 显示年份 date%m 显示月份 date%d 显示日 date "%Y-%m-%d %H:%M:%S" 显示年月日时分秒 注意:加号不能少 双引号中间的连接可以取任意符号 &a…

Linux的实际操作:搜索查找类的实用指令(find locate grep 管道符|)

1.find 将从指定目录向下递归地遍历其各个子目录,将满足条件的文件或者目录显示在终端 find 【搜索范围】 【选项】 文件 (搜索范围往往是绝对路径或者相对路径) 选项功能-name按照指定文件名查找文件-user查找属于指定用户名所有…

error:java:无效的源发行版_IDEA java出现无效的源发行版14解决方案_java

这篇文章主要介绍了IDEA java出现无效的源发行版14解决方案,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下问题描述问题原因出现该问题的原因是项目Project当中的jdk与电脑当中的jdk版本不一致造成的。解决方法…

为什么买入不了创业版_详解实战抄底——如何抄到下引线的最底端。及妖股的首板买入点...

11月26日上周四,如果方便的朋友可以打开下创业板当天的分时图,更加有利于理解。(下图所示)主板和创业板11月26日分时图当天创业板冲高回落开始探底,我在10点17分的时候提示准备抄底,在10点22分的时候,再次强调创业板跌…

Linux的实际操作:文件目录类实用指令(压缩gzip tar -zcvf和解压缩gunzip tar -zxvf)

1.gzip 用于压缩文件 (压缩文件后,原文件就会消失自动成为一个新的压缩文件,意思是压缩后不保留原文件) 2.gunzip 用于解压文件 (解压缩后,压缩文件也会自动生成一个未解压文件&…

keil+proteus 制作计算器_设计费 | 工程设计费计算器使用指南

工程设计费,即工程设计收费,是设计人根据发包人的委托,提供编制建设项目初步设计文件、施工图设计文件、非标准设备设计文件、施工图预算文件、竣工图文件等服务所收取的费用。工程设计收费标准2002年国家发展计划委员会和建设部发布了计价格…

解决:Xshell如何修改默认的登录用户,自动跳转到密码界面

1.打开Xshell会话,选择远程主机号,点击“打开会话文件夹” 2.右键,用记事本打开 3.打开后CtrlF搜索UserName 4.将参数改为空的即可

wegame一键蹲替换文件_如何在ps里批量替换姓名、编号等内容(变量和图像处理器)...

大家好今天的教程比较冷门但是应用的却比较广泛就是变量图像处理器比如会员卡、胸牌等有很多姓名或标号需要替换时这个组合技简直无敌命令位置【图像-变量-定义】【文件-脚本-图像处理器】具体用法以我这张图为例我需要把【号码】图层的内容替换成01-09那么我需要准备些什么呢&…

小米SN保修_首次体验小米手机官方售后全程回顾:维修速度快服务态度好

作为一名搞机玩家,这么多年买了很多也用了很多的小米产品,这是第一次使用小米的官方售后服务,所以趁着这个机会给大家说一下售后的感受:故障机是小米MIX 3已过保,老爸用的屏幕摔坏了一角,时间长了加上又摔所…

Linux的实际操作:用户管理(查ls -ahl,chown改文件所属者,chgrp改文件所属组,usermod改用户所属组)

在Linux中的每个用户必须属于一个组,不能独立于组外 在Linux中每个文件的所属者、所属组、其它组的概念 例如有一个文件是user1创建的,那么这个文件的所属者就是user1,这个文件在默认情况下属于user1所在的组当然,这个所属组也可…

restful接口开发实例_Restful接口开发与测试—接口测试

开发完接口,接下来我们需要对我们开发的接口进行测试。接口测试的方法比较多,使用接口工具或者Python来测试都可以,工具方面比如之前我们学习过的Postman或者Jmeter ,Python脚本测试可以使用Requests unittest来测试。测试思路功…

博主已开启评论精选什么意思_小白必看!想要成为小红书博主,首先要掌握4个工具!...

首先我们要明确一点,不是每个人都要成为小红书博主。但,如果你想要成为博主,那么就需要了解下面这4个工具,可以让你成功迈出小红书博主的第一步。01搜秀数据小红书数据分析平台。四大功能:最新推广情报、KOL智能筛选、…

Linux的实际操作:文件和文件夹的权限解读

1.权限的基本介绍: ls -l -rwxrw-r-- 1 root root 1213 Feb 2 09:39 abc 0-9位说明 第0位确定文件的类型(d,-,1,c,b) 第1-3位确定所属者(该文件的所属者)拥有该文件…

scratch 素材_scratch书籍免费领

今天要写的内容如主图啦~~~这几天去白嫖了一些文章和scratch的书籍。emmmm. ???书籍如下,可看我博客推荐的好书:scratch好书推荐_scratch,少儿编程,scratch少儿编程_weixin_43405101的博客-CSDN博客​blog.csdn.net书籍…

rmse多少算效果好_关键词SEO优化带来流量有多少?如何做SEO优化效果好?

随着行业之间的竞争激烈,企业为了获得更多的利润空间,都是以用户的使用体验为前提,争取能获得更多的收益。然而,网站优化的目的就是能满足用户的搜索习惯,让用户能通过关键词找到自己心仪的产品,让企业获得…