JS函数本身的作用域实例分析


Posted in Javascript onMarch 16, 2020

本文实例讲述了JS函数本身的作用域。分享给大家供大家参考,具体如下:

函数本身也是一个值,也有自己的作用域。它的作用域与变量一样,就是其声明时所在的作用域,与其运行时所在作用域无关。

var a = 1
var x = function() {
 console.log(a)
}

function f() {
 var a = 2
 x()
}

f()

上面代码中,函数x是在函数f的外部声明的,所以它的作用域绑定外层,内部变量a不会到函数f体内取值,所以输出1,而不是2。

总之,函数执行时所在的作用域,是定义时的作用域,而不是调用时所在的作用域

var x = function () {
 console.log(a);
};

function y(f) {
 var a = 2;
 f();
}

y(x)
// ReferenceError: a is not defined

上面代码将函数x作为参数,传入函数y。但是x是在函数y体外声明的,作用域绑定外层,因此找不到函数y的内部变量a,导致报错。

同样的函数本内部声明的函数,作用域绑定在函数体内部

function foo() {
 var x = 1;
 function bar () {
 console.log(x)
 }
 return bar
}
var x = 2 
var f = foo()
f() // 1

箭头函数的作用域,是和父级上下文绑定在一起的

var obj = {
 id: 1,
 show: () => {
 console.log(this.id)
 }
}

 
obj.show() // undefined

上面代码show函数是一个箭头函数,其this指向父级,而父级是一个顶级对象,window,window.id没有定义,所以返回undefined

var obj = {
 id: 2,
 show: function() {
 return () => {
  console.log(this.id)
 }
 }
}

obj.show()() // 2

上面代码中,箭头函数定义在show函数内部,其父级作用域为show函数的作用域,show函数中this指向调用show函数的对象,即obj,obj中有id属性,且值为2,所以输出2

感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具:http://tools.3water.com/code/HtmlJsRun测试上述代码运行效果。

更多关于JavaScript相关内容可查看本站专题:《JavaScript常用函数技巧汇总》、《javascript面向对象入门教程》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》及《JavaScript数学运算用法总结》

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
javascript vvorld 在线加密破解方法
Nov 13 Javascript
让IE8浏览器支持function.bind()方法
Oct 16 Javascript
JavaScript AOP编程实例
Jun 16 Javascript
基于JS实现二维码图片固定在右下角某处并跟随滚动条滚动
Feb 08 Javascript
微信小程序 图片宽度自适应的实现
Apr 06 Javascript
微信小程序实现鼠标拖动效果示例
Dec 01 Javascript
webpack v4 从dev到prd的方法
Apr 02 Javascript
Mint-UI时间组件起始时间问题及时间插件使用
Aug 20 Javascript
详解Vue调用手机相机和相册以及上传
May 05 Javascript
Layui数据表格判断编辑输入的值,是否为我需要的类型详解
Oct 26 Javascript
微信小程序去除左上角返回键的实现方法
Mar 06 Javascript
uniapp 仿微信的右边下拉选择弹出框的实现代码
Jul 12 Javascript
JavaScript实现tab栏切换效果
Mar 16 #Javascript
vue-cli3使用mock数据的方法分析
Mar 16 #Javascript
vue-cli3.0实现一个多页面应用的历奇经历记录总结
Mar 16 #Javascript
vue从零实现一个消息通知组件的方法详解
Mar 16 #Javascript
JavaScript实现动态留言板
Mar 16 #Javascript
vue中的双向数据绑定原理与常见操作技巧详解
Mar 16 #Javascript
js+canvas实现纸牌游戏
Mar 16 #Javascript
You might like
php压缩多个CSS为一个css的代码并缓存
2011/04/21 PHP
php上传图片到指定位置路径保存到数据库的具体实现
2013/12/30 PHP
安装ImageMagick出现error while loading shared libraries的解决方法
2014/09/23 PHP
windows7下php开发环境搭建图文教程
2015/01/06 PHP
PHP实现上一篇下一篇的方法实例总结
2016/09/22 PHP
Laravel学习教程之View模块详解
2017/09/18 PHP
远离JS灾难css灾难之 js私有函数和css选择器作为容器
2011/12/11 Javascript
JavaScript 对任意元素,自定义右键菜单的实现方法
2013/05/08 Javascript
为Javascript中的String对象添加去除左右空格的方法(示例代码)
2013/11/30 Javascript
javascript框架设计读书笔记之数组的扩展与修复
2014/12/02 Javascript
Javascript显示和隐藏ul列表的方法
2015/07/15 Javascript
微信小程序遇到修改数据后页面不渲染的问题解决
2017/03/09 Javascript
jQuery插件imgAreaSelect基础讲解
2017/05/26 jQuery
Vue 中mixin 的用法详解
2018/04/23 Javascript
微信小程序使用component自定义toast弹窗效果
2018/11/27 Javascript
ES6小技巧之代替lodash
2019/06/07 Javascript
以Python的Pyspider为例剖析搜索引擎的网络爬虫实现方法
2015/03/30 Python
基于Python如何使用AIML搭建聊天机器人
2016/01/27 Python
python创建列表和向列表添加元素的实现方法
2017/12/25 Python
如何用python整理附件
2018/05/13 Python
Python帮你识破双11的套路
2019/11/11 Python
使用python实现画AR模型时序图
2019/11/20 Python
python requests模拟登陆github的实现方法
2019/12/26 Python
python3利用Axes3D库画3D模型图
2020/03/25 Python
基于logstash实现日志文件同步elasticsearch
2020/08/06 Python
Python通过yagmail实现发送邮件代码解析
2020/10/27 Python
用python获取txt文件中关键字的数量
2020/12/24 Python
从Pytorch模型pth文件中读取参数成numpy矩阵的操作
2021/03/04 Python
CSS3实现闪烁动画效果的方法
2015/02/09 HTML / CSS
css和css3弹性盒模型实现元素宽度(高度)自适应
2019/05/15 HTML / CSS
实例讲解利用HTML5 Canvas API操作图形旋转的方法
2016/03/22 HTML / CSS
公司董事长职责
2013/12/12 职场文书
汽车检测与维修专业求职信
2014/07/04 职场文书
乡镇组织委员个人整改措施
2014/09/16 职场文书
Django使用echarts进行可视化展示的实践
2021/06/10 Python
python百行代码实现汉服圈图片爬取
2021/11/23 Python