函数与作用域

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

使用function关键字可以声明一个函数,函数声明不必放在调用的前面
函数表达式先声明赋值,得到这个变量,再调用,声明必须放到调用的前面
函数表达式就是把函数这个指针赋值给这个变量,函数表达式本质上是个表达式

//函数声明
function SayHello() { 
   console.log(' Hello '); 
} 
//函数表达式 
var SayHello = function () { 
    console.log(' Hello '); 
 }

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

定义: 函数声明和变量声明总是被JavaScript解释器隐式地提升(hoist)到包含他们的作用域的最顶端。

  • 变量的声明前置
var x = 'good';
(function () {
   console.log(x);
   var x = 10; // 在这里添加一行对x的定义
})();
//输出结果undefined

js在解析这段代码时,会对变量声明做一个调整,变量提升的定义里说到变量的声明会被提升到其作用域最前端。 也就是说var x = 10 被隐式的做出了调整,var x实际上被提升到了这段代码所在作用域(也就是这个匿名函数定义的作用域)的最前面,那就相当于这样一段代码

var x = 'good';
(function () {
   var x; // 变量声明被隐式提升
   console.log(x);
   x = 10; 
})();

这就表示x 在匿名函数定义的作用域中声明以后覆盖了全局作用域中的 x ,而这个 x 在这样一段代码里仅仅是声明有这个 x ,还没赋值,就被 console.log 掉了,自然输出结果是 undefined

  • 函数的声明前置
func();
function func() {
    console.log('nice');
}

这段代码中函数的调用是在函数的定义之前。如果按照javascript的规矩,其代码是按其先后顺序一行一行的执行的话,那么在 func()做出函数调用的动作的时候,其前面是没有任何关于func 这一函数的定义的。 这里之所以能正确调用这个 func 函数,也是由于在整个javascript代码执行前,其中的函数声明被提升到了其作用域的最前面,这样的话在调用func() 函数的时候自然能正确执行而不会出错。

arguments 是什么

由于JavaScript允许函数有不定数目的参数,所以我们需要一种机制,可以在函数体内部读取所有参数。这就是arguments对象的由来。
arguments对象包含了函数运行时的所有参数,arguments[0]就是第一个参数,arguments[1]就是第二个参数,以此类推。这个对象只有在函数体内部,才可以使用。

var f = function(one) {
  console.log(arguments[0]);
  console.log(arguments[1]);
  console.log(arguments[2]);
}

f(1, 2, 3)
// 1
// 2
// 3

函数的"重载"怎样实现

在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);
作用:隔离作用域

求n!,用递归来实现

function factor(n){
  if(n<0){
   return "error"
}
  else if(n === 1 || n===0) {
    return 1
  }
  return n * factor(n-1)
}
factor(n)

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, '男');
/*输出:
name: 饥人谷
age: 2
sex: 男
(3) ["饥人谷", 2, "男", callee: function, Symbol(Symbol.iterator): function]
name valley
*/
getInfo('小谷', 3);
/*输出:name: 小谷
 age: 3
 sex: undefined
 (2) ["小谷", 3, callee: function, Symbol(Symbol.iterator): function]
name valley
*/
getInfo('男');
/*输出:
name: 男
age: undefined
sex: undefined
 ["男", callee: function, Symbol(Symbol.iterator): function]
name valley
*/

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

function sumOfSquares(){
var sum = 0;
    for(var i=0 ; i < arguments.length ;i++){
      sum = arguments[i]*arguments[i] + sum;
    }
    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);//输出undefined 变量在当前作用域下被提升了,但没有赋值 
    var a = 1;
    console.log(b);//报错,因为没有声明变量,也没有赋值

10.以下代码输出什么,为什么?

sayName('world');
    sayAge(10);
    function sayName(name){
        console.log('hello ', name);//hello  world
    }
    var sayAge = function(age){
        console.log(age);//报错sayAge is not a function  sayAge是函数表达式,调用在定义之前就会报错
    };

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

var x = 10
bar() 
function foo() {
  console.log(x)
}
function bar(){
  var x = 30
  foo()
}//输出 10
1.globalContext={
    AO:{
      x:10
      bar()
    },Scope:null
}
foo.[[scope]]=globalContext.AO
bar.[[scope]]=globalContext.AO
2.调用bar()进入bar的执行上下文
barContext={
    AO:{
         x:30
    }, Scope:bar.[[scope]]=globalcontext.AO
}
3.调用foo()
fooContext={
    AO:{}
   Scope:foo.[[scope]]=globalContext    
}

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

var x = 10;
bar() 
function bar(){
  var x = 30;
  function foo(){
    console.log(x) // 30
  }
  foo();
}   
1.globalContext={
     AO:{
        X:10
        bar:function()
    } ,Scope: null
}
bar.[[scope]]=globalContext.AO
2.调用bar()
barContext={
     AO:{
        x:30
        foo:function()
    },Scope:bar.[[scope]]=globalContext
}
foo.[[scope]]=barContext.AO
3.调用foo()
fooContext={
    AO:{}
    ,Scope:foo.[[scope]]=barContext.AO
}

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

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.调用bar()
barContext={
    AO:{
        x:30
        function
    },Scope:bar.[[scope]]=globalContext.AO
}
function.[[scope]]=barContext.AO
3.调用立即执行函数
functionContext={
    AO:{
    },Scope:function.[[scope]]=barContext.AO
}

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

var a = 1;

function fn(){
  console.log(a) //undefined
  var a = 5
  console.log(a)//5
  a++
  var a
  fn3()
  fn2()
  console.log(a)//20

  function fn2(){
    console.log(a)//6
    a = 20
  }
}

function fn3(){
  console.log(a)//1
  a = 200
}

fn()
console.log(a)//200
1.globalContext={
AO:{
x:1
fn:function
fn3:function
},Scope:null
}
fn.[[scope]]=globalContext.AO
fn3[[scope]]=globalContext.AO
2.调用fn()
fnContext={
AO:{
a:5
fn2:function
},Scope:fn.[[scope]]=globalContext.AO
}
fn2.[[scope]]=fnContext.AO
3.调用fn3()
fn3Context={
AO:{}
,Scope:fn3[[scope]]=globalContext.AO
}
4.调用fn2()
fn2Context={
AO:{}
,Scope:fn2.[[scope]]=fnContext.AO
}
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 219,701评论 6 508
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 93,649评论 3 396
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 166,037评论 0 356
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 58,994评论 1 295
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 68,018评论 6 395
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 51,796评论 1 308
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 40,481评论 3 420
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 39,370评论 0 276
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 45,868评论 1 319
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 38,014评论 3 338
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 40,153评论 1 352
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,832评论 5 346
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 41,494评论 3 331
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 32,039评论 0 22
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 33,156评论 1 272
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 48,437评论 3 373
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 45,131评论 2 356

推荐阅读更多精彩内容

  • 函数声明和函数表达式有什么区别 函数声明语法:function functionName(arg0,arg1,ar...
    _Dot912阅读 571评论 0 3
  • 声明前置和作用域也是JS 部分面试常考点 1.函数声明和函数表达式有什么区别 函数声明:使用function关键字...
    湖衣阅读 202评论 0 0
  • 1.函数声明和函数表达式有什么区别 函数就是一段可以反复调用的代码块。函数还能接受输入的参数,不同的参数会返回不同...
    徐国军_plus阅读 476评论 0 0
  • 函数声明和函数表达式有什么区别? 函数声明和函数表达式是EMACScript规定的两种不同的声明函数的方法。1.函...
    LeeoZz阅读 350评论 0 1
  • 最近日子朋友老是问我为什么现在单着,为什么不找一个呢。当时我没有作声,可心底却说 可以能是没有遇到合适的。“合适”...
    我不是菇凉阅读 236评论 0 0