JavaScript 中构造函数怎么实现链式构造模式-js教程-PHP中文网

javascript中构造函数本身不支持链式调用，但可通过方法返回this实现链式构造模式；亦可结合静态工厂方法（如create/build）封装构建流程，或在function构造函数原型上挂载返回this的方法。

javascript 中构造函数怎么实现链式构造模式

JavaScript 中构造函数本身不直接支持链式调用，但可以通过在每个方法（包括构造逻辑相关的方法）中返回 this，实现“链式构造模式”——即在实例化后连续调用初始化或配置方法，并最终完成对象构建。

核心思路：让每个配置方法返回实例本身

链式调用的本质是方法返回对象（通常是当前实例），从而支持连续点号调用。构造函数负责创建初始状态，后续的 setter 或配置方法需显式返回 this。

例如：

class Button {
  constructor() {
    this.text = '';
    this.color = 'blue';
    this.size = 'medium';
  }
  setText(text) {
    this.text = text;
    return this; // ? 关键：返回 this 才能链式调用
  }
  setColor(color) {
    this.color = color;
    return this;
  }
  setSize(size) {
    this.size = size;
    return this;
  }
}

// 使用
const btn = new Button().setText('Submit').setColor('green').setSize('large');

配合工厂式构造：用静态方法封装链式入口

若希望语法更贴近“构造过程链式化”（如 Button.create().text('OK').build()），可结合静态工厂方法与可链式配置的类：

Alibabacloud Sdk Client Initialization For Java

在 Java 中初始化和管理阿里云 SDK客户端。包括单例模式、线程安全、endpoint 与 region 配置、VPC 终端节点、同步与异步等。

下载

说明：静态方法返回一个临时配置对象（非最终实例），最后通过 .build() 实例化并返回目标对象。

避免污染真实实例原型（配置方法只在构建阶段可用）
支持参数校验、默认值合并、异步准备等复杂逻辑
更清晰地区分“构建过程”和“运行时行为”

class Button {
  constructor({ text = '', color = 'blue', size = 'medium' } = {}) {
    this.text = text;
    this.color = color;
    this.size = size;
  }
}

Button.create = function() {
  let config = { text: '', color: 'blue', size: 'medium' };
  return {
    text(t) { config.text = t; return this; },
    color(c) { config.color = c; return this; },
    size(s) { config.size = s; return this; },
    build() { return new Button(config); }
  };
};

// 使用
const btn = Button.create().text('Save').color('primary').build();

兼容传统构造函数写法（非 class）

使用 function 构造函数时，同样可在原型方法中返回 this，但要注意不要在构造函数中直接返回对象（否则会覆盖 new 创建的实例）。

正确做法：

构造函数内只做初始化赋值
所有链式方法挂载到 prototype 上，并返回 this
避免在构造函数里 return 对象字面量（会中断 new 的实例绑定）

function Input() {
  this.value = '';
  this.placeholder = '';
  this.disabled = false;
}

Input.prototype.val = function(v) {
  this.value = v;
  return this;
};

Input.prototype.placeholderText = function(p) {
  this.placeholder = p;
  return this;
};

Input.prototype.disable = function() {
  this.disabled = true;
  return this;
};

// 使用
const input = new Input().val('hello').placeholderText('Type here...').disable();