函数与作用域

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

  • 函数声明
    使用function关键字声明一个函数
function sayHello {
   console.log('hello')
}
  • 函数表达式
var sayHello = function (){
   console.log('hello')
}
  • 使用函数表达式来声明函数时,声明必须写在调用的前面;他们的作用域链不相同,函数表达式是全局作用域

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

代码在电脑中编译的过程是:
1.先检测整段代码中变量的声明和函数声明语句,执行这些语句
2.然后按照从上到的顺序执行函数调用语句或其他语句
3.最后执行变量的赋值
上述过程中,第一步叫做变量和函数的声明前置

arguments 是什么

arguments对象用于获取到该函数的所有传入参数,arguments对象是所有函数中可用的局部变量。可以使用arguments对象在函数中引用函数的参数。此对象包含传递给函数的每个参数的条目,第一个条目的索引从0开始。

函数的"重载"怎样实现

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

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

  • 立即执行函数可以在函数声明的同时立即执行,从而隔离作用域,防止函数内变量污染全局
(function(){
  var a  = 1;
})()
console.log(a); //undefined

其他写法

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

求n!,用递归来实现

function factor(n){
   if(n === 1) {
     return 1
   }else if(n === 0){ 
     return 1
   }
   return n * factor(n-1)
}

以下代码输出什么?

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

输出:

getInfo('饥人谷', 2, '男');
getInfo('小谷', 3);
getInfo('男');
name: 饥人谷
age: 2
sex: 男
(3) ["饥人谷", 2, "男", callee: function, Symbol(Symbol.iterator): function]
name valley
name: 小谷
age: 3
sex: undefined
(2) ["小谷", 3, callee: function, Symbol(Symbol.iterator): function]
name valley
name: 男
age: undefined
sex: undefined
["男", callee: function, Symbol(Symbol.iterator): function]
name valley

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

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

如下代码的输出?为什么

console.log(a);//‘undefind’,在输出之前 a未被赋值
var a = 1;
console.log(b);//‘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
Uncaught TypeError: sayAge is not a function//函数表达式不会像函数声明一样
被前置,所以执行到sayAge(10);这一句时函数sayAge未被声明,此时它还不是一个函数

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

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

barContext = {
   AO: {
      x:30
   }
   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
}
bar.[[scope]] = globalContext.AO

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

fooContext = {
   AO:{}
   Scope:foo.[[scope]] = barComtext.AO
}

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

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

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

functionContext = {
   AO:{}
   Scope:function.[[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)

输出:

undefine
5
1
6
20
200

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

globalContext = {
   AO:{
      a:1
      fn:function
      fn3:function
   }
Scope:null
}
fn.[[scope]] = globalContext.AO

fnContext = {
   AO:{
      a:undefind
      fn3:function
      fn2:function
   }
   Scope:globalContext.AO
}
fn3.[[scope]] = fnContext.AO
fn2.[[scope]] = fnContext.AO
console.log(a)/*在a声明之前打印,undefind*/

fnContext = {
   AO:{
      a:5
      fn3:function
      fn2:function
   }
   Scope:globalContext.AO
}
fn3.[[scope]] = fnContext.AO
fn2.[[scope]] = fnContext.AO
console.log(a)/*在fn的AO内找a的值,此时a已被赋值5,输出5*/

fn3Context = {
   AO:{
      a:undefined
      Scope:globalContext.AO
   }
}
console.log(a)/*在fn3的AO内找a的值,此时a未被声明,于是在全局Context的AO内找
                a的值,此时a已被赋值1,输出1*/

fn2Context = {
   a:undefined
   Scope:fnContext.AO
}
console.log(a)/*在fn2的AO内找a的值,此时a未被声明,于是在fn的AO中找a的值,此时
                a为6,输出6*/

console.log(a)/*在fn2的AO内找a的值,此时a已被赋值20,输出20*/

console.log(a)/*a被赋值200,输出200*/


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