求助:阅读vue3源码时的一个困惑

662 阅读1分钟

createGetter函数中有这么一段:

 if (!isReadonly && targetIsArray && hasOwn(arrayInstrumentations, key)) {
              return Reflect.get(arrayInstrumentations, key, receiver);
          }

关于这个arrayInstrumentations是这样的:

 const arrayInstrumentations = /*#__PURE__*/ createArrayInstrumentations();
  function createArrayInstrumentations() {
      const instrumentations = {};
      ['includes', 'indexOf', 'lastIndexOf'].forEach(key => {
          const method = Array.prototype[key];
          instrumentations[key] = function (...args) {
              //!!!!!问题在这
              const arr = toRaw(this);//这个this,也就是代理target对象的proxy实例,是怎么传过来的
              for (let i = 0, l = this.length; i < l; i++) {
                  track(arr, "get" /* GET */, i + '');
              }
              // we run the method using the original args first (which may be reactive)
              const res = method.apply(arr, args);
              if (res === -1 || res === false) {
                  // if that didn't work, run it again using raw values.
                  return method.apply(arr, args.map(toRaw));
              }
              else {
                  return res;
              }
          };
      });
      ['push', 'pop', 'shift', 'unshift', 'splice'].forEach(key => {
          const method = Array.prototype[key];
          instrumentations[key] = function (...args) {
              pauseTracking();
              const res = method.apply(this, args);
              resetTracking();
              return res;
          };
      });
      return instrumentations;
  }

什么场景会碰到这个情况呢,看代码:

let arr = [1,2,3];
let parr = reactive(arr)
let res = parr.indexOf(2)   //res:1

我疑惑的是,Reflect.get(arrayInstrumentations, key, receiver)这个方法怎么将parr作为this传入到instrumentations['indexOf']方法中的。求大佬指点