JavaScript的模块化:封装(闭包),继承(原型) 介绍

JavaScript的模块化是一种将代码按照一定方式进行组织的方法。在JavaScript中，我们可以使用封装和继承实现模块化。

封装

封装是一种通过闭包实现的模块化方式，可以将一些数据和函数放在一个私有的作用域中，从而避免污染全局变量，同时将一些方法暴露出来，使之成为共有的API。

示例1

下面是一个简单的封装示例，通过IIFE(立即调用的函数表达式)创建一个私有的作用域，在其中定义一个私有变量和一个共有方法，将方法exports到全局作用域。

(function(){
  var count = 0;

  function increment() {
    count++;
  }

  function getCount() {
    return count;
  }

  window.counter = {
    increment: increment,
    getCount: getCount
  };
})();

在上述示例中，我们创建了一个计数器，将count和increment方法定义在了IIFE的作用域中，getCount方法被暴露到全局作用域中，可以供其他部分调用。

示例2

下面是另一个封装示例，使用闭包和立即调用的函数表达式(IIFE)，创建了一个返回随机数的方法。

var randomNum = (function() {
  var MAX = 100;
  var MIN = 0;

  function random() {
    return Math.floor(Math.random() * (MAX - MIN + 1)) + MIN;
  }

  return random;
})();

console.log(randomNum());

在这个示例中，我们定义了MAX和MIN作为私有变量，创建了一个随机数生成器的函数random，并将这个函数暴露给全局作用域，可以随时调用返回一个随机数。

继承

继承是一种通过原型实现的模块化方式，可以通过原型链将子类和父类连接起来，在子类中增加或重写一些方法。

示例1

下面是一个简单的继承示例，使用原型方法来实现继承，创建一个动物类和狗类，狗类继承自动物类。

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

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

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

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

Dog.prototype.bark = function() {
  console.log('Woof!');
}

var puppy = new Dog('Buddy');
puppy.sayName();
puppy.bark();

在这个示例中，我们创建了一个动物类，包含一个sayName方法，再创建一个狗类，调用Animal构造函数，使用Object.create方法来连接狗类和动物类，重写了一个bark方法。

示例2

下面是另一个继承示例，使用class和extends来实现继承，改写刚才的狗类。

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

  sayName() {
    console.log('My name is ' + this.name);
  }
}

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

  bark() {
    console.log('Woof!');
  }
}

let puppy = new Dog('Buddy');
puppy.sayName();
puppy.bark();

在这个示例中，我们使用了ES6中的class和extends关键字，简化了代码，但实质上仍然是原型继承。我们定义了一个Animal类，在其中包含一个构造函数和一个方法，再定义一个狗类继承Animal类，并在狗类中重写了一个方法。