JavaScript 继承 (1)

本文介绍了JavaScript中三种继承方式:类式继承、构造函数继承和组合继承。详细对比了它们各自的优缺点,并展示了如何通过组合继承实现既能让子类继承父类的属性又能保留各自独立状态的目标。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

1:类式继承

// 声明父类
function Farent(name) {
  this.name = name;
  this.books = ["JS","php"];
}

// 给父类添加一个共有方法 在父类的原型上
Farent.prototype.getName = function() {
  console.log(this.name);
}

// 声明子类
function Child(age) {
  this.age = age;
}

// 给子类添加一个共有方法 在子类的原型上
Child.prototype.getAge = function(){
  console.log(this.age);
}

// 继承父类
Child.prototype = new Farent("父类");
var c = new Child("18");
// 调用父类的方法
c.getName()  //  父类
var c1 = new Child("28");
var c2 = new Child("28");
c1.push("设计模式");
console.log(c2.books);   // ["JS","php","设计模式"];

注 : 类式继承其实很简单 ,就是先声明两个类 , 然后将 父类的实例赋值给 子类的原型。

缺点: 多次实例化后 , 修改其中的一个 , 其他的也会跟着变 ! (这不是我们想要的)

、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、

2:构造函数继承

// 声明父类
function Farent(id){
  this.books = ['JavaScript','PHP','Python'];
  this.id = id;
}
// 父类声明原型方法
Farent.prototype.getBooks = function() {
  console.log(this.books);
}


// 声明子类
function Child(id) {
    // 继承父类
    Farent.call(this,id)
}

// 创建两个子类的 实例
var c1 = new Child("2018");
var c2 = new Child("2019");
c1.books.push("go");

console.log(c1.books);  // ["JavaScript", "PHP", "Python", "go"]
console.log(c2.books); //  ["JavaScript", "PHP", "Python"]

console.log(c1.id);   // 2018
console.log(c2.id);  // 2019

c1.getBooks();   //  报错  TypeError 

优点:多次实例化后 ,改变其中一个值 , 其他的不会跟着变

缺点:这种类型的继承 没有涉及到 原型( prototype ),所以父类的原型方法自然不会被 子类所继承 !

、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、

重点来了 , 我们可以把这两个的优点组合一起来使用 …

3: (1,2) 优点为我所有 — 组合继承

// 声明父类
function Farent(name){
  this.books = ['JavaScript','PHP','Python'];
  this.name = name;
}
// 父类声明原型方法
Farent.prototype.getName = function() {
  console.log(this.name);
}


// 声明子类
function Child(name,time) {
    // 继承父类
    Farent.call(this,name)
    this.time = time;
}

// 继承父类
Child.prototype = new Farent("父类");

// 给子类添加一个共有方法 在子类的原型上
Child.prototype.getTime = function(){
  console.log(this.time);
}

var c1 = new Child("JS book" ," 2015 ");
c1.push("设计模式");
console.log(c1.books) // ['JavaScript','PHP','Python','设计模式'];

var c2 = new Child("python book" ," 2017");
console.log(c2.books) // ['JavaScript','PHP','Python'];
c2.getName();    // python book
c2.getTime();    // 2017

优点:
1:子类的实例化过去 能将参数传递给 父类。
2:多次实例化子类 改变其中一个 , 其他的实例化 不会改变 !

缺点 : 因为每次子类在实例化时 , 父类的构造函数 就会被调用一次 !

、、、、、、、、、、、、、、、/、、、、、、、、、、、、、、、、、、、、、、、

别着急 后面还有更好的继承方式…………

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值