zoukankan      html  css  js  c++  java
  • js类(继承)(二)

    1. 定义js类
    js并不是一种面向对向的语言, 没有提供对类的支持, 因此我们不能像在传统的语言里那样 用class来定义类, 但我们可以利用js的闭包封装机制来实现js类, 我们来封装一个简的Shape类.

    代码如下:

    function ShapeBase() {
    this.show = function()
    {
    alert("ShapeBase show");
    };
    this.init = function(){
    alert("ShapeBase init");
    };
    }

    这个类里定义了两个方法:show和init, 需要注意的是这里用到了this来声明, 而不是var, 因为用var是用来定义私有方法的.
    另外, 我们还可以用prototype属性来定义Shape的方法.

    代码如下:

    ShapeBase.prototype={
    show:function()
    {
    alert("ShapeBase show");
    },
    init:function() {
    alert("ShapeBase init");
    }
    };

    现在, 类是写好了, 让我们写个js来测试下, 看看结果是不是跟我们想象的一样呢?

    代码如下:

    function test(src){
    var s=new ShapeBase();
    s.init();
    s.show();
    }

    看到了吧, 其调用方式和C#一模一样, 而结果也如我们所料.
    到目前为止, 我们学会了如何创建js的类了, 但还只是实例方法,要是实现跟C#中的静态方法要怎么做呢?
    其实, 实现js的静态方法很简单, 看下面如何实现:

    代码如下:

    //静态方法
    ShapeBase.StaticDraw = function()
    {
    alert("method draw is static");
    }

    2. 实现JS类抽象和继承

    function Animal(){

        this.species = "动物";

      }

    一、 构造函数绑定

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

    function Cat(name,color){

                     Animal.apply(this, arguments);

    this.name = name;

    this.color = color;

    }

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

    alert(cat1.species); // 动物

    二、 prototype模式

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

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

    Cat.prototype = new Animal();

    Cat.prototype.constructor = Cat;

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

    alert(cat1.species); // 动物

    代码的第一行,我们将Cat的prototype对象指向一个Animal的实例。

    Cat.prototype = new Animal();

    它相当于完全删除了prototype 对象原先的值,然后赋予一个新值。但是,第二行又是什么意思呢?

    Cat.prototype.constructor = Cat;

    原来,任何一个prototype对象都有一个constructor属性,指向它的构造函数。如果没有"Cat.prototype = new Animal();"这一行,Cat.prototype.constructor是指向Cat的;加了这一行以后,Cat.prototype.constructor指向Animal。

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

    更重要的是,每一个实例也有一个constructor属性,默认调用prototype对象的constructor属性。

    alert(cat1.constructor == Cat.prototype.constructor); // true

    因此,在运行"Cat.prototype = new Animal();"这一行之后,cat1.constructor也指向Animal!

    alert(cat1.constructor == Animal); // true

    这显然会导致继承链的紊乱(cat1明明是用构造函数Cat生成的),因此我们必须手动纠正,将Cat.prototype对象的constructor值改为Cat。这就是第二行的意思。

    这是很重要的一点,编程时务必要遵守。下文都遵循这一点,即如果替换了prototype对象,

    o.prototype = {};

    那么,下一步必然是为新的prototype对象加上constructor属性,并将这个属性指回原来的构造函数。

    o.prototype.constructor = o;

    可以参考:http://www.jb51.net/article/44875.htm

  • 相关阅读:
    sqlite数据库的基本操作
    java-正则表达式判断移动联通电信手机号
    基金新手常识
    Android 心跳包心跳连接 如何实现android和服务器长连接呢?推送消息的原理
    java 设计模式之模板方法
    Android 自定义view实现水波纹效果
    Android中pendingIntent的深入理解
    CentOS 7.X下 -- 配置nginx正向代理支持https
    自动化运维工具saltstack04 -- 之jinja模板
    自动化运维工具saltstack03 -- 之SaltStack的数据系统
  • 原文地址:https://www.cnblogs.com/yichengbo/p/3719387.html
Copyright © 2011-2022 走看看