4 - JavaScript的函数和类

4 - JavaScript的函数和类

---

一、函数（function）

1. 什么是函数

函数基本上讲就是可复用代码块，即在一个代码块中存储一段用于处理单任务的代码，然后在任何你需要的时候用一个简短的命令来调用，而不是把相同的代码写很多次。

2. 函数和方法的区别

方法是在对象内定义的函数。浏览器内置函数（方法）和变量（称为属性）存储在结构化对象内，以使代码更加高效，易于处理。

3. 创建函数

JavaScript 中使用 function关键字来声明一个函数

function functionName(argument1, argument2) {
    // do sth
}

fuction：声明一个函数

fuctionName：函数的名称

argument：调用函数时需要传递的参数

4. 调用带参数的函数

function myFunction(a, b) {
    const c = a + b;
    return c;
}

let c = myFunction(1, 2);

myFunction(1, 2)：使用函数名(参数)的形式来调用函数，传参顺序应当和函数定义的一致

return字段用来定义函数的返回值

let c = myFunction(1, 2)：初始化变量c，并定义其值为myFunction的返回值

5. 函数表达式

JavaScript 中，函数作为一个对象，可以被存储在一个变量中

let x = function (a, b) {return a * b};
let y = x(1, 2);

function () {}：使用function关键字创建函数

y = x(1, 2)：初始化变量y的值为x的返回值

6. 匿名函数

匿名函数一般被用来处理如按钮点击等简单事件

let myButton = document.querySelector('button');
myButton.onclick = function() {
    alert('hello');
}

7. 显式参数与隐式参数

• 函数显示参数（Parameters）在函数定义时列出
• 函数隐式参数（Arguments）在函数调用时传递给函数

7.1 参数规则

• JavaScript 函数定义显式参数时没有指定数据类型
• JavaScript 函数对隐式参数没有进行类型检测
• JavaScript 函数对隐式参数的个数没有进行检测

7.2 默认参数

• 默认情况下，未定义默认值得参数，其值将会是undefined

• ES5 和 ES6 对于默认参数有不同的支持方式

  注：ES6 发布于2016年，例如let和const都是在 ES6 引入的

• 此处仅展示 ES6 的声明默认参数示例

  function sum(a, b = 10) {
      return a + b;
  } 
  sum(5);	//output: 15
  sum(5, 15);	// output: 20
  

  sum(5)：调用函数sum并只传入一个值5，对应参数a，故b使用默认值10，结果为5 + 10 = 15

  sum(5, 15)：传入a和b两个值，a = 5, b = 15，故结果为5 + 15 = 20

7.3 arguments 对象（隐式参数）

JavaScript 函数有一个内置的对象arguments，这是一个数组，包含调用函数时传入的参数值

x = findMax(1, 123, 150, 168, 175)

function findMax() {
    let i, max = arguments[0];
    
    if (arguments.length < 2) return max;
    

    for (i = 0; i < arguments.length; i++) {
        if (arguments[i] > max) {
            max = arguments[i];
        }
    }
    return max;
}

if (arguments.length < 2) return max;：判断数组尺寸，只有一个数则直接回传

for (i = 0; i < arguments.length; i++) {}：遍历传入的数组

if (arguments[i] > max) { max = arguments[i]; }：依次做比较

8. 函数提升

函数会在编译器编译代码时被提升到代码顶部，即可以先定义函数调用，再定义函数

let c = sum(1, 2)

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

---

二、类（class）

1. 什么是类

• 类是用来创建对象的模板
• 类是一系列函数的集合

2. 创建类

JavaScript 中使用 class关键字来声明一个类

class ClassName {
    constructor() { ... }
}

class ClassName {}：使用class关键字创建类，类名为ClassName

constructor() {}：构造函数，用来初始化类的对象，将会在创建类的实例后被执行

示例：

class MyClass {
    constructor(name, id) {
		this.name = name;
        this.id = id;
    }
}

创建一个类MyClass，初始化两个属性name和id

3. 使用类

class MyClass {
    constructor(name, id) {
        this.name = name;
        this.id = id;
    }
}
let nameClass = new MyClass("Bob", 15123);
nameClass.name;	//"Bob"
nameClass.id;	//15123

class MyClass { ... }：定义类

let nameClass = new MyClass()：创建类实例nameClass，传递两个值，调用类的构造函数constructor

nameClass.name：调用类实例nameClass的属性name

nameClass.id：调用类实例nameClass的属性id

4. 自定义类方法

在使用class关键字创建类，添加constructor构造函数后，可以再创建任意数量的方法

class ClassName {
  constructor() { ... }
  method_1() { ... }
  method_2() { ... }
  method_3() { ... }
}

示例：

class MyClass {
    constructor(name, id) {
        this.name = name;
        this.id = id;
    }
    addAge(age) {
        this.age = age
        return {id : this.id, name: this.name, age: this.age}
    }
}
let myClass = new MyClass("Bob", 1524);
myClass.addAge(12);

return { ... }：单次回传多个值，封装到json字串中返回

addAge() { ... }：为MyClass类添加一个方法addAge

myClass.addAge()：调用MyClass的addAge方法

5. 类的提升

函数声明和类声明之间的一个重要区别在于，函数声明会提升，类声明不会

//不可以这样创建类的实例，会抛出 ReferenceError
//let myClass = new MyClass("var1", "var2");

class MyClass {
    constructor(var1, var2) {
        this.var1 = var1;
        this.var2 = var2;
    }
}

let myClass = new MyClass("var1", "var2");

---

三、类继承（extends）

1. 什么是类的继承

JavaScript 使用extends关键字来继承父类

继承允许我们依据另一个类来定义一个类

super()方法用于调用父类的构造函数

当创建一个类时，您不需要重新编写新的数据成员和成员函数，只需指定新建的类继承了一个已有的类的成员即可。这个已有的类称为基类（父类），新建的类称为派生类（子类）

2. 创建子类

使用extends关键字创建子类

// 基类
class Animal {
    // eat() 函数
    // sleep() 函数
};
 
 
//派生类
class Dog extends Animal {
    // bark() 函数
};

class Animal {}：父类

class Dog extends Animal {}：定义子类Dog继承父类Animal

3. 继承构造方法（super）

子类可以使用super()方法来继承父类的构造函数（constructor）

// 基类
class Student {
    constructor(name, id) {
        this.name = name;
        this.id = id;
    }
    addAge(age) {
        this.age = age;
    }
}

//子类
class Class extends Student {
    constructor(name, id, cls) {
    	//继承父类，传参
        super(name, id);
        this.cls = cls;
    }
    //子类方法
    addClassNum(class_num) {
        this.class_num = class_num
	}
}
 
// 父类实例
let student1 = new Student("Bob", 1234);
student1.addAge(15);

//子类实例
let class1 = new Class("class1", 12354, 1);
//继承的父类实例
class1.addAge(15);
//子类的实例
class1.addClassNum(10);