JS - 創建只讀屬性


一:為私有變量創建get()方法

這種方式可以創建 “偽” 只讀屬性。這並不是一種好方法,因為使用_函數_獲得只讀的_屬性_不太符合一般的邏輯。

/**
 * Represent a used car.
 *
 * @constructor
 */
function Car() {
  var SELF = this,
    odometer = 0;

  /**
   * Increment the odometer
   *
   * @param {Number} miles
   */
  SELF.drive = function(miles) {
    odometer += Math.abs(miles);
  };

  /**
   * Get a protected odometer reading
   *
   * @return {Number}
   */
  SELF.get_odometer = function() {
    return odometer;
  };
}

var subaru = new Car();
subaru.drive(500);
subaru.get_odometer(); // 500

二:使用Object.defineProperties

使用 ECMAScript 5 的新特性靈活地定義變量。

/**
 * Represent a used car.
 *
 * @constructor
 */
function Car() {
  var SELF = this,
    _odometer = 0;

  /**
   * Increment the odometer
   *
   * @param {Number} miles
   */
  SELF.drive = function(miles) {
    _odometer += Math.abs(miles);
  };

  /**
   * Get a protected odometer reading
   *
   * @return {Number}
   */
  Object.defineProperties(this, {
    odometer: {
      get: function() {
        return _odometer;
      }
    }
  });
}

var subaru = new Car();
subaru.drive(500);
subaru.odometer; // 500
subaru.odometer = 0; // does nothing
subaru.odometer; // 500

三:使用新語法

雖然類是 function 的語法糖,但定義類時無法像 function 一樣定義私有變量(constructor 中定義的變量都是公有變量),所以這里需要用到用到類字段聲明。

類字段聲明是 TC39 提出的新語法,現在只進行到階段 3 候選階段(到階段 4 完成這個語法才算是准備好將包括在 ES 規范中),所以下面的代碼需要用 Babel 轉換成舊語法才可以使用。

/**
 * Represent a used car.
 *
 * @constructor
 */
class Car {
  #odometer = 500;
  get odometer() {
    return this.#odometer;
  }
}

var subaru = new Car();
subaru.odometer; // 500
subaru.odometer = 0; // TypeError: Cannot set property odometer of #<Car> which has only a getter

通過分析轉換為 ES5 的源碼可以看出,其實get方法本質還是使用了Object.defineProperty,私有變量使用了WeekMap進行存儲。

// Babel 轉換后的代碼
"use strict";

function _instanceof(left, right) {
  if (
    right != null &&
    typeof Symbol !== "undefined" &&
    right[Symbol.hasInstance]
  ) {
    return right[Symbol.hasInstance](left);
  } else {
    return left instanceof right;
  }
}

function _classCallCheck(instance, Constructor) {
  if (!_instanceof(instance, Constructor)) {
    throw new TypeError("Cannot call a class as a function");
  }
}

function _defineProperties(target, props) {
  for (var i = 0; i < props.length; i++) {
    var descriptor = props[i];
    descriptor.enumerable = descriptor.enumerable || false;
    descriptor.configurable = true;
    if ("value" in descriptor) descriptor.writable = true;
    Object.defineProperty(target, descriptor.key, descriptor);
  }
}

function _createClass(Constructor, protoProps, staticProps) {
  if (protoProps) _defineProperties(Constructor.prototype, protoProps);
  if (staticProps) _defineProperties(Constructor, staticProps);
  return Constructor;
}

function _classPrivateFieldGet(receiver, privateMap) {
  if (!privateMap.has(receiver)) {
    throw new TypeError("attempted to get private field on non-instance");
  }
  var descriptor = privateMap.get(receiver);
  if (descriptor.get) {
    return descriptor.get.call(receiver);
  }
  return descriptor.value;
}

var Car =
  /*#__PURE__*/
  (function() {
    function Car() {
      _classCallCheck(this, Car);

      _odometer.set(this, {
        writable: true,
        value: 500
      });
    }

    _createClass(Car, [
      {
        key: "odometer",
        get: function get() {
          return _classPrivateFieldGet(this, _odometer);
        }
      }
    ]);

    return Car;
  })();

var _odometer = new WeakMap();

var subaru = new Car();
subaru.odometer; // 500
subaru.odometer = 0; // TypeError: Cannot set property odometer of #<Car> which has only a getter

參考


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM