Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Can Read-Only Properties be Implemented in Pure JavaScript?

Looking at the mozilla documentation, looking at the regular expression example (headed "Creating an array using the result of a match"), we have statements like:

input: A read-only property that reflects the original string against which the regular expression was matched.

index: A read-only property that is the zero-based index of the match in the string.

etc... is it possible to create your own object in JavaScript which will have read-only properties, or is this a privilege reserved to built-in types implemented by particular browsers?

like image 380
Claudiu Avatar asked Dec 14 '08 01:12

Claudiu


People also ask

What is read only property in JavaScript?

The readOnly property sets or returns whether a text field is read-only, or not. A read-only field cannot be modified. However, a user can tab to it, highlight it, and copy the text from it. Tip: To prevent the user from interacting with the field, use the disabled property instead.

How do I make a read only file in JavaScript?

The below does: document. getElementById("input_field_id"). setAttribute("readonly", true);

What is a read only property?

Read only means that we can access the value of a property but we can't assign a value to it. When a property does not have a set accessor then it is a read only property. For example in the person class we have a Gender property that has only a get accessor and doesn't have a set accessor.


2 Answers

With any javascript interpreter that implements ECMAScript 5 you can use Object.defineProperty to define readonly properties. In loose mode the interpreter will ignore a write on the property, in strict mode it will throw an exception.

Example from ejohn.org:

var obj = {}; Object.defineProperty( obj, "<yourPropertyNameHere>", {   value: "<yourPropertyValueHere>",   writable: false,   enumerable: true,   configurable: true }); 
like image 176
Aidamina Avatar answered Sep 30 '22 23:09

Aidamina


Edit: Since this answer was written, a new, better way using Object.defineProperty has been standardized in EcmaScript 5, with support in newer browsers. See Aidamina's answer. If you need to support "older" browsers, you could use one of the methods in this answer as a fallback.


In Firefox, Opera 9.5+, and Safari 3+, Chrome and IE (tested with v11) you can define getter and setter properties. If you only define a getter, it effectively creates a read-only property. You can define them in an object literal or by calling a method on an object.

var myObject = {     get readOnlyProperty() { return 42; } };  alert(myObject.readOnlyProperty); // 42 myObject.readOnlyProperty = 5;    // Assignment is allowed, but doesn't do anything alert(myObject.readOnlyProperty); // 42 

If you already have an object, you can call __defineGetter__ and __defineSetter__:

var myObject = {}; myObject.__defineGetter__("readOnlyProperty", function() { return 42; }); 

Of course, this isn't really useful on the web because it doesn't work in Internet Explorer.

You can read more about it from John Resig's blog or the Mozilla Developer Center.

like image 35
Matthew Crumley Avatar answered Sep 30 '22 23:09

Matthew Crumley