js构造函数继承

2019-07-08  本文已影响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);
上一篇下一篇

猜你喜欢

热点阅读