JavaScript学习笔记：函数、方法与继承（原型与class）

函数

JS定义函数，最常用三种方法：

用function定义一个命名函数，语法为：function + 函数名（形参）{函数体}

js 复制代码

// 定义一个命令函数  
function sayHello(name){  
    console.log(`hello, ${name}`);  
}  
  
// 调用命名函数  
sayHello('张三');

定义一个匿名函数，赋值给变量。语法为：function（形参）{函数体}

js 复制代码

// 定义一个函数给变量赋值  
const sayHi = function(name){  
    console.log(`hi, ${name}`);  
}  
  
// 调用函数变量  
sayHi('李四');

使用箭头函数定义一个匿名函数，可以赋值给变量。语法为：（形参）=> {函数体}。当函数体只有1行时，可以省略{}

js 复制代码

// 定义一个箭头函数  
const sayHelloArrow = (name) => {  
    console.log(`hello, ${name}`);  
}  
  
// 调用箭头函数  
sayHelloArrow('王五');  
  
// 简写箭头函数  
const sayHiArrow = (name) => console.log(`hi, ${name}`);  
  
// 调用简写箭头函数  
sayHiArrow('赵六');

方法

Java中的方法，是指对象的方法。而JS中的方法与Java的方法类似，也是对象的方法，或者说是一种对象的属性，只不过属性值是一个函数。

Java中定义方法，是在定义类时定义的，而JS不是基于类，是基于原型，所以JS定义方法是在定义对象时定义的。

js 复制代码

// 定义一个对象  
let person = {  
  name: '张三',  
  age: 18,  
  sex: '男',  
  // 定义方法1：使用function关键词，跟定义函数类似  
  sayHello: function () {  
    console.log(`hello, My name is ${this.name}`);  
  },  
  
  // 定义方法2：ES6箭头函数  
  sayHi: () => console.log(`hi, My name is ${person.name}`),  
  
}  
  // 调用方法1  
  person.sayHello();  
  
  // 调用方法2  
  person.sayHi();

面向对象原型继承

JS是面向对象的编程语言，但是与Java等编程语言基于类（蓝图）创建对象（实例）不同，JS是基于原型对象的编程语言。

在Java中，我们会先创建类，再由类实例化一个对象，对象有定义类的实例属性和实例方法，对象也可以继承父类的实例属性和实例方法。

在JS中，没有类的概念（ES6之前），直接创建对象，对象可以设置一个"原型"属性指向另外一个对象，形成所谓"原型链"。在使用属性或者调用方法时，会沿原型链查询。

js 复制代码

const person = {  
    name: '张三',  
    age: 18,  
    sex: '男',  
    run: function () {  
        console.log(`${this.name} is running`);  
    }  
}  
  
const xiaoming = {  
    name: '小明',  
}  
  
// 原型链继承  
xiaoming.__proto__ = person;  
  
// 调用继承的方法  
xiaoming.run();

面相对象class继承

ES6后，可以使用类似Java的方式定义类和对象。

js 复制代码

// 定义一个学生类  
class Student {  
    constructor(name, age, sex) {  
        this.name = name;  
        this.age = age;  
        this.sex = sex;  
    }  
  
    // 定义一个方法  
    sayHello() {  
        console.log(`hello, My name is ${this.name}`);  
    }  
}  
  
// 创建一个学生对象  
const xiaoming = new Student('小明', 18, '男');  
// 调用方法  
xiaoming.sayHello(); // hello, My name is 小明

类也可以继承，与Java类似

js 复制代码

// 定义一个学生类  
class Student {  
    constructor(name, age, sex) {  
        this.name = name;  
        this.age = age;  
        this.sex = sex;  
    }  
  
    // 定义一个方法  
    sayHello() {  
        console.log(`hello, My name is ${this.name}`);  
    }  
}  
  
// 定义一个小学生类，继承自学生类  
class PrimaryStudent extends Student {  
    constructor(name, age, sex) {  
        super(name, age, sex);  
    }  
  
    // 定义一个方法  
    sayHello() {  
        console.log(`hello, My name is ${this.name}, I am a primary student`);  
    }  
}  
  
// 创建一个小学生对象  
const xiaoming = new PrimaryStudent('小明', 18, '男');  
// 调用方法  
xiaoming.sayHello(); // hello, My name is 小明, I am a primary student

ES6推出的class继承新方式，类本质是原型对象，所以还是原来的基于原型的继承，也就是说这是一个语法糖，为了让更多后端程序员能以更熟悉的方式学习和使用JS。