JavaScript面向对象程序设计实践常用知识点总结

作为一门现代前端开发的核心语言，JavaScript 语言已经成为了面向对象编程的主流语言之一。本文总结了一些 JavaScript 面向对象编程常用的知识点，以帮助读者更好地理解、掌握和应用 JavaScript 编程。下面，我们将分为以下几个方面进行讲解。

1. 基本概念

1.1 类和对象

JavaScript 中，类和对象的概念是面向对象编程的基本概念，其中类是一种类型模板，用于描述对象的基本结构和行为；而对象是一个特定的实例化对象，具体的描述类中定义的行为和属性。

在 JavaScript 中，可以通过构造函数来创建一个类和对象，构造函数的原型包含了所有对象实例共享的属性和方法。例如，我们可以通过以下方式来创建一个名为 Person 的类及其实例对象：

// 创建 Person 类
function Person(name, age, gender) {
  this.name = name;
  this.age = age;
  this.gender = gender;
}

// 创建 Person 类的实例对象
var person1 = new Person("张三", 20, "男");
console.log(person1); //输出对象的属性值：{name: "张三", age: 20, gender: "男"}

1.2 属性和方法

在 JavaScript 中，我们可以通过以下方式来定义对象的属性和方法：

function Person(name,age) {
  // 定义对象的属性
  this.name = name;
  this.age = age;

  // 定义对象的方法
  this.sayHi = function() {
    console.log("Hi, my name is " + this.name);
  };
}

1.3 继承和多态

继承是一种面向对象编程中常用的特性，它允许我们从现有的类派生出新的类，同时保留原有类的特性。JavaScript 中可以通过 prototype 原型链来继承一个对象的属性和方法，并且可以通过多态和函数重写来实现多态性。

示例：

function Animal (name) {
    this.name = name;
}
Animal.prototype.sayName = function () {
    console.log(this.name);
}

function Dog (name) {
    Animal.call(this, name);
}
Dog.prototype = Object.create(Animal.prototype);
Dog.prototype.constructor = Dog;
Dog.prototype.sayName = function () {
    console.log('My name is ' + this.name);
}

const dog = new Dog('旺财');
dog.sayName(); // My name is 旺财

2. 对象和类的创建

2.1 工厂模式

工厂模式是通过一个工厂函数来创建对象，从而降低对象的创建所需的复杂度。工厂模式可以有效地抽象对象的创建过程，并且可以在工厂函数中进行预处理和加工。

示例：

function createCar(model, year, engineType) {
  const car = {};
  car.model = model;
  car.year = year;
  car.engineType = engineType;
  car.start = function() {
    console.log('Starting the car.');
  };
  car.stop = function() {
    console.log('Stopping the car.');
  }
  return car;
}

const car = createCar('BMW', 2020, 'V8');

2.2 构造函数模式

构造函数模式是通过一个特定的函数来创建对象的，函数名通常为大写字母开头的名称。在构造函数中，我们可以通过 this 关键字来定义对象的属性和方法，并且可以在构造函数中调用其他函数或对象的方法。

示例：

function Car(model, year, engineType) {
  this.model = model;
  this.year = year;
  this.engineType = engineType;
  this.start = function() {
    console.log('Starting the car.');
  };
  this.stop = function() {
    console.log('Stopping the car.');
  }
}

const car = new Car('BMW', 2020, 'V8');

2.3 原型模式

原型模式是通过一个原型对象来创建对象，并且在原型对象中定义对象的方法和属性。在创建一个新的对象时，可以通过原型继承来继承原型对象的属性和方法。

示例：

function Person() {}

Person.prototype.name = '张三';
Person.prototype.age = 20;
Person.prototype.job = '学生';
Person.prototype.sayName = function() {
  console.log(this.name);
};

const person1 = new Person();

3. 类继承的实现

3.1 原型链继承

原型链继承是通过将子类的原型设置为父类的一个实例来实现的。在 JavaScript 中，使用 Object.create() 来创建一个新的对象，并将其原型设置为另一个对象的实例。

示例：

function Animal (name) {
    this.name = name;
}
Animal.prototype.sayName = function () {
    console.log(this.name);
}

function Dog (age, name) {
    this.age = age;
    Animal.call(this, name)
}
Dog.prototype = Object.create(Animal.prototype);
Dog.prototype.constructor = Dog;
const dog = new Dog(3, '旺财');
dog.sayName(); // 旺财

3.2 借用构造函数继承

借用构造函数继承是指在子类的构造函数中调用父类的构造函数来初始化子类的属性。在 JavaScript 中，可以使用 call() 或 apply() 来调用父类的构造函数。

示例：

function Animal () {
    this.name = 'Animal';
}

function Dog (name) {
    Animal.call(this);
    this.name = name || 'fido';
}

const dog = new Dog('旺财');
console.log(dog.name); // 旺财

3.3 组合继承

组合继承是一种结合了原型链继承和借用构造函数继承的方式，它通过在子类的构造函数中调用父类的构造函数来初始化子类的属性，并将子类的原型设置为父类的实例来继承父类的原型属性和方法。

示例：

function Animal (name) {
    this.name = name;
}
Animal.prototype.sayName = function () {
    console.log(this.name);
}

function Dog (age, name) {
    Animal.call(this, name)
    this.age = age;
}
Dog.prototype = new Animal();
Dog.prototype.constructor = Dog;

let dog = new Dog(3, '旺财');
dog.sayName(); // 旺财

4. ES6 中的类和对象

4.1 类的定义与继承

ES6 中引入了 class 关键字，可以使用 class 来定义一个类。同时，ES6 也为面向对象编程提供了更好的支持，可以通过 extends 关键字和 super 关键字实现类继承和基于类的多态性。

示例：

class Animal {
    constructor(name) {
        this.name = name;
    }
    sayName() {
        console.log(this.name);
    }
}

class Dog extends Animal {
    constructor(name, age) {
        super(name);
        this.age = age;
    }
    sayName() {
        console.log(`My name is ${this.name}.`);
    }
}

const dog = new Dog('旺财', 3);
dog.sayName(); // My name is 旺财。

4.2 类和对象的属性和方法

ES6 的类和对象支持使用 constructor 构造函数来初始化对象的属性，同时在类中可以定义一些静态属性和方法和构造函数。静态属性和方法是通过类本身来访问的属性和方法，而不是定义在类的实例对象上的属性和方法。

示例：

class Person {
    static type = 'human';
    constructor(name) {
        this.name = name;
    }
    sayHi() {
        console.log('Hi ' + this.name);
    }
}

const person = new Person('Alice');
console.log(Person.type); // human
person.sayHi() // Hi Alice

结语

以上就是 JavaScript 面向对象编程常用知识点的总结。希望本文可以帮助读者更好的掌握 JavaScript 的编程技巧和面向对象编程的思路。