ES5中的类

之前小编对于类和类的基本特征(所谓的封装、继承、多态)理解一直不是很到位,同时在实际项目应用中也用的比较少,今天小编就结合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

你可能感兴趣的:(javascriptes6前端)