美文网首页
JavaScript原型继承

JavaScript原型继承

作者: 君惜丶 | 来源:发表于2019-05-23 15:32 被阅读0次

JavaScript原型继承

function A() {
    this.a = 'A'
}

A.prototype.showA = function () {
    console.log(this.a)
};

function B() {
    A.call(this);
    this.b = 'B'
}

B.prototype = Object.create(A.prototype);
B.prototype.constructor = B;    // 把B原型的构造函数修复为B
B.prototype.showB = function () {
    console.log(this.b)
};

b = new B();
b.showA();
b.showB();
console.log('b instanceof B: ', b instanceof B);
console.log('b instanceof A: ', b instanceof A);


打印结果:

A
B
b instanceof B:  true
b instanceof A:  true

封装可复用继承函数:

function inherit(parent, child) {
    child.prototype = Object.create(parent.prototype);
    child.prototype.constructor = child;
}

实现继承:

function A(a) {
    this.a = a
}

A.prototype.showA = function () {
    console.log(this.a)
};

function B(a, b) {
    A.call(this, a);
    this.b = b
}

inherit(A, B);  // 继承

B.prototype.showB = function () {
    console.log(this.b)
};

b = new B('aaa', 'bbb');
console.log(b.a);
console.log(b.b);
b.showA();
b.showB();
console.log('b instanceof B: ', b instanceof B);
console.log('b instanceof A: ', b instanceof A);

打印结果:

aaa
bbb
aaa
bbb
b instanceof B:  true
b instanceof A:  true

学习参考:
https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Inheritance_and_the_prototype_chain
https://www.liaoxuefeng.com/wiki/1022910821149312/1023021997355072

相关文章

  • 函数的原型对象

    什么是原型? 原型是Javascript中的继承的继承,JavaScript的继承就是基于原型的继承。 函数的原型...

  • 一文带你彻底理解 JavaScript 原型对象

    一、什么是原型 原型是Javascript中的继承的基础,JavaScript的继承就是基于原型的继承。 1.1 ...

  • js原型、原型链、继承的理解

    一、原型、原型链 原型是Javascript中的继承的基础,JavaScript的继承主要依靠原型链来实现的。 原...

  • es5的部分继承以及es6的class

    一、JavaScript常用的原型继承方式 原型链继承 2,构造函数继承(对象冒充继承) 3,组合继承(原型链继承...

  • 【javascript】继承

    javascript只支持实现继承,而且继承主要是依靠原型链来实现的。 原型链 javascript将原型链作为实...

  • JavaScript 原型、原型链与原型继承

    原型,原型链与原型继承 用自己的方式理解原型,原型链和原型继承 javascript——原型与原型链 JavaSc...

  • javascript碎片知识001

    javascript中的对象(原型,原型链) 什么是原型? 原型是JavaScript中的继承的基础,JavaSc...

  • javascript原型链及继承的理解

    javascript:void(null)# 原型链及继承的理解 定义函数 继承 继承构造函数 继承静态属性 继承原型链

  • JavaScript的六种继承方式

    JavaScript的几种继承方式 原型链继承 借助构造函数继承(经典继承) 组合继承:原型链 + 借用构造函数(...

  • 继承

    原型继承原型继承的基本形式: -> 原型继承是JavaScript中最常用的一种继承方式。-> 子类B想要继承父类...

网友评论

      本文标题:JavaScript原型继承

      本文链接:https://www.haomeiwen.com/subject/buqbzqtx.html