JavaScript 面向对象编程模式详解-优快云博客

本文链接：https://blog.youkuaiyun.com/gitblog_01109/article/details/148505813

JavaScript 面向对象编程模式详解

jstutorial Javascript tutorial book 项目地址: https://gitcode.com/gh_mirrors/js/jstutorial

本文基于 ruanyf/jstutorial 项目中的面向对象编程模式章节，深入讲解 JavaScript 中实现面向对象编程的各种实用模式。面向对象编程(OOP)是 JavaScript 开发中的重要范式，掌握这些模式将帮助开发者编写更优雅、可维护的代码。

构造函数继承的实现

在 JavaScript 中，构造函数的继承是面向对象编程的基础。实现构造函数继承需要两个关键步骤：

第一步：调用父类构造函数

function Sub(value) {
  Super.call(this);  // 在子类中调用父类构造函数
  this.prop = value;
}

这种技术称为"构造函数窃取"，它通过在子类构造函数中调用父类构造函数，使子类实例获得父类实例的属性。

第二步：设置原型链

Sub.prototype = Object.create(Super.prototype);
Sub.prototype.constructor = Sub;

这里有几个关键点需要注意：

使用 Object.create() 创建新对象作为子类原型，而不是直接赋值父类原型，避免修改父类原型
重置 constructor 属性，确保它指向正确的构造函数
在设置原型链后，才能添加子类特有的方法

完整示例

function Shape() {
  this.x = 0;
  this.y = 0;
}

Shape.prototype.move = function(x, y) {
  this.x += x;
  this.y += y;
};

function Rectangle() {
  Shape.call(this);  // 继承实例属性
}

// 继承原型方法
Rectangle.prototype = Object.create(Shape.prototype);
Rectangle.prototype.constructor = Rectangle;

const rect = new Rectangle();
rect.move(1, 1);  // 可以调用父类方法

多重继承的模拟实现

JavaScript 本身不支持多重继承，但可以通过混入(Mixin)模式模拟实现：

function M1() { this.hello = 'hello'; }
function M2() { this.world = 'world'; }

function S() {
  M1.call(this);
  M2.call(this);
}

S.prototype = Object.create(M1.prototype);
Object.assign(S.prototype, M2.prototype);
S.prototype.constructor = S;

这种模式的关键点：

在构造函数中调用多个父类构造函数
使用 Object.assign() 合并多个原型对象
适用于需要组合多个类功能的场景

模块化编程模式

随着应用复杂度增加，模块化成为必要。以下是几种常见的模块实现方式：

对象字面量模式

var module = {
  _privateVar: 0,
  publicMethod: function() {
    // 可以访问_privateVar
  }
};

优点：简单直接缺点：私有成员实际上仍可被外部访问

立即执行函数(IIFE)模式

var module = (function() {
  var _privateVar = 0;
  
  function privateMethod() {
    // ...
  }
  
  return {
    publicMethod: function() {
      // 可以访问_privateVar和privateMethod
    }
  };
})();

特点：

真正的私有变量和函数
只暴露必要的接口
是 JavaScript 中最常用的模块模式

放大模式与宽放大模式

当模块需要扩展时：

// 放大模式
var module = (function(mod) {
  mod.newMethod = function() {...};
  return mod;
})(module);

// 宽放大模式(更安全)
var module = (function(mod) {
  mod.newMethod = function() {...};
  return mod;
})(module || {});

宽放大模式解决了模块加载顺序不确定的问题。

模块依赖注入

var module = (function($, utils) {
  // 使用$和utils
})(jQuery, myUtils);

这种方式：

明确声明依赖
提高代码可读性
便于测试时替换依赖

私有成员实现模式

构造函数模式

function MyClass() {
  var _privateVar = 0;
  
  this.publicMethod = function() {
    return _privateVar;
  };
}

缺点：每个实例都会创建方法副本，内存效率低

原型模式与命名约定

function MyClass() {
  this._privateVar = 0;  // 下划线约定表示私有
}

MyClass.prototype.publicMethod = function() {
  return this._privateVar;
};

注意：这实际上不是真正的私有，只是开发约定

使用 WeakMap 实现真正私有(ES6+)

const _private = new WeakMap();

class MyClass {
  constructor() {
    _private.set(this, { privateVar: 0 });
  }
  
  publicMethod() {
    return _private.get(this).privateVar;
  }
}

这是目前最理想的私有成员实现方式。