函数的作用域链

• 以下代码输出什么？

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, '男');
  // name:饥人谷
  // age: 2
  // sex: 男
  // ['饥人谷', 2, '男']
  // name valley
getInfo('小谷', 3);
  // name: '小谷'
  // age: 3
  // sex: undefined
  // ['小谷', 3]
  // name valley
getInfo('男');
  // name: '小谷'
  // age: undefined
  // sex: undefined
  // ['男']
  // name valley

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

function sumOfSquares(){
  var y = 0
  for(var i=0; i<arguments.length;i++){
    y = y + arguments[i]*arguments[i]
  }
  return y
  //arguments[0]*arguments[0]+arguments[1]*arguments[1]
}
var result = sumOfSquares(2,3,4)
var result2 = sumOfSquares(1,3)
console.log(result)  //29
console.log(result2)  //10

• 如下代码的输出？为什么

console.log(a);
var a = 1;
console.log(b);
// undefined 
// Uncaught ReferenceError: b is not defined

----------------------------------
/*解释：
  因为 var 的声明会前置，所以代码的顺序是
  var a
  console.log(a)   // undefined，因为 a 声明了但没有赋值
  a=1
  console.log(b)   // 报错，因为 b 没有声明
*/

• 如下代码的输出？为什么

sayName('world');
sayAge(10);
function sayName(name){
  console.log('hello ', name);
}
var sayAge = function(age){
  console.log(age);
};
// hello world
// 报错，ncaught TypeError: sayAge is not a function

--------------------------------------
/*解释：
因为函数的 function 声明会前置，而 var 构造函数表达式，不会前置。
以上代码顺序为：
  function sayName(name){
    console.log('hello ', name);
  }
  var sayAge
  sayName('world');       // hello world
  sayAge(10);             //报错，因为sayAge() 函数没有声明
  sayAge = function(age){
    console.log(age)
  }
*/

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

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

--------------------------------
/*解释：作用域链查找的伪代码如下
进入全局执行上下文：
globalContext = {
  AO: {
    x: 10,
    foo: function,
    bar: function,
  };
  Scope: null;
  foo.[Scope] = globalContext.AO;
  bar.[Scope] = globalContext.AO;
  执行 bar();
}

进入bar()的执行上下文  // 从globalContext。AO进入
barContext = {
  AO: {
    x: 30,
  };
  Scope: globalContext.AO;
  执行 foo();    // 在这个作用域内找不到，就从Scope中去找
}

进入 foo()的执行上下文  // 从globalContext.AO进入
fooContext = {
  AO: {}；
  Scope: globalContext.AO;
  执行 console.log(x)  // 输出10，因为 foo()的作用域是globalContext.AO
}

*/

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

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

----------------------------------
/*解释：作用域链查找伪代码如下
进入全局的执行上下文
globalContext = {
  AO: {
    x: 10,
    bar: function,
  };
  Scope: null;
  bar.[Scope] = globalContext.AO;
  执行 bar();
}

进入 bar()的执行上下文   // 从 globalContext.AO 进入
barContext = {
  AO: {
    x: 30,
    foo: function,
  };
  Scope: globalContext.AO;
  foo.[Scope] = barContext.AO;
  执行 foo();
}

进入 foo()的执行上下文   // 从 barContext.AO 进入
fooContext = {
  AO: {};
  Scope: barContext.AO;
  执行 console.log(x)   // 输出 30，因为在 AO 中找不到，就从 Scope 中找
}

*/

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

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

-----------------------------------
/*解释：作用域链查找伪代码如下
进入全局的执行上下文
globalContext = {
  AO: {
    X: 10,
    bar: function,
  };
  Scope: null;
  bar.[Scope] = globalContext.AO;
  执行 bar();
}

进入 bar() 的执行上下文
barContext = {
  AO: {
    x: 30,
    function: function,
  };
  Scope: globalContext.AO;
  function.[Scope] = barContext.AO;
  执行 function ()
}

进入 function() 的执行上下文
functionContext = {
  AO: {};
  Scope: barContext.AO
  执行 console.log(x)    // 输出30    因为 AO 中没有，就从 Scope 中去找 
}
*/

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

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)
//  最终输出为 undefined   5  1  6  20  200

------------------------------------
/*解释：作用域链查找伪代码如下
进入全局执行上下文
globalContext = {
  AO: {
    a: 1,
    fn: function,
    fn3: function,
  };
  Scope: null
  fn.[Scope]  = globalContext.AO;
  fn3.[Scope] = globalContext.AO;
  执行 fn();
}

进入 fn() 的执行上下文
fnContext = {
  var a;
  function fn2(){}
    fn2.[Scope] = fnContext
  console.log(a)    // undefined  [1]  var 声明前置未赋值
  a = 5
  console.log(a)     // 5         [2]   a 已经赋值 5
  a++
  执行 fn3(){
    console.log(a)    //  1       [3]   fn3 的作用域为 globalContext
    a = 200    //改变了 globalContext 中的 a
  }
  执行 fn2(){
    console.log(a)    //  6       [4]  fn2 的作用域为 fnContext
    a = 20     // 改变了 fnContext 中的 a 为 20
  }
  console.log(a)    //   20       [5]   a 已经赋值 20
}

console.log(a)      //   200     [6]    它的作用域为globalContext

// 最终输出为 undefined   5  1  6  20  200

*/