技術標籤：前端javascripttypescriptclass

es5是通過建構函式和原型鏈上新增實現類

function Person (name) {
  this.name = name,
  this.getName = function () { 
​    console.log(this.name)
  }
}
Person.prototype.age = 18
Person.prototype.work = function () {
  console.log('work')
}
var lis = new Person('lis')
lis.name //lis
lis.
 
work() // work

es5是通過物件冒充和原型鏈組合方式繼承

物件冒充只能繼承建構函式裡的屬性和方法,不能繼承原型鏈的屬性和方法;

原型鏈能繼承建構函式和原型鏈的屬性和方法,但不能在父類的建構函式裡傳參

function Student () {
  Person.call(this, name)
}
Student.prototype = Person.prototype

es6是通過關鍵字實現

class Person {
  constructor (name) {
    this.name = name;
  }
  getName () {
    console.log
 
(this.name)
  }
}
// 繼承 
class Student extends Person {
  constructor (name, age) {
    super(name)
  }
  getName () {
    console.log(this.name)
  }
}

ts類的實現,繼承

class Person {
   name: string
   constructor (name:string) {
       this.name = name
   }
   getName ():void {
       console.log(this.name)
 
   
   }
}
// 繼承
class Student extends Person {
    constructor (name:string) {
        super(name)
    }
}

總結: es5是通過建構函式和原型鏈實現類, 通過物件冒充和原型鏈組合方式實現繼承, es6和ts是通過關鍵字class, extends, super實現