JavaScript 基础函数_深入剖析变量和作用域


Posted in Javascript onMay 18, 2016

函数定义和调用

定义函数,在JavaScript中,定义函数的方式如下:

function abs(x){ 
if(x >=0){ 
return x;
}else{ 
return -x;
}
}

上述abs() 函数的定义如下:

function 指出这是一个函数定义;

abs 是函数的名称;

(x) 括号内列出函数的参数,多个参数以,分隔;

{...}之间的代码是函数体,可以包含若干语句,甚至可以没有任何语句。

注意:函数体内部的语句在执行时,一旦执行到return 时,函数就执行完毕,并将结果返回。因此内部通过条件判断和循环可以在实现非常复杂的。

如果没有return语句,函数执行完毕后也会返回结果,只是结果为undefined。

由于JavaScript的函数也是一个对象,上述定义的abs()函数实际上是一个函数对象,而函数名abs可以视为指向该函数的变量。

var abs = function(x){ 
if(x >= 0){ 
return x;
} else { 
return -x;
}
}

在这种方式下,function (x) { ... }是一个匿名函数,它没有函数名。但是,这个匿名函数赋值给了变量abs,所以,通过变量abs就可以调用该函数。

两种定义完全等价,注意第二种方式按照完整语法需要在函数体末尾加一个;,表示赋值语句结束。

调用函数时,按顺序传入参数即可:

abs(10); // 返回10
abs(-9); // 返回9

由于JavaScript 允许传入任意个参数而不受影响调用,因此传入的参数比定义的参数多也没有问题,虽然函数内部并不需要这些参数。

abs(10,'blablabla'); //返回10
abs(-9,'haha','hehe',null) // 返回9

传入的参数比定义的少也没有问题

abs(); 返回NaN

此时abs(x)函数的参数x 将收到undefined,计算结果为NaN

function abs(x){ 
if(typeof x !=='number'){ 
throw 'Not a number':
}
 if(x >=0){ 
return x;
}else{ 
return -x;
}
}

arguments

JavaScript 还有一个免费赠送的关键字 arguments,它只在函数内部起作用,并且永远指向当前函数的调用者传入的所有参数。

function foo(x){ 
alert(x); // 10
for(var i=0; i < arguments.length;++){ 
alert(arguments[i]); // 10,20,30
}
}
foo(10.20,30)

利用arguments,你可以获得调用者传入的所有参数。也就是说,即使函数不定义任何参数,还是可以拿到参数的值:

function abs(){ 
if(arguments.length ===0){ 
return 0;
}
var x = arguments[0]
return x >=0 ? x : -x;
}
abs(); //0
abs(10); // 10
abs(-9) //9

实际上arguments最常用于判断传入参数的个数。你可能会看到这样的写法:

// foo(a[,b],c)

//接受2~3 个参数,b 是可选参数,如果只要出入两个参数,b默认为null

function foo(a,b,c){ 
if(arguments.length ===2){ 
// 实际拿到的参数是a 和b c 为undefined
c = b;
b = null; // b 变为默认值

要把中间的参数b变为“可选”参数,就只能通过arguments判断,然后重新调整参数并赋值。

rest 参数

由于JavaScript 函数允许接收任意个参数,遇事我们就不得不用arguments 来获取所有的参数:

function foo(a,b){ 
var i, rest = [];
if(arguments.length > 2){ 
for(i = 2; i < arguments.length; i++){ 
rest.push(arguments[i]);
}
}
console.log('a =' + a);
console.log('b = ' + b);
console.log(rest);
}

为了获取除了已定义参数a、b之外的参数,我们不得不用arguments,并且循环要从索引2开始以便排除前两个参数,这种写法很别扭,只是为了获得额外的rest参数,有没      有更好的方法?

ES6标准引入了rest参数,上面的函数可以改写为:

function foo(a,b,...rest){ 
console.log('a = ' + a);
console.log('b = ' + b);
console.log(rest);
}
foo(1,2,3,4,5);
//结果
// a = 1
// b = 2
// Array[3,4,5]
foo(1)
// 结果
// a = 1
// b = undefined
// Array []

rest 参数只能写在最后,前面用... 标示,从运行结果可知,传入的参数先绑定 a , b, 多余的参数以数组形式交给变量 rest,所以,

不在需要 arguments 我们就获取了全部参数。

如果传入的参数连正常定义的参数都没填满,也不要紧,rest参数会接收一个空数组(注意不是undefined)。

return 语句

前面我们讲到了JavaScript引擎有一个在行末自动添加分号的机制,这可能让你栽到return语句的一个大坑:、

function foo(){ 
return {name:'foo'};
}
foo(); // {name:'foo'}

要注意:

function foo(){ 
return: //自动添加了分号,相当于return undefined
{name:'foo'}; // 这行语句已经没法执行到了。
}

所以正确的多行写法是

function foo(){ 
return { // 这里不会自动加分号,因为表示语句尚未结束。
name:'foo'
}
}

变量作用域

在JavaScript 中,用var 声明的实际上是有作用域的。

如果一个变量在函数体内部申明,则该变量的作用域为整个函数体,在函数体外不该引用该变量。

‘use strict':
function foo(){ 
var x = 1;
x = x +1;
}
x = x +2; // RefrenceError 无法在函数体外引用该该变量x

如果两个不同的函数各自申明了同一个变量,那么该变量只在各自的函数体内起作用。换句话说,不同函数内部的同名变量互相独立,互不影响:

'use struct':
function foo(){ 
var x = 1;
x = x +1;
}
function bar (){ 
var x= 'A';
x = x + 'B';
}

由于JavaScript的函数可以嵌套,此时,内部函数可以访问外部函数定义的变量,反过来则不行:

'use strict';
function foo(){ 
var x =1;
function bar(){ 
var x = 1;
function bar(){ 
var y= x +1; //bar 可以访问foo 的变量x
}
var z = y + 1; //RefernceError! foo 不可以访问bar 的变量y!
}
}

如果内部函数和外部函数的变量名重名怎么办?

'use strict':
function foo(){ 
var x = 1;
function bar (){ 
var x = 'A';
alert('x in bar() =' + x); // 'A'
}
alert('x in foo()=' +x) //1
bar();
}

变量提升

JavaScript的函数定义有个特点,它会先扫描整个函数体的语句,把所有申明的变量“提升”到函数顶部:

'use strict';
function foo(){ 
var x='Hello,'+y;
alert(x);
var y = 'Bob';
}
foo();

对于上述foo()函数,JavaScript引擎看到的代码相当于:

function foo(){ 
var y; // 提升变量y的
var x = 'Hello' + y;
alert(x);
y = 'Bob';
}

由于JavaScript的这一怪异的“特性”,我们在函数内部定义变量时,请严格遵守“在函数内部首先申明所有变量”这一规则。最常见的做法是用一个var申明函数内部用到的所有变量:

function foo(){ 
var x =1, // x 初始化为1
y = x +1, // y 初始化为2
z,i; // z和i 为undefined
// 其他语句
for(i =0; i<100; i++){ 
...
}
}

全局作用域

不在任何函数内定义的变量就具有全局作用域,实际上,JavaScript 默认有一个全局作用域的变量实际上呗绑定到window 的一个属性。

‘use strict';
var sourse = 'Learn JavaScript';
alert(course); // 'Learn JavaScript';
alert(window.course); // 'Learn JavaScript'

名字空间

全局变量会绑定到window 上,不同的JavaScript 文件如果使用相同的全局变量,或者定义了相同名字的顶层函数,都会造成

命名冲突,并且很难被发现,

减少冲突的一个方法是把自己的所有的变量和函数全部绑定到一个全局变量中。

// 唯一的曲剧变量MYAPP
var MYAPP = {};
//其他变量:
MYAPP.name = 'myapp';
MYAPP.version = 1.0;

// 其他函数
MYAPP.foo = function (){ 
return 'foo';
};

把自己的代码全部放入唯一的名字空间MYAPP中,会大大减少全局变量冲突的可能。

局部作用域

由于JavaScript 的变量作用域实际上是函数内部,我们在for 循环等语句块中是无法定义具有无法定义具有局部作用域的变量的。

function foo(){ 
for(var i = 0; i<100; i++){ 
//
}
i+=100; // 仍然可以引用变量;
}

为了解决块级作用域,ES6引入了新的关键字let,用let替代var可以申明一个块级作用域的变量:

function foo(){ 
var sum = 0;
for(let i=0; i<100;i++){ 
sum +=i;
}
i +=1;
}

常量

由于var 和let 声明的变量,如果要声明一个常量,在ES6 之前是不行的,我们通常用全部大写的变量俩表示这是一个常量

不要修改他的值。

var PI = 3.14;
ES6标准引入了新的关键字const 来定义常量,const 与 let都具有块级作用域;
const PI = 3.14;
PI = 3; // 某些浏览器不报错,但是无效果。
PI; // 3.14

以上这篇JavaScript 基础函数_深入剖析变量和作用域就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JS处理VBArray的函数使用说明
May 11 Javascript
半角全角相互转换的js函数
Oct 16 Javascript
jquery struts 验证唯一标识(公用方法)
Mar 27 Javascript
JavaScript 函数参数是传值(byVal)还是传址(byRef) 分享
Jul 02 Javascript
jQuery教程 $()包装函数来实现数组元素分页效果
Aug 13 Javascript
jquery表单验证插件formValidator使用方法
Apr 01 Javascript
BootStrap Table 设置height表头与内容无法对齐的问题
Dec 28 Javascript
Javascript中document.referrer隐藏来源的方法
Jan 16 Javascript
浅谈Vue.js中的v-on(事件处理)
Sep 05 Javascript
JavaScript实现的仿新浪微博原生态输入字数即时检查功能【兼容IE6】
Sep 26 Javascript
vue-cli axios请求方式及跨域处理问题
Mar 28 Javascript
超出JavaScript安全整数限制的数字计算BigInt详解
Jun 24 Javascript
实现JavaScript的组成----BOM和DOM详解
May 18 #Javascript
深入理解JQuery中的事件与动画
May 18 #Javascript
Adapter适配器模式在JavaScript设计模式编程中的运用分析
May 18 #Javascript
jQuery添加options点击事件并传值实例代码
May 18 #Javascript
详解JavaScript实现设计模式中的适配器模式的方法
May 18 #Javascript
深入剖析javascript中的exec与match方法
May 18 #Javascript
JQuery中attr属性和jQuery.data()学习笔记【必看】
May 18 #Javascript
You might like
PHP注释实例技巧
2008/10/03 PHP
探讨PHP使用eAccelerator的API开发详解
2013/06/09 PHP
PHP 循环删除无限分类子节点的实现代码
2013/06/21 PHP
深入Nginx + PHP 缓存详解
2013/07/11 PHP
PHP基于GD库的图像处理方法小结
2016/09/27 PHP
详解PHP编码转换函数应用技巧
2016/10/22 PHP
php str_replace替换指定次数的方法详解
2017/05/05 PHP
JavaScript 存在陷阱 删除某一区域所有节点
2010/05/10 Javascript
javascript错误的认识不用关心内存管理
2012/12/15 Javascript
Javascript拓展String方法小结
2013/07/08 Javascript
js 弹出框只弹一次(二次修改之后的)
2013/11/26 Javascript
window.location.reload 刷新使用分析(去对话框)
2015/11/11 Javascript
JavaScript希尔排序、快速排序、归并排序算法
2016/05/08 Javascript
JS中Json数据的处理和解析JSON数据的方法详解
2016/06/29 Javascript
全面了解addEventListener和on的区别
2016/07/14 Javascript
基于MVC+EasyUI的web开发框架之使用云打印控件C-Lodop打印页面或套打报关运单信息
2016/08/29 Javascript
JavaScript方法_动力节点Java学院整理
2017/06/28 Javascript
Angular(5.2-&gt;6.1)升级小结
2018/12/27 Javascript
layui动态表头的实现代码
2019/08/22 Javascript
JavaScript对象原型链原理解析
2020/01/22 Javascript
js实现弹幕墙效果
2020/12/10 Javascript
vue的hash值原理也是table切换实例代码
2020/12/14 Vue.js
[01:08:56]DOTA2-DPC中国联赛 正赛 Magma vs LBZS BO3 第一场 2月7日
2021/03/11 DOTA
python 字符串split的用法分享
2013/03/23 Python
python使用paramiko实现远程拷贝文件的方法
2016/04/18 Python
Python利用递归和walk()遍历目录文件的方法示例
2017/07/14 Python
Python简单实现查找一个字符串中最长不重复子串的方法
2018/03/26 Python
Python调用钉钉自定义机器人的实现
2020/01/03 Python
Python GUI编程学习笔记之tkinter控件的介绍及基本使用方法详解
2020/03/30 Python
Python urlopen()参数代码示例解析
2020/12/10 Python
pip install命令安装扩展库整理
2021/03/02 Python
2014年团队工作总结
2014/11/24 职场文书
高三语文复习计划
2015/01/19 职场文书
2016大学军训通讯稿
2015/11/25 职场文书
2016优秀护士求职自荐信
2016/01/28 职场文书
关于应聘教师的自荐信
2016/01/28 职场文书