javascript面向对象的各种写法

<!DOCTYPE HTML>
<html lang="zh-CN">
<head>
<meta charset="UTF-8"/>
</head>
<body>
<h1>javascript面向对象的各种写法</h1>
<div>三中方法都经过测试支持ie8-ie11以及chrome，safari，个人推荐方法一和方法三作为模块化（类），方法二作为初级对象</div>
<br>
<br>
<a href="##" onclick="person.show();person2.show();person3.show();">点这里Show显示</a>
<br><br>
<a href="##" onclick="person.power.set(666666);person.show();person3.power.set(66666);person3.show();">点这里增强战斗力</a>
<br>
<br>
<div id='info1'>1</div>
<div id='info2'>2</div>
<div id='info3'>3</div>

<script>


//---------方法一----可以有私有成员，内部可以自定义变量盒方法，使用需要new，更接近于类---------
function Person(){
    this.name = "诸葛孔明";
    
    this.skill = "空城计";
    this.honor = "军事";
    
    //可以这样定义，也可以在外面使用prototype
    this.show = function(){
        var info = "方法一： "+this.name+","+this.honor+","+this.skill+","+this.age+","+getColor()+",战斗力:"+this.power.get();
        document.getElementById('info1').innerText = info;
    };
    
    this.age = 36;

    // 私有方法
    function getColor(){
        return '白色';
    }

    var power=999;

    this.power = {
        get:function(){
            return power;
        },
        set:function(value){
            power = value;
        }
        
    };
    
}

/*
Person.prototype.show = function(){
        var info = "找到 "+this.name+","+this.honor+","+this.skill+","+this.age+",";
        //var info = 'succ';
        document.getElementById('info').innerText = info;
    }
    */
    

var person = new Person();
//alert(person.honor);

//========================


//---------方法2- 无法实现私有成员，不能在内部定义var变量，自由度也不够------------
var person2 = {

    power:66,
    school:'HeroSchool',
    name : 'Tom',
    honor : 'SuperMan',

    show : function(){
        var info = "方法二："+this.name + " is "+ this.honor + ','+this.school+','+this.age+this.getColor(",big ")+",Power:"+this.power.get();
        document.getElementById('info2').innerText = info;
        //alert(info);
    },
    age:29,
    getColor:function(big){
        return big+'Blue';
    },
    power : {//因为在内层，都不能访问外部的power，不方便
        get:function(){
            return 123;
        }      
    }

};


//---------方法3 可以有私有成员，可以定义各种变量，自由度也很高-------------
var person3 = (function(){
    var my = {};
    var power = 100;
      
    my.school='UsSchool';
    my.name = '小明';
    my.honor = '美国队长';

    my.show = function(){
        var info = "方法三:"+my.name + " is "+ my.honor + ','+my.school+','+my.age+getColor(",big ")+" ,Power:"+my.power.get();
        document.getElementById('info3').innerText = info;
        //alert(info);
    };
    my.age=26;
    my.power = {
        get:function(){
            return power;
        },
        set:function(value){
            power = value;
        }
        
    };

    //私有方法
    function getColor(big){
        return big+'Blue';
    }
    return my;
}());

//person.show();

</script>
</body>
</html>
javascript面向对象的各种写法

推荐阅读更多精彩内容
