【javaScript随笔】04 es6中的class

es6中的class

其实js中var和function这两关键字，加上闭包，是足够用了。

class关键字是es6推出来的。作为一个js菜鸡，坦白的说 —— 食之无味，弃之可惜。

1.class写法

constructor是构造器，toString方法可以复写

class Person {
    constructor(name, age) {
        this.name = name;
        this.age = age;
    };
    addAge() {
        this.age++;
        alert(this.age);
    };
    toString() {
        return '[name='+this.name+',age='+this.age+']';
    };
}

let person = new Person('张三', '23');
person.addAge();
console.log(person.toString());

2.静态方法和实例方法

class $ {
    constructor(dom) {
        this.dom = document.querySelector(dom);
    };
    static ajax() {
        alert('发送ajax');
    };
    html(str) {
        this.dom.innerHTML = str;
    };
};
$.ajax();
new $('#app').html('<p>你好</p>');

3.继承简单这样玩

class Animal {
    constructor(age, name) {
        this.age = age;
        this.name = name;
    };
    eat() {
        alert(this.name + '在吃');
    };
}
class Dog extends Animal {
    constructor(age, name, color) {
        super(age, name);
        this.color = color;
    };
    run() {
        alert(this.color +' 狗在跑');
    };
}
let dog = new Dog('24', '哈士奇', '红色');
dog.eat();
dog.run();

4.私有属性和私有方法

无~~~

5.思考

看下面代码：

// es6
class A {

};
// es5
class A ({

});

从上面图可以看出来，两者惊人相似。

三和小钢炮有一个猜想：es6并没有重新去定义class，而是在es5的函数的基础上做了封装。

es6要指定constructor这个构造器，就是因为class后面的是个map，要想构造出class必须调用一个构造器。而静态方法可以直接用static指定。但是问题来了，这样子搞法，使得私有方法和变量很难控制，于是选择了放弃！。

6.自己写一个class函数

我写的class将基于下面调用

var Person = myClass({
    constructor: function(name){
        this.name = name;
    },
    static:{
        saySleep: function() {
            alert('good night');
        }
    },
    sayName: function() {
        alert(this.name);
    },
    sayHello: function(){
        alert('sayHello');
    }
});
var p = new Person('哈士奇');
console.log(p);
p.sayHello();
p.sayName();
Person.saySleep();

实现逻辑如下：

function myClass(conf) {
    var constructor = conf.constructor;
    var staticFn = conf.static;
    var constructorParameter = getParameterName(constructor);
    var constructorBody = getFnBody(constructor);
    /*获取参数名称*/
    function getParameterName(fn) {
        var fnStr = fn.toString();
        var fnargs = fnStr.slice(fnStr.indexOf('(')+1, fnStr.indexOf(')'));
        return fnargs.split(',');
    }
    /*获取函数体*/
    function getFnBody(fn) {
        var fnStr = fn.toString();
        var fnBody = fnStr.slice(fnStr.indexOf('{')+1, fnStr.indexOf('}'));
        return fnBody;
    }
    /*获取所有的公有方法*/
    function getAllFn(){
        var list = [];
        for(var fn in conf) {
            if(fn!== 'constructor' && fn != 'static') {
                list.push({
                    name: fn,
                    body: conf[fn].toString()
                });
            }
        }
        return list;
    }
    /*编译class体*/
    function compileFnbody() {
        var fnBoby = constructorBody;
        var allFn = getAllFn();
        for(var i = 0; i < allFn.length; i++) {
            var fn = allFn[i];
            fnBoby += 'this.' + fn.name + '=' + fn.body + '; \n';
        }
        return fnBoby;
    }
    /*编译class返回*/
    function compileFn() {
        var fn = new Function(constructorParameter[0], compileFnbody());
        for (var key in staticFn) {
            fn[key] = staticFn[key];
        }
        return fn;
    }
    return compileFn();
};