JavaScript elevation Third Edition Notes - Object Oriented Programming

Before an article blog had mentioned a little js object-oriented programming: js object-oriented programming.

Here it is combined with a detailed analysis of what elevation js javascript object-oriented programming.

prologue:

1⃣️Object.defineProperty()

    var obj = { 
      the _name: ' Jack ' 
    }; 
    Object.defineProperty (obj, ' name ' , { 
      Configurable: to false , // indicates whether through redefines delete the deleted property attribute, a default value to true 
      value: ' Orange ' , / / data value of the property, the default value undefined 
      Writable: to false , // indicating whether to modify property values, the default value to true 
      Enumerable: to false , // is enumerable, whether recycled back attributes for-in, the default value as to true 
      GET : function () { // getter 
        return  the this._name;
      },
      set:function(newval){//setter
        this._name = newval;
      }
    })

vue2.x version of the two-way data binding API and is based on the publish / subscribe model implemented;

If both defining a plurality of attributes, it may be by API:

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;
            }
        }
    }
});

2⃣️ read attribute characteristics Object.getOwnPropertyDescriptor () 

var descriptor = Object.getOwnPropertyDescriptor(book, "_year");
alert(descriptor.value); //2004
alert(descriptor.configurable); //false

 

text:

3⃣️ create objects

3.1 Factory Pattern

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", 29, "Software Engineer");
var person2 = createPerson("Greg", 27, "Doctor");

Factory mode creates a n objects unrelated, but it does not solve the problem of object recognition (that is, how to know the type of an object).

3.2 Constructor mode

function Person(name, age, job){
        this.name = name;
        this.age = age;
        this.job = job;
        this.sayName = function(){
            alert(this.name);
}; }
var person1 = new Person("Nicholas", 29, "Software Engineer");
var person2 = new Person("Greg", 27, "Doctor");

Because the function is an object, so you can create a Person object by the way;

By convention, the constructor should always begin with a capital letter, rather than the constructor should begin with a lowercase letter;

To create a new instance of the Person, you must use the new operator. In this way, call the constructor will actually go through the following four steps:

(1) Create a new object;
(2) the scope of the constructor assigns a new object (so this points to the new object);
(3) the implementation of the constructor code (add properties for this new object);
(4) returns a new object.

alert(person1.constructor == Person); //true
alert(person2.constructor == Person); //true

alert(person1 instanceof Object);  //true
alert(person1 instanceof Person);  //true
alert(person2 instanceof Object);  //true
alert(person2 instanceof Person);  //true

Constructor mode, although easy to use, but it is not without drawbacks. The main problem with using the constructor is that each method must be re-created again in each instance, can not be shared. Although this method we can write the global scope, then call inside a constructor, but this approach is clearly coupling is too high.

3.3 prototype model

By the way before you can reference blog: JS implementation inheritance .

function Person(){
}
Person.prototype.name = "Nicholas";
Person.prototype.age = 29;
Person.prototype.job = "Software Engineer";
Person.prototype.sayName = function(){
    alert(this.name);
};
var person1 = new Person();
person1.sayName();   //"Nicholas"
var person2 = new Person();
person2.sayName(); //"Nicholas"
alert(person1.sayName == person2.sayName);  //true

It can be seen on the attribute values ​​and attribute prototype method attribute is shared by all instances.

3.3.1 Examples of properties and attributes Prototype

= person1.name " Greg " ; 
Alert (person1.name);   // "Greg" - from Example 
Alert (person2.name);   // "Nicholas" - Prototype from 


Delete person1.name; 
Alert (person1.name );   // "Nicholas" - from prototype

We see instance properties when the priority is an example Properties -> prototype property, the property was deleted when the priority is also true;

There the property, take a direct instance of the property on an instance, not, go find the prototype.

3.3.2 hasOwnProperty () is determined from the instance attribute is not

var person1 = new Person();
var person2 = new Person();
alert(person1.hasOwnProperty("name"));  //false
person1.name = "Greg";
alert(person1.name); //"Greg"——来自实例 
alert(person1.hasOwnProperty("name")); //true

Examples of non-enumerable properties of the prototype:

var keys = Object.keys(Person.prototype);
alert(keys);       //"name,age,job,sayName"


var p1 = new Person();
p1.name = "Rob";
p1.age = 31;
var p1keys = Object.keys(p1);
alert(p1keys);    //"name,age"