Javascript类详解

一、基本概念

Javascript是一种基于对象和事件驱动的脚本语言，最初设计用于浏览器端的脚本语言，用于动态增加交互性和用户体验。Javascript类是Javascript中进行面向对象编程的基础，它是一种抽象的数据类型，它对外界提供各种各样的数据和方法，并具有封装、继承和多态三大特征。

在Javascript类中，重要的概念有实例、属性和方法。实例是Javascript类派生出来的对象，属性是实例中存储的数据值，方法是实例中执行的函数，它们可以在Javascript类中定义。

Javascript类的定义可以通过构造函数、工厂函数和类声明三种方式实现。其中构造函数是一种传统的定义方式，工厂函数则是一种简单实用的方式，而类声明则是ES6中新增的一种定义方式。

1.构造函数的定义方式

function Person(name, age) {
  this.name = name;
  this.age = age;
}
Person.prototype.sayHello = function() {
  console.log("Hello, my name is " + this.name);
}
var p = new Person("Tom", 20);
p.sayHello();

上述代码中，我们定义了一个Person类，它有两个属性name和age，和一个方法sayHello。使用关键字new创建一个新的Person实例，并调用sayHello方法。

2.工厂函数的定义方式

function createPerson(name, age) {
  var person = {
    name: name,
    age: age,
    sayHello: function() {
      console.log("Hello, my name is " + this.name);
    }
  };
  return person;
}
var p = createPerson("Tom", 20);
p.sayHello();

上述代码中，我们定义了一个createPerson函数，它返回一个新的Person实例对象，这个对象有两个属性name和age，和一个方法sayHello。调用createPerson函数创建新的实例对象，并调用sayHello方法。

3.类声明的定义方式

class Person {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }
  sayHello() {
    console.log("Hello, my name is " + this.name);
  }
}
let p = new Person("Tom", 20);
p.sayHello();

上述代码中，我们使用ES6的新特性class声明了一个Person类，它有两个属性name和age，和一个方法sayHello。使用关键字new创建一个新的Person实例，并调用sayHello方法。

二、继承和多态

1.继承

继承是面向对象编程中的重要特性，它可以让子类拥有父类中的属性和方法，并可以添加自己的属性和方法。在Javascript类中，可以通过prototype链来实现继承。

function Person(name, age) {
  this.name = name;
  this.age = age;
}
Person.prototype.sayHello = function() {
  console.log("Hello, my name is " + this.name);
}

function Student(name, age, school) {
  Person.call(this, name, age); //调用父类构造函数继承属性
  this.school = school;
}
Student.prototype = Object.create(Person.prototype); //通过prototype链继承方法
Student.prototype.constructor = Student; //修正构造函数指向
Student.prototype.sayHello = function() { //重写父类方法
  console.log("Hello, my name is " + this.name + ", I study in " + this.school);
}

var s = new Student("Lily", 18, "MIT");
s.sayHello();

上述代码中，我们定义了一个Person类和一个Student类，使用Person.call方法继承Person类的属性，使用Object.create方法创建了一个继承自Person类原型的Student类，并重写了Person类中的sayHello方法。使用关键字new创建一个新的Student实例，并调用sayHello方法。

2.多态

多态是面向对象编程中的另一种重要特性，它可以让不同的对象对同一消息作出相应，从而实现程序的动态性和灵活性。在Javascript类中，可以通过重写父类方法来实现多态。

function Person(name, age) {
  this.name = name;
  this.age = age;
}
Person.prototype.sayHello = function() {
  console.log("Hello, my name is " + this.name);
}

function Student(name, age, school) {
  Person.call(this, name, age); //调用父类构造函数继承属性
  this.school = school;
}
Student.prototype = Object.create(Person.prototype); //通过prototype链继承方法
Student.prototype.constructor = Student; //修正构造函数指向
Student.prototype.sayHello = function() { //重写父类方法
  console.log("Hello, my name is " + this.name + ", I study in " + this.school);
}

function sayHello(p) { //多态通用方法
  if (typeof p.sayHello === "function") {
    p.sayHello();
  }
}

var p = new Person("Tom", 20);
var s = new Student("Lily", 18, "MIT");
sayHello(p);
sayHello(s);

上述代码中，我们定义了一个sayHello方法，它会根据对象的不同调用相应的sayHello方法。使用关键字new创建新的Person和Student实例，并调用sayHello方法。

三、ES6新特性

ES6是Javascript的重要更新，它新增了一些语言特性，如箭头函数、模板字面量、解构赋值、for…of循环、let和const关键字、类和模块等。在Javascript类中，ES6的类和模块是最重要的新特性。

1.类的定义

class Person {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }
  sayHello() {
    console.log("Hello, my name is " + this.name);
  }
}

let p = new Person("Tom", 20);
p.sayHello();

ES6中新增的关键字class可以用来定义一个类，它更加简洁明了，让Javascript类的定义更加贴近传统面向对象编程语言的风格。

2.模块的定义

//math.js
export function square(x) {
  return x * x;
}
export function cube(x) {
  return x * x * x;
}

//main.js
import { square, cube } from "./math.js";
console.log(square(3)); //9
console.log(cube(3)); //27

ES6中新增的关键字export和import可以用来定义和引用模块，它更加简洁易懂，让Javascript的模块化编程更加方便和实用。