zoukankan      html  css  js  c++  java
  • 继承的几种方法及优缺点

    1.构造函数继承

    function Cat(name,color){
        this.name = name;
        this.color = color;
        this.type = "猫科动物";
        this.eat = function(){alert("吃老鼠");};
    }
    var cat1=new Cat("花花","白色");
    console.log(cat1.type);//猫科动物

    cat1会自动含有一个construtor属性,指向它们的构造函数:alert(cat1.constructor == Cat); //true

    Javascript还提供了一个instantanceof运算符,验证原型对象与实例对象之间的关系:alert(cat1 instanceof Cat); //true

    缺点:浪费内存 (type属性和eat()方法都是一模一样的内容,每一次生成一个实例,都必须为重复的内容,多占用一些内存)

    function Animal(){
        this.species = "猫科动物";
    }
    function Cat(name,color){
        Animal.apply(this, arguments);//Cat继承Animal
        this.name = name;
        this.color = color;
    }
    var cat1 = new Cat("花花","白色");
    alert(cat1.species); //猫科动物

    apply、call 和 bind 方法继承: http://www.cnblogs.com/mina-huojian66/p/6097808.html 

    2.Prototype模式继承

    Javascript规定,每一个构造函数都有一个prototype属性,指向另一个对象。这个对象的所有属性和方法,都会被构造函数的实例继承。

    function Animal(){
      this.type="猫科动物";
    }
    function
    Cat(name,color){     this.name = name;     this.color = color; }
    方法一: Cat.prototype.type
    = "猫科动物"; Cat.prototype.eat = function(){alert("吃老鼠")}; var cat1=new Cat("花花","白色"); console.log(cat1.type);//猫科动物
    console.log(cat1.eat());//吃老鼠
    方法二:
    Cat.prototype = new Animal();//Cat.prototype.constructor指向Anmail,也指向cat
    console.log(
    Cat.prototype.constructor==Animal);//true
    console.log(Cat.prototype.constructor==Cat);//true
    Cat.prototype.condtructor=Cat;
    var cat1=new Cat("花花","白色");
    console.log(cat1.type);//猫科动物
    方法三:
    Cat.prototype=Animal.prototype;
    Cat.prototype.constructor=Cat;
    var cat1=new Cat("花花","白色");
    console.log(cat1.type);//猫科动物

     Prototype模式的验证方法

    a.alert(Cat.prototype.isPrototypeOf(cat1)); //true

    b.alert(cat1.hasOwnProperty("name")); // true

    c.alert("name" in cat1); // true

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

    Cat.prototype.constructor = Cat;

    alert(Animal.prototype.constructor); // Cat

    方法四:利用空对象作为中介
    var F = function(){};
    F.prototype = Animal.prototype;
    Cat.prototype = new F();
    Cat.prototype.constructor = Cat;
    alert(Animal.prototype.constructor); // Animal

    //封装
    function jicheng(Child,Parent){
      var F=function(){};
      F.prototype=Parent.prototype;
      Child.prototype=new F();
      Child.prototype.construction=Child;
    }
    jicheng(Cat,Animal);
    var cat1=new Cat("花花","白色");
    console.log(cat1.type);//猫科动物

    大部分学习于:http://www.ruanyifeng.com/blog/2010/05/object-oriented_javascript_inheritance.html

  • 相关阅读:
    PHP zip_entry_read() 函数
    PHP zip_entry_open() 函数
    PHP zip_entry_name() 函数
    PHP zip_entry_filesize() 函数
    PHP zip_entry_compressionmethod() 函数
    混合模式 | mix-blend-mode (Compositing & Blending)
    混合模式 | blend-mode (Compositing & Blending)
    浮动 | float (Basic Box Model)
    浏览器兼容性表 | @document (Miscellaneous)
    沿着内联轴溢出初始包含块 | @media.overflow-inline (Media Queries)
  • 原文地址:https://www.cnblogs.com/mina-huojian66/p/6098700.html
Copyright © 2011-2022 走看看