JavaScript Object-oriented series for understanding objects

Source: Internet
Author: User

"Object Definition" a collection of unordered properties whose properties can contain basic values, objects, or functions

// a Simple object instance var New Object ();     = "Nicholas";     =;     = "Software Engineer";     function () {        alert (this. Name);    }

Internal property type Internal properties cannot be accessed directly, ECMAScript5 put them in two opposite brackets, divided into data properties and accessor properties

[1] "Data Property" contains the location of a data value, where the value can be read and written. There are 4 characteristics of data attributes:
A, [[[Configurable]]: Indicates whether the property can be redefined by deleting the property, whether the attribute can be modified, or whether the property can be modified to an accessor property, a property defined directly on the object, and the default value is True
b, [[[Enumerable]]: Indicates whether the property can be returned by a for-in loop, directly defined on the object, and the default value is True
c, [[[Writable]]: Indicates whether the value of the property can be modified, the property defined directly on the object, and the default value is True
D, [[[Value]]: Contains the data value of this property, read the value of the property, read from this position, when writing the property value, the new value is saved in this position. Properties defined directly on the object, the default value is undefined

[2] The accessor property does not contain a data value, contains a pair of getter and setter functions (although these two functions are not required). When the accessor property is read, the Getter function is called, which is responsible for returning a valid value, and when the accessor property is written, the setter function is called and the new value is passed, which determines how the function is handled. Accessor properties have the following 4 attributes:
A, [[[Configurable]]: Indicates whether the property can be redefined by deleting the property from Delete, can modify the attribute's attributes, or can modify the property to an accessor property. Properties defined directly on the object, the default value is True
b, [[[Enumerable]]: Indicates whether the property can be returned by a for-in loop, directly defined on the object, and the default value is True
c, [[Get]]: The function that is called when the property is read. The default value is undefined
D, [[Set]]: The function that is called when the property is written. The default value is undefined

Modify internal properties uses ECMAScript5 's Object.defineproperty () method, which receives three parameters: the object where the property resides, the name of the property, and a Descriptor object
  [Note 1] IE8 is the first browser version to implement the Object.defineproperty () method. However, the implementation of this version has many limitations: This method can only be used on DOM objects, and only accessor properties can be created. Because implementations are not exhaustive, it is not recommended to use the Object.defineproperty () method in IE8
  [Note 2] cannot be modified in browsers that do not support the Object.defineproperty () method [[Configurable] ] and [[[Enumerable]]
[1] "Modify data Properties"

 //  properties defined directly on the object, configurable, Enumerable, Writable is true  var  person = ' Cook ' };object.defineproperty (person,  ' name '  ' Nicholas '  //  ' Nicholas '  person.name = ' Greg ' ;alert ( Person.name);  //  ' Greg '  
 //  is not a property defined on an object, configurable, Enumerable, Writable is false  var  person = {};o Bject.defineproperty (person,  ' name ' ,{value:  ' Nicholas '  //  ' Nicholas '  person.name = ' Greg ' ;alert ( Person.name);  //  ' Nicholas '  
 //  This example sets writable to False, the property value cannot be modified  var  person = {};object.defineproperty ( person,  ' name ' ,{writable:  false   ' Nicholas ' }); alert (person.name);  //  ' Nicholas '  person.name = ' Greg ' ;alert ( Person.name);  //  ' Nicholas '  
// This example sets configurable to false, the property is not configurable var person = {};object.defineproperty (person,' name ', {    false,    ' Nicholas '}); alert (person.name); // ' Nichols ' Delete Person.name;alert (person.name); // ' Nicholas '

[note] Once the attribute is defined as not configurable, it can no longer be reconfigured, that is, it is possible to call Object.defineproperty () to modify the same property multiple times, but after setting the configurable to false, there is a limit

var person = {};object.defineproperty (person,' name ', {    false,    ' Nicholas '}); // will error Object.defineproperty (person, ' name ', {    true,    ' Nicholas '});

[2] "Modifying accessor Properties"

//Simple example of modifying accessor propertiesvarBook ={_year:2004, Edition:1};object.defineproperty (book,' Year ', {get:function(){        return  This. _year;}, set:function(newvalue) {if(NewValue > 2004){             This. _year =NewValue;  This. edition + = newValue-2004; }}); Book.year= 2005; alert (book.year)//2005alert (book.edition);//2

  [Note 1] only specifying getter means that the property is not writable

var book = {    2004,    1};object.defineproperty (book,' year ', {     function() {        returnthis. _year;     = 2005; alert (book.year)//2004    

 [Note 2] specifying the setter only means that the property cannot be read

 var  book = {_year:  2004, edition:  1};object.defineproperty (book,  ' year ' ,{set:  function   (NewValue) { if  (newvalue > 2004 this .            _year = NewValue;          = 2005;alert (book.year);  // undefined  

"Supplemental" two non-standard methods for creating accessor properties: __definegetter__ () and __definesetter__ ()

varBook ={_year:2004, Edition:1};//to define an old method of an accessorBOOK.__DEFINEGETTER__ (' Year ',function(){    return  This. _year;}); BOOK.__DEFINESETTER__ (' Year ',function(newvalue) {if(NewValue > 2004){         This. _year =NewValue;  This. edition + = newValue-2004; }}); Book.year= 2005; alert (book.year);//2005alert (book.edition);//2

Define multiple properties ECMAScript5 defines a object.defineproperties () method that allows you to define multiple properties at once by using a descriptor, which receives two object parameters: The first object is the object whose properties you want to add and modify. The properties of the second object correspond to the one by one of the first object to be added or modified

varBook ={};object.defineproperties (book,{_year: {value:2004}, Edition: {value:1}, Year: {get:function(){            return  This. _year; }, set:function(newvalue) {if(NewValue > 2004){                 This. _year =NewValue;  This. edition + = newValue-2004; }        }    }});

The Read attribute attribute uses the ECMAScript5 Object.getownpropertydescriptor () method to obtain a descriptor for a given property. The method receives two parameters: the object that contains the property and the name of the property whose descriptor is to be read, and the return value is an object.
[note] You can use the Object.getownpropertydescriptor () method for any object-including DOM and BOM objects

varBook ={};object.defineproperties (book,{_year: {value:2004}, Edition: {value:1}, Year: {get:function(){            return  This. _year; }, set:function(newvalue) {if(NewValue > 2004){                 This. _year =NewValue;  This. edition + = newValue-2004; }        }    } });varDescriptor = object.getownpropertydescriptor (book, ' _year ')); alert (descriptor.value);//2004alert (descriptor.configurable);//falseAlerttypeofDescriptor.get);//' undefined 'varDescriptor = object.getownpropertydescriptor (book, ' Year '); alert (descriptor.value);//' undefined 'alert (descriptor.configurable);//falseAlerttypeofDescriptor.get);//' function '

JavaScript Object-oriented series for understanding objects

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.