美文网首页前端杂货随记
javascript继承之原型链继承(一)

javascript继承之原型链继承(一)

作者: 程序蜗牛 | 来源:发表于2018-02-04 10:14 被阅读5次

(一)原型链继承机制

基本思想是利用原型链继承另一个引用类型的属性和方法

  • 创建Car构造函数
function Car(){
    this.color = "黑色";// 汽车基础颜色
}

Car.prototype.changeColor = function(otherColor){
    // 提供更换颜色方法
    this.color = otherColor;
}
  • 创建Audi构造函数
function Audi(master){
    this.master = master;
}
  • Audi原型链继承Car
Audi.prototype = new Car();
  • 创建Audi原型链方法
Audi.prototype.getColor = function(){
    return this.color;
}
Audi.prototype.getMessage = function(){
    return this.master+"的奥迪颜色是"+this.color;
}
  • 实例继承测试
var car1 = new Audi("老王");
console.log(car1.getColor());// 黑色
console.log(car1.getMessage());// 老王的奥迪颜色是黑色

验证原型和实例之间的关系

  • 第一种instanceof
console.log(car1 instanceof Object);// true
console.log(car1 instanceof Car);// true
console.log(car1 instanceof Audi);// true
  • 第二种isPrototypeOf
console.log(Object.prototype.isPrototypeOf(car1));// true
console.log(Car.prototype.isPrototypeOf(car1));// true
console.log(Audi.prototype.isPrototypeOf(car1));// true

通过原型链实现继承时,不能使用对象字面量创建原型方法!!!

相关文章

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

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

  • javaScript原型链

    javaScript原型链概念JavaScript之继承(原型链)数据结构var Person = functio...

  • javascript原型链及继承的理解

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

  • JavaScript的六种继承方式

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

  • JavaScript继承方式详解

    JavaScript实现继承的方式主要有两种: 原型链继承和借助构造函数继承 一、原型链继承 原型链继承的主要思想...

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

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

  • 【javascript】继承

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

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

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

  • JS 继承

    1.原型链继承:prototype 2.原型链继承2:prototype 注意:JavaScript的类继承其实本...

  • 【重学前端】JavaScript中的继承

    JavaScript中继承主要分为六种:类式继承(原型链继承)、构造函数继承、组合继承、原型式继承、寄生式继承、寄...

网友评论

    本文标题:javascript继承之原型链继承(一)

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