zoukankan      html  css  js  c++  java
  • js 的几种面向对象的方式

    1.对象的字面量

    var obj = {};

    2.创建实例对象

    var obj = new Object();
    obj.name = 'leon';
    obj.age = '23';
    obj.show = function(){
        console.log(this.age);
    }

    3.通过构造函数构造对象

    function fn(name,age){
        this.name = name;
        this.age = age;
        this.show = function(){
            console.log(this.age);
        }
    }
    
    var men1 = new fn('leon','23');
    var men2 = new fn('karen','22');

    4.工厂模式

    用一个函数,通过传递函数返回对象。
    function createfn(name,age){
        var obj = new Object();
        obj.name = 'leon';
        obj.age = '23';
        obj.show = function(){
            console.log(this.age);
        }
        return obj;
    }
    
    createfn(leon,23);
    这样可以一次创建多个不同的对象,但是需要注意的是,每个创建的对象都有不同的age属性,name属性,但是show在每个创建的对象的时候也会穿件一个新的方法模板,这样就会有点浪费内存了,可以这样改造一下。
    function createfn(name,age){
        var obj = new Object();
        obj.name = 'leon';
        obj.age = '23';
        obj.show = showName;
        }
        return obj;
    }
    
    function showName(){
        console.log(this.name);
    }
    
    createfn(leon,23);

    5.原型模式

    function person() {};
    person.prototype.name = 'leon';
    person.prototype.age = '23';
    person.prototype.show = function(){
        console.log(this.age);
    } 
    
    var men = new person();
    console.log(men.name)//leon
    console.log(men.age)//23
    每个创建的person对象都会自动拥有age name 属性和show 方法而且 这种写法有一个好处就是解决了show重复创建的问题,但是两个新问题也随之而来,无法使用构造器传递参数,如person(23,"leon"),更要命的是如果属性是引用类型的所有创建的对象都会持有同一个引用 ,如何解决这个问题?
    

    6.混合模式 (原型模式+构造器)

    function person(name,age){
        this.age = age;
        this.name = name;
        this.array = new Array();
    }
    person.prototype.show =function(){
        console.log(this.age);
    }

    7.动态原型方法

    function person(age,name){  
           this.age=age;  
           this.name=name;  
           if(typeof person._initialized=='undefined'){  
                 person.prototype.showName=function(){  
                         console.log(this.age);  
                 }  
                 person._initialized=true;  
            }  
    }  
  • 相关阅读:
    百度首页暗藏的2019招聘广告彩蛋,非技术人员很难发现,看来是定向发送啊
    ipv6地址在URL中的表达方式,如何在URL地址中包含ipv6地址
    只用ipv6 两台机器共享文件夹, 局域网连接路径,共享文件夹路径中ipv6地址如何表示
    iconfont图标symbol引用方式,有的图标不能通过设置color样式来修改颜色的解决办法
    shell脚本面试题
    常用的Shell脚本
    JAVA面试题
    Linux系统基础优化
    Linux磁盘设备基础
    Linux系统的目录结构及常见目录总结
  • 原文地址:https://www.cnblogs.com/leon94/p/6028543.html
Copyright © 2011-2022 走看看