• 怎么使用javascript实现类的功能


    经过前段时间,学习《ajax完全自学手册》后,才知道javascript原来还可以这么写。

     学过java,c#,vb的都知道类的概念,而类具有继承、封装、多态等功能。而javascript它不是面向对象语言,它是解释性语言。

    但我们同样可以使用javascript来实现继承、多态。

     javascript实现类,有多种方法。

      

    方法一:构造方法。

    代码
    function coder(){
    this.name = '小王';
    this.job = '程序员';
    this.coding = function ()
    {
    alert(
    '我正在写代码');
    }
    }

    var coder=new coder();
    alert(coder.name);
    coder.coding();

     

     方法二:工厂方法。

    代码
    function createCoderFactory(){
    var obj=new Object();
    obj.name
    = '小王';
    obj.job
    = '程序员';
    obj.coding
    = function (){
    alert(
    '我正在写代码');
    };
    return obj;
    }
    var coder = createCoderFactory();
    alert(coder.name);
    coder.coding();

      但工厂方法和构造方法都有着一个相同的缺点,就是每创建一个实例,都会实例化该类的每个函数。 

     方法三:原形链。

    代码
    function coder(){}
    coder.prototype.name
    = '小王';
    coder.prototype.job
    = '程序员';
    coder.prototype.coding
    = function(){
    alert(
    '我正在写代码');
    };
    var coder = new coder();
    alert(coder.name);
    coder.coding();

    注意:书上说:原型链有个缺点就是它所有属性都共享,只要一个实例改变其他的都会跟着改变。 测试如下:

    var coder1 = new coder();
    var coder2 = new coder();
    alert(coder1.name);
    /*显示“小王”*/
    coder2.name
    = '老王';
    alert(coder1.name);
    /*这个显示“小王” 如果按书上说的应该是显示"老王"*/
    alert(coder2.name);
    /*这个显示“老王”*/

    alert(coder1.name);如果按书上说的应该是显示"老王",但这里显示的是“小王”,所以书上出错了。

      

    方法四:混合方式。

     以上三种都有着各自的缺点,所以我们要加以改进。

    function coder(){
    this.name = '小王';
    this.job = '程序员';
    }
    coder.prototype.coding
    = function(){
    alert(
    '我正在写代码');
    };

     

    方法五:动态原链。

    要解决前三种的缺点,还有一种方法。

    代码
    function coder(){
    this.name = '小王';
    this.job = '程序员';
    if (typeof(coder._init) == 'undefined'){
    this.coding = function ()
    {
    alert(
    '我正在写代码');
    };
    this._init = true;
    }
    }

      这个方法呢,当第一次使用时,由于_init没初始化,就会执行以下的代码,实例化coding函数。以后就不会再执行,这样就只实例化函数一次。   

  • 相关阅读:
    java 模拟http请求,通过流(stream)的方式,发送json数据和文件
    $listeners 在vue中的使用 --初学
    vue中关于checkbox数据绑定v-model指令说明
    Vue--理解非prop特性
    Vue里标签嵌套限制问题解决------解析DOM模板时注意事项:
    vue click.stop
    @click.prevent.self和@click.self.prevent区别
    assign()-JS
    摘抄大神对VUE 中slot-scope的深度理解
    oracle11G备份空表解决办法
  • 原文地址:https://www.cnblogs.com/chingho/p/1679792.html
Copyright © 2020-2023  润新知