JS继承和多态

JS继承和多态

  • 继承
    案例:创建一只狗
function Dog({name,type,age}){
   //this = new Object();
   //添加属性
   this.name = name;
   this.type = type;
   this.age = age;
}
/* 
   通过构造函数的原型添加方法
*/
Dog.prototype = {
    run: function(){
        alert(this.name + "会飞快的奔跑");
    },
    showSelf: function(){
        alert(`这是一个${this.type}的,${this.age}岁的,${this.name}叫的小狗`);
    }
}

/* 
   分类更加细分的构造函数。
*/
function Teddy({name,type,age,color}){
    //1.继承父一级构造函数所有的属性
    //构造函数的伪装
    Dog.call(this,{
        name: name,
        type: type,
        age: age
    })
    //添加自己的属性
    this.color = color;
}

// 2.原型链  继承父一级的方法
//<1>通过for...in遍历继承
for(var funcName in Dog.prototype){
    Teddy.prototype[funcName] = Dog.prototype[funcName];
}

//<2>Object.create()
Teddy.prototype = Object.create(Dog.prototype);

//<3>调用构造函数继承
Teddy.prototype = new Dog({});

var xiaohong = new Teddy({
    name: "小红",
    type: "泰迪",
    age: 10,
    color: "红色"
})
alert(xiaohong.name); // 小红
alert(xiaohong.age); // 10
alert(xiaohong.type); // 泰迪
alert(xiaohong.color); // 红色
xiaohong.showSelf(); // 这是一个泰迪的,10岁的,小红叫的小狗

拓展:对象拷贝

var obj1 = {
    a: 10,
    b: 20,
    c: 30
};

var obj2 = obj1;

obj2.c = 100;
console.log(obj1); // {a: 10,b: 20,c: 100}
console.log(obj2); // {a: 10,b: 20,c: 100}

var obj1 = {
    a: 10,
    b: 20,
    c: 30
};

var obj2 = {};
for(var attr in obj1){
    obj2[attr] = obj1[attr];
}

obj2.c = 100;
console.log(obj1); // {a: 10,b: 20,c: 30}
console.log(obj2); // {a: 10,b: 20,c: 100}
  • 多态
    案例:创建一只狗
function Dog({name,type,age}){
    //this = new Object();
    //添加属性
    this.name = name;
    this.type = type;
    this.age = age;
}
 /* 
    通过构造函数的原型添加方法
 */
 Dog.prototype = {
     run: function(){
         alert(this.name + "会飞快的奔跑");
     },
     showSelf: function(){
         alert(`这是一个${this.type}的,${this.age}岁的,叫${this.name}的小狗`);
     }
 }

 /* 
    分类更加细分的构造函数。
 */
 function Teddy({name,type,age,color}){
     //1.继承父一级构造函数所有的属性
     //构造函数的伪装
     Dog.call(this,{
         name: name,
         type: type,
         age: age
     })
     //添加自己的属性
     this.color = color;
 }

 //继承父类方法
 for(var funcName in Dog.prototype){
     Teddy.prototype[funcName] = Dog.prototype[funcName];
 }

 // 新增子方法
 Teddy.prototype.showColor = function(){
     alert(this.color);
 }

 //在子一级构造函数重写showSelf()方法
 Teddy.prototype.showSelf = function(){
    alert(`这是一个${this.type}的,${this.age}岁的,是${this.color}的,叫${this.name}叫的小狗`);

 }

 var xiaohong = new Teddy({
     name: "小红",
     type: "泰迪",
     age: 10,
     color: "红色"
 });
 xiaohong.showSelf(); // 这是一个泰迪的,10岁的,是红色的,叫小红叫的小狗

 var xiaohei= new Dog({
     name: "小黑",
     type: "柴犬",
     age: 5
 });
 xiaohei.showSelf(); // 这是一个柴犬的,5岁的,叫小黑的小狗

总结:
继承和多态同一件事情的两种完全不同的侧重:
继承:侧重的是从父一级构造函数,继承到的属性和方法
多态:侧重的是子一级,自己重写和新增的属性和方法

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

东方求败、

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值