js函数与作用域

函数是什么

JavaScript函数是指一个特定代码块,可能包含多条语句,可以通过名字来供其它语句调用以执行。
函数名:动宾结构,驼峰写法

声明函数

ECMAScript规定了三种声明函数方式

  1. 构造函数(不推荐使用)
    函数也是对象的一种,我们可以通过其构造函数,使用new来创建一个函数对象
var sayHello = new Function("console.log('hello world');");
  1. 函数声明
    使用function关键字可以声明一个函数
  //函数声明
  function sayHello(){
    console.log('hello')
  }
  //函数调用
  sayHello()

声明不必放到调用的前面(但不要放在其他函数里面)

  1. 函数表达式(看作赋值过程)
  var sayHello = function(){
    console.log('hello');
  }

  sayHello()

声明必须放到调用的前面

多个参数

  function printInfo(name, age, sex){
    console.log(name);
    console.log(age);
    console.log(sex);
    console.log(arguments);
//在函数内部,你可以使用arguments对象获取到该函数的所有传入参数
//arguments是类数组对象。可以通过下标的方式arguments[]获取到对应的传入参数,还有length属性,但它本身不是数组,没有数组的一些特性
  }
  printInfo('饥人谷', 2, 'boy') //函数调用时实参和形参是一一对应的

JS 没有重载,如何实现重载功能

在其他语言中,通过重载实现相同的函数名,输入不同类型的实参,去调用不同类型的形参。
**在 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');

返回值

有时候我们希望在函数执行后得到一个结果供别人使用,可以通过return来实现

  function sum(a, b){
    a++;
    b++;
    return a + b;
  }

  var result = sum(2, 3);
  console.log(result);

返回值的注意点
1.如果不写return语句,函数也会默认给我们返回undefined
2.函数在执行过程中,只要遇到return就会立即结束退出函数体

function fn(a){
  if(a < 0){
    return;  
  }
  //下面没用 else ,但效果一样
  a++;
  return a + a;
}

3.函数的返回值和 console.log()是两个不同的东西,千万不要这样

function getAge(age){
  return console.log(age);//错误的写法,console.log()作为一个函数,整体的结果永远都是undefined ,表示在控制台输出
}

声明前置

var 和 function 的声明前置(变量提升、函数提升)
在一个作用域下,var 声明的变量和function 声明的函数会前置


console.log(a);     //实际上的执行顺序是var a ;
var a = 3;          //function sayHello(){
console.log(a);     //console.log('hello');      undefined
                    //}
sayHello();        //console.log(a);               3
                    //a = 3;  
function sayHello(){ //sayHello();               hello
  console.log('hello');
}

而写成函数字面量式,则没有function前置

  console.log(fn); //undefined  //实际上的执行顺序是var fn ;
  fn(); //报错                   //console.log(fn);   输出fn就是undefined   
                                // fn(); 将undefined 作为一个函数去执行,自然会报错          
  var fn = function(){}

var XXX =函数表达式 和 var 一个变量没什么区别
故必须遵循先有,再用的思想

函数内部的声明前置(函数内部变量提升)

function fn(){
  console.log(a)  //undefined    //在函数内部,先声明前置var a ;
  var a = 3                      //console.log(a);
  console.log(a)                //a = 3; 
}                               // console.log(a);    
fn()

当命名冲突时
遵循“先 前置,再 覆盖”的思想

 var fn = 3;             //执行顺序:var fn;
 function fn(){}        // function fn(){}      此时fn值为函数
                         // fn=3
 console.log(fn); // 3  //console.log(fn); 输出就是3
function fn(){}        //执行顺序: function fn(){}      
var fn = 3;            // var fn; 如果之前已经声明了,此处没有又没有赋值,只会保持不变,还是function fn(){} 
                         // fn=3
console.log(fn); // 3    //console.log(fn); 输出就是3

参数重名

function fn(fn){          //执行顺序:
  console.log(fn);        // function fn(10){
                          // /*var fn =10 传递实参进函数,隐藏步骤*/
  var fn = 3;             //var fn;
  console.log(fn);        //console.log(fn);   输出10
}                         //fn = 3;
                          // console.log(fn); 输出3
fn(10); //10 3            //}

作用域

在 JS 中只有函数作用域,没有块作用域

function fn(){
  var a =1;

  if(a > 2){
    var b = 3;
  }
  console.log(b);
}

fn(); // undefined

console.log(a); // "ReferenceError: a is not defined

var重复声明一个已经存在的变量,原变量值不变

function fn(){}
var fn
console.log(fn) //fn还是函数 ,结果是输出function fn(){}

var a = 1
var a
var a 
console.log(a)  //输出1

不写var会声明一个全局的变量

这是我们在编程中应该要避免的,即使真的需要全局变量,也应该在最外层作用域使用var声明

 function fn(){
    a = 1;
  }

  fn();

  console.log(a); // 

递归

1.自己调用自己
2.设定终止条件
3.优点: 算法简单
4.缺点: 效率低
求 n 的阶乘 n!

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

factor(5)

立即执行函数表达式

作用:隔离作用域

(function(){
  var a  = 1;    //a
})()
console.log(a); //undefined

立即执行函数表达式的其他写法

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

推荐阅读更多精彩内容

  • 函数声明和函数表达式有什么区别? 函数声明和函数表达式是EMACScript规定的两种不同的声明函数的方法。1.函...
    LeeoZz阅读 346评论 0 1
  • 函数声明和函数表达式有什么区别 JavaScript 中需要创建函数的话,有两种方法:函数声明、函数表达式,各自写...
    萧雪圣阅读 950评论 2 2
  • JavaScript中的函数运行在它们被定义的作用域里,而不是它们被执行的作用域里。 函数声明和函数表达式有什么区...
    毕子歌阅读 386评论 0 0
  • 如题,本文介绍函数与作用域的相关知识 1.函数声明和函数表达式有什么区别 函数声明:使用function关键字可以...
    hahahahaqwert阅读 291评论 0 0
  • 1.函数声明和函数表达式有什么区别 函数声明 代码执行时函数声明会被提升到最前执行,所以函数的调用与函数声明的顺序...
    Feiyu_有猫病阅读 371评论 0 0