ES5中的类与继承
构造函数继承,原型继承,组合式继承
function Animal(name){
this.name=name
}
Animal.prototype.showName=function(){
console.log('我的名字是:'+this.name);
}
//构造函数继承
function Dog(name,color){
Animal.call(this,name) //继承属性,让animal中的this指向dog中的this,传递dog的name参数
this.color=color
}
// d1.showName() //构造函数继承不能继承方法
//原型继承
Dog.prototype= new Animal()
Dog.prototype.constuctor = Dog
let d1=new Dog('wangcai','white')
console.log(d1); //{name: "wangcai", color: "white"}
d1.showName() //原型继承+构造函数继承=组合式继承
静态方法,静态属性,实例方法,实例属性
function Animal(name){
//实例属性 直接定义在构造函数里的
this.name=name
Animal.count++
}
//实例方法 用类的原型下定义的方法 实例可以调用
Animal.prototype.showName=function(){
console.log(this.name);
}
//静态属性 定义在类上的属性
Animal.count=0
let a1=new Animal('daji')
console.log(Animal.count); //1 1个实例对象a1
//静态方法 在类上面定义的方法
Animal.getCount = function(){
console.log(Animal.count); //0
}
Animal.getCount() //调用静态方法
//例如Math调用方法时没有new,直接在类上调用,与实例无瓜,是静态方法
console.log(Math.max(4,5));
console.log(Math.random());
ES6中的类与继承
定义类
class People{
constructor(name,age){
this.name=name
this.age=age
}
showName(){
console.log(this.name);
}
}
let p1=new People('daji',3)
console.log(p1);
类继承
class Coder extends People{ //extends
constructor(name,age,company){
super(name,age) //super
this.company=company
}
showCompany(){
console.log(this.company);
}
}
let c1=new Coder('daji',3,'Alibaba')
c1.showName() //daji
c1.showCompany() //Alibaba
定义静态方法
class People{
constructor(name,age){
this.name=name
this.age=age
}
showName(){
console.log(this.name);
}
static getCount(){ //static静态方法,类似Math.max,在类中定义与实例对象无关
return 5
}
}
let p1=new People('daji',3)
//console.log(p1.getCount()); //报错 不能用实例调用
console.log(People.getCount()); //5
class Coder extends People{
constructor(name,age,company){
super(name,age)
this.company=company
}
showCompany(){
console.log(this.company);
}
}
let c1=new Coder('daji',3,'Alibaba')
//console.log(c1.getCount()); //报错 不能用实例调用
console.log(Coder.getCount()); //5 子类构造函数可以调用父的静态方法
//PS:使用的是ES5的方法定义静态属性
People.count=9
console.log(People.count); //9
在构造函数内最顶层定义属性
class People{
constructor(name,age){
this.name=name
this.age=age
this._sex=-1 //定义一个新属性_set
}
showName(){
console.log(this.name);
}
get sex(){ //get表示只读 p1.sex='female'赋值会报错
return this._sex
}
set sex(val){
this._sex=val //直接给sex赋值会陷入死循环
}
}
let p1=new People('daji',3)
console.log(p1);
p1.sex='female' //使用set
console.log(p1.sex); //female
可用于拦截处理一些业务逻辑操作,例如:需要传入1返回male,传入0返回female
class People{
constructor(name,age){
this.name=name
this.age=age
this._sex=-1
}
showName(){
console.log(this.name);
}
get sex(){
if(this._sex === 1){
return 'male'
}else if(this._sex === 0){
return 'female'
}else{
return 'error'
}
}
set sex(val){ //1:male 0:female
if(val === 0 || val=== 1){
this._sex=val
}
}
}
let p1=new People('daji',3)
p1.sex=0
console.log(p1.sex); //female
p1.sex=1
console.log(p1.sex); //male