美文网首页
js构造函数继承

js构造函数继承

作者: 希染丶 | 来源:发表于2019-07-08 18:09 被阅读0次

1.构造函数绑定

最简单,使用call和apply,将父对象的构造函数绑定到子对象身上

function Animal(){
    this.species = "动物";
}
function cat(name,color){
    Animal.call(this,arguments);
    this.name = name;
    this.color = color;
}
var cat1 = new cat('大毛','红色');

console.log(cat1.species)

2.prototype模式

将cat的prototype指向Animal实例,那么所有的cat对象都拥有animal的属性,任何一个prototype对象都有一个constructor属性,指向它的构造函数。如果没有"cat.prototype = new Animal();"这一行,Cat.prototype.constructor是指向cat的;加了这一行以后,cat.prototype.constructor指向Animal。

每一个实例也有一个constructor属性,默认调用prototype对象的constructor属性。在运行"Cat.prototype = new Animal();"这一行之后,cat1.constructor也指向Animal!
cat实例是由构造函数cat生成的,为了保证继承链的稳定,手动纠正,将constructor指回cat

function Animal(){
    this.species = "动物";
}
function cat(name,color){
    this.name = name;
    this.color = color;
}
cat.prototype = new Animal();
cat.prototype.constructor = cat;
var cat1 = new cat("大毛","黄色");
alert(cat1.species); // 动物


如果没有将constructor手动纠正,那么

cat1.prototype.constructor = Animal;
纠正后
cat1.prototype.constructor = cat;

3.利用空对象做中介

var F = function(){};
F.prototype = Animal.prototype;
cat.prototype = new F();
cat.prototype.constructor = Cat;

F是空对象,所以几乎不占内存。这时,修改cat的prototype对象,就不会影响到Animal的prototype对象。

将上述操作进行封装

function extend(Child, Parent) {
  var F = function(){};
  F.prototype = new Parent();
  Child.prototype = new F();
  Child.prototype.constructor = Child;
}

使用
extend(cat,animal);
cat继承animal属性

4.拷贝继承

原理为,将父对象所有属性拷贝进字对象实现继承。

function extend2(child,parent){
    var p = new parent();
  var c = child.prototype;
  for (var i in p) {
    c[i] = p[i];
  }
}
extend2(cat, animal);

相关文章

  • js基础之实现继承的几种方式

    js 实现继承的方式有: 原型链继承; 构造函数继承; 组合继承(原型链继承 + 构造函数继承)(最常用);(原型...

  • JavaScript 面向对象 (2)

    JS 如何继承? 借用构造函数继承 : function SuperType(name){ ...

  • js的继承方式

    js的继承方式 一、原型链继承 原型继承的缺点: 二. 构造函数继承 构造函数继承的缺点: 三. 组合式继承 组合...

  • 浅析JS继承方法

    JS 实现继承的方法有:1.原型链继承2.构造函数继承3.组合继承(原型链继承 + 构造函数继承)4.原型式继承(...

  • 2019-03-25 继承

    js中通过原型来实现继承 组合继承:原型继承+借用构造函数继承

  • ES5和ES6中继承的不同之处

    1、JS中是没有继承的,不过可以通过构造函数或是原型等实现继承,ES5实现继承的方法——构造函数,当一个构造函数加...

  • js 继承的三种方式构造函数、原型链、组合继承

    第一种方式:js使用构造函数的继承。 缺点:无法继承父类的原型链。 // 构造函数继承 缺点:没有继承原型链 fu...

  • Js的继承

    js的继承 @(js)[继承, js, 前端] 组合继承是原性链继承和构造函数继承的合体,它汲取了二者各自的有点,...

  • JS对象和继承

    JS 对象创建的三种方式 字面量创建方式 系统内置构造函数方式 自定义构造函数 继承方式 for in 继承 原型...

  • 面向对象继承复习

    js基础的面向对象的继承 构造函数继承 这种方法的缺陷是只会继承构造函数上的实例属性,并不会继承原型对象上的属性,...

网友评论

      本文标题:js构造函数继承

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