在学习ES6函数一章时,发现了一个有意思的现象,原文描述如下:

这段话主要state了3个事实:

①函数参数有默认值时,会在声明初始化阶段形成一个单独的作用域

②这个作用域在初始化结束后消失

③没默认值的情况下,没有①②的现象发生。

这就很有意思了,我们一般说函数作用域,一般就是和全局作用域、局部作用域相爱相杀,这下来了个“声明时作用域”,更热闹了,这3者之间到底什么关系呢?

让demo自己来说话吧。

例子1:

    var x = 10;
function f( x,y=()=>{x=20;console.log(x);} ){//2
console.log( x );//1
y();
var x = 30;
console.log( x );//3
}
f();
console.log( x );//4

大家觉得上述代码运行会输出什么呢?不卖关子了,直接看结果再来分析吧。

结果从上到下分别对应代码里面的1、2、3、4输出语句。在主句分析以前,我们先回顾一下 “函数内变量提前声明” 的知识和上述的 “函数声明作用域”的概念,基于这些理论,我们可以得出如下作用域模型:

在此基础上,我们分析每个结果的由来。

//1: 函数体内声明了与参数同名的变量x,此时根据“变量提前”原则,函数作用域内的x被提前到function头部声明,此时参数x也无默认值传递给它所以,函数内的x是undefined.

//2. 有默认值的函数作用域,在声明是,分别开辟了自己独有的存放x,y的作用域,这里的x与函数体内的x没任何关系,有值的情况下,只是用值初始化一下内部的那个x,执行y访问的当然是自己作用域内的x了,也就是被变成了20的那个x。

//3. 函数体内声明了与参数x同名的变量x,但这个x与参数x没有任何关系,只存在一个初始化赋值的操作。因此此处的x是函数体内作用域的那个存30的x变量

//4. 全局量就不说了,和上述两个作用域都没有关系,不会被改变。

我们再看看下面的例子,有助于加深理解:有默认值的函数声明作用域和函数作用域有什么关系!

function f1( x=1,y=()=>{x=10;} ){
y();
console.log( x );
var x = 'abc';
}
f1();
function f2( x=1,y=()=>{x=10;} ){
y();
console.log( x );//
//var x = 'abc';
}
f2();

运行结果分别如下:

分析如下:

f1中,因为参数有默认值,所以参数开辟了自己的作用域,函数体内声明了自己的x,也开辟了自己的作用域,这俩x没任何关系,只是参数用自己的值初始化了函数体内的x,所以它打印了1

f2中,函数体内未声明自己的同名变量,在变量解析的时候就顺着"作用域链"爬到了参数声明作用域内,此时访问的时候就是访问的参数声明作用域内的x。

综上,得到Final conclusion:

1. 有默认值的函数,的确是开辟了单独的“参数声明作用域A”,这个作用域与函数体内的作用域是互不相干的,独立的。

2. 函数体内的同名变量接受来自同名参数的默认赋值,并单独开辟函数体内的一个作用域B.

3. 在作用域B中找不到变量时,程序会攀援“scope-chain”找到作用域A中的变量,并加以操作。

所以,在没有let之前的作用域A和作用域B是互相独立又有“上溯”查找的关系,比较难以理解,虽然没人在传参后再声明一个同名的局部变量,但我们要理解js底层对这种行为的处理方式。

好在,ES6诞生了!let声明重名变量会报错,从根本上杜绝了这种现象的发生。

———学无止境,may stars guide your way

ES6—带默认值的函数参数及其作用域的更多相关文章

  1. C++带参数默认值的函数

    定义形式: void fun(int a = 1 ,int b = 2 ,int c = 3 ,int d = 4){ //函数定义 cout<<"a="<< ...

  2. 函数的默认值与动态参数arguments的总结

    在js函数与作用域,了解函数基本概念中,我们发现当函数的实参有一个没有上传的时候,对应的形参time展示的值就是undefined,如下代码所示: <!DOCTYPE html> < ...

  3. C# 方法中带默认值的参数

    设计一个方法的参数时,可为部分或全部参数分配默认值.然后,调用这些方法的代码可以选择不指定部分实参,接受其默认值.除此之外,调用方法时,还可通过指定参数名称的方式为其传递实参.以下代码演示了可选参数和 ...

  4. C++——带默认参数值的函数

    函数在声明时可以预先给出默认的形参值,调用时如给出实参,则采用实参值,否则采用预先给出的默认参数值. ,) { return x + y;} int main() { add(,);//10+20 a ...

  5. python--函数的返回值、函数参数的使用、名称空间与作用域、函数嵌套、函数对象

    今天学习内容有函数的返回值.函数参数的使用.名称空间与作用域.函数嵌套. 下来我们一一查看. 函数的返回值 看几个栗子: def func(x): y=func() print(y) def foo( ...

  6. C#语法糖之第二篇: 参数默认值和命名参数 对象初始化器与集合初始化器

    今天继续写上一篇文章C#4.0语法糖之第二篇,在开始今天的文章之前感谢各位园友的支持,通过昨天写的文章,今天有很多园友们也提出了文章中的一些不足,再次感谢这些关心我的园友,在以后些文章的过程中不断的完 ...

  7. es6(三):es6中函数的扩展(参数默认值、rest参数、箭头函数)

    1.函数可以设置参数默认值 function test1(x,y=1){ console.log(x,y) } test1(10)//10 1 2.rest参数:形式为...变量名 function ...

  8. ES6参数默认值,剩余参数及展开数组

    一.函数的参数默认值 在ES6之前,想要给参数设置默认值得话,只能在函数体内部加判断设置,比如如果传递参数为undefined时为true, 否则为false,如下图example1,ES6出现语法可 ...

  9. Js基础知识5-函数返回值、函数参数、函数属性、函数方法

    函数返回值 所有函数都有返回值,没有return语句时,默认返回内容为undefined,和其他面向对象的编程语言一样,return语句不会阻止finally子句的执行. function testF ...

随机推荐

  1. POJ 1861 Network (Kruskal算法+输出的最小生成树里最长的边==最后加入生成树的边权 *【模板】)

    Network Time Limit: 1000MS   Memory Limit: 30000K Total Submissions: 14021   Accepted: 5484   Specia ...

  2. 【Maven】pom.xml(1)

    在pom.xml加入: <build> <finalName>oauth2</finalName> <resources> <resource&g ...

  3. POJ - 1236 Network of Schools(有向图的强连通分量)

    d.各学校之间有单向的网络,每个学校得到一套软件后,可以通过单向网络向周边的学校传输, 问题1:初始至少需要向多少个学校发放软件,使得网络内所有的学校最终都能得到软件. 问题2:至少需要添加几条传输线 ...

  4. 格式化磁盘,提示 is apparently in use by the system

    一般是被mdadm占用着. 使用  cat /proc/mdstat 查看所有 找到欲格式化盘符号. 使用 mdadm --stop /dev/md0 mdadm --remove /dev/md0 ...

  5. 子元素margin带动父元素拖动

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  6. Bootstrap-CSS:图片

    ylbtech-Bootstrap-CSS:图片 1.返回顶部 1. Bootstrap 图片 在本章中,我们将学习 Bootstrap 对图片的支持.Bootstrap 提供了三个可对图片应用简单样 ...

  7. Native App、Web App 还是Hybrid App?(转)

    一.什么是Native App? Native App即原生应用,即我们一般所称的客户端,是针对不同手机系统单独开发的本地应用,如需使用需要先下载到手机并安装,下载Native App的最常见方法是访 ...

  8. 1004 n^n的末位数字

    题目来源: Author Ignatius.L (Hdu 1061) 基准时间限制:1 秒 空间限制:131072 KB 分值: 5 难度:1级算法题   给出一个整数N,输出N^N(N的N次方)的十 ...

  9. linux的僵尸进程和孤儿进程

    1 僵尸进程: 子进程已经退出勒 但是还没有回收资源的进程为僵尸进程 代码验证 #include <stdio.h> #include <stdlib.h> #include ...

  10. 折半插入排序 之通俗易懂,图文+代码详解-java编程

    转自http://blog.csdn.net/nzfxx/article/details/51615439 1.特点及概念介绍 下面给大家讲解一下"二分法查找"这个java基础查找 ...