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

 

Tags:

VirMach 便宜 VPS

QNews

QNews