JavaScript中的面向对象编程

JavaScript是一种经常被用作面向对象编程(OOP)的语言，它提供了许多实现OOP的方法。本文将会介绍对象、原型(proto)、继承、类、构造函数等概念，并提供相应的代码示例。

对象(Object)

JavaScript中的对象是一个具有属性和方法的数据结构。对象可以通过直接声明、构造函数、对象字面量等方式进行创建。

直接声明

直接声明是最基本的创建对象的方式。

var person = {
  name: "John",
  age: 30,
  sayHi: function() {
    console.log("Hi there!");
  }
};

构造函数

构造函数是一种用于创建对象的函数，它被调用时会创建一个新的对象。通常情况下，构造函数的首字母应该大写。

function Person(name, age) {
  this.name = name;
  this.age = age;
  this.sayHi = function() {
    console.log("Hi there!");
  };
}

var john = new Person("John", 30);

对象字面量

对象字面量是一种用于创建对象的形式，它是直接将键值对放入大括号中。

var person = {
  "name": "John",
  "age": 30,
  "sayHi": function() {
    console.log("Hi there!");
  }
};

原型(Proto)

在JavaScript中，每个对象都有一个原型(proto)，这个原型是一个对象，它包含了一些共享的属性和方法。如果在对象上找不到属性或方法，就会在原型上查找。

对象的原型

每个对象都有一个原型(proto)属性，可以通过Object.getPrototypeOf(obj)方法获取。

var person = {
  name: "John",
  age: 30,
  sayHi: function() {
    console.log("Hi there!");
  }
};

var proto = Object.getPrototypeOf(person);

原型链

由于每个对象都有一个原型(proto)属性，因此可以构建一个对象的原型链。在查找一个属性或方法时，JavaScript会沿着原型链逐级查找，直到找到相应的属性或方法，或者一直查找到Object.prototype的原型为止。

function Person(name, age) {
  this.name = name;
  this.age = age;
  this.sayHi = function() {
    console.log("Hi there!");
  };
}

var john = new Person("John", 30);

// 沿着原型链查找toString方法
console.log(john.toString());

继承

JavaScript中的继承是通过让一个对象从另一个对象继承属性和方法而实现的。继承可以大幅减少重复性的代码。

原型继承

原型继承是通过将一个对象的原型(proto)设置为另一个对象来实现的。这个方法非常简单，并且支持动态继承。

var person = {
  name: "",
  age: 0,
  sayHi: function() {
    console.log("Hi there!");
  }
};

var john = Object.create(person);
john.name = "John";
john.age = 30;

构造继承

构造继承是通过在子类的构造函数中调用父类的构造函数，并使用.call()或.apply()方法将父类的实例作为上下文来实现的。这种方法的缺点在于不能继承父类原型上的属性和方法。

function Person(name, age) {
  this.name = name;
  this.age = age;
  this.sayHi = function() {
    console.log("Hi there!");
  };
}

function Student(name, age, major) {
  Person.call(this, name, age);
  this.major = major;
}

var john = new Student("John", 30, "Computer Science");

组合继承

组合继承是将构造继承和原型继承结合起来使用的一种方法，它通过将父类的原型(proto)设置为子类的原型实现了父类原型上属性和方法的继承，同时通过在子类的构造函数中调用父类的构造函数实现了实例属性的继承。

function Person(name, age) {
  this.name = name;
  this.age = age;
  this.sayHi = function() {
    console.log("Hi there!");
  };
}

function Student(name, age, major) {
  Person.call(this, name, age);
  this.major = major;
}

Student.prototype = Object.create(Person.prototype);
Student.prototype.constructor = Student;

var john = new Student("John", 30, "Computer Science");

类(Class)

在ES6中，JavaScript新增了类(class)的概念，它是一个更加易于理解和使用的对象继承的方式。在类中，属性和方法都是定义在类的内部，而不必像构造函数一样在每个实例上重新定义。

class Person {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }

  sayHi() {
    console.log("Hi there!");
  }
}

class Student extends Person {
  constructor(name, age, major) {
    super(name, age);
    this.major = major;
  }
}

var john = new Student("John", 30, "Computer Science");

构造函数

构造函数是一种用于创建对象的函数，它应该首字母大写以与普通函数区分开来。通过在构造函数中使用this关键字，可以将属性和方法绑定到新创建的实例上。

function Person(name, age) {
  this.name = name;
  this.age = age;
  this.sayHi = function() {
    console.log("Hi there!");
  };
}

var john = new Person("John", 30);