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

函数定义和调用

定义函数,在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 基础函数_深入剖析变量和作用域就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们。

(0)

相关推荐

  • JavaScript 学习笔记之变量及其作用域

    一.变量 ECMAscript变量是松散型变量,所谓松散型变量,就是变量名称可以保存任何类型的数据,每个变量仅仅是一个用于保存值的占位符. 定义:var firstDemo; 二.变量的作用域 2.1基本概念 使用var 定义变量:定义该变量的作用域的局部变量,这种定义变量的方法也被成为显式声明. 这么说不理解的话可以看看下面这个简单粗暴的例子: 复制代码 代码如下: test(); function test(){ var firstDemo="hello";//定义局部变量    

  • 浅谈Javascript变量作用域问题

    Js中的变量作用域问题: 1.没有块级作用域.Js中的变量作用域不是以{}为界的,不像C/C++/Java. 如: 复制代码 代码如下: if(true){      var name = "qqyumidi";  }               alert(name);  // 结果:qqyumidi Js会将在if中定义的变量添加到当前的执行环境中,尤其在使用for循环时需要注意与其他语言的差异. 复制代码 代码如下: for(var i=0; i<10; i++){    

  • JavaScript 变量、作用域及内存

    JS变量是松散型的(不强制类型)本质,决定了它只是在特定时间用于保存特定值的一个名字而已; 由于不存在定义某个变量必须要保存何种数据类型值的规则,变量的值及其数据类型可以在脚本的生命周期内改变; 一 变量及作用域 1.基本类型和引用类型 // JS变量包含两种不同的数据类型的值:基本类型值和引用类型值; // 1.基本类型值:保存在栈内存中的简单数据段;即这种值完全保存在内存中的一个位置; // 基本类型值包含:Undefined|Null|Boolean|Number|String; // 这

  • JavaScript修改作用域外变量的方法

    1.今天在看JavaScript学习指南的时候做的课后习题,也因此详细的对函数的传入参数进行比较深入的研究. 题目如下: 函数如何才能修改其作用域之外的变量?编写一个函数,由1~5的数字组成的数组作为参数,调用该函数后将把其中的数字项替换为相应的字符串表示形式. 需要注意知识点: 在JavaScript中函数参数的传递,对于基于原始值的参数进行值传递(数字,字符串,布尔值),函数中的修改不会影响实际参数值.而传递给函数的参数而言,对象是一个引用,对其的修改的将会反映在主调程序中.<-但是,会有这

  • 简单谈谈javascript中的变量、作用域和内存问题

    [变量] [1]定义:可变的量,相当于给一个不定的数据起了一个外号.变量是存储信息的容器. [2]特性:js中的变量是松散类型的,可以保存任何类型的数据.它只是在特定时间用于保存特定值的一个名字而已.由于不存在定义某个变量必须要保存何种数据类型值的规则,变量的值及其数据类型可以在脚本的生命周期内改变. [3]变量声明:变量可以在声明时赋值,但不能有其他操作,如+=.-=等 var a = 2;//是正确的 var a += 2;//是错误的 var a = 2++;//是错误的,++只能用于变量

  • 一道关于JavaScript变量作用域的面试题

    小编觉得这道题对理解JavaScript 作用域还是很有帮助的,特此又把自己的解题思路梳理了一遍,希望对其它人有所帮助. 首先看下面试题: var arr = [1, 2, 3]; for (var i = 0, j; j = arr[i++];) { console.log(j); } console.log('---------'); console.log(i); console.log('---------'); console.log(j); console.log('--------

  • js函数内变量的作用域分析

    本文实例分析了js函数内变量的作用域.分享给大家供大家参考.具体分析如下: 先看一个函数实例: 复制代码 代码如下: <html> <head> </head> <body> <script type="text/javascript"> var a = 5; var c = 3; function t(){  var a = 6;  var b = 10;  document.write(a+'-----'+b);  doc

  • Javascript变量的作用域和作用域链详解

    工作这几年,js学的不是很好,正好周末有些闲时间,索性买本<js权威指南>,大名鼎鼎的犀牛书,好好的把js深入的看一看.买过这本书的第一印象就是贼厚,不过后面有一半部分都是参考手册. 一:作用域 说起变量第一个要说到的肯定就是作用域,正是因为不熟悉JS的作用域,往往就会把面向对象的作用域张冠李戴,毕竟有些东西总是习惯性的这样,但是并不是每次照搬都是可以的,那么下一个问题就来了,js到底是什么作用域,当然是函数作用域了,我们的浏览器就是一个被实例化的window对象,如果在window下定义一个

  • 浅析JavaScript中的变量复制、参数传递和作用域链

    今天在看书的过程中,又发现了自己目前对Javascript存在的一个知识模糊点:JS的作用域链,所以就通过查资料看书对作用域链相关的内容进行了学习.今天学习笔记主要有这样几个关键字:变量.参数传递.执行环境.变量对象.作用域链. 1.变量 变量需要注意的有两点:变量声明和复制变量值. 变量声明肯定大家都很熟悉,在JS中我们都是通过 var 关键字进行变量声明的.JS中规定,通过var声明的变量会被添加到最近的环境中,如果声明并且初始化一个变量没有用到var关键字,这个变量会被添加到全局环境中.

  • JavaScript中的变量作用域介绍

    对于变量的作用域(scope),C.Java等语言采取的是"block scope"的方式.与之不同,JavaScript所采取的是"function scope"的方式 - 变量的作用域仅由所处的function决定,与if.for等逻辑块无关.比如,以下这个例子展示了JavaScript中与C.Java等语言不一样的行为: 复制代码 代码如下: function(){   var s = 42;//s is visible throughout function

  • Angularjs全局变量被作用域监听的正确姿势

    如果你只想知道结论: $scope.$watch($rootScope.xxx,function(newVal,oldVal){ //do something }) 马上就有人问为什么不是: $rootScope.$watch("xxx",function(newVal,oldVal){ //do something }) 从我最近的一个bug来说说为什么要用第一种方式. 逻辑如图,一开始我使用了 $rootScope.$watch 的写法.因为 angularjs 在 $rootSc

  • JavaScript变量的作用域全解析

    变量作用域是程序中定义这个变量的区域. 先来看一段示例: /*  代码1  */ var scope = "global "; function checkScope() { var scope = "local "; function childCheck() { var scope = "childLocal "; document.write(scope); } function childUndefined() { document.wr

随机推荐