web前端-js小记(3)-函数及作用域

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

  1. 函数声明
function hello(){
  console.log("hello");
}
hello();
  1. 函数表达式
var hello=function(){
  console.log("hello");
}
hello();

区别:函数声明不用把声明放到函数调用的前面,函数表达式其实就是创建一个匿名的函数声明并赋值给一个变量,虽然省略了函数名,但是一定要把函数表达式放到函数调用前面。

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

在同一个作用域下,var 声明的变量和 function 声明的函数会前置,JavaScript 的解析器先统一把它们全部按顺序放在作用域的最前面,然后才开始执行后面的语句。在 JavaScript 中,只有全局作用域和函数作用域,没有块作用域。举例如下:

console.log(a);
a=1;
var a;     //结果为undefined,不会报错,虽然a变量声明在最后,但是实际是变量的声明前置了,所以当console.log(a)的时候已经声明了变量a

hello();
funciton hello(){
  console.log("hello");
}                 //函数声明虽然写在函数调用后面,但是是先进行函数声明,在进行调用函数,但是,使用函数表达式则会报错。

3. arguments 是什么

arguments其实是函数的一个内置参数的数组对象,通过arguments[1、2、3]等...我门可以获取到相应的传入参数。

var f = function(one) {
 for(var i=0;i<arguments.length;i++){
  console.log(arguments[i]);
}
}
f(1, 2, 3)

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

  1. 函数重载:相同名字的函数参数个数不同或者顺序不同都被认为是不同的函数,称为函数重载。
    在JavaScript中没有函数重载的概念,函数通过名字确定唯一性,参数不同也被认为是相同的函数,后面的覆盖前面的,但可以在函数体针对不同的参数调用执行相应的逻辑。
  2. 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');

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

立即执行函数表达式:(Immediately-Invoked Function Expression),简称IIFE。表示定义函数之后,立即调用该函数。

  1. 书写方法:
(function(){})();
或者
(function(){}());
  1. why:
    JavaScript引擎规定,如果function关键字出现在行首,一律解释成语句。因此,如果JavaScript引擎看到行首是function关键字之后,认为这一段都是函数的定义,所以在function前面加上括号,括号会把function(){}强制转化为表达式,而不是语句,就会立即执行。
  2. 作用:
    通常情况下,只对匿名函数使用这种“立即执行的函数表达式”。它的目的有两个:一是不必为函数命名,避免了污染全局变量;二是IIFE内部形成了一个单独的作用域,可以封装一些外部无法读取的私有变量。

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

function fn(n){
if(n<0) return;
  if(n===1 || n===0) return 1;
  return n*fn(n-1);
};

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: 男 ["饥人谷", 2, "男", callee: function, Symbol(Symbol.iterator): function] name valley
getInfo('小谷', 3);  //name: 小谷 age: 3 sex: undefined ["小谷", 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 result=0;
  for(var i=0;i<arguments.length;i++){
  result+=arguments[i]*arguments[i];
}
return result;
   }
   var result = sumOfSquares(2,3,4)
   var result2 = sumOfSquares(1,3)
   console.log(result)  //29
   console.log(result2)  //10

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

console.log(a);              //undefined,变量声明前置,所以未报错,但还未赋值,所以undefined
    var a = 1;
    console.log(b);     //b变量未声明,所以报错

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

sayName('world');                                    //hello world,函数声明前置,所以显示成功
    sayAge(10);                                    //函数表达式声明不前置,函数调用时函数未声明,所以报错                                
    function sayName(name){
        console.log('hello ', name);
    }
    var sayAge = function(age){
        console.log(age);
    };                                                 

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

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

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

var x = 10;
bar() 
function bar(){
  var x = 30;
  function foo(){
    console.log(x) 
  }
  foo();
}
/* 输出: 30
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.AO
}
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)
  })()
}
/*输出: 30
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. 调用function()
functionContext={
  AO:{}
  Scope:function().[[scope]]=barContext.AO
}
*/

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)
/*输出: undefined 5 1 6 20 200
1.
globalContext={
  AO:{
    a:200,fn:function,fn3:function
  }
Scope: null
}
fn.[[scope]]=globalContext.AO
fn3.[[scope]]=globalContext.AO
2. 调用fn
fnContext={
  AO:{
  a:20, 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
}
*/

(mission 3)

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

推荐阅读更多精彩内容

  • 函数声明和函数表达式有什么区别 (*)解析器会率先读取函数声明,并使其在执行任何代码之前可以访问;函数表达式则必须...
    coolheadedY阅读 383评论 0 1
  • 函数声明和函数表达式有什么区别? 函数声明和函数表达式是EMACScript规定的两种不同的声明函数的方法。1.函...
    LeeoZz阅读 341评论 0 1
  • 1.函数声明和函数表达式有什么区别 (*) 区别: 函数声明后面的分号可加可不加,不加也不影响接下来语句的执行,但...
    Sheldon_Yee阅读 393评论 0 1
  • 产生死锁的4个必要条件:1.互斥条件2.请求和保持条件3.不可抢占4.循环等待条件预防死锁主要分为三种:1.破坏请...
    a4e794140953阅读 411评论 0 0
  • 新启点 新希望 新的征程 有我们一路相伴
    初学者求进者阅读 165评论 0 0