剛學習es6關於原型和繼承的一些小例子

最近在學習es6，寫了一些小的demo

js以前寫構造函數是在prototype上掛載方法

function Fun(name,pass){
    this.name = name;
    this.pass = pass
}

Fun.prototype.showName =function(){
    console.log(this.name);
}

Fun.prototype.showPass=function(){
    console.log(this.pass);
}

var fun= new Fun('小紅','654321');

fun.showName();
fun.showPass()；

 

而當有別的函數要繼承此函數的屬性時，就有一點麻煩，

function NewFun(name,pass,level){
    Fun.call(this,name,pass);

    this.level=level;
}
NewFun.prototype = Object.create(Fun.prototype);
NewFun.prototype.constructor = NewFun;

NewFun.prototype.showLevel=function(){
    console.log(this.level);
}

var newfun= new NewFun('小明','123456',9);
newfun.showName();
newfun.showPass();
newfun.showLevel();

 

但是在es6中引入了類這個概念，可以直接聲明一個類，使用也方便了很多

class Fun{
    constructor(name,pass){
    　　this.name=name;
    　　this.pass=pass;
　　}

　　showName(){
    　　console.log(this.name);
　　}
　　showPass(){
    　　console.log(this.pass);
　　}
}

var fun= new Fun('小紅','654321');
fun.showName();
fun.showPass();

 

特別是當要繼承這個類的屬性的時候就更是方便

class NewFun extends Fun{
    constructor(name,pass,level){
        super(name,pass);
        this.level= level;
    }

    showLevel(){
        console.log(this.level);
    }
}
var newfun= new NewFun('小明','123456',9);
newfun.showName();
newfun.showPass();
newfun.showLevel();