之前小编对于类和类的基本特征(所谓的封装、继承、多态)理解一直不是很到位,同时在实际项目应用中也用的比较少,今天小编就结合ES5中的基本用法和大家聊聊,希望小伙伴会在这篇文章有属于自己的收获,并能够在今后的项目中有实际应用。大家也可以关注我的微信公众号,蜗牛全栈。
一、类的基本用法
function People(name,age){
// this指向的是People{}
this.name = name
this.age = age
}
let p1 = new People("lilei",30)
console.log(p1) // People{name:"lilei",age:34}
let p2 = new People("hanmei",18)
console.log(p2) // People{name:"hanmei",age:18}
二、类的方法:该实例中会有一些资源浪费,因为在每一个实例化的时候,在类中都会存在该方法,实际中为了节约资源,会将类方法定义在原型上
function People(name,age){
// this指向的是People{}
this.name = name
this.age = age
this.showName = function(){
console.log("当前人的名字是:"+this.name)
}
}
let p1 = new People("lilei",30)
console.log(p1) // People{name:"lilei",age:34}
p1.showName() // 当前人的名字是:lilei
let p2 = new People("hanmei",18)
console.log(p2) // People{name:"hanmei",age:18}
p2.showName() // 当前人的名字是:hanmei
三、实际类方法创建实例
function People(name,age){
this.name = name
this.age = age
}
People.prototype.showName = function(){
console.log(this.name)
}
let p1 = new People("lilei",30)
console.log(p1) // People{name:"lilei",age:34}
p1.showName() // lilei
let p2 = new People("hanmei",18)
console.log(p2) // People{name:"hanmei",age:18}
p2.showName() // hanmei
四、类的静态属性和静态方法:上述的例如name和age属性,都是实例化之后才有的属性和方法,上述属性和方法一般称为实例属性和实例方法,需要类实例化之后才可以处理的属性,实例方法需要把类实例化之后才能调用。静态属性和静态方法可以通过类直接调用,不必实例化。
类的静态属性
function People(name,age){
// this指向的是People{}
this.name = name // 实例属性
this.age = age // 实例属性
}
People.count = 10
console.log(People.count) // 10
类的静态方法
function People(name,age){
// this指向的是People{}
this.name = name // 实例属性
this.age = age // 实例属性
}
People.getCount = function(){
console.log("当前数字为"+People.count)
}
console.log(People.count) // 10
五、类的继承
1、构造函数继承:只能继承父类的属性,不能继承父类的方法
// 父类
function Animal(name){
this.name = name
}
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) // Dog{name:"wangcai",color:"white"}
d1.showName() // 报错:d1.showName is not a function // 构造函数继承只能继承父类的属性,不能继承父类的方法
2、原型继承:只能继承父类方法,不能继承父类属性
// 父类
function Animal(name){
this.name = name
}
Animal.prototype.showName = function(){
console.log("名字是:"+this.name)
}
// 子类
function Dog(name,color){
// Animal.call(this,name) // 继承属性
this.color = color
}
Dog.prototype = new Animal()
Dog.prototype.constuctor = Dog
let d1 = new Dog("wangcai","white")
console.log(d1) // Dog{name:"wangcai",color:"white"}
d1.showName() // undefind