所謂繼承卤材?
繼承就是子類繼承父類的屬性和方法,目的可以讓子類的實(shí)例能夠使用父類的屬性和方法
類指的就是構(gòu)造函數(shù)
1.原型鏈繼承
基本思想:借助原型可以基于已有的對(duì)象創(chuàng)建新對(duì)象峦失,同時(shí)還不必因此創(chuàng)建自定義類型扇丛;讓一個(gè)引用類型繼承另一個(gè)引用類型的屬性和方法。
//創(chuàng)建父類和原型方法
function Cat(uname){
this.uname =uname;
}
Cat.prototype.run=function(){
console.log('跑跑跑尉辑!')
}
// 子類
function Sanhua(age){
this.age =age;
}
//實(shí)現(xiàn)繼承帆精,把父類實(shí)例放到子類原型上
Sanhua.prototype = new Cat('三花')
// 原型鏈
// Sanhua.prototype.constructor = Sanhua
Sanhua.prototype.run=function(){
console.log('我是三花!')
}
//創(chuàng)建實(shí)例
let sanhua = new Sanhua('1')
console.log(b)
2.call繼承(借用構(gòu)造函數(shù)繼承)
基本思想:在子類構(gòu)造函數(shù)中把父類構(gòu)造函數(shù)當(dāng)作普通函數(shù)執(zhí)行隧魄,并且通過call方法把父類構(gòu)造函數(shù)中的this替換成子類的實(shí)例(this)卓练,這樣相當(dāng)于給子類實(shí)例上設(shè)置了私有的屬性和方法。
//創(chuàng)建父類
function Cat(uname) {
this.uname = uname;
this.run = function(){
console.log('跑跑跑')
}
}
// 子類
function Sanhua(age,uname) {
this.age = age;
Cat.call(this,uname)
}
//創(chuàng)建實(shí)例
let sanhua = new Sanhua('1','三花')
console.log(sanhua)
3.組合繼承
基本思想:用使用原型鏈的方式來實(shí)現(xiàn)對(duì)原型屬性和方法的繼承购啄,而通過借用構(gòu)造函數(shù)來實(shí)現(xiàn)對(duì)實(shí)例屬性的繼承襟企。
//創(chuàng)建父類
function Cat(uname) {
this.uname = uname;
this.run = function () {
console.log('跑跑跑')
}
}
Cat.prototype.wait = function () {
console.log('等待!')
}
// 子類
function Sanhua(age, uname) {
this.age = age;
Cat.call(this, uname)//對(duì)象冒充 只能繼承構(gòu)造函數(shù)的屬性和方法
}
Sanhua.prototype = new Cat() //原型鏈
//創(chuàng)建實(shí)例
let sanhua = new Sanhua('1', '三花')
console.log(sanhua)
sanhua.wait()
4.原型式繼承
基本思想:是借助原型可以基于已有的對(duì)象創(chuàng)建新對(duì)象狮含,同時(shí)還不必因此創(chuàng)建自定義類型顽悼。
function obj(o){ //傳遞一個(gè)字面量函數(shù)
function F(){} //創(chuàng)建一個(gè)構(gòu)造函數(shù)
F.prototype = o; //把字面量函數(shù)賦值給構(gòu)造函數(shù)的原型
return new F() //最后返回出實(shí)例化的構(gòu)造函數(shù)
}
let box = {
name:'小明',
age:20,
family:['爸爸','媽媽']
}
let newBox = obj(box)
console.log(newBox.name) // 小明
newBox.family.push('妹妹')
console.log(newBox.family) //['爸爸','媽媽'曼振,'妹妹']
5.寄生式繼承
基本思想:寄生式繼承的思路與寄生構(gòu)造函數(shù)和工廠模式類似,即創(chuàng)建一個(gè)僅用于封裝繼承過程的函數(shù)蔚龙,該 函數(shù)在內(nèi)部以某種方式來增強(qiáng)對(duì)象冰评,最后再像真地是它做了所有工作一樣返回對(duì)象。
function obj(o) { //傳遞一個(gè)字面量函數(shù)
function F() {} //創(chuàng)建一個(gè)構(gòu)造函數(shù)
F.prototype = o; //把字面量函數(shù)賦值給構(gòu)造函數(shù)的原型
return new F() //最后返回出實(shí)例化的構(gòu)造函數(shù)
}
function create(o) {
let clone = obj(o); //通過調(diào)用函數(shù)創(chuàng)建一個(gè)對(duì)象
clone.sayHi = function () { //以某種方式來增強(qiáng)這個(gè)對(duì)象
console.log(123)
}
return clone; //返回這個(gè)對(duì)象
}
let person = {
name: '小明',
family: ['爸爸', '媽媽']
};
let another = create(person)
another.sayHi(); // 123
6.ES6中的Class類繼承
1.ES6中新增了一個(gè)定義類的方法這樣就不用我們手動(dòng)的創(chuàng)建構(gòu)造函數(shù)了
2.ES6 class繼承通過extends來實(shí)現(xiàn)繼承
3.語法:class 子類 extends父類
4.在constructor中要使用super()
特點(diǎn):
- 1.父類私有的屬性和方法會(huì)變成子類私有的屬性和方法
- 2.父類公有屬性和方法會(huì)變成子類公有的屬性和方法
class Dad {
constructor(uname){
this.uname = uname
}
say = function(){
console.log('叫爸爸木羹!')
}
}
// 子類繼承父類
class Son extends Dad{
constructor(uname,age){
super(uname)
this.age = age
}
}
let xiaoming = new Son('小明','18')
console.log(xiaoming) //uname: '小明', age: '18', say: ?
xiaoming.say() // 叫爸爸甲雅!