正文

掌握JS面向对象，四大原则轻松入门，提升编程能力

/0 浏览量
1031

在JavaScript的世界里，面向对象编程（OOP）是提升编程能力的关键。通过理解并运用面向对象的四大原则，我们可以写出更加模块化、可重用和易于维护的代码。下面，我们就来一起探讨这四大原则，帮助大家轻松入门JS面向对象编程。

一、封装（Encapsulation）

封装是指将对象的属性和行为捆绑在一起，并通过访问控制来保护它们。在JavaScript中，我们可以使用闭包和构造函数来实现封装。

1.1 使用闭包封装

function createCounter() {
  let count = 0;
  return {
    increment() {
      count++;
    },
    decrement() {
      count--;
    },
    getCount() {
      return count;
    }
  };
}

const counter = createCounter();
console.log(counter.getCount()); // 0
counter.increment();
console.log(counter.getCount()); // 1
counter.decrement();
console.log(counter.getCount()); // 0

在这个例子中，count变量被封装在createCounter函数内部，外部无法直接访问。通过闭包，我们可以创建一个可以访问count变量的increment、decrement和getCount方法。

1.2 使用构造函数封装

function Counter() {
  this.count = 0;
}

Counter.prototype.increment = function() {
  this.count++;
};

Counter.prototype.decrement = function() {
  this.count--;
};

Counter.prototype.getCount = function() {
  return this.count;
};

const counter = new Counter();
console.log(counter.getCount()); // 0
counter.increment();
console.log(counter.getCount()); // 1
counter.decrement();
console.log(counter.getCount()); // 0

在这个例子中，Counter构造函数负责创建一个具有count属性的对象，并通过原型链将increment、decrement和getCount方法添加到这个对象上。

二、继承（Inheritance）

继承是指创建一个新对象（子类）作为另一个对象（父类）的副本。在JavaScript中，我们可以使用原型链和类继承来实现继承。

2.1 使用原型链实现继承

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

Animal.prototype.sayName = function() {
  console.log(this.name);
};

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

Dog.prototype = new Animal();
Dog.prototype.constructor = Dog;

Dog.prototype.sayBreed = function() {
  console.log(this.breed);
};

const dog = new Dog('旺财', '拉布拉多');
dog.sayName(); // 旺财
dog.sayBreed(); // 拉布拉多

在这个例子中，Dog对象通过原型链继承了Animal对象的方法和属性。

2.2 使用类继承实现继承

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

  sayName() {
    console.log(this.name);
  }
}

class Dog extends Animal {
  constructor(name, breed) {
    super(name);
    this.breed = breed;
  }

  sayBreed() {
    console.log(this.breed);
  }
}

const dog = new Dog('旺财', '拉布拉多');
dog.sayName(); // 旺财
dog.sayBreed(); // 拉布拉多

在这个例子中，Dog类通过extends关键字继承了Animal类的构造函数和方法。

三、多态（Polymorphism）

多态是指同一操作作用于不同的对象上可以有不同的解释和表现。在JavaScript中，我们可以通过重写方法来实现多态。

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

  makeSound() {
    console.log('Animal makes a sound');
  }
}

class Dog extends Animal {
  constructor(name) {
    super(name);
  }

  makeSound() {
    console.log('Dog barks');
  }
}

class Cat extends Animal {
  constructor(name) {
    super(name);
  }

  makeSound() {
    console.log('Cat meows');
  }
}

const dog = new Dog('旺财');
const cat = new Cat('喵喵');

dog.makeSound(); // Dog barks
cat.makeSound(); // Cat meows

在这个例子中，makeSound方法在不同的子类中具有不同的实现，从而实现了多态。

四、抽象（Abstraction）

抽象是指隐藏实现细节，只暴露必要的方法和属性。在JavaScript中，我们可以通过类和模块来实现抽象。

4.1 使用类实现抽象

class BankAccount {
  constructor(balance) {
    this.balance = balance;
  }

  deposit(amount) {
    this.balance += amount;
  }

  withdraw(amount) {
    if (amount <= this.balance) {
      this.balance -= amount;
    } else {
      console.log('Insufficient funds');
    }
  }

  getBalance() {
    return this.balance;
  }
}

const account = new BankAccount(1000);
console.log(account.getBalance()); // 1000
account.deposit(200);
console.log(account.getBalance()); // 1200
account.withdraw(500);
console.log(account.getBalance()); // 700

在这个例子中，BankAccount类抽象了银行账户的实现细节，只暴露了deposit、withdraw和getBalance方法。

4.2 使用模块实现抽象

// bankAccount.js
export class BankAccount {
  constructor(balance) {
    this.balance = balance;
  }

  deposit(amount) {
    this.balance += amount;
  }

  withdraw(amount) {
    if (amount <= this.balance) {
      this.balance -= amount;
    } else {
      console.log('Insufficient funds');
    }
  }

  getBalance() {
    return this.balance;
  }
}

// index.js
import { BankAccount } from './bankAccount.js';

const account = new BankAccount(1000);
console.log(account.getBalance()); // 1000
account.deposit(200);
console.log(account.getBalance()); // 1200
account.withdraw(500);
console.log(account.getBalance()); // 700

在这个例子中，我们使用了ES6模块来抽象BankAccount类的实现细节，通过export和import关键字暴露和导入类。

通过掌握面向对象的四大原则，我们可以更好地理解JavaScript的编程思想，提升自己的编程能力。在实际开发中，灵活运用这些原则，可以让我们写出更加优雅、可维护的代码。

-- 展开阅读全文 --