用不同的 arguments 在另一个类的属性中绑定对象的方法

Question

This is a stripped down version of a file i'm working on.

So, there's this Object that has this method,

const A = {
          dispatchEvent(el, component, eventName, ...args) {
          el.dispatchEvent(new CustomEvent("gsuiEvents", {
              bubbles: true,
              detail: { component, eventName, args },
          })
     );
 }

and there's

class B extends HTMLElement {
        constructor() {}
        super();
        this._dispatch = A.dispatchEvent.bind(
          null,
          this,
          "someItem"
        );

     _oninputProp(prop, val) {
        this._dispatch("liveChange", prop, val);
     }
}

If you look at the Class B , the dispatchEvent method being bound has (null, this, "someItem") as the parameters whereas on Object A , there's (el, component, eventName, ...args) .

I want to understand whats going on. Will the this._dispatch property have the function that's contained in Object A ?

also, if you look at the arguments on Class B 's _oninputProp() method, there's different type of arguments which is different from Object A 's dispatchEvent() method.

Sorry for such a question, please bear with me. Thank you.

Answer 1

This is an alternative way to set it up:

const A = {
          dispatchEvent(component, eventName, ...args) {
          this.dispatchEvent(new CustomEvent("gsuiEvents", {
              bubbles: true,
              detail: { component, eventName, args },
          })
     );
 }

class B extends HTMLElement {
        constructor() {}
        super();
        this._dispatch = A.dispatchEvent.bind(
          this,
          "someItem"
        );

     _oninputProp(prop, val) {
        this._dispatch("liveChange", prop, val);
     }
}

The first argument to bind is whatever the bound function will use as this .

In your case you want to invoke dispatchEvent on the element that made the binding, ie the instance of class B.

So to achieve this you should pass the element's this to be used as this in the bound function.

Answer 2

The arguments are all correct. Whats happening here is this,

function list() {
  return Array.prototype.slice.call(arguments);
}
 
const list1 = list(1, 2, 3);
//  [1, 2, 3]
   
// Create a function with a preset leading argument
const leadingThirtysevenList = list.bind(null, 37);

const list2 = leadingThirtysevenList(); 
//  [37]

const list3 = leadingThirtysevenList(1, 2, 3); 
//  [37, 1, 2, 3]

All thanks to your MDN reference link. I was in the dark with this and all i needed was clarity. Thank you again, Chris!