Offer 驾到，掘友接招！我正在参与2022春招打卡活动，点击查看活动详情。

ES系列文章

类

//定义一个类
function People(name,age){
    //定义在构造函数里
    this.name=name
    this.age=age
    // this.showName=function(){//每次创建对象都new Function() 通常不把方法写在类里而是写在原型上
    //     console.log("我的名字是"+this.name)
    // }
    People.count++
}
//实例方法定义在原型对象上的方法和属性多个实例共享
People.prototype.showName=function(){
    console.log('我的名字是'+this.name)
}
//静态属性
People.count=0
//静态方法
People.getCount=function(){
    console.log('当前共有'+People.count+'个人')
    console.log(this.age)
    console.log(this)//打印出People类的构造函数
}

let p1=new People('xxx',11)
console.log(p1)
//People {name: "xxx", age: 11}
p1.showName()
//我的名字是xxx
console.log(p1.count)//undefined
p1.getCount()//报错

let p2=new People('hhh',22)
console.log(p2)
//People {name: "hhh", age: 22}
p2.showName()
//我的名字是hhh
console.log(People.count)
//2
People.getCount()
//当前共有2个人
//undefined
//f People(name,age){
//    this.name=name
//    this.age=age
//    People.count++
//}

ES5类主要是要搞清楚静态属性、静态方法、实例属性、实例方法的概念。

静态方法/属性直接定义在类上，需要用类名.方法名/属性名的格式调用。

实例方法/属性定义在类的构造函数里，实例属性如果定义在构造函数里，那么每次创建构造函数都要再创建一次该实例方法，所以一般写在构造函数外面，定义在原型上。在调用上，实例方法/属性要通过先引用一个变量，指向构造函数定义的新对象，可以理解为p1就是构造函数People的一个引用，也就是指针，p1就可以指向showName这个方法(p1.showName())，如果直接写People.showName()是会报错的，因为People不是一个指针。

继承

//父类
function Animal(name){
    this.name=name
    this.age=function(){
    	console.log(18)
    }
}
Animal.prototype.showName=function(){
    console.log('名字是'+this.name)
}

//子类
function Dog(name,color){
    Animal.call(this,name)//构造函数继承 只能继承属性 不能继承方法
    this.color=color
}
let d1=new Dog('wangcai','white')
console.log(d1.name,d1.color)//wangcai white
d1.age()//18
d1.showName()//undefined

//原型链继承 只能继承方法
Dog.prototype=new Animal()//让Dog的原型指向Animal的实例
let d2=new Dog('xxx','hei')
d2.showName()//xxx

继承父类属性用到了call用以改变this的指向（call的第一个参数是this的新指向，之后的参数是要传递的参数），在这里，改变的是Animal构造函数中this，让它指向当前作用域的this，并传递name参数。继承父类属性格式为：父类.call(this,参数一，参数二)。对于构造函数继承只能继承父类内部的属性和方法，不能继承父类原型上的属性/方法，而通常父类的实例方法最好定义在原型上，原因上面有说，为了解决这个问题，继承方法只能用原型链继承:子类.prototype=new 父类() 所以，要想同时继承方法和属性，要用到上面两种构造原型的组合式继承。组合继承结合了构造函数继承和原型继承的优点，既能继承属性也能继承方法。

一个前端小白，若文章有错误内容，欢迎大佬指点讨论！

ES5 | 类与继承

ES系列文章

类

继承