Learn javascript object-oriented and understand javascript objects_javascript skills

1. Programming Thoughts
Process-oriented: Centered on the process, gradually refined from top to bottom, the program is regarded as a collection of function calls
Object-oriented: Objects serve as the basic unit of the program, and the program is decomposed into data and related operations
2. Classes and objects
Class: an abstract description of things with the same characteristics and characteristics
Object: a specific thing corresponding to a certain type
3. Three major characteristics of object-oriented
Encapsulation: Hide implementation details and achieve code modularization
Inheritance: extend existing code modules to achieve code reuse
Polymorphism: different implementation methods of interfaces to achieve interface reuse
4. Object definition: A collection of unordered attributes, whose attributes can include basic values, objects or functions

//简单的对象实例
var person = new Object();
  person.name = "Nicholas";
  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 and divides them into data attributes and accessor attributes
[1] The data attribute contains a data value location where the value can be read and written. Data attributes have 4 characteristics:
a. [[Configurable]]: Indicates whether the attribute can be redefined by deleting the attribute through delete, whether the characteristics of the attribute can be modified, or whether the attribute can be modified as an accessor attribute. For attributes defined directly on the object, the default value is true.
b. [[Enumerable]]: Indicates whether the attribute can be returned through a for-in loop. The attribute is defined directly on the object. The default value is true
c, [[Writable]]: Indicates whether the value of the attribute can be modified. For attributes defined directly on the object, the default value is true
d. [[Value]]: Contains the data value of this attribute. When reading the attribute value, read it from this location; when writing the attribute value, save the new value in this location. Properties defined directly on the object, the default value is undefined
[2] The accessor property does not contain a data value , but contains a pair of getter and setter functions (but 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; when the accessor property is written, the setter function is called and the new value is passed in, and this function is responsible for deciding how to handle the function. Accessor properties have the following 4 characteristics:
a. [[Configurable]]: Indicates whether the attribute can be redefined by deleting the attribute through delete, whether the characteristics of the attribute can be modified, or whether the attribute can be modified into an accessor attribute. Properties defined directly on the object, the default value is true
b. [[Enumerable]]: Indicates whether the attribute can be returned through a for-in loop. The attribute is defined directly on the object. The default value is true
c. [[Get]]: Function called when reading attributes. The default value is undefined
d.[[Set]]: Function called when writing attributes. The default value is undefined
6. Modify internal properties: Use the object.defineProperty() method of ECMAScript5, which receives three parameters: the object where 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, this version of the implementation has many limitations: this method can only be used on DOM objects, and only accessor properties can be created. Due to incomplete implementation, it is not recommended to use the Object.defineProperty() method in IE8
[Note 2]Browsers that do not support the Object.defineProperty() method cannot modify [[Configurable]] and [[Enumerable]]
[1] Modify data attributes

//直接在对象上定义的属性，Configurable、Enumerable、Writable为true
var person = {
  name:'cook'
};
Object.defineProperty(person,'name',{
  value: 'Nicholas'
});
alert(person.name);//'Nicholas'
person.name = 'Greg';
alert(person.name);//'Greg'  

//不是在对象上定义的属性，Configurable、Enumerable、Writable为false
var person = {};
Object.defineProperty(person,'name',{
  value: 'Nicholas'
});
alert(person.name);//'Nicholas'
person.name = 'Greg';
alert(person.name);//'Nicholas'

//该例子中设置writable为false,则属性值无法被修改
var person = {};
Object.defineProperty(person,'name',{
  writable: false,
  value: 'Nicholas'
});
alert(person.name);//'Nicholas'
person.name = 'Greg';
alert(person.name);//'Nicholas'  

//该例子中设置configurable为false,则属性不可配置
var person = {};
Object.defineProperty(person,'name',{
  configurable: false,
  value: 'Nicholas'
});
alert(person.name);//'Nichols'
delete person.name;
alert(person.name);//'Nicholas'

[Note] Once a property is defined as non-configurable, it cannot be changed back to configurable. That means you can call Object.defineProperty() multiple times to modify the same property, but after setting configurable to false , there are restrictions

var person = {};
Object.defineProperty(person,'name',{
  configurable: false,
  value: 'Nicholas'
});
//会报错
Object.defineProperty(person,'name',{
  configurable: true,
  value: 'Nicholas'
});

[2] Modify accessor properties

//简单的修改访问器属性的例子
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] Only specifying 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] Only specifying setter 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;
      this.edition += newValue - 2004;
    }
  }
});
book.year = 2005;
alert(book.year);//undefined

[Supplement] Use two non-standard methods to create accessor properties: __defineGetter__() and __defineSetter__()

var book = {
  _year: 2004,
  edition: 1
};
//定义访问器的旧有方法
book.__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 properties: ECMAScript5 defines an Object.defineProperties() method, which can be used to define multiple properties at once through descriptors. This method receives two object parameters: First The first object is the object whose properties are to be added and modified. The properties of the second object correspond one-to-one with the properties of 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;
      }
    }
  }
});

八、读取属性特性：使用ECMAScript5的Object.getOwnPropertyDescriptor()方法，可以取得给定属性的描述符。该方法接收两个参数：属性所在对象和要读取其描述符的属性名称，返回值是一个对象。
[注意]可以针对任何对象——包括DOM和BOM对象，使用Object.getOwnPropertyDescriptor()方法

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);//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'

以上就是关于javascript面向对象的详细内容介绍，希望对大家的学习有所帮助。