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

ES5中的類

最新文章