javaScript object-oriented programming

javaScript object-oriented programming

ES5 class

Simple class creation

The method of creating a class in es5 is by instantiating function (new). If a method is not instantiated with new, it means that it is just a method and will not become a class. Only new methods can be called classes.

// , , , , , , 
function Person() {
    this.name = ' ';
    this.run = function () {
        console.log(this.name + ' ')
    }
}

Person.prototype.work = function () {
    console.log(this.name + ' ');
}

var p = new Person();
console.log(p.name);  // 
p.run();  // 
p.work();  // 

Person.getInfo = function () {
    console.log(' ');
}

/**
 *   
 */

Person.getInfo() // 

 

The properties on the prototype chain will be shared by multiple instances, but the constructor will not.

es5 object inheritance

The inheritance of es5 is mainly used: object impersonation inheritance + prototype chain inheritance two merged mixed inheritance methods.

  • The first kind of object impersonation inheritance
function Person(name, age) {
    this.name = name;
    this.age = age;
    this.run = function () {
        console.log(this.name + ' ')
    }
}

Person.prototype.work = function () {
    console.log(this.name + ' ')
}

function Web(name, age) {
    Person.call(this, name, age); // 
}


var w = new Web(' ', 20);

w.run() // 
w.work() //  Uncaught TypeError: w.work is not a function
 

The disadvantage of object impersonation and inheritance is that you cannot get the methods and properties on the prototype chain, but you can pass in parameters through call() when instantiating.

  • The second prototype chain inheritance
function Person(name, age) {
    this.name = name;
    this.age = age;
    this.run = function () {
        console.log(this.name + ' ')
    }
}

Person.prototype.work = function () {
    console.log(this.name + ' ')
}

function Web(name, age) {

}

Web.prototype = new Person();

var w = new Web(' ', 20);

w.run() //undefined 
w.work() //undefined 
 

Although prototype chain inheritance can execute the method of prototype chain, it cannot pass value, so it can combine the advantages of the two to complete the perfect inheritance scheme.

  • Prototype chain inheritance + object impersonation inheritance
function Person(name, age) {
    this.name = name;
    this.age = age;
    this.run = function () {
        console.log(this.name + ' ')
    }
}

Person.prototype.work = function () {
    console.log(this.name + ' ')
}

function Web(name, age) {
    Person.call(this, name, age);
}

Web.prototype = new Person();
// , , , , Web , 
//Web.prototype = Person.prototype;

var w = new Web(' ', 20);

w.run() // 
w.work() // 
 

Mixed inheritance is usually used

What exactly does the new modifier do?

function Person() {
    this.name = ' ';
    this.run = function () {
        console.log(this.name + ' ')
    }
}

var p = new Person();

function Web() {
    this.namePro = 'web';
    this.work = function () {
        console.log(this.name + ' ')
    }
}

// new
Web.namePro //undefined
Web.work() //   Uncaught TypeError: Web.work is not a function
 

The following steps have been taken to create a new instance object using the keyword new:

1. Create a new object, such as: var person = {};

2. The _proto_ property of the new object points to the prototype object of the constructor.

3. Assign the scope of the constructor to the new object. (So this object points to the new object)

4. Execute the code inside the constructor and add attributes to the this object in person.

5. Return the new object person.

     function Person(name , age){
         this.name = name;
         this.age = age;
         console.log(this); //Person {name: "neo", age: "23"}
         //return this;  
     }
     var p1 = new Person('neo','10');
     console.log(p1.name);

    // 
     function Person(name , age){
         this.name = name;
         this.age = age;
         console.log(this); //window
         return this;
     }
     var p1 = new Object(); //var p1 = {}
     p1 = Person('neo','23');
     console.log(p1.name);