javascript - How can I use `defineProperty` to create a readonly array property? - Stack Overflow

admin管理员组

文章数量:1350447

I have the following as a part of a module (names simplified for purpose of question):

In "module.js":

var _arr;

_arr = [];

function ClassName () {
    var props = {};

    // ... other properties ...

    props.arr = {
        enumerable: true,
        get: function () {
            return _arr;
        }
    };

    Object.defineProperties(this, props); 

    Object.seal(this);
};

ClassName.prototype.addArrValue = function addArrValue(value) {

    // ... some code here to validate `value` ...

    _arr.push(value);
}

In "otherfile.js":

var x = new ClassName();

With the implementation above, and the sample code below, adding values to arr can be achieved in two ways.

// No thank you.
x.arr.push("newValue"); // x.arr = ["newValue"];

// Yes please!
x.addArrValue("newValue"); // Only this route is desired.

Does anyone know how to achieve a readonly array property?

Note: writeable is false by default and no difference is observed if I explicitly set it.

I have the following as a part of a module (names simplified for purpose of question):

In "module.js":

var _arr;

_arr = [];

function ClassName () {
    var props = {};

    // ... other properties ...

    props.arr = {
        enumerable: true,
        get: function () {
            return _arr;
        }
    };

    Object.defineProperties(this, props); 

    Object.seal(this);
};

ClassName.prototype.addArrValue = function addArrValue(value) {

    // ... some code here to validate `value` ...

    _arr.push(value);
}

In "otherfile.js":

var x = new ClassName();

With the implementation above, and the sample code below, adding values to arr can be achieved in two ways.

// No thank you.
x.arr.push("newValue"); // x.arr = ["newValue"];

// Yes please!
x.addArrValue("newValue"); // Only this route is desired.

Does anyone know how to achieve a readonly array property?

Note: writeable is false by default and no difference is observed if I explicitly set it.

• javascript
• arrays
• properties
• native-methods

Share Improve this question Follow edited Jun 29, 2017 at 10:25 Ash Clarke asked Mar 19, 2014 at 19:08 Ash ClarkeAsh Clarke 4,89711 gold badge4040 silver badges4949 bronze badges 4

• You aren't writing the property; you're mutating the array that it holds. – SLaks Commented Mar 19, 2014 at 19:09
• That is true... Perhaps I need to think up a better solution. – Ash Clarke Commented Mar 20, 2014 at 9:24
• Look at Object.seal() – SLaks Commented Mar 20, 2014 at 14:10
• Object.seal() on props.arr could work, but I don't think I would be able to "unseal" it for when I mutate it in the "x.addArrValue" fn. – Ash Clarke Commented Mar 20, 2014 at 20:59

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 7

Object.freeze() will do what you're asking (on browsers properly implementing the spec). Attempts to modify the array will either fail silently or throw TypeError when in strict mode.

The easiest solution is to return a new frozen copy (freeze is destructive):

return Object.freeze(_arr.slice());

However, if more reading than writing is expected, lazy-cache the most recently accessed frozen copy and purge upon write (since addArrValue controls writes)

Lazy caching read-only copy using modified original example:

"use strict";
const mutable = [];
let cache;

function ClassName () {
    const props = {};

    // ... other properties ...

    props.arr = {
        enumerable: true,
        get: function () {
            return cache || (cache = Object.freeze(mutable.slice());
        }
    };

    Object.defineProperties(this, props); 

    Object.seal(this);
};

ClassName.prototype.addArrValue = function addArrValue(value) {

    // ... some code here to validate `value` ...

    mutable.push(value);
    cache = undefined;
}

Lazy caching read-only copy using ES2015 classes:

class ClassName {
    constructor() {
        this.mutable = [];
        this.cache = undefined;
        Object.seal(this);
    }

    get arr() {
        return this.cache || (this.cache = Object.freeze(this.mutable.slice());
    }

    function addArrValue(value) {
        this.mutable.push(value);
        this.cache = undefined;
    }
}

A "transparent" re-usable class hack (rarely required):

class ReadOnlyArray extends Array {
    constructor(mutable) {
        // `this` is now a frozen mutable.slice() and NOT a ReadOnlyArray
        return Object.freeze(mutable.slice()); 
    }
}

const array1 = ['a', 'b', 'c'];
const array2 = new ReadOnlyArray(array1);

console.log(array1); // Array ["a", "b", "c"]
console.log(array2); // Array ["a", "b", "c"]
array1.push("d");
console.log(array1); // Array ["a", "b", "c", "d"]
console.log(array2); // Array ["a", "b", "c"]
//array2.push("e"); // throws

console.log(array2.constructor.name); // "Array"
console.log(Array.isArray(array2));   // true
console.log(array2 instanceof Array); // true
console.log(array2 instanceof ReadOnlyArray); // false

A proper re-usable class:

class ReadOnlyArray extends Array {
    constructor(mutable) {
        super(0);
        this.push(...mutable);
        Object.freeze(this);
    }
    static get [Symbol.species]() { return Array; }
}

const array1 = ['a', 'b', 'c'];
const array2 = new ReadOnlyArray(array1);

console.log(array1); // Array ["a", "b", "c"]
console.log(array2); // Array ["a", "b", "c"]
array1.push("d");
console.log(array1); // Array ["a", "b", "c", "d"]
console.log(array2); // Array ["a", "b", "c"]
//array2.push("e"); // throws

console.log(array2.constructor.name); // "ReadOnlyArray"
console.log(Array.isArray(array2));   // true
console.log(array2 instanceof Array); // true
console.log(array2 instanceof ReadOnlyArray); // true

Reviewing this, 2 years on, a possible solution for this is to return a copy of the array, via the property accessor. Whether it is the best approach depends on various factors (e.g. expected array size, etc.)

props.arr = {
   enumerable: true,
    get: function () {
        return _arr.slice();
    }
};

This means that calling .push on the array would have no affect on the original _arr array and the addArrValue method would be the only way to mutate the "private" _arr variable.

var x = new ClassName();

x.arr.push("newValue"); // Silently fails as it mutates a copy of _arr

console.log(x.arr); // []

x.addArrValue("hi");

console.log(x.arr); // ["hi"];

Not defineProperty, but Nowadays can use es6 Proxy

not the best one imo, just an alternative, but really customizable I'd say

var _arr;

_arr = [];

function ClassName () {
    var props = {};

    // ... other properties ...

    this.arr = new Proxy(_arr, {
      get(obj, prop){
        console.log("prop:", prop.toString());
        if(typeof prop === "symbol"){
          return obj[prop];
        }

        // either block functions like push, pop
        switch(prop){
        // or other mutable methods
        case "push":
        case "pop":
        case "shift":
        case "unshift":
          // you can throw error
          return () => {};
        case "length":
          return obj[prop];
        }

        if(Number.isInteger(Number(prop))){ // this is not a good way, just for example
          return obj[prop];
        }

        /*
        */
        // idk which is desired
        return obj[prop]; // default behaviour just in case
      },
      set(target, key, value){
        // you can throw error
        return false;
      }
    });

    Object.seal(this);
};

ClassName.prototype.addArrValue = function addArrValue(value) {

    // ... some code here to validate `value` ...

    _arr.push(value);
}


let x = new ClassName();
console.log(x.arr);
x.addArrValue(2);
console.log(x.arr);
console.log(x.arr.toString());
console.log(x.arr instanceof Array); // true
console.log(Array.isArray(x.arr)) // true
console.log(x.arr.class); // undefined

本文标签： javascriptHow can I use defineProperty to create a readonly array propertyStack Overflow