zoukankan      html  css  js  c++  java
  • 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中现在还不支持继承,只能能下一个版本。


  • 相关阅读:
    在Win10的注册表编辑器中如何快速跳转到相关键值?
    使用winsw给Win10添加服务
    巧把任意程序添加到Win10控制面板(添加“系统配置”为例)
    在Win8.1开始屏幕添加电源按钮
    win10中,如何隐藏此电脑中的6个文件夹?
    Win10恢复这台电脑里的6个文件夹
    解决Office 2010安装报错1907,没有足够权限注册字体。
    C#面向对象(OOP)入门—第二天—多态和继承(继承)
    C#面向对象(OOP)入门—第一天—多态和继承(方法重载)
    OpenCV与Python之图像的读入与显示以及利用Numpy的图像转换
  • 原文地址:https://www.cnblogs.com/keanuyaoo/p/3290135.html
Copyright © 2011-2022 走看看