JavaScript Advanced Programming Note 05 (object-oriented)

Source: Internet
Author: User

object-oriented Design

There are two types of properties in es : Data properties and accessor properties

    • Data Properties :

the Data property contains the location of a data value , where the value can be read and written , and the data attribute has 4 attributes that describe its behavior

  1. [[configurable]]: Indicates whether the property can be modified by Deleting the attribute to Re-first , can modify the Property's properties , Or can I change the property to an accessor property , which defaults to true
  2. [[[Enumerable]]: Indicates whether the property can be returned through the for-in loop , which is true by default
  3. [[writable]]: Indicates whether the value of the property can be modified by default to true
  4. [[value]]: The data value containing this property defaults to undefined

to modify properties by default , you must use the es5 object.defineproperty method . This method receives three parameters : The object where the property resides, the name of the property, and a descriptor object, where the property of the Descriptor object must be:configurable, Enumerable , writable and the value , set one or more of these values to modify the corresponding attribute values, for example:

var person ="name", {  false,  "Nicholas"}); alert ( person.name); // "Nicholas"person.name = "Greg"; alert (person.name)//"Nicholas"

note : Ie8 is the first implementation of object.defineproperty method Browser version However This version of the implementation there are many restrictions : only in dom Object using this method and can only create accessor properties Span style= "font-family:calibri", Because the implementation is not exhaustive It is recommended that readers do not ie8

    • L  accessor properties :

Accessor property does not contain data values ; They contain a pair of getter setter function when reading accessor properties getter function This function is responsible for returning valid values When writing accessor properties setter function and pass in the new value The accessor property has the following 4

    1. [[confingurable]]: Indicates whether the delete Delete attributes to redefine properties Or can you modify the property to a data property
    2. [[enumerable]]: Indicates whether it can be passed for-in looping back Properties
    3. [[get]]: undefined
    4. [[set]]: The function called when writing the attribute undefined

accessor properties cannot be defined directly , and must be defined using objiect.defineproperty .

    • L Define multiple properties

Since there is a large likelihood that no object defines multiple properties , ES5 also defines a object.difineproperties method , This method can be used to define multiple properties at once by 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 property one by one to be added or modified in the first object .

For example :

var book={};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;}}}  )
    • Properties of Read attributes

in theEs5inObject.getownpropertydescriptorMethod,can get a descriptor for a given property,This method receives two parameters:the object where the property resides and the name of the property to read the description,The return value is an object,If this is an accessor property,the properties of this object areConfigurable,enumerable,getand theset;if the data attribute,the properties of this object areconfigurable,enumerable,writableand theValue.For example:

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);//undefinedvarDescriptor=object.getownpropertydescriptor (book, ' year '); Alert (descriptor.value);//underfinedAlert (descriptor.enumerable);//falseAlerttypeofdescriptor.get);//function

    • L Create objects
    1. Factory mode

Factory mode is a well-known design pattern in the field of software engineering that abstracts the process of creating concrete objects ( Other design patterns are discussed later in this book and their Implementation in JavaScript ).

function Createperson (name,age,job) {  var o=New  Object ();  O.name=name;  O.age= Age;  O.job=job;  O.sayname=function() {    alert (this. name);  }   return o;} var person1=createperson ("Nicholas", "software enginneer"); var person2=createperson ("Greg", "Doctor");

JavaScript Advanced Programming Note 05 (object-oriented)

Related Article

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.