JavaScript essence advanced OOP object oriented programming

Reprint please indicate the source

Original connection http://blog.huanghanlian.com/article/5b698f22b8ea642ea9213f51

How do we simulate overloading? In javasceipr s, we can make the same function name by the difference of parameter type or quantity, and call the corresponding function according to different parameter lists.

The function type in javascript is uncertain, and the number of parameters can be arbitrary. Then we can make a simulation overload by judging the number of parameters actually passed in,

OOP (simulation overload, chain call, modularization)

Simulated heavy haul

    function person() {
        var args = arguments;
        if (typeof args[0] === 'object' && args[0]) {
            if (args[0].name) {
                this.name = args[0].name;
            }
            if (args[0].age) {
                this.age = args[0].age;
            }
        } else {
            if (args[0]) {
                this.name = args[0];
            }
            if (args[1]) {
                this.age = args[1];
            }
        }
    };
    person.prototype.toString = function() {
        return "Full name:" + this.name + "Age:" + this.age
    }

    var peng = new person({
        name: "Xiaopeng",
        age: 23
    });
    console.log(peng.toString()); //Name: Ji Xiaopeng age: 23

    var peng1 = new person("It's you", 23);
    console.log(peng1.toString()); //Name: it's you age: 23

Call subclass method

Example 1

    if (!Object.create) {
        Object.create = function(proto) {
            function F() {};
            F.prototype = proto;
            return new F();
        };
    }

    function person(name) {//Base class
        this.name=name;
    }
    person.prototype.init=function(){
        console.log("Hello"+this.name)
    }

    function student(name,classname){   //Student class
        this.classname=classname;
        person.call(this,name);
    }

    student.prototype = Object.create(person.prototype);
    student.prototype.constructor = student;

    student.prototype.init=function(){
        console.log("Hello s"+this.name)
    }

    var peng=new student("Xiaopeng","class2");
    console.log(peng);
    peng.init();

Example 2 subclass calls base class method

function person(name) {//Base class
    this.name=name;
}

function student(name,classname){   //Student class
    this.classname=classname;
    person.call(this,name);
}

person.prototype.init=function(){
    console.log(this.name)
}

student.prototype.init=function(){
    person.prototype.init.apply(this,arguments);
}

var peng=new student("Xiaopeng","class2");
console.log(peng);
peng.init();

call chaining

function classman() {}
classman.prototype.addClass = function(str) {
    console.log('calss' + str + 'added');
    return this;
}
var mang = new classman();
mang.addClass('classA').addClass('classB').addClass('classC')

// calssclassAadded
// calssclassBadded
// calssclassCadded

When using jq $("ාid").addClass('df ')
After the selector has done some operations, it can continue to add class ('df ') and make another layer of chain actions to call.

Example interpretation

function classman() {}   //Now define a constructor classman
classman.prototype.addClass = function(str) {   //Add addClass attribute method to classman constructor prototype
    console.log('calss' + str + 'added');   //Output means to add a class
    return this;  //return this indicates that the instance returned to classman does not need to be added with mang.addClass('classA ') immediately after the instance is returned. It can be added with. addClass('classB').addClass('classB '). The instance will be returned after each execution
}
var mang = new classman();
mang.addClass('classA').addClass('classB').addClass('classC')

// calssclassAadded
// calssclassBadded
// calssclassCadded

abstract class

function Detectorlse() {
    throw new Error("Abstract class can not be invoked directly!");
}
Detectorlse.detect = function() {
    console.log('Detcetion starting...');
}
Detectorlse.stop = function() {
    console.log('Detector stopped');
}
Detectorlse.init = function() {
    throw new Error("Error");
}

function linkDetector() {};
linkDetector.prototype = Object.create(Detectorlse.prototype)
linkDetector.prototype.constructor = linkDetector;

//...add methods to LinkDetector...

defineProperty(ES5)

function Person(name) {
    Object.defineProperty(this, 'name', {
        value: name,
        enumerable: true
    });
};
Object.defineProperty(Person, 'arms_num', {
    value: 2,
    enumerable: true
});
Object.seal(Person.prototype);
Object.seal(Person);

function student(name, classname) {
    this.classname = classname;
    Person.call(this, name);
};
student.prototype = Object.create(Person.prototype);
student.prototype.constructor = student;

var peng = new Person('Xiaopeng');
console.log(peng);

var han = new student("sweat", "class2");
console.log(han);

Modularization

Define simple modularity

var moduleA;
moduleA=function(){
    var prop=1;
    function func(){};
    return {
        func:func,
        prop:prop
    }
}();

Define simple modularity 2

var moduleA;
moduleA = new function() {
    var prop = 1;

    function func() {};
    this.func = func;
    this.prop = prop;
}();

Practice (detector)

Tags: Javascript Attribute

Posted on Mon, 02 Dec 2019 01:13:16 -0500 by docmattman