JS函数与作用域

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

  • 使用函数声明时,在执行js语句的时候,会先把函数提升到js语句的顶部,所以即使函数调用出现在函数声明的前面,也不会出现报错
  • 使用函数表达式声明函数时,在执行js语句的时候,使用 var 声明的变量会提升到js语句的顶部,但此时还没有将函数赋予此变量。如果函数调用出现在函数表达式的前面,会出现报错

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

  • 变量的声明前置是指使用var声明一个变量的时候,编译时会把var声明提升到顶部,并不是和赋值同步,此时变量未赋值
  • 函数的声明前置是指使用function声明一个函数时,同样会把函数提升到js顶部,此时在调用语句在声明函数语句之前,也不会报错。

arguments 是什么

arguments是一个类数组对象,用于获取函数的所有参数,可以通过索引获取函数传入的参数,如arguments[i],i就是索引

函数的"重载"怎样实现

  • 在强类型语言中,如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');

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

  • 立即执行表达式如:
var a = (function () {
  return 1;
})();
console.log(a); // 1
  • 其作用是隔离作用域,使被执行的函数内部的变量不会污染到外部,即外部不能访问函数内部的变量。

求n!,用递归来实现

function math(num) {
    if(num <= 0) {
        return 1;
    }
    return num * math(num - 1);
}

f(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, '男');
getInfo('小谷', 3);
getInfo('男');

输出从上到下分别为

name:  饥人谷
age:  2
sex:  男
['饥人谷', 2, '男']
name vallery
name:  小谷
age:  3
sex:  undefined
['小谷', 3]
name vallery
name:  男
age: undefined
sex:  undefined
['男']
name vallery

写一个函数,返回参数的平方和?

   function sumOfSquares(){
       var sum = 0;
        for(var i = 0; i < arguments.length; i++) {
           sum += arguments[i] * arguments[i];
        }
        console.log(sum)
   }
   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   //  打印在赋值之前,a变量提升为赋值
Uncaught ReferenceError: b is not defined //b变量不存在,未声明

如下代码的输出?为什么

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

输出为

hello  world    // function提升到顶部,传入参数进行输出
VM202:2 Uncaught TypeError: sayAge is not a function    var 声明的变量提升,而右边的函数不提升,输出时函数还未赋值给变量

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

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
}

barContext = {
    AO = {
        x: 30
        f00: function
    }
    Scope: bar.[[scope]] = globalContext.AO
}

fooContext = {
    AO = {}
    Scope:foo.[[scope]] = 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
}
barContext = {
    AO: {
    x: 30,
    foo: function () {}
  },
    Scope: globalContext.AO
}
fooContext = {
    AO: {},
    Scope: barContext.AO
}

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

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

输出

30      //输出

//  查找伪代码

globalContext = {
    AO: {
    x: 10,
    bar: function () {}
  },
    Scope: null
}
barContext = {
  AO: {
    x: 30,
    foo: function () {}
  },
  Scope: globalContext.AO
}
fooContext = {
  AO: {},
  Scope: barContext.AO
}

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

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)

输出

5
1
6
20
200

查找伪代码

globalContext = {
    AO: {
    a: 1,
    fn: function () {},
    fn3: function () {}
  },
    Scope:null
}
fnContext = {
    AO: {
    a: 5,
    fn2: function () {}
  },
    Scope: globalContext.AO
}
fn3Context = {
  AO: {},
  Scope: globalContext.AO
}
fn2Context = {
  AO: {},
  Scope: fnContext.AO
}

你可能感兴趣的:(JS函数与作用域)