JavaScript函数与作用域

[liushuangls]

函数声明和函数表达式的区别

• JavaScript 中创建一个函数，主要有两种方法：函数声明、函数表达式，各自写法如下：

  // 方法一：函数声明 function foo() {}

  // 方法二：函数表达式 var foo = function () {};

  // 自执行匿名函数表达式，主要用于创建一个新的作用域 (function () { // var x = ... })();

• JavaScript 解释器中存在一种声明提升的机制，也就是说变量（函数）的声明会被提升到作用域的最前面，即使写代码的时候是写在最后面，也还是会被提升至最前面。如：

  console.log(a) // undefined console.log(f) // function f() {} function f() {} var a = 10

• 区别：
  • 在函数表达式中可忽略函数名称，从而创建匿名函数。
  • 一个函数表达式可以被用作一个IIFE（即时调用的函数表达式），它一旦定义就运行。
  • JavaScript中的函数表达式没有提升,不像函数声明,你在定义函数表达式之前不能使用函数表达式。

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

• JS引擎的工作方式是先解析代码，并执行所有的变量和函数声明,这就叫变量/函数的声明前置，然后从头开始执行代码，因此同一个作用域内可以在变量或函数声明之前访问它们。

• 但是这只是声明的提升，并不会执行声明后面的表达式，所以如果在一个变量赋值语句之前访问这个变量将会得到undefind值，而函数声明则没有这个问题。

  console.log(s) // undefined console.log(fn) // function fn() { var b = 10 } var s = 10 function fn() { var b = 10 }

arguments 是什么

• arguments 是一个类似数组的对象, 对应于传递给函数的参数。

• arguments对象是所有函数中可用的局部变量。你可以使用arguments对象在函数中引用函数的参数。此对象包含传递给函数的每个参数的条目，第一个条目的索引从0开始。例如，如果一个函数传递了三个参数，你可以参考它们如下：

  function f() { console.log(arguments[0]) console.log(arguments[1]) console.log(arguments[2]) } f(1, 2, 3) //输出 1 2 3

• arguments对象不是一个 Array 。它类似于数组，但除了 长度之外没有任何数组属性。

函数的"重载"怎样实现

• 函数重载(英语:Function overloading)，是Ada、C++、C#、D和Java等编程语言中具有的一项特性，这项特性允许创建数项名称相同但功能的输入输出类型不同的子程序，它可以简单地称为一个单独功能可以执行多项任务的能力。

• JS中没有正式的重载概念，不过我们可以利用传入的不同参数来实现类似的功能。如：

  function f(name, age, sex) { if (name) { console.log('your name is ' + name) } if (age) { console.log('your age is ' + age) } if (sex) { console.log('your age is ' + age) } } f('liu') // 输出 your name is liu f('liu', 20) // 输出 your name is liu; your age is 20

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

• IIFE (立即调用函数表达式) 是一个 JavaScript 函数 ，它会在定义时立即执行。

• 目的：

  • 一是不必为函数命名，避免了污染全局变量；

  • 二是IIFE内部形成了一个单独的作用域，可以封装一些外部无法读取的私有变量。

    通常有以下两种写法： (function(){ ... })();

    (function(){ ... }());

求n!，用递归来实现

  function factorial(n) {
    if (n === 1) {
      return 1
    }
    return n * factorial(n - 1)
  }
  factorial(5) // 120

以下代码输出什么？

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 arr = Array.from(arguments)
  var result = 0
  arr.forEach(function (x) {
     result += x * x
  })
  return result
}
var result = sumOfSquares(2,3,4)
var result2 = sumOfSquares(1,3)
console.log(result)  //29
console.log(result2)  //10

如下代码的输出？为什么

console.log(a);
// undifined, 虽然会发生变量提升，但是a还没有赋值
var a = 1;
console.log(b);
// 报错，访问一个不存在的变量

如下代码的输出？为什么

sayName('world');
// hello world，函数声明提升
sayAge(10);
// 报错，函数表达式，在执行到赋值语句之前相当于声明一个变量，所以sayAge的值此时为undifned

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

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

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

伪代码：
1.
globalContext = {
  AO: {
    x: 10,
    foo: function,
    bar: function
  }
  Scope: null
}
// 函数声明时得到
foo.[[scope]] = globalContext.AO
bar.[[scope]] = globalContext.AO
2.
fooContext = {
  AO: {}
  Scope: globalContext.AO
}
3.
barContext = {
  AO: {
    x: 30
  }
  Scope: globalContext.AO
}

// 输出10，首先执行bar，声明一个局部变量x,然后执行foo，foo输出x,因为foo的
    活动对象中找不到x，所以向foo的作用域链上端查找，也就是globalContext，然后找到x为10

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

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

伪代码：
1.
globalContext = {
  AO: {
    x: 10,
    bar: function
  }
  Scope: null
}
// 函数声明时得到
bar.[[scope]] = globalContext.AO
2.
barContext = {
  AO: {
    x: 30
     : function
  }
  Scope: globalContext.AO
}
 .[[scope]] = barContext.AO
// 输出30，立即执行函数会先在自己的作用域内寻找，然后进入bar的作用域中找到x=30

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

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)

伪代码：
1.
globalContext = {
  AO: {
    a: 1,
    fn: function,
    fn3: function
  }
  Scope: null
}
// 函数声明时得到
fn.[[scope]] = globalContext.AO
fn3.[[scope]] = globalContext.AO
2.
fnContext = {
  AO: {
    a: 5,
    fn2: function
  }
  Scope: globalContext
}
fn2.[[scope]] = fnContext.AO
3.
fn3Context = {
  AO: {}
  Scope: globalContet.AO
}
4.
fn2Context = {
  AO: {}
  Scope: fnContext
}

// 输出：undifined, 5, 1, 6, 20, 200
// 解析：执行fn，进入它的作用域，变量提升，所以第一个输出undefined,第二个a赋值后输出5,然后a+1;
接着执行fn3，在它的作用域中找不到a，进入全局作用域，输出a=1,将全局a赋值为200;
接着执行fn2，在它的作用域中找不到a，进入fn作用域，输出a=6,将fn作用域中的a赋值为20；
接着输出fn中的a=20；
接着输出全局的a=200；