ES5和ES6中的静态方法、类、单例模式

//es5中的类和静态方法
//
//    function Person(name,age) {
//        //构造函数里面的方法和属性
//        this.name=name;
//        this.age=age;
//        this.run=function(){
//            console.log(`${this.name}---${this.age}`)
//        }
//    }
//    //原型链上面的属性和方法可以被多个实例共享
//    Person.prototype.sex='男';
//    Person.prototype.work=function(){
//        console.log(`${this.name}---${this.age}---${this.sex}`);
//    }
//    //静态方法
//    Person.setName=function(){
//        console.log('静态方法');
//    }
//    var p=new Person('zhangsan','20');   /*实例方法是通过实例化来调用的,静态是通过类名直接调用*/
//    p.run();
//    p.work();
//
//    Person.setName();  /*执行静态方法*/
//





//es5继承

/*
原型链继承和对象冒充继承

 对象冒充继承:没法继承原型链上面的属性和方法

 原型链继承:可以继承构造函数里面以及原型链上面的属性和方法,实例化子类的时候没法给父类传参
 结合使用可以解决
* */

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

function Web(name,age){
    Person.call(this,name,age);  /*对象冒充实现继承*/
}

Web.prototype=new Person();
var w=new Web('李四',20);
w.run();
w.work();  //w.work is not a function
//ES6中
//定义Person类
//
//class Person{
//    constructor(name,age) {   /*类的构造函数,实例化的时候执行,new的时候执行*/
//        this._name=name;
//        this._age=age;
//    }
//    getName(){
//        console.log(this._name);
//
//    }
//    setName(name){
//        this._name=name
//    }
//}
//var p=new Person('张三1','20');
//p.getName();
//p.setName('李四');
//p.getName();



//es6里面的继承
    //
    //class Person{
    //    constructor(name,age){
    //        this.name=name;
    //        this.age=age;
    //    }
    //    getInfo(){
    //        console.log(`姓名:${this.name} 年龄:${this.age}`);
    //    }
    //    run(){
    //        console.log('run')
    //    }
    //}
    //class Web extends Person{  //继承了Person     extends          super(name,age);
    //    constructor(name,age,sex){
    //        super(name,age);   /*实例化子类的时候把子类的数据传给父类*/
    //        this.sex=sex;
    //    }
    //    print(){
    //
    //        console.log(this.sex);
    //    }
    //}
    //var w=new Web('张三','30','男');
    //w.getInfo();


//es6里面的静态方法

class Person{

    constructor(name){

        this._name=name;  /*属性*/
    }
    run(){  /*实例方法*/

        console.log(this._name);
    }
    static work(){   /*静态方法*/
        console.log('这是es6里面的静态方法');
    }
}
Person.instance='这是一个静态方法的属性';


var p=new  Person('张三');

p.run();
Person.work();   /*es6里面的静态方法*/

console.log(Person.instance);

ES6单例模式

/**
 * Created by Administrator on 2018/3/17 0017.
 */

class Db {

    static getInstance(){   /*单例*/

        if(!Db.instance){

            Db.instance=new Db();
        }
        return Db.instance;
    }

    constructor(){

        console.log('实例化会触发构造函数');

        this.connect();
    }

    connect(){

        console.log('连接数据库');
    }
    find(){
        console.log('查询数据库');
    }
}

var myDb=Db.getInstance();


var myDb2=Db.getInstance();


var myDb3=Db.getInstance();


var myDb4=Db.getInstance();

myDb3.find();

myDb4.find();

 

上一篇:ES6转ES5(webpack+babel、指定多个js文件、自动注入)


下一篇:es5与es6的区别