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 相关文章推荐
pjblog修改技巧汇总
Mar 12 Javascript
js网页实时倒计时精确到秒级
Feb 10 Javascript
node.js正则表达式获取网页中所有链接的代码实例
Jun 03 Javascript
使用console进行性能测试
Apr 27 Javascript
AngularJs中route的使用方法和配置
Feb 04 Javascript
Jquery对新插入的节点 绑定Click事件失效的解决方法
Jun 02 Javascript
Javascript中prototype的使用详解
Jun 18 Javascript
AngularJS 输入验证详解及实例代码
Jul 28 Javascript
JavaScript中双符号的运算详解
Mar 12 Javascript
Js自定义多选框效果的实例代码
Jul 05 Javascript
JS模拟超市简易收银台小程序代码解析
Aug 18 Javascript
vue npm install 安装某个指定的版本操作
Aug 11 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 文件上传代码(限制jpg文件)
2010/01/05 PHP
PHP随机生成信用卡卡号的方法
2015/03/23 PHP
PHP Smarty模版简单使用方法
2016/03/30 PHP
php版微信小店调用api示例代码
2016/11/12 PHP
PHP屏蔽关键字实现方法
2016/11/17 PHP
WAF的正确bypass
2017/01/05 PHP
PHP严重致命错误处理:php Fatal error: Cannot redeclare class or function
2017/02/05 PHP
PHP实现时间比较和时间差计算的方法示例
2017/07/24 PHP
由浅到深了解JavaScript类
2006/09/08 Javascript
通过event对象的fromElement属性解决热区设置主实体的一个bug
2008/12/22 Javascript
javascript 对象比较实现代码
2009/04/27 Javascript
jquery下操作HTML控件的实现代码
2010/01/12 Javascript
基于jquery的大众点评,分类导航实现代码
2011/08/23 Javascript
js生成随机数的方法实例
2015/10/16 Javascript
javascript html5 canvas实现可拖动省份的中国地图
2016/03/11 Javascript
jQuery实现导航滚动到指定内容效果完整实例【附demo源码下载】
2016/09/20 Javascript
js鼠标按键事件和键盘按键事件用法实例汇总
2016/10/03 Javascript
JS简单获取当前日期和农历日期的方法
2017/04/17 Javascript
AngularJS中使用three.js的实例详解
2017/07/21 Javascript
JS实现统计字符串中字符出现个数及最大个数功能示例
2018/06/04 Javascript
JavaScript冒泡算法原理与实现方法深入理解
2020/06/04 Javascript
基于vue--key值的特殊用处详解
2020/07/31 Javascript
[03:09]DOTA2亚洲邀请赛 LGD战队出场宣传片
2015/02/07 DOTA
python查找第k小元素代码分享
2013/12/18 Python
python实现kNN算法
2017/12/20 Python
Python利用递归实现文件的复制方法
2018/10/27 Python
Python实现的爬取豆瓣电影信息功能案例
2019/09/15 Python
Python 过滤错误log并导出的实例
2019/12/26 Python
如何用Matlab和Python读取Netcdf文件
2021/02/19 Python
HTML5通过调用canvas对象的getContext()方法来获取绘图环境
2014/06/23 HTML / CSS
KELLER SPORTS荷兰:在线订购最好的运动产品
2020/10/13 全球购物
拖鞋店创业计划书
2014/01/15 职场文书
小学生中国梦演讲稿
2014/04/23 职场文书
安全生产月标语
2014/10/07 职场文书
求职信如何撰写?
2019/05/22 职场文书
Go本地测试解耦任务拆解及沟通详解Go本地测试的思路沟通的重要性总结
2022/06/21 Golang