正文

掌握JS面向对象编程：轻松入门，从创建对象到继承和多态

/0 浏览量
0829

面向对象编程（OOP）是JavaScript编程中一个非常重要的概念。它允许开发者以更加模块化和可重用的方式来编写代码。在这篇文章中，我们将从最基础的对象创建开始，逐步深入到继承和多态等高级概念。

一、理解JavaScript中的对象

在JavaScript中，一切皆对象。对象是一系列键值对的集合，其中键是字符串或符号，值可以是任何数据类型，包括其他对象。

1.1 创建对象

创建对象主要有两种方式：使用字面量语法和使用构造函数。

字面量语法

let person = {
  name: 'Alice',
  age: 25,
  sayHello: function() {
    console.log(`Hello, my name is ${this.name}`);
  }
};

构造函数

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

let bob = new Person('Bob', 30);

1.2 访问对象属性和方法

console.log(person.name); // Alice
person.sayHello(); // Hello, my name is Alice

二、理解类和构造函数

ES6引入了类（Class）的概念，使得面向对象编程在JavaScript中更加直观。

2.1 定义类

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

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

2.2 创建实例

let alice = new Person('Alice', 25);
alice.sayHello(); // Hello, my name is Alice

三、继承和多态

3.1 继承

继承是面向对象编程的核心概念之一，它允许我们创建一个新类（子类），继承另一个类（父类）的属性和方法。

使用extend关键字

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

  sayGrade() {
    console.log(`I am in grade ${this.grade}`);
  }
}

let tom = new Student('Tom', 20, 10);
tom.sayHello(); // Hello, my name is Tom
tom.sayGrade(); // I am in grade 10

使用Object.create()

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

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

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

let tom = new Student('Tom', 20, 10);
tom.sayHello(); // Hello, my name is Tom
tom.sayGrade(); // I am in grade 10

3.2 多态

多态是指在继承的基础上，子类可以重写父类的方法，实现不同的行为。

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

  teach() {
    console.log(`I teach ${this.subject}`);
  }
}

let john = new Teacher('John', 40, 'Math');
john.sayHello(); // Hello, my name is John
john.teach(); // I teach Math

四、总结

通过本文的介绍，相信你已经对JavaScript中的面向对象编程有了初步的了解。在实际开发中，掌握面向对象编程可以帮助你编写更加清晰、可维护和可扩展的代码。希望这篇文章能帮助你轻松入门，并进一步探索JavaScript的更多精彩内容。

-- 展开阅读全文 --