函数与作用域

函数与作用域

函数声明和函数表达式有什么区别
  • 函数声明使用function关键字可以声明一个函数(声明不必放到调用的前面)
  //函数声明
  function sayHello(){
    console.log('hello')
  }
  //函数调用
  sayHello()
  • 函数表达式(声明必须放到调用的前面)
  var sayHello = function(){
    console.log('hello');
  }
  sayHello()

两者最大的区别是:函数表达式(function expression)非常类似于函数声明(function statement)(详情查看函数声明),并且拥有几乎相同的语法。函数表达式与函数声明的最主要区别是函数名称(function name),在函数表达式中可忽略它,从而创建匿名函数(anonymous functions)。一个函数表达式可以被用作一个IIFE(即时调用的函数表达式),它一旦定义就运行
参考

什么是变量的声明前置?什么是函数的声明前置
  • 变量的声明前置:JavaScript引擎的工作方式是,先解析代码,获取所有被声明的变量,然后再一行一行地运行。这造成的结果,就是所有的变量的声明语句,都会被提升到代码的头部,然后给他初始值undefined,然后才逐句执行程序,这就叫做“变量提升”,也即“变量的声明前置”
  • 函数的声明前置:函数的声明前置就是把整个函数提升到当前作用域的最前面(位于前置的变量声明后面)
arguments 是什么
  • 在函数内部,你可以使用arguments对象获取到该函数的所有传入参数
 function printPersonInfo(name, age, sex){
    console.log(name);
    console.log(age);
    console.log(sex);
    console.log(arguments);
  }
函数的"重载"怎样实现
  • 在 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');
立即执行函数表达式是什么?有什么作用
(function(){
  var a  = 1;
})()
console.log(a); //undefined
( function (){
  var a  = 1;
} () )
console.log(a);
  • 作用:
    1. 不必为函数命名,避免了污染全局变量
    2. 隔离作用域,封装一些外部无法读取的私有变量
求n!,用递归来实现
function factor(n){
    if(n < 0){
      break;
    }
    else if ( n == 0 || n==1 ){
     return 1;
     }else {
        return n * factor(n-1)
     }  
  }
factor(n)
以下代码输出什么?
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(){
  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

如下代码的输出?为什么
console.log(a);
var a = 1;
console.log(b); //  输出为"undefined"; 报错;因为a有声明但是在console.log之前无值,b则既无声明也无值所以会报错
如下代码的输出?为什么
sayName('world');
    sayAge(10);
    function sayName(name){
        console.log('hello ', name);
    }
    var sayAge = function(age){
        console.log(age);
    }; //输出为''hello world",因为sayName函数声明前置之后,参数为World所以输出为''hello world";之后会报错,因为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 时 得到下面
foo.[[scope]] = globalContext.AO
//声明 bar 时 得到下面
bar.[[scope]] = globalContext.AO
2.进入bar作用域
barContext = {
      AO:{
          x:30
    },
    Scope: bar.[[scope]] //globalContext.AO
}
3.进入foo作用域
fooContext = {
      AO:{},                                
foo.[[scope]] = globalContext.AO
}
*/
输出结果为"10"
如下代码输出什么? 写出作用域链查找过程伪代码
var x = 10;
bar() 
function bar(){
  var x = 30;
  function foo(){
    console.log(x) 
  }
  foo();
}
/*
1.进入全局作用域
globalContext = {
      AO:{
            X:10
            bar: function
      },
 Scope:null
}
//声明 bar 时 得到下面
bar.[[scope]] = globalContext.AO
2.进入bar作用域
barContext = {
      AO:{
            X:30
            foo:function
      },
Scope:bar.[[scope]] = globalContext.AO
}
3.进入foo作用域
fooContext = {
        AO:{}
  Scope:foo.[[scope]] = barContext.AO
},
//声明 foo时 得到下面
foo.[[scope]] = barContext.AO
*/  
所以输出为"30"
以下代码输出什么? 写出作用域链的查找过程伪代码
var x = 10;
bar() 
function bar(){
  var x = 30;
  (function (){
    console.log(x)
  })()
}
/*
1.进入全局作用域
globalContext = {
      AO:{
        X:10
        bar:function
    },
Scope:null
}
//声明 bar时 得到下面
bar.[[scope]] = globalContext.AO
2.进入bar作用域
barContext = {
        AO:{
              X:30
              function: function
          },
Scope:bar.[[scope]] = globalContext.AO
}
//声明 function时 得到下面
function.[[scope]] = barContext.AO
3.进入function作用域
functionContext = {
      AO:{},
}
Scope:function.[[scope]] = barContext.AO
*/
所以输出为"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/200         //a值的变化
                fn:function
                fn3:function
            }
        Scope:null
    }
    //声明 fn时 得到下面
    fn.[[scope]] = globalContext.AO
    //声明 fn时 得到下面
    fn3.[[scope]] = globalContext.AO
    2.进入fn作用域
    fnContext = {
            AO:{
                a:undefined/5/6/20         //a值的变化
                fn2:function
            }
        Scope:fn.[[scope]] = globalContext.AO
    }
    //声明 fn2时 得到下面
    fn2.[[scope]] = fnContext.AO
    3.进入fn3作用域
    fn3Context = {
            AO:{},
        Scope:fn3.[[scope]] = globalContext.AO
    }
    4.进入fn2作用域
    fn2Context = {
            AO:{},
        Scope:fn2.[[scope]] = fnContext.AO
    }
    4.进入fn3作用域
    fn3Context = {
            AO:{
                a:200
            }
        Scope:Scope:fn3.[[scope]] = globalContext.AO
    }
所以输出结果为(undefined 5 1 6 20 200)
*/
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 214,776评论 6 496
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 91,527评论 3 389
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 160,361评论 0 350
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 57,430评论 1 288
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 66,511评论 6 386
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 50,544评论 1 293
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,561评论 3 414
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 38,315评论 0 270
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,763评论 1 307
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,070评论 2 330
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,235评论 1 343
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,911评论 5 338
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,554评论 3 322
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,173评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,424评论 1 268
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 47,106评论 2 365
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,103评论 2 352

推荐阅读更多精彩内容

  • 函数声明和函数表达式有什么区别 函数声明语法:function functionName(arg0,arg1,ar...
    _Dot912阅读 571评论 0 3
  • 1.函数声明和函数表达式有什么区别 函数就是一段可以反复调用的代码块。函数还能接受输入的参数,不同的参数会返回不同...
    徐国军_plus阅读 473评论 0 0
  • 1.函数声明和函数表达式有什么区别 函数声明 代码执行时函数声明会被提升到最前执行,所以函数的调用与函数声明的顺序...
    Feiyu_有猫病阅读 373评论 0 0
  • 函数声明和函数表达式有什么区别 JavaScript 中需要创建函数的话,有两种方法:函数声明、函数表达式,各自写...
    萧雪圣阅读 952评论 2 2
  • 1.函数声明和函数表达式有什么区别 函数声明使用function关键字进行声明,声明不必放到调用的前面。因为函数可...
    山门龙龙阅读 315评论 0 0