zoukankan      html  css  js  c++  java
  • 给对象添加方法和属性

      为了减少所写JS代码对全局环境的污染, 可以采用对象写法来实现命名空间技术,

    以使得局部变量和函数都在对象中作为属性存在,它们组成某个主题(对象名称体现)的相关属性和方法的集合。

    如下例:

    var MyLib = {}; // global Object cointainer
    MyLib.value = 1;
    MyLib.increment = function() { MyLib.value++; }
    MyLib.show = function() { alert(MyLib.value); }
    
    MyLib.value=6;
    MyLib.increment();
    MyLib.show(); // alerts 7

       对象定义中每个属性的定义相对对象松散,优化下:

    var MyLib = {
        value:1,
        increment:function() {this.value++; },
        show: function() { alert(this.value); }
    }; 

      

      如何给已有对象添加属性和方法?

      优化后的代码是类库的一般写法,直接修改不是合适的,库的内容也不容易修改,修改了也不符合开闭法则;

      使用优化前的方法 MyLib.xxx = yyy 来实现,可以满足单实例对象, 但是对于多个实例情况,并且多个属性和方法需要添加,

    每个实例的待添加的属性和方法又是一致的,方法定义为公共函数, 每个实例都设置一遍所需的属性和方法,着实显得笨重。

        查阅 apply 和 call 的用法(http://sjolzy.cn/Understanding-JavaScript-in-argumentscalleecallerapply.html),

    可以构造一个属性和方法定义函数, 属性和方法的前缀为this., 然后使用call将this绑定到具体对象上,就实现了对象扩展。

    
    
    function base() {
        this.member =" dnnsun_Member";
        this.method =function() {
            window.alert(this.value);
        }
    }

    var
    extObj = { value: 2 } base.call(extObj); extObj.method(); // alert 2

      不仅仅对于普通的对象生效, 对于DOM对象也是生效的, 且对于已经绑定过的DOM对象,其克隆仍然具备扩展的特性。

    下面给出完整测试代码:

    <html>
    <head>
    </head>
    <body>
    <input id="button" type="button" value="I am a button"/>
    <script type='text/javascript'>
    // 待扩展函数
    function base() {
        this.member =" dnnsun_Member";
        this.method =function() {
            window.alert(this.value);
        }
    }
    
    /************ Plain OBJECT *******************/
    var extObj = {
        value: 2
    }
    base.call(extObj);
    extObj.method();
    /************ Plain OBJECT *******************/
    
    
    /************ DOM OBJECT *******************/
    base.call(document.getElementById("button"));
    document.getElementById("button").method()
    
    var node = document.getElementById("button").cloneNode(true);
    document.getElementsByTagName("body")[0].appendChild(node);
    document.getElementById("button").value += "(clone)";
    document.getElementById("button").method();
    /************ DOM OBJECT *******************/
    </script>
    </body>
    </html>
     
  • 相关阅读:
    Python day 34 并发编程、PID/PPID、实现多进程得两种方式
    Python Day33:粘包问题及粘包解决方案
    数据分析
    数据分析
    爬虫 之 mongodb数据库
    爬虫
    爬虫
    爬虫
    flask框架
    flask框架
  • 原文地址:https://www.cnblogs.com/lightsong/p/3703120.html
Copyright © 2011-2022 走看看