进阶任务3 函数和作用域链作业

1.函数声明和函数表达式有什么区别

函数声明

使用 function 关键字声明一个函数

//函数声明
function sayHello(){
    console.log('hello')
}

//函数调用
sayHello()

声明不必放到调用的前面，但是不要放到其它函数中。

函数表达式

var sayHello = function(){
    console.log('hello');
}

sayHello()

<span style="color:red">用函数表达式声明函数必须放到调用的前面。</span>函数表达式是内容为函数声明的表达式，类似 a++ 为内容为变量运算的表达式，而 a++ 需要事先声明 a 且确定 a 的值，因此同理函数表达式声明必须放置在调用的前面。

函数也是一种引用类型，函数表达式的写法就是把函数指针赋值给了 sayHello 变量。

为什么叫函数表达式？
因为表达式其本质是一个值，是一坨东西最终计算出一个结果即一个值；而这种写法就是将一坨东西赋值给变量，就是将一个值赋值给变量，所以称为函数表达式。
函数声明的写法就不是表达式，而是单纯函数的语句。

2. 什么是变量的声明前置？什么是函数的声明前置

var 和 function 的声明前置

在一个作用域下，var 声明的变量和 function 声明的函数会前置.
首先将所有 var variableName 前置（不包括变量赋值部分）；
其次将所有 function functionName(){} 前置（包括函数定义部分）
例如：

console.log(a); //undefined
var a = 3;
console.log(a); //3

sayHello();

function sayHello(){
  console.log('hello');
}

代码的实际的执行顺序为：

var a;
function sayHello() { console.log('hello'); }

console.log(a);
a = 3
console.log(a);
sayHello()

3. arguments 是什么

在函数内部，你可以使用arguments对象获取到该函数的所有传入参数

function printPersonInfo(name, age, sex){
    console.log(name);
    console.log(age);
    console.log(sex);
    console.log(arguments);
}

arguments 是一个类数组对象，可用 arguments[0] 等来标识各个参数，也可以调用 length 属性来显示对象中属性的数量，但是也没有了一些数组的属性。

4. 函数的"重载"怎样实现

C语言重载范例

int sum(int num1, int num2){
  return num1 + num2;
}

float sum(float num1, float num2){
  return num1 + num2;
}

sum(1, 2);
sum(1.5, 2.4);

在 JS 中

没有重载! 同名函数会覆盖。但可以在函数体针对不同的参数调用执行相应的逻辑

function printPeopleInfo(name, age, sex){
    if(name){
      console.log(name);
    }
    
    if(age){
      console.log(age);
    }
    
    if(sex){
      console.log(sex);
    }
}


printPeopleInfo('Byron', 26);
printPeopleInfo('Byron', 26, 'male');

5. 立即执行函数表达式是什么？有什么作用

(function(){
  var a  = 1;
})()
console.log(a); //undefined

作用： <span style="color:red">隔离作用域</span>，避免和全局变量发生冲突。
包裹函数定义语句的括号使得 JS 解析器认为括号内是一个表达式，而不是一个函数声明语句。

其他写法

(function fn1() {});
 
// 在数组初始化器内只能是表达式
[function fn2() {}];
 
// 逗号也只能操作表达式，逗号两边也被认为是表达式
1, function fn3() {};

// ！号也可以写成立即表达式的方法
!function(){
    var a = 1;
}()

6. 求n!，用递归来实现

function recursive(n) {
    if (n == 1) {
        return 1;
    } else {
        return n * (n-1);
    }
}

7. 以下代码输出什么？

function getInfo(name, age, sex){
    console.log('name:',name);
    console.log('age:', age);
    console.log('sex:', sex);
    console.log(arguments);
    arguments[0] = 'valley';
    console.log('name', name);
}
getInfo('饥人谷', 2, '男');
getInfo('小谷', 3);
getInfo('男');

输出：

name: 饥人谷
age: 2
sex: 男
["饥人谷",2,"男"] // 别漏了作字符串标记的引号
name valley

name: 小谷
age: 3
["小谷",3]
name valley

name: 男
[男]
name valley

8. 写一个函数，返回参数的平方和？

function sumOfSquares(){
    var sumOfSquares = 0;
    for(var i = 0; i < arguments.length; i++){
        sumOfSquares += arguments[i] * arguments[i];
    }
    return sumOfSquares;
}

var result = sumOfSquares(2,3,4)
var result2 = sumOfSquares(1,3)
console.log(result) //29
console.log(result) //10

9. 如下代码的输出？为什么

console.log(a); // undefined
var a = 1;
console.log(b); // Uncaught ReferenceError

代码的执行顺序为：

var a;
console.log(a); //undefined，此时变量 a 已经声明，但是并未赋值，所以显示 undefined，表示未定义，此处目前没有任何值
a = 1;
console.log(b); //Uncaught ReferenceError，此时出现了错误，因为变量 b 并未被声明，所以 JS 解析器将会显示出现了搓球

10. 如下代码的输出？为什么

sayName('world');
sayAge(10);
function sayName(name){
    console.log('hello ', name);
}
var sayAge = function(age){
    console.log(age);
};

代码实际执行顺序：

function sayName(name){
    console.log('hello ', name);
}

sayName('world'); 
// hello world
// 由于函数声明会被前置到代码首部，所以此语句正常运行
sayAge(10); 
// Uncaught TypeError
// 用函数表达式的方式来声明函数，JS 解析器会认为这是一个表达式而非函数声明
// 所以这样声明的函数不会被声明前置
// 所以在调用 sayAge 时 JS 解析器会认为函数未被声明，显示错误
var sayAge = function(age){
    console.log(age);
};

输出：
hello world
Uncaught TypeError

11. 如下代码输出什么? 写出作用域链查找过程伪代码

var x = 10
bar() 
function foo() {
  console.log(x)
}
function bar(){
  var x = 30
  foo()
}

12. 如下代码输出什么? 写出作用域链查找过程伪代码

var x = 10;
bar() 
function bar(){
  var x = 30;
  function foo(){
    console.log(x) 
  }
  foo();
}

作用域链如下：

globalContext = {
    AO: {
        x: 10,
        bar: function
    }
    Scope: null
}
// 声明 bar 函数时，生成其作用域链如下
bar.[[scope]] = globalContext.AO


barContext = {
    AO: {
        x: 30,
        foo: function
    }
    scope: globalContext
}
// 声明 foo 函数时，生成其作用域链如下
foo.[[scope]] = barContext.AO


fooContext = {
    AO: {}
    Scope: barContext.AO
}

查找过程：

Step1 声明变量 x 并且赋值为10
Step2 声明前置 bar 函数，在其内声明 bar 域内变量x 并赋值30，
声明域内 foo 函数，并随后执行 foo 函数
Step3 代码执行 bar 函数，然后执行 foo 函数，foo 函数活动对象 AO 中没有 x，
通过其作用域链找到 bar 函数的活动对象 AO，在其中找到 x 值为30，然后输出值为30

13. 以下代码输出什么? 写出作用域链的查找过程伪代码

var x = 10;
bar() 
function bar(){
    var x = 30;
    (function (){
        console.log(x)
    })()
}

作用域链如下：

globalContext = {
    AO: {
        x: 10,
        bar: function
    }
    Scope: null
}
bar.[[scope]] = globalContext.AO


barContext = {
    AO: {
        x: 30,
        immediatelyFunction
    }
    Scope: globalContext.AO
}


immediatelyFunctionContext = {
    AO:{}
    Scope: barContext.AO
}

执行流程：
Step1 声明变量 x 并赋值为10
Step2 前置声明函数 bar，在 bar 域内声明变量 x 并赋值30，声明立即执行函数
Step3 执行 bar 函数，然后执行 bar 域内立即执行函数，其找到其作用域
为 barContext.AO, 然后输出值为30

14. 以下代码输出什么？写出作用域链查找过程伪代码

var a = 1;
function fn(){
    console.log(a)
    var a = 5
    console.log(a)
    a++
    var a
    fn3()
    fn2()
    console.log(a)
    function fn2(){
        console.log(a)
        a = 20
    }
}
function fn3(){
    console.log(a)
    a = 200
}
fn()
console.log(a)

作用域链如下：

globalContext = {
    AO: {
        a: 1,200（代码执行 fn3() 时）
        fn: function,
        fn3: function   
    }
    Scope: null
}
fn.[[scope]] = globalContext.AO
fn3.[[scope]] = globalContext.AO


fnContext = {
    AO: {
        a: undefined（被声明前置时）,5（被赋值为5时），
           6（执行++操作），20（被 fn2() 函数修改）
        fn2: function
    }
    Scope: globalContext.AO
}
fn2.[[scope]] = fnContext.AO


fn2Context = {
    AO: {
        a: 20
    }
    Scope = fnContext.AO
}


fn3Context = {
    AO: {
        a: 200  
    }
    Scope = globalContext.AO
}

解答

var a = 1;

function fn(){
    console.log(a) 
// 输出第1行：undefined，此时输出 a 的值是函数 fn 作用域中的值，
// fn 函数已经前置声明变量 a，但是还未赋值，固输出 undefined
    var a = 5
    console.log(a)
// 输出第2行：5，此时输出 a 的值是函数 fn 作用域中 a 的值，
// 该作用域中变量 a 刚刚被赋值为5
    a++
    var a
    fn3()
// 输出第3行：1，此时输出 a 的值是是函数 fn3 在其作用域链 
// globalContext.AO 即全局上下文中找到的，在该作用域中 a 的值为1
    fn2()
// 输出第4行：6，此时输出 a 的值是函数 fn 作用域中 a 的值，刚刚执行++操作
    console.log(a)
// 输出第5行：20，此时输出 a 的值是函数 fn 作用域中 a 的值，刚刚在 fn2 中
// 被改变为20
    function fn2(){
        console.log(a)
        a = 20
    }
}

function fn3(){
    console.log(a)
    a = 200
}

fn()

console.log(a)
// 输出第6行：200，此时输出 a 的值是全局上下文中 a 的值，在 fn3 中被改变为200

最后编辑于：2017.12.07 02:23:55

人面猴
序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
沈念sama阅读 212,029评论 6赞 492
死咒
序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
沈念sama阅读 90,395评论 3赞 385
救了他两次的神仙让他今天三更去死
文/潘晓璐我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
开封第一讲书人阅读 157,570评论 0赞 348
道士缉凶录：失踪的卖姜人
文/不坏的土叔我叫张陵，是天一观的道长。经常有香客问我，道长，这世上最难降的妖魔是什么？我笑而不...
开封第一讲书人阅读 56,535评论 1赞 284
港岛之恋（遗憾婚礼）
正文为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
茶点故事阅读 65,650评论 6赞 386
恶毒庶女顶嫁案：这布局不是一般人想出来的
文/花漫我一把揭开白布。她就那样静静地躺着，像睡着了一般。火红的嫁衣衬着肌肤如雪。梳的纹丝不乱的头发上，一...
开封第一讲书人阅读 49,850评论 1赞 290
城市分裂传说
那天，我揣着相机与录音，去河边找鬼。笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。我是一名探鬼主播，决...
沈念sama阅读 39,006评论 3赞 408
双鸳鸯连环套：你想象不到人心有多黑
文/苍兰香墨我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
开封第一讲书人阅读 37,747评论 0赞 268
万荣杀人案实录
序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
沈念sama阅读 44,207评论 1赞 303
护林员之死
正文独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋以下内容为张勋视角年9月15日...
茶点故事阅读 36,536评论 2赞 327
白月光启示录
正文我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
茶点故事阅读 38,683评论 1赞 341
活死人
序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
沈念sama阅读 34,342评论 4赞 330
日本核电站爆炸内幕
正文年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
茶点故事阅读 39,964评论 3赞 315
男人毒药：我在死后第九天来索命
文/蒙蒙一、第九天我趴在偏房一处隐蔽的房顶上张望。院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
开封第一讲书人阅读 30,772评论 0赞 21
一桩弑父案，背后竟有这般阴谋
文/苍兰香墨我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。一阵脚步声响...
开封第一讲书人阅读 32,004评论 1赞 266
情欲美人皮
我被黑心中介骗来泰国打工，没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。一个月前我还...
沈念sama阅读 46,401评论 2赞 360
代替公主和亲
正文我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
茶点故事阅读 43,566评论 2赞 349

进阶任务3 函数和作用域链 作业

1.函数声明和函数表达式有什么区别

函数声明

函数表达式

2. 什么是变量的声明前置？什么是函数的声明前置

var 和 function 的声明前置

3. arguments 是什么

4. 函数的"重载"怎样实现

C语言重载范例

在 JS 中

5. 立即执行函数表达式是什么？有什么作用

其他写法

6. 求n!，用递归来实现

7. 以下代码输出什么？

8. 写一个函数，返回参数的平方和？

9. 如下代码的输出？为什么

10. 如下代码的输出？为什么

11. 如下代码输出什么? 写出作用域链查找过程伪代码

12. 如下代码输出什么? 写出作用域链查找过程伪代码

作用域链如下：

查找过程：

13. 以下代码输出什么? 写出作用域链的查找过程伪代码

14. 以下代码输出什么？ 写出作用域链查找过程伪代码

作用域链如下：

解答

推荐阅读更多精彩内容

进阶任务3 函数和作用域链作业

14. 以下代码输出什么？写出作用域链查找过程伪代码