JavaScript無法建立物件嗎

2022-04-11 13:01:09

JavaScript可以建立物件。建立方法:1、用Object直接建立物件,語法「new Object()」;2、用new關鍵字建立物件,語法「new 物件名()」;3、用JSON建立物件,語法「object={屬性名:屬性值,...}」。

本教學操作環境:windows10系統、javascript1.8.5版、Dell G3電腦。

JavaScript無法建立物件嗎

一個JavaScript物件是一個可以儲存許多不同值的變數。它充當一組相關數值的容器。例如,網站的使用者、銀行賬戶中的賬單都可以是JavaScript物件。

在JavaScript中,物件包含了兩種值:屬性和方法。

當你建立一個JavaScript物件時,需要定義它的名字,屬性和方法。

建立一個JavaScript物件的方法:

1、利用Object直接建立物件

var myObj=new Object();//使用Object類建立一個空的物件
 
myObj.name="wangshihcheng";
 
myObj.age=20;
 
myObj.infor=function(){
 
document.write("名字:"+this.name);//this.的指向問題
 
document.write("年齡:"+this.age);
 
}
 
myObj.infor();//呼叫建立的物件裡面的方法;

2、利用new關鍵字呼叫構造器建立物件

程式碼如下:

<script>
    var obj = new Object();
    obj.name = "Kitty";//為物件增加屬性
    obj.age = 21;
    obj.showName = function () {//為物件新增方法
        console.log(this.name);
    };
    obj.showAge = function(){
        console.log(this.age);
    };
    obj.showName();
    obj.showAge();
</script>

這種方法通過new關鍵字生成一個物件,然後根據JavaScript是動態語言的特性來新增屬性和方法,構造一個物件。其中的this表示呼叫該方法的物件。

這種方法的問題在於:如果我們需要多次建立物件,那麼就需要重複程式碼多次,不利於程式碼的複用。

3、利用原型模式建立物件

在JavaScript中,每個函數都有一個prototype屬性,它是一個指標,指向一個物件,叫做

原型物件,原型物件包含了可以由特定型別的所有範例物件共用的屬性和方法;

另外,這個物件有一個自帶的屬性constructor,指向建立物件的構造方法;

當我們使用原型模式時可以使所有的範例共用原型物件的屬性和方法,

從而我們不必要早建構函式中定義物件的範例的資訊;

function Student(){
        
 
}
Student.prototype.name="wang";
Student.prototype.sex="man";
Student.prototype.class="5";
Student.prototype.sayName=function(){
    console.log(this.name);
}
 
var s1=new Student();
s1.sayName();//wang
 
var s2=new Student();
s2.sayName();//wang
 
s2.name="shicheng";
s2.sayName();//shicheng

當我們讀取某個物件的屬性時,都會執行一次搜尋,搜尋首先從物件範例本身開始,

如果在範例中找到了這個屬性,則搜尋結束,返回屬性的值;

若範例上沒有找到,則繼續向物件的原型物件上面延申,搜尋物件的原型物件,若在原型上面

找到這個屬性,則返回原型上面屬性對應的值,若沒有找到,則返回undefine;

因此,可以看出,範例物件屬性會覆蓋原型物件上面的屬性;

4、利用JSON建立物件

//object={屬性名1:屬性值1,屬性名2:屬性值2,.....}

//注意JOSN格式中屬性名要加雙引號;

var p={
 
"name":"wangsch",
 
"gender":"man",
 
"age":40,
 
"son":[
 
    {
 
        "name":"son1",
 
        "age":2
 
    },
 
    {
 
    "name":"son2",
 
    "age":5
 
    }
 
],
 
"infor":function(){
 
document.write("父親的姓名:"+this.name+",父親的年齡:"+this.age+"<br>");
 
for( var child in this.son ){
 
document.write("兒子的姓名:"+this.son[child].name+",兒子的年齡:"+this.son[child].age+"<br>");
 
                }
 
        }
 
}
 
p.infor();//呼叫物件p中的infor方法

5、組合利用建構函式和原型模式建立物件

建構函式用於定義範例的屬性,原型模式則用於定義方法和共用的屬性;

function Student(name,sex,grade){
    this.name=name;
    this.sex=sex;
    this.grade=grade;
}
 
Student.prototype.sayName=function(){
    console.log(this.name);
}
 
Student.prototype.school="nongda";

這種混合模式可以支援想建構函式傳入引數,還極大的節約了記憶體。

6、利用動態原型方法建立物件。

程式碼如下:

<script>
    function Person(name,age){
        this.name = name;
        this.age = age;
        this.array = new Array("Kitty","luo");
        //如果Person物件中_initialized 為undefined,表明還沒有為Person的原型新增方法
        if(typeof Person._initialized  == "undefined"){
            Person.prototype.showName = function () {
                console.log(this.name);
            };
            Person.prototype.showArray = function () {
                console.log(this.array);
            };
            Person._initialized = true;
        }
    }
  
    var obj1 = new Person("Kitty",21);
    var obj2 = new Person("luo",22);
    obj1.array.push("Wendy");//向obj1的array屬性新增一個元素
  
    obj1.showArray();//Kitty,luo,Wendy
    obj1.showName();//Kitty
    obj2.showArray();//Kitty,luo
    obj2.showName();//luo
</script>

這種方法和建構函式/原型方式大同小異。只是將方法的新增放到了建構函式之中,同時在建構函式Person上新增了一個屬性用來保證if語句只能成功執行一次,在實際應用中,採用最廣泛的建構函式/原型方法。動態原型方法也很流行,它在功能上和建構函式/原型方法是等價的。不要單獨使用建構函式和原型方法。

【相關推薦:、】

以上就是JavaScript無法建立物件嗎的詳細內容,更多請關注TW511.COM其它相關文章!