首頁 > web前端 > 前端問答 > JavaScript無法建立物件嗎

JavaScript無法建立物件嗎

WBOY
發布: 2022-04-11 10:27:23
原創
2429 人瀏覽過

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

JavaScript無法建立物件嗎

本教學操作環境: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影片教學web前端

以上是JavaScript無法建立物件嗎的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板