美文网首页
javascript对象的遍历、内存分布和封装特性

javascript对象的遍历、内存分布和封装特性

作者: ssttIsme | 来源:发表于2019-12-18 22:17 被阅读0次

    javascript对象的遍历、内存分布和封装特性

    一、javascript对象遍历

    1.javascript属性访问

    对象.属性
    对象.[属性] //属性必须为字符串格式

        var bottle={};
        bottle.brand="统一鲜橙多";
        bottle.capacity="2L";
        bottle.store=function () {
            return "装橙汁";
        };
        document.write(bottle.brand);
        document.write(" ");
        document.write(bottle["brand"]);
    

    输出 统一鲜橙多 统一鲜橙多

    2.javascript属性遍历

        var bottle={};
        bottle.brand="统一鲜橙多";
        bottle.capacity="2L";
        bottle.store=function () {
            return "装橙汁";
        };
        for(var i in bottle){
           document.write(bottle[i]+" ");
        }
    

    输出 统一鲜橙多 2L function () { return "装橙汁"; }

    模拟数组

        function myArray() {
            var len=arguments.length;
            for (var i=0;i<len;i++){
                this[i]=arguments[i];
            }
        }
        var arr=new myArray(1,2,3,4);
        for(var i in arr){
            document.write(arr[i]+" ");
        }
    

    输出 1 2 3 4

    二、内存分布

    对象内存模型

    三、对象的特性-封装

    把对象所有的组成部分组合起来,尽可能地隐藏对象的部分细节,使其受到保护。只保留有限的接口和外部发送联系。

    3.1工厂函数

       function ComputerFactory(brand,color,size) {
            var computer={};
            computer.brand=brand;
            computer.color=color;
            computer.size=size;
            computer.movie=function () {
                return "看电影";
            };
            computer.blog=function(){
                return "写博客";
            };
            computer.game=function () {
                return "玩游戏"
            };
            return computer;
        }
        var cp1=new ComputerFactory("Dell","白色","25英寸");
        for (var i in cp1){
            document.write(cp1[i]+" ");
        }
        document.write("<br/>");
        var cp2=new ComputerFactory("Lenovo","黑色","20英寸");
        for (var i in cp2){
            document.write(cp2[i]+" ");
        }
    

    输出

    Dell 白色 25英寸 function () { return "看电影"; } function(){ return "写博客"; } function () { return "玩游戏" }
    Lenovo 黑色 20英寸 function () { return "看电影"; } function(){ return "写博客"; } function () { return "玩游戏" }
    

    3.2构造方法的形式

        function Computer(brand,color,size) {
            this.brand=brand;
            this.color=color;
            this.size=size;
            this.movie=function () {
                return "看电影";
            };
            this.blog=function(){
                return "写博客";
            };
            this.game=function () {
                return "玩游戏"
            };
        }
        var acer=new Computer("acer","红色","25英寸");
        for (var i in acer){
            document.write(acer[i]+" ");
        }
    

    输出

    acer 红色 25英寸 function () { return "看电影"; } function(){ return "写博客"; } function () { return "玩游戏" }
    

    3.3prototype方法
    函数也是一个对象,prototype是函数的一个属性,这个属性指向函数对象的原型。

        function Bottle(brand,capacity,liquidName){
            this.brand=brand;
            this.capacity=capacity;
            this.store=function () {
                return "装"+liquidName;
            }
        }
        Bottle.prototype.recycled=function () {
            return "被回收";
        };
        var tongyi=new Bottle("统一鲜橙多","2L","橙汁");
        document.write(tongyi.store());
        document.write("&nbsp");
        document.write(tongyi.recycled());
        delete tongyi.store;
        delete tongyi.recycled;
        document.write("<br/>");
        document.write(tongyi.recycled());
        document.write("&nbsp");
        document.write(tongyi.store());
    

    输出

    装橙汁 被回收
    被回收
    

    prototype方法形式不能共享对象

        function Woman(name,tall){
            this.name=name;
            this.tall=tall;
            this.giveBirth=function () {
                return "生育";
            };
    
        }
        Woman.prototype.walk=function () {
            return "走路";
        };
        Woman.prototype.nextGeneration={name:"后代名"};
        var zhangsan=new Woman("张三","175cm");
        zhangsan.nextGeneration.name="张小三";
        document.write(zhangsan.name+" ",zhangsan.tall+" "+zhangsan.giveBirth()+" "+zhangsan.nextGeneration.name+" "+zhangsan.walk());
        document.write("<br/>");
        var lisi=new Woman("李四","165cm");
        document.write(lisi.name+" ",lisi.tall+" "+lisi.giveBirth()+" "+lisi.nextGeneration.name+" "+lisi.walk());
    

    输出

    张三 175cm 生育 张小三 走路
    李四 165cm 生育 张小三 走路
    

    3.4混合方式

        function Woman(name,tall){
            this.name=name;
            this.tall=tall;
            this.giveBirth=function () {
                return "生育";
            };
            Woman.prototype.nextGeneration={name:"后代"};
        }
        Woman.prototype.walk=function () {
            return "走路";
        };
        var zhangsan=new Woman("张三","175cm");
        zhangsan.nextGeneration.name="张小三";
        document.write(zhangsan.name+" ",zhangsan.tall+" "+zhangsan.giveBirth()+" "+zhangsan.nextGeneration.name+" "+zhangsan.walk());
        document.write("<br/>");
        var lisi=new Woman("李四","165cm");
        document.write(lisi.name+" ",lisi.tall+" "+lisi.giveBirth()+" "+lisi.nextGeneration.name+" "+lisi.walk());
    

    输出

    张三 175cm 生育 张小三 走路
    李四 165cm 生育 后代 走路
    
        function Woman(name,tall,nextGenerationName){
            this.name=name;
            this.tall=tall;
            this.giveBirth=function () {
                return "生育";
            };
            Woman.prototype.nextGeneration={name:nextGenerationName};
        }
        Woman.prototype.walk=function () {
            return "走路";
        };
        var zhangsan=new Woman("张三","175cm","张小三");
        document.write(zhangsan.name+" ",zhangsan.tall+" "+zhangsan.giveBirth()+" "+zhangsan.nextGeneration.name+" "+zhangsan.walk());
        document.write("<br/>");
        var lisi=new Woman("李四","165cm","李小四");
        document.write(lisi.name+" ",lisi.tall+" "+lisi.giveBirth()+" "+lisi.nextGeneration.name+" "+lisi.walk());
    

    输出

    张三 175cm 生育 张小三 走路
    李四 165cm 生育 李小四 走路
    

    相关文章

      网友评论

          本文标题:javascript对象的遍历、内存分布和封装特性

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