Several of the most important big points of knowledge in JavaScript

1. Object-oriented

2. DOM events

3. Asynchronous interaction ajax

Object-oriented

Any reference and variable can be considered as an object in JS. There are three main forms of object-oriented expression:

• encapsulation

• inherit

• polymorphic

1. Packaging

1.1 Singleton Model

var obj={
    name: "sam",
    age: 12,
    method: function(){
        var objName=this.name;
        return objName;
    },
    ale: function(){
        var that=this;
        function sum(num1,num2){
            this.num=that.age;
            return num1+this.num+num2;
        }
        console.log(sum(1,2));
    }
}

The advantage of singleton mode is that it does not pollute global variables and saves window s stack memory

var main={
    init:function(){
        this.changeName();
    },
    changeName:function(){
        var that=this;
        var oBody=document.body;
        oBody.onclick=function(){
            that.changeValue();
        }
    },
    changeValue:function(){
        document.getElementById("one").value="sam";
    }
}

main.init();

1.2 Factory Model

It can quickly pass in different parameters according to different requirements to return different objects. The disadvantage is that it can not judge the type of objects.

function self(name,age,sex){
    var person={};
    person.name=name;
    person.age=age;
    person.sex=sex;
    if(sex=="man"){
        person.job="coder";
    }
    if(sex=="woman"){
        person.job="beatiful";
    }
    return person;
}
var mine=self("sam",22,"man");
console.log(mine.job);

1.3 constructor pattern

Constructor pattern can solve the shortcoming that factory pattern can not judge object type. Constructor pattern can customize class and construct instances with the same attributes and methods.

function Person(){
    this.eat="food";
    this.sleep="night";
    this.say=function(){
        console.log("I am person,I can speak");
    }
}
var person1=new Person();
person1.say();

call() and apply() methods

• call() method:
  Let the calling object execute, and then who is the first parameter, the calling object's this will change the point to who, followed by parameters, in turn corresponding to the incoming.

• apply() method:
  Let the calling object execute, and then who is the first parameter, the calling object's this changes the point to who, followed by parameters, in the form of an array.

2. Inheritance

2.1 Prototype Inheritance

Assign the constructor of the heir to the prototype of the heir. Note that the constructor attribute needs to be added manually to the prototype of the heir.

function A(){
    this.name="A";
    this.sayHi=function(){
        console.log("Hi!I am A");
    }
}

function B(){
    this.name="B";
    this.age=22;
    this.sayHi=function(){
        console.log("Hi,I am B");
    }
}
B.prototype.work=function(){
    console.log("I can play");
}

A.prototype=new B();
A.prototype.constructor=A;
var a=new A();
console.log(a);

2.2 call/apply inheritance

Cloning a private property set by the heir as the heir

function A(){
    this.name="A";
    this.age=22;
    this.sayName=function(){
        console.log("I am A");
    }
}

function B(){
    A.call(this);
}

var b=new B();
console.log(b);

2.3 Impersonate Object Inheritance

The heir inherits the private and public attributes and methods of the heir

function A(){
    this.x=100;
}
A.prototype.getX=function(){
    console.log(this.x);
}

function B(){
    var temp=new A();
    for(var key in temp){
        this[key]=temp[key];
    }
}

var b=new B();
console.log(b);

3. Polymorphism

There is no strict polymorphism in javascript, because there is no overload in JS, functions with the same name cannot exist at the same time, and functions with the same name defined later will override functions defined earlier (even if the two parameters are different). We can write a general method to simulate the polymorphism of object-oriented languages.

function simPoly(){
    if(arguments.length==1){
        return function(){
            console.log(1);
        }
    }
    if(arguments.length==2){
        return function(){
            console.log(2);
        }
    }
}

simPoly(1,2)();