模拟es6 Class中的private/public

2020-05-22

阿里笔试中的一道题，一眼看上去挺简单，但是仔细想想有挺多地方要注意的。。

原题

请实现一个Person类，且拥有private的成员变量及函数，public的成员变量及函数

提示：参考ts实现

class Person {
  private name = '';

  public address = '';

  constructor(name: string, address: string) {
    this.name = name;
    this.address = address;
  }

  private makeWords() {
    return `My name is: ${this.name}`;
  }

  public say() {
    console.log(this.makeWords());
  }
}

//结果预期
me = new Person('alibaba', 'hangzhou');
me.say() // My name is: alibaba
me.makeWords() // Error
me.name // undefined
me.address // hangzhou

解题过程

第一眼看到这道题的时候马上想到的是最简单的实现，用约定俗成的方法，给私有变量/方法名前缀加下划线：

方法一

const Person = function(name, address) {
    this._name = name;
    this.address = address;
    // 其他类似
}

方法二

法一只是一种约定，外部还是能通过_name取到私有属性。然后想到通过Object.defineProperty或者Proxy拦截私有属性的访问，于是写了一个版本：

const Person = function (name, address) {
  const obj = {
    name,
    address,
    makeWords() {
      return `My name is: ${this._safeGet("name")}`;
    },
    say() {
      console.log(this._safeGet("makeWords")());
    },
    _safeGet(propName) {
      const propVal = Reflect.get(obj, propName);
      return typeof propVal === "function" ? propVal.bind(this) : propVal;
    },
  };

  return new Proxy(obj, {
    get(target, propName) {
      const privateProps = ["name", "makeWords"];
      if (privateProps.includes(propName)) {
        return undefined;
      } else {
        return typeof target[propName] === "function"
          ? target[propName].bind(target)
          : target[propName]; //proxy拦截方法里面的this指向Proxy
      }
    },
  });
};

这个方法能屏蔽外部对私有属性的访问，但是内部调用必须经过_safeGet，和题目要求有微妙的区别。。而且某些浏览器不支持Proxy。

方法三

相当于方法二的简单实现，用闭包屏蔽外部访问，还是没解决内部调用的问题：

const Person = function (name, address) {
  const makeWords = function () {
    return `My name is: ${name}`;//怎么改造可以使用this.name？
  };

  const say = function () {
    console.log(makeWords());//怎么改造可以使用this.makeWords？
  };

  return { address, say };
};

方法四

通过原型链屏蔽私有属性的访问，这个解法是符合题目要求的，但是是否是最优解不得而知：

const Person = function (name, address) {
  const privateObj = {};
  const publicObj = {};
  privateObj.__proto__ = publicObj;

  const makeWords = function () {
    return `My name is: ${this.name}`;
  };

  const say = function () {
    console.log(this.makeWords());
  };

  const props = [//属性配置元组
    ["name", name, true], //propName, propValue, isPrivate
    ["address", address, false],
    ["makeWords", makeWords, true],
    ["say", say, false],
  ];

  for (let [propName, propValue, isPrivate] of props) {
    if (typeof propValue === "function") {
      propValue = propValue.bind(privateObj);
    }
    (isPrivate ? privateObj : publicObj)[propName] = propValue;
  }

  return publicObj;
};