1. 程式人生 > 實用技巧 >es5 的類和繼承

es5 的類和繼承

建立一個簡單的類

建立物件(建構函式 + new)
function
cityName (name,age) { this.name = name; //屬性 this.age = age;  this.run =function(){ //例項方法    alert('run方法')  } } cityName.getInfo = function(){ //靜態方法 console.log('靜態方法) } cityName.prototype.about = function () { console.log(`name:${this.name},age:${this.age}`) } //建立物件 let cn1 = new cityName(
'城市',2020); console.log(cn1.name) cn1.about() //靜態方法的呼叫 cityName.getInfo()

繼承

首先先建立一個類

function Person () {
  this.name = '張三';
  this.age = 18;
  this.run = function () {
    alert(this.name + '在運動')
  }
}
Person.prototype.work = function () {
  alert(this.name + '在工作')
}

1、物件冒充繼承模式  

物件冒充可以繼承建構函式裡面的屬性和方法,但是不可以繼承原型鏈上面的屬性和方法
function Web () {
  Person.call(this);   /*物件冒充實現繼承*/
}

let a = new Web();
a.run()   /*物件冒充可以繼承建構函式裡面的屬性和方法*/
a.work()  /*物件冒充可以繼承建構函式裡面的屬性和方法,但是不可以繼承原型鏈上面的屬性和方法*/

2、原型鏈繼承模式

原型鏈繼承即可以繼承建構函式裡面的屬性和方法,也可以繼承原型鏈上面的屬性和方法,但是例項化子類時,沒有辦法給父類傳參
function Web () {

}
Web.prototype = new Person(); /*原型鏈繼承*/

let a = new
Web(); /*即可以繼承建構函式裡面的屬性和方法,也可以繼承原型鏈上面的屬性和方法*/ a.run() a.work()

3、原型鏈+物件冒充的組合繼承模式

首先建立一個需要傳入引數的類

function City (name,age) {
  this.name = name;
  this.age = age;
  this.run = function () {
    alert(this.name + '在運動')
  }
}
City.prototype.work = function () {
  alert(this.name + '在工作')
}

實現原型鏈+物件組合繼承

第一種方法:

function Web (name,age) {
  City.call(this,name,age)
}
Web.prototype = new City();  //繼承父類建構函式和原型鏈上的屬性和方法
let a = new Web('李雷',20);
a.run()
a.work()

第二種方法:

function Web (name,age) {
  City.call(this,name,age)
}
Web.prototype = City.prototype;    //直接繼承父類原型鏈上的方法和屬性
let a = new Web('李雷',20);
a.run()
a.work()