美文网首页
Javascript 05 函数和作用域

Javascript 05 函数和作用域

作者: 红豆丁244 | 来源:发表于2018-09-02 01:12 被阅读0次

JavaScript函数是指一个特定代码块,可能包含多条语句,可以通过名字来供其它语句调用以执行函数包含的代码语句。

比如我们有一个特定的功能需要三条语句实现

statement1;
statement2;
statement3;

那么每次想实现这个功能的时候就需要写这三句话,很麻烦,我们可以把这三条语句打包为一个函数

function doSomething(){
    statement1;
    statement2;
    statement3;
}

这样每次想实现功能的时候我们就调用一下函数就可以了,调用函数通过函数名称()的形式调用

doSomething();

声明函数

函数声明

function printName(){
    console.log('饥人谷')
}

printName()

函数表达式

var printName = function(){
    console.log('饥人谷')
}
printName()

参数

function printName(name){
    console.log(name)
}

printName('hunger')
printName('valley)

函数在定义的时候可以写多个参数

function printPersonInfo(name, age, sex){
    console.log(name)
    console.log(age)
    console.log(sex)
}

arguments

在函数内部,你可以使用arguments对象获取到该函数的所有传入参数

function printPersonInfo(name, age, sex){
    console.log(name)
    console.log(age)
    console.log(sex)
    console.log(arguments[0])
    console.log(arguments.length)
    console.log(arguments[1] === age)
}
printPersonInfo('饥人谷', 3, 'male')

输出结果为

饥人谷
3
male
饥人谷
3
true

重载

重载是很多面向对象语言实现多态的手段之一,在静态语言中确定一个函数的手段是靠方法签名——函数名+参数列表,也就是说相同名字的函数参数个数不同或者顺序不同都被认为是不同的函数,称为函数重载

在JavaScript中没有函数重载的概念,函数通过名字确定唯一性,参数不同也被认为是相同的函数,后面的覆盖前面的,这是不是意味着JavaScript不能通过重载功能实现一个函数,参数不同功能不同呢?

在JavaScript中,函数调用没必要把所有参数都传入,只要你函数体内做好处理就行,但前提是传的参数永远被当做前几个

function printPeopleInfo(name, age, sex){
    if(name){
        console.log(name);
    }

    if(age){
        console.log(age);
    }

    if(sex){
        console.log(sex);
    }
}


printPeopleInfo('hunger', 3);
printPeopleInfo('hunger', 3, 'male');

返回值

有时候我们希望在函数执行后给我们一个反馈,就像表达式一样,给我们个结果,我们可以通过return来实现

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

var result = fn(2, 3);
console.log(result);//7

这样我们就能拿到函数希望给我的反馈了,调用return后,函数立即中断并返回结果,即使后面还有语句也不再执行

其实我们不写return语句,函数也会默认给我们返回undefined

递归

简单来说就是自己调用自己,递归需要设置结束条件

function factorial(n){
    if(n === 1){
        return 1
    }
    return n * factorial(n-1)
}
factorial(3)  //6

声明提前

和变量的声明会前置一样,函数声明同样会前置,如果我们使用函数表达式那么规则和变量一样

console.log(fn) //undefined

var fn = function(){}

如果我们使用函数声明的方式,那么即使函数写在最后也可以在前面语句调用

fn() // "1"

function fn(){
    console.log('1')
}

命名冲突

当在同一个作用域内定义了名字相同的变量和方法的话,会根据前置顺序产生覆盖

    var fn = 3;
    function fn(){}

    console.log(fn); // 3

相当于

var fn
function fn(){}  //覆盖上面的

fn = 3  //重新赋值
console.log(fn)

当函数执行有命名冲突的时候,可以认为在还是内部一开始有隐藏的声明变量这个操作

function fn(fn){
  console.log(fn);

  var fn = 3;
  console.log(fn);
}


fn(10) //10 3

/*执行时等价于 function fn(){ var fn fn = 10 console.log(fn)

fn = 3
console.log(fn);
}

*/

作用域链

先看面试题
题目1

var a = 1
function fn1(){
  function fn2(){
    console.log(a)
  }
  function fn3(){
    var a = 4
    fn2()
  }
  var a = 2
  return fn3
}
var fn = fn1()
fn() //2

题目2

var a = 1
function fn1(){
  function fn3(){
    var a = 4
    fn2()
  }
  var a = 2
  return fn3
}
function fn2(){
  console.log(a)
}
var fn = fn1()
fn() //1

题目3

var a = 1
function fn1(){
  function fn3(){
    function fn2(){
      console.log(a)
    }
    var a

    fn2()
    a = 4
  }
  var a = 2
  return fn3
}
var fn = fn1()
fn() //undefined

解密

  1. 函数在执行的过程中,先从自己内部找变量
  2. 如果找不到,再从创建当前函数所在的作用域去找, 以此往上
  3. 注意找的是变量的当前的状态

相关文章

  • 07-JavaScript作用域和预解析

    JavaScript作用域 JavaScript中有全局作用域和局部作用域 相同作用域内不能有同名的变量和函数 不...

  • JavaScript作用域分类

    JavaScript作用域分类全局作用域局部作用域函数作用域块级作用域catchwithlet 和 const 什...

  • 一网打尽 JavaScript 的作用域

    JavaScript 的作用域包括:模块作用域,函数作用域,块作用域,词法作用域和全局作用域。 全局作用域 在任何...

  • JavaScript函数作用域和声明提前

    函数作用域 JavaScript 中没有块级作用域,JavaScript 取而代之地使用了函数作用域。变量在声明它...

  • JavaScript作用域学习笔记

    @(JS技巧)[JavaScript, 作用域] JavaScript作用域学习笔记 概念: 作用域就是变量与函数...

  • JavaScript中的闭包

    理解闭包,首先必须理解变量作用域。前面提到,JavaScript 有两种作用域:全局作用域和函数作用域。函数内部可...

  • 局部作用域

    作用域 在 JavaScript 中, 对象和函数同样也是变量。 在 JavaScript 中, 作用域为可访问变...

  • 闭包

    javaScript 有两种作用域:全局作用域和函数作用域(es6加上块级作用域)。函数内部可以直接读取全局变量,...

  • js 变量作用域问题 以及 let

    JavaScript中有以下两种作用域 全局作用域函数作用域全局作用域是函数之外(最外层代码)的作用域。在函数之外...

  • JavaScript 作用域和作用域链

    JavaScript 作用域 作用域就是变量与函数的可访问范围。在JavaScript中,变量的作用域有全局作用域...

网友评论

      本文标题:Javascript 05 函数和作用域

      本文链接:https://www.haomeiwen.com/subject/ncepwftx.html