js如何将对象传入函数的参数,然后在函数内进行对于参数内对象的操作

一元阴阳
  • 6

就是比如说在函数内进行,对于参数内对象的
设置事件触发脚本之类的。我正在写js库,要实现对于对象操作的函数。

回复
阅读 701
2 个回答
✓ 已被采纳

如果你真的是想写一个 JS 库的话,我觉得可能还有不少功课要做。因为这个问题本身是一个非常基础的 JS 语法问题。在没有熟悉 JS、OOP 以及具有 JS 特色的 OOP 之前,我认为看别人写的库是可以的,但是要自己写库似乎会有点乏力。

把一个对象作为参数传入函数的时候,函数内部可以调用这个对象暴露出来的任何接口,包括「字段/属性」、「方法」等。如果你希望对该对象进行「事件」相关的操作,根据情况有几种不同的处理

  1. 对象本身具备事件注册及触发的能力,只需要调用相关接口就好
  2. 如果是想把对象作为参数传递给触发的事件,那只需要按事件触发接口的规范,传入这个对象就好。

举个例子,这是一个简单(但不够严谨)的事件处理对象示例:

// ES2015 引入的类语法 ❶
class Eventable {
    constructor() {
        this.events = {};
    }

    on(type, callback) {
        // ES2015 引入的模板字符串,或者称为插值字符串语法 ❷
        type = `${type}`.trim().toLowerCase();
        // ??= 是逻辑空赋值 ❸,它跟空值合并运算 ❹、可选链操作符 ❺ 等新语法有关
        const list = (this.events[type] ??= []);
        list.push(callback);
    }

    // ...args 是剩余参数语法 ❻。长相类似的还有展开语法 ❼,常用于解构和连接数组、对象
    trigger(type, ...args) {
        const event = {
            type,
            data: args
        };

        // 这里 ?? 就是空值合并运算符 ❹
        const list = this.events[type] ?? [];
        
        // () => { } 这种形式的是箭头函数 ❽
        list.forEach(fn => fn(event, ...args));
    }
}

参考文档

使用它可以像这样:

const test = new Eventable();
test.on("hello", (e, name) => console.log(`hello ${name}`));
test.trigger("hello", "James");

现在假设触发事件是在一个业务函数中,这个业务函数可以取到一些用户名,需要触发事件依次打招呼,那么可能是这样:

function sayHello(helloManager, userList) {
    (userList ?? []).forEach(user => helloManager.trigger("hello", user));
}

sayHello(test, ["James", "Jane", "Jack"]);
// hello James
// hello Jane
// hello Jack

那么这个 sayHello 是不是就是你想要的,传入对象,处理事件的操作呢?

引用类型直接修改就行

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
宣传栏