JS 面向对象的理解|极客笔记

JS 面向对象的理解

一、什么是面向对象编程

面向对象编程（Object-Oriented Programming，简称 OOP）是一种程序设计范式，它将数据和操作数据的方法封装在对象中，通过对象之间的交互来实现程序逻辑。面向对象编程强调的是对象的概念，将复杂的问题分解成对象，通过对象之间的通信来解决问题。

在面向对象编程中，一个对象可以包含属性和方法。属性表示对象的状态，方法表示对象可以进行的操作。对象可以和其他对象进行交互，通过调用对方的方法来实现功能。

二、JS 中的面向对象编程

在 JavaScript 中，一切皆为对象。JavaScript 本身就是一种基于原型的语言，它的对象系统是基于原型的，而不是基于类的。即使在 ES6 中引入了 class 关键字来创建类，底层实现仍然是基于原型的。

在 JavaScript 中，可以使用构造函数和原型来实现对象的创建和继承。构造函数是用来创建对象的函数，原型是用来实现对象之间的继承和共享属性的。

1. 构造函数

构造函数是一种特殊的函数，用来创建对象。在 JavaScript 中，通过 new 关键字和构造函数来创建对象。构造函数可以定义对象的属性和方法。

function Person(name, age) {
    this.name = name;
    this.age = age;

    this.sayHello = function() {
        console.log(`Hello, my name is  ${this.name} and I am$ {this.age} years old.`);
    }
}

let person1 = new Person('Alice', 25);
person1.sayHello(); // Output: Hello, my name is Alice and I am 25 years old.

在上面的示例中，Person 是一个构造函数，用来创建 Person 对象。通过 new 关键字调用构造函数，创建了 person1 对象，并调用了 sayHello 方法。

2. 原型

原型是 JavaScript 中实现继承和共享属性的机制。每个对象都有一个原型（prototype）属性，原型是一个对象。当访问对象的属性或方法时，如果对象本身没有这个属性或方法，JavaScript 会沿着原型链往上查找。

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

Person.prototype.sayHello = function() {
    console.log(`Hello, my name is  ${this.name} and I am$ {this.age} years old.`);
}

let person2 = new Person('Bob', 30);
person2.sayHello(); // Output: Hello, my name is Bob and I am 30 years old.

在上面的示例中，通过给 Person 的原型对象添加方法，实现了方法的共享。当调用 person2.sayHello() 时，JavaScript 会沿着原型链找到 sayHello 方法。

3. 继承

在 JavaScript 中，可以通过原型链实现对象的继承。子类的原型是父类的实例，子类可以共享父类的属性和方法。

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

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

let student1 = new Student('Charlie', 15, 9);
student1.sayHello(); // Output: Hello, my name is Charlie and I am 15 years old.

在上面的示例中，Student 继承自 Person，通过将 Student 的原型设置为 Person 的实例，实现了继承。同时，在创建 Student 对象时，调用了 Person 的构造函数，实现了属性的继承。