JS面向对象|极客笔记

JS面向对象

JavaScript是一种强大的脚本编程语言，它不仅可以实现基本的功能和效果，还可以通过面向对象的方式来组织和管理代码。面向对象编程是一种程序设计范式，它主要关注的是类和对象的概念，通过封装、继承和多态等特性来实现代码的复用和扩展。

在JavaScript中，我们可以通过构造函数、原型链和类来实现面向对象编程。本文将详细介绍这些概念，并通过示例代码演示如何在JavaScript中应用面向对象编程。

构造函数

构造函数是一种特殊的函数，用来创建对象并设置其属性和方法。在JavaScript中，通过构造函数可以定义类，然后通过new关键字来实例化类，创建对象。

下面是一个简单的构造函数示例：

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

let person1 = new Person("Alice", 30);
console.log(person1.name); // 输出：Alice
console.log(person1.age); // 输出：30

在上面的示例中，我们定义了一个名为Person的构造函数，它有两个参数name和age，并将这两个参数赋值给对象实例的name和age属性。然后我们通过new关键字实例化Person类，创建了一个名为person1的对象，并访问了对象的属性。

原型链

原型链是JavaScript中实现继承和代码复用的一种机制。每个函数对象都有一个prototype属性，该属性指向一个原型对象，原型对象中包含要共享的属性和方法。当创建对象实例时，对象会继承原型对象中的属性和方法。

下面是一个原型链示例：

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

Animal.prototype.sayName = function() {
  console.log("My name is " + this.name);
}

function Dog(name, breed) {
  Animal.call(this, name);
  this.breed = breed;
}

Dog.prototype = Object.create(Animal.prototype);
Dog.prototype.constructor = Dog;

let dog1 = new Dog("Buddy", "Golden Retriever");
console.log(dog1.name); // 输出：Buddy
console.log(dog1.breed); // 输出：Golden Retriever
dog1.sayName(); // 输出：My name is Buddy

在上面的示例中，我们定义了两个构造函数Animal和Dog，Animal函数用来创建动物对象，Dog函数用来创建狗对象，并继承了动物对象的属性和方法。通过Object.create()方法，我们实现了Dog类继承Animal类的原型对象，并通过call()方法在Dog类中调用Animal类的构造函数。

类

ES6引入了class关键字，可以更方便地定义类和继承关系。类定义方式更接近于传统的面向对象语言，同时也提供了更多的特性和语法糖。

下面是一个类示例：

class Shape {
  constructor(color) {
    this.color = color;
  }

  getColor() {
    return this.color;
  }
}

class Circle extends Shape {
  constructor(color, radius) {
    super(color);
    this.radius = radius;
  }

  getArea() {
    return Math.PI * this.radius * this.radius;
  }
}

let circle1 = new Circle("red", 5);
console.log(circle1.getColor()); // 输出：red
console.log(circle1.getArea()); // 输出：78.54

在上面的示例中，我们定义了两个类Shape和Circle，Shape类代表形状对象，Circle类代表圆对象，并继承了Shape类的属性和方法。通过constructor关键字定义构造函数，super关键字调用父类的构造函数，extends关键字实现继承。