javascript定義對象的方式

javascript 定義對象的方式,有6 種:
1.1在已有對象上添加屬性
 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
"http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>New Web Project</title>
    </head>
    <script type="text/javascript">
        //同過已有對象,擴充屬性 
        var object =new Object(); 
        object.name="zhangsan"; 
        object.sayName=function(name){ 
            this.name=name; 
            alert(this.name); 
        } 
        object.sayName("lisi"); 
     
    </script>
</html>
1.2 工廠方式創建對象
 
<script type="text/javascript">
        //工廠方式 創建對象 
        function createObject(){ 
            var object = new Object(); 
            object.username = "hw"; 
            object.password = "810068"; 
            object.get = function(){ 
                alert(this.username + " , " + this.password); 
            } 
            return object; 
        } 
         
        var object1 = createObject(); 
        var object2 = createObject(); 
        object1.get(); 
    </script>
 
<script type="text/javascript">
        //工廠方式 創建對象 
        function createObject(name){ 
            var object = new Object(); 
            object.username = name; 
            object.password = "81"; 
            object.get = function(){ 
                alert(this.username + " , " + this.password); 
            } 
            return object; 
        } 
         
        var object1 = createObject("黃威"); 
        var object2 = createObject("付攀"); 
        object1.get(); 
         
    </script>
如何讓一個函數對象被多個對象所共享,而不是每一個對象擁有一個函數對象?
方法:把函數放在外面。請看下面的代碼:
 
<script type="text/javascript">
        //使用工廠方法,創建對象 
        /* 讓一個函數對象被多個對象所共享,而不是每一個對象擁有一個函數對象 :把方法放在外面*/ 
        function get(){ 
            alert(this.username + " , " + this.password); 
        } 
         
        function createObject(name, password){ 
            var object = new Object(); 
            object.username = name; 
            object.password = password; 
            object.get = get; 
            return object; 
        } 
         
        var object1 = createObject("黃威", "456"); 
        var object2 = createObject("付攀", "123"); 
        object1.get(); 
    </script>

 
1.3 構造函數方式(使用構造方法)
 
<script type="text/javascript">
        function Person(){ 
            //在執行第一行代碼前,js引擎會為我們生成一個對象 
            this.username="hw"; 
            this.password="root"; 
            this.getInfo=function(){ 
                alert(this.username + " , " + this.password); 
            } 
            //此處有一個隱藏的return 語句,用於將之前生成的對象返回。 
        } 
        var person=new Person(); 
        person.getInfo(); 
     
    </script>
 
<script type="text/javascript">
        function Person(name, password){ 
            //在執行第一行代碼前,js引擎會為我們生成一個對象 
            this.username = name; 
            this.password = password; 
            this.getInfo = function(){ 
                alert(this.username + " , " + this.password); 
            } 
            //此處有一個隱藏的return 語句,用於將之前生成的對象返回。 
        } 
         
        var person = new Person("wei","444"); 
        person.getInfo(); 
    </script>
 
1.4 原型(prototype)方式
 
<script type="text/javascript">
        function Person(){ 
         
        } 
         
        Person.prototype.username = "zhangsan"; 
        Person.prototype.password = "123"; 
        Person.prototype.getInfo = function(){ 
            alert(this.username + " , " + this.password); 
        } 
        var person1 = new Person(); 
        var person2 = new Person(); 
        person1.username = "黃"; 
        person1.getInfo(); 
        person2.getInfo(); 
         
    </script>
單純使用原型方式定義的對象無法在構造函數中為屬性賦初值,隻能在對象生成之後再去改變屬性值。
此方式的缺陷:多個對象之間共享屬性。
1.5 原型+構造函數方式
 
<script type="text/javascript">
            function Person(){ 
                this.username=new Array(); 
                this.password="123"; 
            } 
            Person.prototype.getInfo=function(){ 
                alert(this.username+" , "+this.password); 
            } 
            var p=new Person(); 
            var p2=new Person(); 
            p.username.push("黃威"); 
            p2.username.push("素潔"); 
            p.getInfo(); 
            p2.getInfo(); 
        </script>
1.6 動態原型方式
<script type="text/javascript">
         //C:\Documents and Settings\Administrator\My Documents\Aptana Studio Workspace\js00001\javascript002.html
/* 通過動態原型的方式*/
            function Person(){
                this.username = new Array();
                this.password = "123";
                if (typeof Person.flag == "undefined") {
                    alert("invoked");
                    Person.prototype.getInfo = function(){
                        alert(this.username + " , " + this.password);
                    }
Person.flag=true;
                }
            }
           
            var p = new Person();
            var p2 = new Person();
            p.username.push("黃威");
            p2.username.push("素潔");
            p.getInfo();
            p2.getInfo();
        </script>
 
以上就是js定義對象的6種方式。

作者“whuang”

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *