美文网首页
对象的继承

对象的继承

作者: 释梦石 | 来源:发表于2020-08-31 10:38 被阅读0次

构造函数继承

让一个构造函数继承另一个构造函数,是非常常见的需求。这可以分成两步实现。第一步是在子类的构造函数中,调用父类的构造函数。

function Person (name, age) {
  this.type = 'human'
  this.name = name
  this.age = age
}

function Student (name, age) {
  // 借用构造函数继承属性成员
  Person.call(this, name, age)
}

var s1 = Student('张三', 18)
console.log(s1.type, s1.name, s1.age) // => human 张三 18

this是子类的实例。在实例上调用父类的构造函数Person ,就会让子类实例具有父类实例的属性。

构造函数原型继承-拷贝继承(for-in)

function Person (name, age) {
  this.type = 'human'
  this.name = name
  this.age = age
}

Person.prototype.sayName = function () {
  console.log('hello ' + this.name)
}

function Student (name, age) {
  Person.call(this, name, age)
}
// 原型对象拷贝继承原型对象成员
for(var key in Person.prototype) {
  Student.prototype[key] = Person.prototype[key]
}
var s1 = Student('张三', 18)
s1.sayName() // => hello 张三

原型继承

function Person (name, age) {
  this.type = 'human'
  this.name = name
  this.age = age
}

Person.prototype.sayName = function () {
  console.log('hello ' + this.name)
}

function Student (name, age) {
  Person.call(this, name, age)
}
// 利用原型的特性实现继承
Student.prototype = new Person()
var s1 = Student('张三', 18)
console.log(s1.type) // => human
s1.sayName() // => hello 张三

我们需要注意的是,如果Student里边儿没有改变调用Person的this指向,那所有Student的子类的属性都是共享的,因为他们是来自Student,那修改一个类中的值,另外一个子类也会受影响。我们来看


原型继承的问题

为了避免这个问题,我们要在Student的构造函数中改变this的指向,让Student的子类在Student的构造函数中调用Person的构造函数时,this指向Student的子类。

多重继承

JavaScript 不提供多重继承功能,即不允许一个对象同时继承多个对象。但是,可以通过变通方法,实现这个功能。

function M1() {
  this.hello = 'hello';
}

function M2() {
  this.world = 'world';
}

function S() {
  M1.call(this);
  M2.call(this);
}

// 继承 M1
S.prototype = Object.create(M1.prototype);
// 继承链上加入 M2
Object.assign(S.prototype, M2.prototype);

// 指定构造函数
S.prototype.constructor = S;

var s = new S();
s.hello // 'hello'
s.world // 'world

上面代码中,子类S同时继承了父类M1和M2。这种模式又称为 Mixin(混入)。

相关文章

  • javascript对象继承顺序、分类和内置Math对象

    javascript对象继承顺序、分类和内置Math对象 一、对象的继承顺序 所有对象都是从Object对象继承过...

  • 深入理解js中实现继承的原理和方法

    原型对象继承 ==原理:原型对象的属性可以经由对象实例访问== 下面的例子,所含【对象继承】和【构造函数继承】,用...

  • 对象的继承

    继承:prototype:原型对象,共享资源,每个函数对象都有 prototype 的显式属性proto:原型属性...

  • 对象的继承

    var obj={ name:"小兰", age:22, say:function(){ console.log(...

  • 对象的继承

    JS 作为面向对象的弱类型的语言,继承是它非常强大的特征之一 JS继承实现的方式: 1.原型链继承2.构造函数继承...

  • 对象的继承

    构造函数继承 让一个构造函数继承另一个构造函数,是非常常见的需求。这可以分成两步实现。第一步是在子类的构造函数中,...

  • 对象继承

    传统圣杯模式 YUI中的圣杯模式

  • 对象继承

    ES5继承:(1)通过原型或构造函数机制来实现。(2)先创建子类实例对象,然后让子类原型继承父类实例,从而获取到父...

  • java基础-day10-面向对象4.0

    面向对象4.0 1. 面向对象之继承 1.1 生活中的继承 1.2 Java中的继承 1.3 子类对象创建,会调...

  • JavaScript之面向对象编程

    五、面向对象编程 目录:面向对象原型继承、面向对象class继承(ES6引入的) 1.面向对象原型继承 类:模板 ...

网友评论

      本文标题:对象的继承

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