浅谈JavaScript的函数及作用域


Posted in Javascript onDecember 30, 2016

函数和作用域是JavaScript的重要组成部分,我们在使用JavaScript编写程序的过程中经常要用到这两部分内容,作为初学者,我经常有困惑,借助写此博文来巩固下之前学习的内容。

(一)JavaScript函数

JavaScript函数是指一个特定代码块,可能包含多条语句,可以通过名字来供其他语句调用以执行函数包含的代码语句。

1.JavaScript创建函数的方法有两种:

函数声明:

function funcDeclaration(){ return 'A is a function'; }

函数表达式:

var funExpression=function(){ return 'A is a function '; }

上述函数声明和函数表达式的区别(注明:翻译自:不同的方式来写一个函数)在:

JavaScript解析器中存在一种变量声明被提升(hosting)的机制,也就是说变量(函数)的声明会被提升到作用域的最前面,即使写代码的时候是写在最后面,也还是会被提升至最前面。

例如以下代码段:

alert(foo); // function foo() {}
alert(bar); // undefined
function foo() {}
var bar = function bar_fn() {};
alert(foo); // function foo() {}
alert(bar); // function bar_fn() {}

输出结果分别是function foo() {} 、undefined 、function foo() {} 和function bar_fn() {} 。

可以看到foo 的声明写在alert之后,仍然可以被正确调用,因为JavaScript解释器会将其提升到alert前面,而以函数表达式创建的函数bar则不享受此待遇。

所以,JavaScript 引擎执行以上代码的顺序可能是这样的:

  • 创建变量foo和 bar,并将它们都赋值为undefined。
  • 创建函数 foo 的函数体,并将其赋值给变量foo。
  • 执行前面的两个 alert。
  • 创建函数 bar_fn ,并将其赋值给 bar。
  • 执行后面的两个 alert。

2.函数的参数

在调用函数时,你可以向其传递值,这些值被称为参数。

function printName(name){
  console.log(name);
}
printName('Byron');
printName('Casper);

其中name是形参,'Byron'和'Casper'是实参。

说到函数的参数,我们不得不提到arguments。此处涉及的内容有点多,请看客们参考楼主之前转载的javascript arguments。

3.函数重载

重载是很多面向对象语言实现多态性的手段之一,在静态语言中确定一个函数的手段是靠方法签名--函数名+参数列表,也就是说相同名字的函数参数个数不同或者顺序不同都被认为是不同的函数,成为函数重载。

在JavaScript中没有函数重载的概念,函数通过名字确定唯一性,参数不同也被认为是相同的函数,后面的覆盖前面的。

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持三水点靠木!

Javascript 相关文章推荐
背景音乐每次刷新都可以自动更换
Feb 01 Javascript
css图片自适应大小
Nov 28 Javascript
Jquery常用技巧收集整理篇
Nov 14 Javascript
javascript 密码框防止用户粘贴和复制的实现代码
Feb 17 Javascript
自制的文件上传JS控件可支持IE、chrome、firefox etc
Apr 18 Javascript
js实现select组件的选择输入过滤代码
Oct 14 Javascript
详解堆的javascript实现方法
Nov 29 Javascript
javascript填充默认头像方法
Feb 22 Javascript
ES6的Fetch异步请求的实现方法
Dec 07 Javascript
layui实现form表单同时提交数据和文件的代码
Oct 25 Javascript
Js逆向实现滑动验证码图片还原的示例代码
Mar 10 Javascript
JS实现简单九宫格抽奖
Jun 28 Javascript
解析ajaxFileUpload 异步上传文件简单使用
Dec 30 #Javascript
JS实现的样式切换功能tableCSS实例
Dec 30 #Javascript
浅谈js script标签中的预解析
Dec 30 #Javascript
jQuery实现页面顶部下拉广告
Dec 30 #Javascript
jQuery Password Validation密码验证
Dec 30 #Javascript
JS编写函数实现对身份证号码最后一位的验证功能
Dec 29 #Javascript
EasyUI学习之Combobox下拉列表(1)
Dec 29 #Javascript
You might like
PHP初学者头疼问题总结
2006/10/09 PHP
PHP中遇到的时区问题解决方法
2015/07/23 PHP
Laravel6.0.4中将添加计划任务事件的方法步骤
2019/10/15 PHP
javascript 事件绑定问题
2011/01/01 Javascript
25个非常棒的jQuery滑块插件和教程小结
2011/09/02 Javascript
Jquery Uploadify多文件上传带进度条且传递自己的参数
2013/08/28 Javascript
js Math 对象的方法
2013/09/01 Javascript
js判断是否按下了Shift键的方法
2015/01/27 Javascript
php结合imgareaselect实现图片裁剪
2015/07/05 Javascript
js实现input框文字动态变换显示效果
2015/08/19 Javascript
JavaScript判断FileUpload控件上传文件类型
2015/09/28 Javascript
Javascript类型系统之String字符串类型详解
2016/06/21 Javascript
jsp 网站引入外部css或者js失效问题解决
2016/10/31 Javascript
简单实现js倒计时功能
2017/02/13 Javascript
详解Weex基于Vue2.0开发模板搭建
2017/03/20 Javascript
使用Vue完成一个简单的todolist的方法
2017/12/01 Javascript
vue学习笔记五:在vue项目里面使用引入公共方法详解
2019/04/04 Javascript
Vue.js@2.6.10更新内置错误处机制Fundebug同步支持相应错误监控
2019/05/13 Javascript
vue回到顶部监听滚动事件详解
2019/08/02 Javascript
vue点击自增和求和的实例代码
2019/11/06 Javascript
创建与框架无关的JavaScript插件
2020/12/01 Javascript
深入理解Javascript中的this关键字
2015/03/27 Python
Python生成器以及应用实例解析
2018/02/08 Python
Python 实现选择排序的算法步骤
2018/04/22 Python
Python字符串逆序输出的实例讲解
2019/02/16 Python
详解python使用turtle库来画一朵花
2019/03/21 Python
python七夕浪漫表白源码
2019/04/05 Python
Django框架模板语言实例小结【变量,标签,过滤器,继承,html转义】
2019/05/23 Python
python多线程使用方法实例详解
2019/12/30 Python
pyqt5 QlistView列表显示的实现示例
2020/03/24 Python
浅析python连接数据库的重要事项
2021/02/22 Python
CSS3 仿微信聊天小气泡实例代码
2017/04/05 HTML / CSS
银行工作检查书范文
2014/01/31 职场文书
情侣吵架检讨书
2014/02/05 职场文书
Redis IP地址的绑定的实现
2021/05/08 Redis
python opencv将多个图放在一个窗口的实例详解
2022/02/28 Python