Learn JavaScript Object-oriented understanding JavaScript objects _javascript Tips

Source: Internet
Author: User

First, the programming idea
Process oriented: Process-centric, Top-down refinement, the program as a series of function calls set
Object-oriented: Object as the basic unit of the program, the program decomposed into data and related operations
second, class, object
class: An abstract description of things with the same characteristics and characteristics
Object: A specific thing of a type
Three main characteristics of object-oriented
Encapsulation: Hide implementation Details and implement code modularity
Inheritance: Extending existing code modules to enable code reuse
Polymorphism: Different implementations of interfaces to realize interface reuse
Object definition: A collection of unordered attributes, whose properties can contain basic values, objects, or functions

Simple object instance
var person = new Object ();
  Person.name = "Nicholas";
  Person.age =;
  Person.job = "Software Engineer";
  Person.sayname = function () {
    alert (this.name);
  }

Five, the internal property type:Internal properties cannot be accessed directly, ECMAScript5 put them in two opposite brackets, divided into data properties and accessor properties
[1] The Data property contains the position of a data value, where the value can be read and written. Data properties have 4 attributes:
A, [[configurable]]: Indicates whether the attribute can be deleted by deleting the property, whether the attribute is modified, or whether the property can be modified to an accessor property, and the default value is True
b, [[[Enumerable]]: Indicates whether the property can be returned through the for-in loop, the property defined directly on the object, and the default value is True
c, [[[Writable]]: Indicates whether the property's value can be modified, the property defined directly on the object, and the default is True
D, [[[Value]]: A data value that contains this property, reads the property value, reads from this position, and writes the value of the property at this location. Properties defined directly on the object, the default value is undefined
[2] accessor properties do not contain data values, 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 invoked and the new value is passed in, which is responsible for deciding how to handle the function. Accessor properties have the following 4 attributes:
A, [[configurable]]: Indicates whether the attribute can be deleted by deleting the attribute, whether the attribute is modified, or whether the property can be modified to an accessor property. The property defined directly on the object, and the default value is True
b, [[[Enumerable]]: Indicates whether the property can be returned through the for-in loop, the property defined directly 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
Vi. Modify Internal properties:Using the ECMAScript5 Object.defineproperty () method, the method receives three parameters: the object in which the property is located, 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 a DOM object, and only accessor properties can be created. It is not recommended to use the Object.defineproperty () method in IE8 because the implementation is not thorough
[Note 2]Cannot modify [[configurable]] and [[[Enumerable]] in browsers that do not support the Object.defineproperty () method
[1] Modifying data properties

Properties defined directly on the object, configurable, enumerable, writable is true
var person = {
  name: ' Cook '
};
Object.defineproperty (person, ' name ', {
  value: ' Nicholas '
});
alert (person.name);//' Nicholas '
person.name = ' Greg ';
alert (person.name);//' Greg '  
is not a property defined on an object, configurable, enumerable, writable is false
var person = {};
Object.defineproperty (person, ' name ', {
  value: ' Nicholas '
});
alert (person.name);//' Nicholas '
person.name = ' Greg ';
alert (person.name);//' Nicholas '

This example sets writable to False, the property value cannot be modified by the
var person = {};
Object.defineproperty (person, ' name ', {
  writable:false,
  value: ' Nicholas '
});
alert (person.name);//' Nicholas '
person.name = ' Greg ';
alert (person.name);//' Nicholas '  

If the example sets configurable to false, the property is not configurable with the
var person = {};
Object.defineproperty (person, ' name ', {
  configurable:false,
  value: ' Nicholas '
});
alert (person.name);//' Nichols '
delete person.name;
alert (person.name);//' Nicholas '

[note] Once the attribute is defined as not configurable, it cannot be changed back to configurable, that is, Object.defineproperty () can be invoked multiple times to modify the same property, but after setting the configurable to false, there is a limit

var person = {};
Object.defineproperty (person, ' name ', {
  configurable:false,
  value: ' Nicholas '
});
Will error
Object.defineproperty (person, ' name ', {
  configurable:true,
  value: ' Nicholas '
});

[2] Modify accessor properties

A simple example of modifying accessor attributes is the
var book = {
  _year:2004,
  edition:1
};
Object.defineproperty (book, "Year", {
  get:function () {return
    this._year;
},
  set:function (newvalue {
    if (NewValue >) {
      this._year = newvalue;
      This.edition + = newValue-2004;
    }}
);
Book.year = the;
Alert (book.year)//2005
alert (book.edition);//2

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

var book = {
  _year:2004,
  edition:1
};
Object.defineproperty (book, "Year", {
  get:function () {return
    this._year;
  },
});
Book.year = the;
Alert (book.year)//2004  

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

var book = {
  _year:2004,
  edition:1
};
Object.defineproperty (book, ' Year ', {
  set:function (newvalue) {
    if (NewValue >) {
      this._year = NewValue;
      This.edition + = newValue-2004;
    }}
);
Book.year = the;
alert (book.year);//undefined

Two non-standard methods for creating accessor properties: __definegetter__ () and __definesetter__ ()

var book = {
  _year:2004,
  edition:1
};
Defines an old method of accessor
book.__definegetter__ (' Year ', function () {return
  this._year;
});
BOOK.__DEFINESETTER__ (' Year ', function (newvalue) {
  if (NewValue >) {
    this._year = newvalue;
    This.edition + = newValue-2004;
  }
);
Book.year = the;
alert (book.year);//2005
alert (book.edition);//2

Seven, define multiple attributes: ECMASCRIPT5 defines a object.defineproperties () method that allows you to define multiple properties one at a time, which receives two object arguments: The first object is the object whose properties you want to add and modify. The property of the second object corresponds to the one by one that the first object is to be added or modified

var book = {};
Object.defineproperties (book,{
  _year: {
    value:2004
  },
  edition: {
    value:1
  }, Year
  : {
    Get:function () {return
      this._year;
    },
    set:function (newvalue) {
      if (NewValue >) {
        This._year = newvalue;
        This.edition + = newValue-2004;}}}
);

Read attribute attributes: using the ECMAScript5 object.getownpropertydescriptor () method, you can get a descriptor for the 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

var book = {};
Object.defineproperties (book,{
  _year: {
    value:2004
  },
  edition: {
    value:1
  }, Year
  : {
    Get:function () {return
      this._year;
    },
    set:function (newvalue) {
      if (NewValue >) {
        This._year = newvalue;
        This.edition + = newValue-2004;}}} 
);
var descriptor = object.getownpropertydescriptor (book, ' _year ');
alert (descriptor.value);//2004
alert (descriptor.configurable);//false
alert (typeof Descriptor.get); ' Undefined '

var descriptor = object.getownpropertydescriptor (book, ' Year ');
alert (descriptor.value);//' Undefined '
alert (descriptor.configurable);//false
alert (typeof Descriptor.get);//' function '

The above is about JavaScript object-oriented details of the introduction, I hope to help you learn.

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.