JS继承以及class类继承

继承的概念:

        在原有的基础之上我们要进行继承,可以直接从父方法或者父类中的属性和方法,达到不用重复定义即可直接使用,就是代码的复用

ES5继承的方式有哪些?

        原型链继承:将父方法的实例化对象赋给子方法的原型,子方法既可调用父方法自身的属性和方法,还可以使用父方法原型中的属性和方法,不足地地方就是无法传递参数。

function Nation() {
    this.name = '张飞'
    this.age = '男'
}
Nation.prototype.skills = '当阳桥喝退百万师'
Nation.prototype.poem = function() {
    console.log('子承父之志');
}
function Address() {
    this.name = '张星彩'
    this.age = '女'
}
Address.prototype = new Nation()
let address = new Address()
console.log(address);
console.log(address.name, address.age, address.skills);
address.poem();

构造函数继承

        定义一个父函数和子函数,子函数通过call方法或者allpy改变指向从而实现继承效果,

父方法.call(this,参数列表),缺点是不能使用父方法原型中的属性,可以传递参数

function Car(brand, color) {
    this.brand = brand
    this.color = color
}
Car.prototype.skills = '直线之王'

function Knsg() {
    this.speed = '每小时500公里'
    Car.call(this, 'jesko', 'red')
}
let knsg = new Knsg()
console.log(knsg);

Class类及Class继承:

        ES6提供了更新传统的语言写法,引入Class类,作为对象的模板,ES6中的class可以当作是一个语法糖,它的大部分功能,ES5都可以做到,新的class写法让对象原型的写法更加清晰

class Jukuzhou {
    constructor(name, age, address) {
        this.name = name
        this.age = age
        this.address = address
    }
    skills() {
        console.log('十八般武艺和十八般武器');
    }
}
let ydj = new Jukuzhou('妖刀姬', '女', '森罗谷')
console.log(ydj);
let jch = new Jukuzhou('季沧海', '男', '不舟滩')
console.log(jch);
let gqh = new Jukuzhou('顾清寒', '女', '天人城')
console.log(gqh);

class的继承:

        还可以使用extends关键字实现,super()父类的方法

class Animal {
    constructor(name) {
            this.name = name // 指定名字
    }
    main() {
        console.log(`${this.name}练习两年半`);
    }
}
class Chicken extends Animal {
    static num = 1;
    constructor(name) {
        super(name)
        this.overalls = '背带裤'
        this.love = '唱跳rap篮球'
    }
    skills() {
        console.log(`${this.name}会唱跳rap篮球`);
    }
}
let chicken = new Chicken('鸡哥')
console.log(chicken);
chicken.main()
chicken.skills()

  • 9
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值