js 函数

目录

一、函数长什么样？

二、函数的参数

1、js 函数的特点

2、arguments 对象

三、严格模式对函数的限制

四、什么是立即执行函数?

五、静态函数

1、JavaScript 中静态函数的概念与语法

2、静态方法的特性

（1）、静态方法调用同一个类中的其他静态方法

（2）、从类的构造函数和其他方法中调用静态方法

3、使用案例

---

一、函数长什么样？

函数使用function关键字声明：

function fn (arg0,arg1,...,argN) {
    // 函数体
}

二、函数的参数

1、js 函数的特点

js 函数的参数与大多数语言不同，其具有以下特点：

• 不介意传递多少个参数；
• 不介意传入的参数是什么类型的。

function fn (a, b){
    console.log(a + b); 
};

fn();                             // NaN
fn(10);                           // NaN
fn(10, 20);                       // 30
fn(10, 20, 30);                   // 30

fn(10, '20');                     // 1020
fn(10, true);                     // 11

开发人员可以利用 js 函数可以接受任意个参数的特性，对不同个数的参数分别实现适当的功能。

function addFn (){
    if(arguments.length == 1){
        console.log(arguments[0] + 10);
    } else if (arguments.length == 2){
        console.log(arguments[0] + arguments[1]);
    }
}

addFn(11);                 // 21
addFn(20, 500);            // 520

那么，为什么在 js 中可以随意传递多个参数，随意传递任意类型的参数呢？

因为 js 中的参数，在内部是用一个 数组 来表示的，无论函数传递了几个参数，无论传递了什么类型的参数，函数接受的始终都是这个数组，所以说函数不关心这些参数。

要想访问这个参数数组，就要用到 arguments 对象了。

2、arguments 对象

在函数体内，通过 arguments 可以直接访问到这个 参数数组。

arguments 是一个特殊的对象，它具有数组的特性：

• 可以通过数组的方括号语法访问它的每一个元素；
• 具有length属性。

function fn () {

    let msg = `我是${arguments[0]}， 我今年${arguments[1]}岁了。`;
    let lenth = arguments.length;

    console.log([msg, length]);    
}

fn('marry', 18);                  // ["我是marry， 我今年18岁了。", 2]



// 以上函数的实现等同于
function fn2 (arg0, arg1) {

    let msg = `我是${arg0}， 我今年${arg1}岁了。`;
    let lenth = arguments.length;

    console.log([msg, length]);
}

fn2('marry', 18);                  // ["我是marry， 我今年18岁了。", 2]

三、严格模式对函数的限制

• 不能把函数命名为 eval 或 arguments；
• 不能把参数命名为 eval 或 arguments；
• 不能出现两个命名参数相同的情况。

四、什么是立即执行函数?

立即执行函数，简称 IIFE。

IIFE 形如此：

(function(a){
    a = 10;
    alert(a);
})();

五、静态函数

1、JavaScript 中静态函数的概念与语法

ES6 的类（class）里可以通过 static 关键字定义静态方法。

语法：

static methodName() { ... }

举个例子：

class ClassWithStaticMethod {

  static staticProperty = 'someValue';
  static staticMethod() {
    return 'static method has been called.';
  }
}

console.log(ClassWithStaticMethod.staticProperty);
// "someValue"

console.log(ClassWithStaticMethod.staticMethod());
// "static method has been called."

2、静态方法的特性

静态方法调用直接在类上进行，不能在类的实例上调用。

静态方法通常用于创建实用程序函数。

（1）、静态方法调用同一个类中的其他静态方法

静态方法调用同一个类中的其他静态方法，可使用 this 关键字。

class StaticMethodCall {
    static staticMethod() {
        return 'Static method has been called';
    }
    static anotherStaticMethod() {
        return this.staticMethod() + ' from another static method';
    }
}

StaticMethodCall.staticMethod();
// 'Static method has been called'

StaticMethodCall.anotherStaticMethod();
// 'Static method has been called from another static method'

（2）、从类的构造函数和其他方法中调用静态方法

非静态方法中，不能直接使用 this 关键字来访问静态方法。要用类名来调用：CLASSNAME.STATIC_METHOD_NAME() ，或者用构造函数的属性来调用该方法： this.constructor.STATIC_METHOD_NAME()。

class StaticMethodCall {
    constructor() {
        console.log(StaticMethodCall.staticMethod());
        // 'static method has been called.'
        console.log(this.constructor.staticMethod());
        // 'static method has been called.'
    }
    static staticMethod() {
        return 'static method has been called.';
    }
}

3、使用案例

下面的例子可以说明以下三点：

• 静态方法如何在类上实现。
• 具有静态成员的类，可以被子类化 。
• 什么情况下静态方法可以调用，什么情况下不能调用。

class Tripple {
  static tripple(n = 1) {
    return n * 3;
  }
}


class BiggerTripple extends Tripple {
  static tripple(n) {
    return super.tripple(n) * super.tripple(n);
  }
}


console.log(Tripple.tripple());// 3
console.log(Tripple.tripple(6));// 18

let tp = new Tripple();

console.log(BiggerTripple.tripple(3));// 81（不会受父类实例化的影响）
console.log(tp.tripple());// 'tp.tripple 不是一个函数'.