Learning javascript object-oriented understanding javascript objects and javascript object-oriented

Learning javascript object-oriented understanding javascript objects and javascript object-oriented

I. Programming ideas
Process-oriented: process-oriented, step-by-step Refinement from top to bottom. The program is regarded as a set of function calls.
Object-oriented: Objects Act as the basic unit of a program and are decomposed into data and related operations.
Ii. Classes and objects
Class: abstract description of things with the same features and features
Object: specific objects of a certain type
3. Three features of object-oriented
Encapsulation: hides implementation details to implement code modularization.
Inheritance: extends existing code modules for code reuse.
Polymorphism: different implementation methods of interfaces for interface reuse
Iv. object definition:A set of unordered attributes, which can contain basic values, objects, or functions.

// Simple Object instance var person = new Object (); person. name = "Nicolas"; person. age = 29; person. job = "Software Engineer"; person. sayName = function () {alert (this. name );}

5. Internal attribute types:Internal Attributes cannot be accessed directly. ECMAScript5 puts them in two square brackets, which are divided into data attributes and accessors attributes.
[1] location where a data attribute contains a data valueIn this location, you can read and write values. Data attributes have four features:
A. [[retriable]: indicates whether the attribute can be deleted through delete to redefine the attribute, whether the attribute can be modified, or whether the attribute can be changed to the accessors attribute, property defined directly on the object. The default value is true.
B. [[Enumerable]: Indicates whether an attribute can be returned through a for-in loop and is defined directly on the object. The default value is true.
C. [[Writable]: indicates whether the attribute value can be modified. attributes defined on the object can be modified directly. The default value is true.
D. [Value]: the data Value that contains this attribute. when reading the attribute Value, the data is read from this position. When writing the attribute Value, the new Value is saved in this position. Property defined directly on the object. The default value is undefined.
[2] accessors attributes do not contain data values, Including a pair of getter and setter functions (but these two functions are not required ). When reading the accessors attribute, the getter function is called to return valid values. When writing the accessors attribute, the setter function is called and a new value is passed in, this function determines how to process the function. The accessors attributes have the following four features:
A. [[retriable]: indicates whether the attribute can be deleted through delete to redefine the attribute, whether the attribute can be modified, or whether the attribute can be changed to the accessors attribute. Property defined directly on the object. The default value is true.
B. [[Enumerable]: Indicates whether an attribute can be returned through a for-in loop and is defined directly on the object. The default value is true.
C. [[Get]: The function called when the attribute is read. The default value is undefined.
D. [[Set]: The function called when writing an attribute. The default value is undefined.
6. modify internal attributes:Using the object. defineProperty () method of ECMAScript5, this method receives three parameters: the object where the attribute is located, the name of the attribute, and a descriptor object.
[NOTE 1]IE8 is the first browser version that implements the Object. defineProperty () method. However, the implementation of this version has many restrictions: You can only use this method on the DOM object, and you can only create accessors. Because the implementation is incomplete, we do not recommend that you use the Object. defineProperty () method in IE8.
[NOTE 2][[Resumable] and [[Enumerable] cannot be modified in browsers that do not support the Object. defineProperty () method.
[1] modifying data attributes

// Attributes defined directly on the Object, including retriable, Enumerable, and Writable: truevar person = {name: 'cooker'}; Object. defineProperty (person, 'name', {value: 'nicholas '}); alert (person. name); // 'clairs' person. name = 'greg '; alert (person. name); // 'greg'

// It is not an attribute defined on the Object. The attributes such as retriable, Enumerable, and Writable are falsevar person ={}; Object. defineProperty (person, 'name', {value: 'nicholas '}); alert (person. name); // 'clairs' person. name = 'greg '; alert (person. name); // 'clairs'

// In this example, if writable is set to false, the property value cannot be changed var person ={}; Object. defineProperty (person, 'name', {writable: false, value: 'nicholas '}); alert (person. name); // 'clairs' person. name = 'greg '; alert (person. name); // 'clairs'

// In this example, if resumable is set to false, the property cannot be configured with var person ={}; Object. defineProperty (person, 'name', {retriable: false, value: 'nicholas '}); alert (person. name); // 'nickls' delete person. name; alert (person. name); // 'clairs'

[Note] Once the attribute is defined as not configurable, it cannot be changed back to configurable, that is, the Object can be called multiple times. defineProperty () is used to modify the same attribute. However, after setting resumable to false, the restriction is imposed.

Var person = {}; Object. defineProperty (person, 'name', {retriable: false, value: 'nicklas '}); // an error is returned. defineProperty (person, 'name', {retriable: true, value: 'nicholas '});

[2] modifying accessors

// Simple example of modifying the accessors property var book = {_ 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) // 2005 alert (book. edition); // 2

[NOTE 1] specifying only getter means that the attribute cannot be written.

var book = {  _year: 2004,  edition: 1};Object.defineProperty(book,'year',{  get: function(){    return this._year;  },});book.year = 2005;alert(book.year)//2004  

[NOTE 2] specifying only setter means the attribute cannot be read.

var book = {  _year: 2004,  edition: 1};Object.defineProperty(book,'year',{  set: function(newValue){    if(newValue > 2004){      this._year = newValue;      this.edition += newValue - 2004;    }  }});book.year = 2005;alert(book.year);//undefined

[Supplement] Two non-standard methods are used to create accessors: __definegetter _ () and _ defineSetter __()

Var book = {_ year: 2004, edition: 1}; // defines the old method book Of The accessors. _ 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); // 2005 alert (book. edition); // 2

7. Define multiple attributes:ECMAScript5 defines an Object. defineProperties () method. This method can be used to define multiple attributes at a time by descriptor. This method receives two object parameters: the first object is the object to add and modify its attributes, the second object has a one-to-one attribute that corresponds to the first object 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 > 2004){        this._year = newValue;        this.edition += newValue - 2004;      }    }  }});

8. Read attribute features:The Object. getOwnPropertyDescriptor () method of ECMAScript5 can be used to obtain the descriptor of a given attribute. This method receives two parameters: the object where the attribute is located and the name of the attribute whose descriptor is to be read. The returned value is an object.
[Note] the Object. getOwnPropertyDescriptor () method can be used 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 > 2004){        this._year = newValue;        this.edition += newValue - 2004;      }    }  } });var descriptor = Object.getOwnPropertyDescriptor(book,'_year');alert(descriptor.value);//2004alert(descriptor.configurable);//falsealert(typeof descriptor.get);//'undefined'var descriptor = Object.getOwnPropertyDescriptor(book,'year');alert(descriptor.value);//'undefined'alert(descriptor.configurable);//falsealert(typeof descriptor.get);//'function'

The above is a detailed introduction to javascript object-oriented content. I hope it will be helpful for your learning.

Articles you may be interested in:

• Two JavaScript object-oriented writing methods and differences
• JavaScript Object-Oriented Programming
• A good introduction to JavaScript object-oriented
• JS object-oriented, prototype, call (), apply ()
• Javascript Object-oriented New Data encapsulation
• Javascript object-oriented (1) (common methods, private methods, privileged methods)
• Javascript seamless scrolling (general method + object-oriented method)
• Jquery method + js general method + js object-oriented method to achieve drag-and-drop effect
• Basic Introduction to javascript object-oriented