如何为自定义mx构造函数实现类似jQuery的链式点调用操作方法

核心问题原因 #

你定义的init构造函数的原型未与mx.fn绑定，mx(array)返回的是init的实例，该实例默认只能访问init.prototype上的方法，你挂载到mx.fn/mx.prototype的方法自然无法被访问到。

修正实现 #

关键修改点 #

新增mx.fn.init.prototype = mx.fn，打通init实例与mx.fn的原型继承关系，所有挂载到mx.fn的方法都可以被mx()返回的实例直接调用。

完整可运行代码 #

let mx = function(arr) {
    return new mx.fn.init(arr) 
}

mx.fn = mx.prototype = {
    constructor: mx,
    // 自定义操作方法
    addRow: function(row) {
        // 操作实例存储的数组数据
        this.value.push(row)
        // 返回当前实例支持链式调用
        return this
    },
    each: function(callback) {
        this.value.forEach((item, index) => callback(item, index))
        return this
    },
    map: function(callback) {
        this.value = this.value.map(callback)
        return this
    }
}

mx.fn.init = function(arr) {
    // 将传入的数组挂载到实例属性，供后续方法调用
    this.value = arr
}
// 核心：关联init原型与mx.fn
mx.fn.init.prototype = mx.fn

调用示例 #

const testArr = [1,2,3]
// 支持链式调用
mx(testArr)
  .addRow(4)
  .map(item => item * 2)
  .each(item => console.log(item))
// 输出：2 4 6 8

原理说明 #

类似jQuery的链式调用本质就是原型继承+方法返回实例的设计：

1. 工厂函数mx()内部返回init构造函数的实例，避免用户每次手动写new
2. 把init的原型指向mx.fn，所有公共方法统一挂载到mx.fn上维护
3. 每个公共方法执行完成后返回当前实例this，就可以继续调用其他方法，实现链式调用。

内容的提问来源于stack exchange，提问作者Amadeus