JS的函数和作用域

作者: 熊蛋子17 | 来源:发表于2017-12-01 00:35 被阅读0次

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

ECMAScript规定了三种声明函数方式：构造函数、函数声明、和函数表达式。
函数声明: 函数声明通过关键字function来声明, 关键词后面是函数名, 名称后面有个小括号, 括号里面放的是函数的参数, 最后是一对花括号,包括函数的代码块

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

函数表达式

var sum = function(num1, num2) {
    return num1+num2;
};

定义变量sum并将一个匿名函数赋值给变量，这时这个匿名函数又称函数表达式(Function Expression)。function关键字后面没有函数名。

区别：

函数声明最后一般不写分号, 而函数表达式有分号
函数声明和变量声明都有声明提前的特点, 函数声明是函数名称和函数体均提前声明了, 可以在声明之前调用它;
函数表达式的规则与变量声明提前一样,只是函数声明变量提前了, 但是它的赋值仍在原来的位置, 不能在函数表达式之前调用。

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

变量的声明前置：
变量声明前置是指把变量的声明提前到当前作用域的最前面, 但变量的赋值仍然按照原来的顺序执行, 如果变量声明但未被赋值, 变量自动赋值为undefined。
函数的声明前置：
函数的声明前置有两种情况, 一个是使用函数声明, 则整个声明都前置, 另一个是使用函数表达式, 那么规则和变量的声明前置一样。

例如：

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的参数列表, 只在函数内部起作用; arguments的值与函数传入参数有关, 与定义参数无关。
可以使用arguments对象在函数中引用函数的参数。此对象包含传递给函数的每个参数的条目，第一个条目的索引从0开始。例如，如果一个函数传递了三个参数，你可以以如下方式引用他们：

arguments[0]
arguments[1]
arguments[2]

参数也可以被设置：
arguments[1] = 'new value';

arguments对象不是一个 Array 。它类似于Array，但除了长度之外没有任何Array属性
属性
1.arguments.callee
指向当前执行的函数。
2.arguments.caller
指向调用当前函数的函数。
3.arguments.length
指向传递给当前函数的参数数量。
4.arguments[@@iterator]
返回一个新的Array迭代器对象，该对象包含参数中每个索引的值。

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

重载是很多面向对象语言实现多态的手段之一, 相同名字的函数参数个数不同, 或者顺序不同, 都被认为是不同的函数.
如果定义了两个名字相同的函数，则该名字属于后定义的函数。
ECMAscript函数不能像传统意义上的那样实现重载， ECMAscript函数没有签名，其参数是由包含零个或多个值的数组来表示的。而没有函数签名，真正的重载是不可能做到的。但可以在函数体针对不同的参数调用执行相应的逻辑

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');

也可以用arguments.length来实现重载。

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

在JavaScript中, 一对圆括号()是一种运算符, 跟在函数明后, 表示调用该函数; 有时我们希望在定义函数之后, 立即调用该函数; 这时, 不能再函数的定义之后加圆括号, 会产生语法错误; 因为function这个关键字既可以当做语句, 也可当做表达式; 为了避免解析上的歧义, JavaScript引擎看到行首是function关键字之后, 认为这一段都是函数的定义 , 不应该以圆括号结尾, 所以报错;
解决方法就是不要让function出现在行首, 让引擎将其理解外一个表达式, 最简单的方式, 是将其放在圆括号内

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

其他写法

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

作用：将全局变量与局部变量分隔开，保证全局变量不受污染。

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

function factorial(num) {
  if (num === 1 || num === 0) {
    return 1;
  }
  else if (num < 0) {
    return console.log("minus has no factorial");
  }
  return num*arguments.callee(num-1);
}
console.log(factorial(7));

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
sex:undefined
[“小谷”, “3”]
name:valley

name:男
age:undefined
sex:undefined
["男"]
name:valley

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

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

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

console.log(a);
    var a = 1;
    console.log(b);

声明前置实际为：

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

console.log(a); 这个时候a还没有赋值; b变量没有声明和定义, 所以报错。

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);
}
var sayAge
sayName('world');   //hello world
sayAge(10);    // Uncaught TypeError: sayAge is not a function
sayAge = function(age){
  console.log(age)
};

函数声明在作用域内会前置, 函数表达式不会前置，所以函数表达式需要放在调用的前面，后一个函数调用的时候还未被定义，所以出现报错。

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

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

作用域链查找过程伪代码：

globalContext= {
  AO: {
    x: 10
    foo: funtion
    bar: funtion
         }，
        Scope: null
}
//声明 foo 时 得到下面
foo.[[scope]] = globalContext.AO
//声明 bar 时 得到下面
bar.[[scope]] = globalContext.AO
当调用 bar() 时， 进入 bar 的执行上下文
barContext = {
  AO: {
    x: 30
  },
  Scope: bar.[[scope]] //globalContext.AO
}
当调用 foo() 时，先从 bar 执行上下文中的 AO里找，找不到再从 bar 的 [[scope]]里找到后即调用
当调用 foo() 时，进入 foo 的执行上下文
fooContext = {
  AO: {},
  Scope: foo.[[scope]] // globalContext.AO
}
所以 console.log(x)是 10

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
当调用 bar() 时， 进入 bar 的执行上下文
barContext = {
  AO: {
    x: 30,
    foo: function
  },
  Scope: bar.[[scope]] //globalContext.AO
}
//在 bar 的执行上下文里声明 foo 时 得到下面
foo.[[scope]] = barContext.AO
当调用 foo() 时，先从 bar 执行上下文中的 AO里找，找到后即调用
当调用 foo() 时，进入 foo 的执行上下文
fooContext = {
  AO: {},
  Scope: foo.[[scope]] // barContext.AO
}
所以 console.log(x)是 30

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

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

作用域链查找过程伪代码：

globalContext = {
  AO: {
    x: 10,
    bar: function
  },
  Scope: null
}
//声明bar时
bar.[[scope]] = globalContext.AO
//调用bar时，进入bar的执行上下文
barContext = {
  AO: {
    x: 30,
    function//立即执行函数表达式
  },
  Scope: bar.[[scope]] // globalContext.AO
//执行立即执行函数
functionContext = {
  AO:{ }
},
Scope: function.[[scope]] //barContext.AO
所以console.log(x)为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,
    fn: function,
    fn3: function
  },
  Scope: null
}
//声明fn时
fn.[[scope]] = globalContext.AO
//声明fn3时
fn3.[[scope]] = globalContext.AO
调用fn，进入fn的执行上下文
fnContext = {
  AO: {
    a: 5
    fn2: function
  },
  Scope: fn.[[scope]] //globalContext.AO
}
//调用fn3，此时在fn的执行上下文的AO中找不到fn3，于是在fn的scope里找，找到后即调用
fn3Context = {
  AO: {
    a: 200
  },
  Scope: fn3.[[scope]] //globalContext.AO
}
//调用fn2，在bar的执行上下文AO中可以找到fn2，直接调用
fn2Context = {
AO: {
    a: 20
  },
  Scope: fn2.[[scope]] //fnContext.AO
}
//输出结果如下：
//调用fn
console.log(a) // a的值在fnContext.AO中，此时a变量声明了但未定义，所以输出undefined。
var a = 5 // a被赋值为5
console.log(a) // 输出5
a++ // fnContext.AO中a的值变为6
//调用fn3
fn3() //此时a的值为globalContext.AO里的a，即console.log(a) 输出1
a = 200 // globalContext.AO里的a值变为200
//调用fn2
fn2() //此时a的值为fnContext.AO里的a，即console.log(a) 输出6
a = 20 // fnContext.AO里的a变为20
console.log(a) //输出20
//fn调用结束，此时 globalContext.AO里的a值为200
console.log(a) // 输出200
// 输出顺序为：undefined, 5, 1, 6, 20, 200

JS的函数和作用域

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

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

3. arguments 是什么

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

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

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

7. 以下代码输出什么

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

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

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

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

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

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

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

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

首页投稿（暂停使用，暂停投稿）

JS的函数和作用域

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

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

3. arguments 是什么

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

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

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

7. 以下代码输出什么

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

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

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

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

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

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

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

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

首页投稿（暂停使用，暂停投稿）

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

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