js继承

Posted 山水一程

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了js继承相关的知识,希望对你有一定的参考价值。

  function Animal(){

    this.species = "动物";

  }

  function Cat(name,color){

    this.name = name;

    this.color = color;

  }

Cat继承Animal的方法:

1.构造函数绑定

第一种方法也是最简单的方法,使用call或apply方法,将父对象的构造函数绑定在子对象上,即在子对象构造函数中加一行:

      function Cat(name,color){

        Animal.apply(this, arguments);

        this.name = name;

        this.color = color;

      }

      var cat1 = new Cat("大毛","黄色");

      alert(cat1.species); // 动物

2.子原型指向父实例

第二种方法更常见,使用prototype属性。

如果"猫"的prototype对象,指向一个Animal的实例,那么所有"猫"的实例,就能继承Animal了。

      Cat.prototype = new Animal(); // 完全删除了prototype对象原先的值,然后赋予一个新值。Cat.prototype.constructor指向Animal,我们必须手动纠正,第二行将Cat.prototype对象的constructor值改为Cat。

      Cat.prototype.constructor = Cat; // 任何一个prototype对象都有一个constructor属性,指向它的构造函数。每一个实例也有一个constructor属性,默认调用prototype对象的constructor属性。

      var cat1 = new Cat("大毛","黄色");

      alert(cat1.species); // 动物

3.子原型直接指向父原型(不能用)

先将Animal对象改写:

      function Animal(){ }

      Animal.prototype.species = "动物";

然后,将Cat的prototype对象,然后指向Animal的prototype对象,这样就完成了继承。

      Cat.prototype = Animal.prototype;

      Cat.prototype.constructor = Cat; // 把Animal.prototype对象的constructor属性也改掉了!!!

      var cat1 = new Cat("大毛","黄色");

      alert(cat1.species); // 动物

Cat.prototype和Animal.prototype现在指向了同一个对象,那么任何对Cat.prototype的修改,都会反映到Animal.prototype。

上面代码第2行,把Animal.prototype对象的constructor属性也改掉了!!!

4.利用空对象作为中介,子原型间接指向父原型

      var F = function(){};

      F.prototype = Animal.prototype;

      Cat.prototype = new F();

      Cat.prototype.constructor = Cat;

5.深拷贝继承

  var Chinese = {
    nation:‘中国‘
  };

  var Doctor ={
    career:‘医生‘
  }

如果把父对象的所有属性和方法,拷贝进子对象,也能够实现继承。

      function deepCopy(p, c) {

        var c = c || {};

        for (var i in p) {

          if (typeof p[i] === ‘object‘) {

            c[i] = (p[i].constructor === Array) ? [] : {};

            deepCopy(p[i], c[i]);

          } else {

             c[i] = p[i];

          }
        }

        return c;
      }

使用:

var Doctor = deepCopy(Chinese);

以上是关于js继承的主要内容,如果未能解决你的问题,请参考以下文章

VSCode自定义代码片段9——JS中的面向对象编程

js代码片段: utils/lcoalStorage/cookie

JS代码片段:一个日期离现在多久了

js常用代码片段(更新中)

js常用代码片段

Chrome-Devtools代码片段中的多个JS库