ES5 Class

构造函数定义类

function User(id, name){
    this.id = id;
    this.name = name;
}
var user = new User(1, "junchow");
console.log(user.id, user.name);

通过构造函数增加方法

function User(id, name){
    this.id = id;
    this.name = name;
    this.run = function(){
        console.log(this.id, this.name);
    }
}
var user = new User(1, "junchow");
user.run();

通过原型链扩展方法

原型链上的属性会被多个实例共享，而构造函数却不会。

function User(id, name){
    this.id = id;
    this.name = name;
    this.run = function(){
        console.log(this.id, this.name);
    }
}
User.prototype.nick = "any";
User.prototype.exec = function(){
    console.log(this.id, this.name, this.nick);
};


var user = new User(1, "junchow");
console.log(user.nick);//any
user.exec();//1 "junchow" "any"

定义类的静态方法

//通过构造函数定义类
function User(id, name){
    //实例属性
    this.id = id;
    this.name = name;
    //实例方法
    this.run = function(){
        console.log(this.id, this.name);
    }
}
//通过原型链扩展属性和方法，会被多个实例所共享。
User.prototype.nick = "any";
User.prototype.exec = function(){
    console.log(this.id, this.name, this.nick);
};
//为类添加静态方法
User.getInfo = function(id){
    console.log(id)
};

//实例化对象
var user = new User(1, "junchow");
console.log(user.nick);//any
user.exec();//1 "junchow" "any"
//静态方法无需使用new进行实例化即可直接调用
User.getInfo(10);

ES5中的继承

ES5中实现类的继承有两种方式，分别是原型链继承和对象冒充继承。使用最多的是使用原型链继承 + 对象冒充的组合方式。

对象冒充实现继承

• 可以继承构造函数中的属性和方法
• 不能继承原型链上的属性和方法
• 不能继承静态方法

//通过构造函数定义类
function User(id, name){
    //实例属性
    this.id = id;
    this.name = name;
    //实例方法
    this.run = function(){
        console.log(this.id, this.name);
    }
}
//通过原型链扩展属性和方法，会被多个实例所共享。
User.prototype.nick = "any";
User.prototype.exec = function(){
    console.log(this.id, this.name, this.nick);
};
//为类添加静态方法
User.getInfo = function(id){
    console.log(id)
};

//类的继承
function Member(id,name){
    this.id = id;
    this.name = name;
    //对象冒充实现继承
    User.call(this);
}

var member = new Member(10, "jc");
console.log(member.id, member.name);//undefined undefined
member.run();//undefined undefined
//member.exec();//app.ts:28 Uncaught TypeError: member.exec is not a function
//Member.getInfo(11);//app.ts(31,8): error TS2339: Property 'getInfo' does not exist on type '(id: any, name: any) => void'.

原型链实现继承

• 原型链继承既可以继承构造函数中的属性和方法，也可以继承原型链上的属性和方法。
• 原型链继承无法继承静态方法

//通过构造函数定义类
function User(id = 0, name = ""){
    //实例属性
    this.id = id;
    this.name = name;
    //实例方法
    this.run = function(){
        console.log(this.id, this.name);
    }
}
//通过原型链扩展属性和方法，会被多个实例所共享。
User.prototype.nick = "any";
User.prototype.exec = function(){
    console.log(this.id, this.name, this.nick);
};
//为类添加静态方法
User.getInfo = function(id){
    console.log(id)
};

//类的继承
function Member(id,name,status){
    this.id = id;
    this.name = name;
    this.stauts = status;
}

//使用原型链继承
Member.prototype = new User();
var member = new Member(10, "jc", true);
console.log(member.id, member.name, member.status);//10 "jc" undefined
member.run();//10 "jc"
console.log(member.nick);//any
member.exec();//10 "jc" "any"
//Member.getInfo(100);

原型链实现继承的缺陷

• 实例化子类时无法给父类传参

组合实现继承

• 组合继承方式是使用原型链和对象冒充的混合方式实现继承

//通过构造函数定义类
function User(id = 0, name = ""){
    //实例属性
    this.id = id;
    this.name = name;
    //实例方法
    this.run = function(){
        console.log(this.id, this.name);
    }
}
//通过原型链扩展属性和方法，会被多个实例所共享。
User.prototype.nick = "any";
User.prototype.exec = function(){
    console.log(this.id, this.name, this.nick);
};
//为类添加静态方法
User.getInfo = function(id){
    console.log(id)
};

//类的继承
function Member(id,name,status){
    this.stauts = status;
    //对象冒充，子类为父类传参
    User.call(this, id, name);
}

//使用原型链继承
Member.prototype = new User();

//测试
var member = new Member(10, "jc", true);
console.log(member.id, member.name, member.status);//10 "jc" undefined
member.run();//10 "jc"
console.log(member.nick);//any
member.exec();//10 "jc" "any"
//Member.getInfo(100);

另外一种书写方式

//通过构造函数定义类
function User(id = 0, name = ""){
    //实例属性
    this.id = id;
    this.name = name;
    //实例方法
    this.run = function(){
        console.log(this.id, this.name);
    }
}
//通过原型链扩展属性和方法，会被多个实例所共享。
User.prototype.nick = "any";
User.prototype.exec = function(){
    console.log(this.id, this.name, this.nick);
};
//为类添加静态方法
User.getInfo = function(id){
    console.log(id)
};

//类的继承
function Member(id,name,status){
    this.stauts = status;
    //对象冒充，子类为父类传参
    User.call(this, id, name);
}

//使用原型链继承
Member.prototype = User.prototype;

//测试
var member = new Member(10, "jc", true);
console.log(member.id, member.name, member.status);//10 "jc" undefined
member.run();//10 "jc"
console.log(member.nick);//any
member.exec();//10 "jc" "any"
//Member.getInfo(100);