• javascript中的继承方法


    Javascript面向对象编程(二):构造函数的继承这里,可以看到详细的说明。

    我只是将其中的例子做成html文件,便于调试罢了。

    1. 构造函数绑定

    <html>
    <head>
    <script type="text/javascript">
    function Animal(){
    	this.species = "动物";
    }
    
    Animal.prototype.species2 = "动物2"
    
    function Cat(name,color){
    	Animal.apply(this, arguments);
    	this.name=name;
    	this.color=color;
    }
    Cat.prototype.type = "猫科动物";
    Cat.prototype.eat = function(){alert("吃老鼠")}; 
    
    var cat1 = new Cat("大毛","黄色");
    var cat2 = new Cat("二毛","黑色");
    alert(cat1.species); // 大毛
    alert(cat1.species2); // 黄色
    </script>
    </head>
    <body>
    	Test
    </body>
    </html>


    但是这种方法只适合本地变量的继承,并且Animal和Cat之间也没有关系。

    看截图,可以看到从cat1并不能访问Animal.prototype.species2。

    2。 prototype模式

    <html>
    <head>
    <script type="text/javascript">
    function Animal(){
    	this.species = "动物";
    }
    
    function Cat(name,color){
    	this.name=name;
    	this.color=color;
    }
    
    Cat.prototype = new Animal();
    Cat.prototype.constructor = Cat;
    
    Cat.prototype.type = "猫科动物";
    Cat.prototype.eat = function(){alert("吃老鼠")}; 
    
    var cat1 = new Cat("大毛","黄色");
    var cat2 = new Cat("二毛","黑色");
    alert(cat1.name); // 大毛
    alert(cat1.color); // 黄色
    </script>
    </head>
    <body>
    	Test
    </body>
    </html>

    从截图可以看出,prototype还是没有改变javascript内部的继承关系,见直角方框;

    圆角方框中的内容就是通过改变prototype,来实现继承。

    3. 直接继承prototype

    <html>
    <head>
    <script type="text/javascript">
    function Animal(){ }
    Animal.prototype.species = "动物";
    
    function Cat(name,color){
    	this.name=name;
    	this.color=color;
    }
    
    Cat.prototype = Animal.prototype;
    Cat.prototype.constructor = Cat;
    
    Cat.prototype.type = "猫科动物";
    Cat.prototype.eat = function(){alert("吃老鼠")}; 
    
    var cat1 = new Cat("大毛","黄色");
    var cat2 = new Cat("二毛","黑色");
    alert(cat1.name); // 大毛
    alert(cat1.color); // 黄色
    </script>
    </head>
    <body>
    	Test
    </body>
    </html>

    从下面的截图上可以看出,修改Cat.prototype会同时修改Animal.prototype。

    4. 利用空对象作为中介

    <html>
    <head>
    <script type="text/javascript">
    function extend(Child, Parent) {
      var F = function(){};
      F.prototype = Parent.prototype;
      Child.prototype = new F();
      Child.prototype.constructor = Child;
      Child.uber = Parent.prototype;
    }
    
    function Animal(){ }
    Animal.prototype.species = "动物";
    Animal.prototype.birthPlaces = ['北京','上海','香港'];
    
    function Cat(name,color){
    	this.name=name;
    	this.color=color;
    }
    
    extend(Cat,Animal);
    
    Cat.prototype.type = "猫科动物";
    Cat.prototype.eat = function(){alert("吃老鼠")}; 
    
    
    var cat1 = new Cat("大毛","黄色");
    cat1.birthPlaces.push('厦门');
    var cat2 = new Cat("二毛","黑色");
    alert(cat1.name); // 大毛
    alert(cat1.color); // 黄色
    </script>
    </head>
    <body>
    	Test
    </body>
    </html>

    但是这种方法,还是存在子类修改父类的方法。

    cat1.birthPlaces.push('厦门');

    会直接导致Animal中的birthPlaces变量变化,这时就会牵扯到浅拷贝和深拷贝了。


    一句话,上面的方法,都是在模拟继承,但是都不是正的继承。

    javascript中现在还不支持继承,只能能下一个版本。


  • 相关阅读:
    【转】常见经济类名词解释
    Linux parted命令详解
    【转】Linux下从TCP状态机,三次握手判断DDOS攻击
    【转】Java学习---HashMap和HashSet的内部工作机制
    【转】Redis学习---阿里云Redis多线程性能增强版详解
    改变自己,改变世界
    对话任正非两万字实录:最重要的是要沉着
    qt手写输入法资料
    Qt框架及模块认识
    哲学必读10本经典著作
  • 原文地址:https://www.cnblogs.com/keanuyaoo/p/3290135.html
Copyright © 2020-2023  润新知