四·JS函数

2017-11-13  本文已影响0人  饥人谷_小侯

1.函数是什么?

JavaScript函数是指一个特定代码块,可能包含多条语句,可以通过名字来供其它语句调用以执行函数包含的代码语句。
比如我们有一个特定的功能需要三条语句实现

  statement1;
  statement2;
  statement3;

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

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

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

  doSomething();

注意:一般给函数命名为驼峰式。

2.构造函数

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

1.构造函数

首先函数也是对象的一种,我们可以通过其构造函数,使用new来创建一个函数对象:

  var sayHello = new Function("console.log('hello world');");

不推荐使用

2.函数声明

使用function关键字可以声明一个函数

  //函数声明
  function sayHello(){
    console.log('hello')
  }
  //函数调用
  sayHello()

注意:声明不必放到调用的前面。

3.函数表达式

  var sayHello = function(){
    console.log('hello');
  }
  sayHello()

注意:声明必须放到调用的前面。

3.参数

  function sayHello(name){
    console.log('hello ' +  name)
  }
  sayHello('若愚')
  sayHello('饥人谷')

多个参数

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

  function printInfo(name, age, sex){
    console.log(name);
    console.log(age);
    console.log(sex);
  }
  printInfo('饥人谷', 2, 'boy')

arguments

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

  function printPersonInfo(name, age, sex){
    console.log(name);
    console.log(age);
    console.log(sex);
    console.log(arguments[0]);
  }

4.重载

在其他语言中

int sum(int num1, int num2){
  return num1 + num2;
}
float sum(float num1, float num2){
  return num1 + num2;
}
sum(1, 2);
sum(1.5, 2.4);

在 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.返回值

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

  function sum(a, b){
    a++;
    b++;
    return a + b;
  }
  var result = sum(2, 3);
  conslole.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);
}

6.声明前置

var 和 function 的声明前置:

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

console.log(a); //undefined
var a = 3;
console.log(a); //3
sayHello();
function sayHello(){
  console.log('hello');
}

函数表达式

  console.log(fn); //undefined
  fn(); //报错
  var fn = function(){}

函数表达式和 var 一个变量没什么区别,不会前置。

函数内部的声明前置

function fn(){
  console.log(a)  //undefined
  var a = 3
  console.log(a)
}
fn()

命名冲突时

先前置,再覆盖

  var fn = 3;
  function fn(){}
  console.log(fn); // 3
  function fn(){}
  var fn = 3;
  console.log(fn); // 3

7.作用域

在 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

8.var

声明一个已经存在的变量

function fn(){}
var fn
console.log(fn)
var a = 1
var a
var a 
console.log(a)

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

不加var作用

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

可以看到不写var会声明一个全局的变量,这是我们在编程中应该要避免的,即使真的需要全局变量,也应该在最外层作用域使用var声明。

9.递归

递归的特点

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

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

求 1+2+...+n 的值

function sum(n){
  if(n === 1) {
    return 1
  }
  return n + sum(n-1)
}
sum(10)

立即执行函数表达式

(function(){
var a = 1;
})()
console.log(a); //undefined
作用: 隔离作用域
其他写法

(function fn1() {});
// 在数组初始化器内只能是表达式
[function fn2() {}];
// 逗号也只能操作表达式
, function fn3() {};
上一篇下一篇

猜你喜欢

热点阅读