浅谈 JavaScript 中的面向对象

爱打球的开发小白

已于 2023-08-20 04:45:42 修改

阅读量130

点赞数

文章标签： javascript 原型模式前端

于 2023-08-20 04:43:26 首次发布

本文链接：https://blog.csdn.net/m0_67574906/article/details/132388267

版权

在这里插入图片描述

当我们谈论面向对象编程时，我们关注的是如何组织代码，将数据和功能封装在一个独立的对象中。
在 JavaScript 中，面向对象变成（Object Oriented Programming, OOP）提供了一种组织和管理代码的方式，通过数据和功能封装在对象中。下面详细解释 JavaScript 中面向对象编程的几个关键概念和用法。

1、构造函数和对象实例化：

构造函数是用于创建和初始化对象的特殊函数。它使用 this 关键字来引用正在创建的对象，并给对象添加属性和方法。
对象实例化是通过使用 new 关键字和构造函数创建对象的过程。它会调用构造函数并返回一个新的对象实例。

示例：

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

const person1 = new Person('John', 30);
person1.greet(); // 输出：Hello, my name is John and I'm 30 years old.

2、原型和原型链：

原型是 JavaScript 对象之间的链接关系，每个对象都有一个指向它的原型的内部链接。通过原型，对象可以继承和共享属性和方法。
原型链是一系列对象及其原型对象的链式关系。当对象试图访问一个属性或方法时，它会先查找自身是否有这个属性或方法，如果没有，就会通过原型链向上查找。

JavaScript 中的每个函数都有一个特殊的属性 prototype，它是一个对象，包含可以由特定类型的所有实例共享的属性和方法。
当您定义一个构造函数时，它将自动获得 prototype 属性。
**每个 JavaScript 对象都从原型对象继承属性。**当您访问对象的一个属性时，它首先被搜索到原型对象中，如果没有找到，则搜索到原型的原型中，依此类推，直到找到该属性或到达原型链的末尾为止。
原型链的末尾是 Object.prototype，它包含所有对象共享的属性和方法。

示例：

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

Person.prototype.greet = function() {
  console.log(`Hello, my name is ${this.name}.`);
};

const person1 = new Person('John');
person1.greet(); // 输出：Hello, my name is John.

3、继承

继承是指一个对象可以从另一个对象继承属性和方法。JavaScript 中的继承通过原型链来实现。
可以使用 Object.create() 方法或者使用关键字 class 和 extends 来创建子类并继承父类的属性和方法。

示例：
通过 Object.create()：

const person = {
  fullName() {
    return `${this.firstName} ${this.lastName}`;
  }
};

const employee = Object.create(person);
employee.firstName = 'John';
employee.lastName = 'Doe';

console.log(employee.fullName()); // 输出：John Doe

通过 class 和 extends：

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

  greet() {
    console.log(`Hello, my name is ${this.name}.`);
  }
}

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

  study() {
    console.log(`${this.name} is studying in grade ${this.grade}.`);
  }
}

const student1 = new Student('John', 7);
student1.greet(); // 输出：Hello, my name is John.
student1.study(); // 输出：John is studying in grade 7.

4、封装

在 JavaScript 中，可以使用函数和闭包来实现数据的私有化和封装。通过将数据放在函数内部，并通过函数的返回值或内部函数来操作和访问数据，避免直接暴露数据给外界。

示例：

function Counter() {
  let count = 0;

  this.increment = function() {
    count++;
    console.log(`Counter: ${count}`);
  };

  this.decrement = function() {
    count--;
    console.log(`Counter: ${count}`);
  };
}

const counter = new Counter();
counter.increment(); // 输出：Counter: 1
counter.increment(); // 输出：Counter: 2
counter.decrement(); // 输出：Counter: 1

5、多态

多态是指多个不同类型的对象可以对相同的方法名做出不同的响应。JavaScript 中的函数重写和动态绑定实现了多态性。

示例：

class Shape {
  calculateArea() {
    // 具体计算面积的实现
  }
}

class Rectangle extends Shape {
  calculateArea() {
    // 矩形的计算面积实现
  }
}

class Circle extends Shape {
  calculateArea() {
    // 圆形的计算面积实现
  }
}

function printArea(shape) {
  console.log(`Area: ${shape.calculateArea()}`);
}

const rectangle = new Rectangle();
const circle = new Circle();

printArea(rectangle);
printArea(circle);

以上是 JavaScript 中面向对象编程的一些详细解释。了解这些概念并合理应用它们，能够帮助你编写出更有结构和可维护性的代码
当我们谈论面向对象编程时，我们关注的是如何组织代码，将数据和功能封装在一个独立的对象中。
在 JavaScript 中，面向对象变成（Object Oriented Programming, OOP）提供了一种组织和管理代码的方式，通过数据和功能封装在对象中。下面详细解释 JavaScript 中面向对象编程的几个关键概念和用法。