es5 的類和繼承
阿新 • • 發佈:2020-07-15
建立一個簡單的類
建立物件(建構函式 + 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 = newWeb(); /*即可以繼承建構函式裡面的屬性和方法,也可以繼承原型鏈上面的屬性和方法*/ 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()