美文网首页
面向对象(九)扩展内置对象

面向对象(九)扩展内置对象

作者: 凸小布 | 来源:发表于2017-02-25 19:37 被阅读18次

    title: 面向对象(九)扩展内置对象
    date: # 文章生成时间,一般不改
    categories: # 文章分类目录,可省略
    - 面向对象
    tags: # 文章标签,可省略
    - 面向对象
    - 基于原型面向对象的继承 # 个数不限,单个可直接跟在 tags 后面


    扩展内置对象
    需求:在数组上添加一个属性和方法
    实现:利用对象的动态特性添加成员(属性/方法)

    方式一 直接在原型上扩展内置对象

    <script>
        var arr = ["1", "2", "3"];
        console.log(arr);
    
        Array.prototype.des = "数组的描述信息";
        Array.prototype.logDes = function(){
            console.log("数组logDes");
        }
    
        for(var k in arr){
            console.log(k,arr[k]);
        }
        /*
         0 1
         1 2
         2 3
         des 数组的描述信息
         logDes function (){
            console.log("数组logDes");
         }
        */
    </script>
    

    注意:在扩展内置构造函数的时候不要使用上面的方法
    是因为原型对象上面的属性和方法会被所有的对象共享,可能会出现一莫名其妙的问题
    如果直接在原型对象上添加属性和方法,那么很可能会被覆盖

    方式二 安全的扩展内置对象

    核心过程
    01 提供一个构造函数(自定义)
    02 设置构造函数的原型对象为内置构造函数创建出来的对象

    <script>
        //Array
        function MyArray(){};
        //设置原型对象
        MyArray.prototype = new Array();
        MyArray.prototype.des = "描述信息";
        MyArray.prototype.logDes = function(){
            console.log(this.des);
        }
    
        //使用自己的构造函数来创建对象
        var myArr01 = new MyArray();
        var myArr02 = new MyArray();
        myArr01.push("123","abc");
        console.log(myArr01);
        console.log(myArr01.des);
    
    
        function OtherArray(){};
        OtherArray.prototype = new Array();
        OtherArray.prototype.des = "描述信息";
        OtherArray.prototype.logDes = function(){
            console.log("哈哈哈哈");
        }
    
        var otherArr01 = new OtherArray();
        var otherArr02 = new OtherArray();
    
        console.log(otherArr01.des);
        otherArr01.logDes();
    </script>
    

    相关文章

      网友评论

          本文标题:面向对象(九)扩展内置对象

          本文链接:https://www.haomeiwen.com/subject/pqknwttx.html