Object-oriented

Process oriented and object-oriented programming

1. Process oriented: all work is written and used now.

2. Object oriented: it is a kind of programming idea. Many functions have been written in advance. When using it, you only need to pay attention to the use of the function, rather than the specific implementation process of the function.

javascript object
The related variables and functions are combined into a whole, which is called object, the variables in the object are called attributes, and the functions in the variables are called methods. Objects in javascript are similar to dictionaries.

How to create objects
1, monomer

<script type="text/javascript">
var Tom = {
    name : 'tom',
    age : 18,
    showname : function(){
        alert('My name is'+this.name);    
    },
    showage : function(){
        alert('I am this year'+this.age+'year');    
    }
}
</script>

2. Factory mode

<script type="text/javascript">

function Person(name,age,job){
    var o = new Object();
    o.name = name;
    o.age = age;
    o.job = job;
    o.showname = function(){
        alert('My name is'+this.name);    
    };
    o.showage = function(){
        alert('I am this year'+this.age+'year');    
    };
    o.showjob = function(){
        alert('My job is'+this.job);    
    };
    return o;
}
var tom = Person('tom',18,'Programmer');
tom.showname();

</script>

2. Constructor

<script type="text/javascript">
    function Person(name,age,job){            
        this.name = name;
        this.age = age;
        this.job = job;
        this.showname = function(){
            alert('My name is'+this.name);    
        };
        this.showage = function(){
            alert('I am this year'+this.age+'year');    
        };
        this.showjob = function(){
            alert('My job is'+this.job);    
        };
    }
    var tom = new Person('tom',18,'Programmer');
    var jack = new Person('jack',19,'Sale');
    alert(tom.showjob==jack.showjob);
</script>

3. Prototype mode

<script type="text/javascript">
    function Person(name,age,job){        
        this.name = name;
        this.age = age;
        this.job = job;
    }
    Person.prototype.showname = function(){
        alert('My name is'+this.name);    
    };
    Person.prototype.showage = function(){
        alert('I am this year'+this.age+'year');    
    };
    Person.prototype.showjob = function(){
        alert('My job is'+this.job);    
    };
    var tom = new Person('tom',18,'Programmer');
    var jack = new Person('jack',19,'Sale');
    alert(tom.showjob==jack.showjob);
</script>

4, inheritance

<script type="text/javascript">

        function fclass(name,age){
            this.name = name;
            this.age = age;
        }
        fclass.prototype.showname = function(){
            alert(this.name);
        }
        fclass.prototype.showage = function(){
            alert(this.age);
        }
        function sclass(name,age,job)
        {
            fclass.call(this,name,age);
            this.job = job;
        }
        sclass.prototype = new fclass();
        sclass.prototype.showjob = function(){
            alert(this.job);
        }
        var tom = new sclass('tom',19,'Full Stack Developer ');
        tom.showname();
        tom.showage();
        tom.showjob();
    </script>