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();
};