首頁 > web前端 > js教程 > 詳解Javascript創建物件的五種常見方式

詳解Javascript創建物件的五種常見方式

php是最好的语言
發布: 2018-08-08 09:33:46
原創
1029 人瀏覽過

Javascript建立物件的五種常見方式:

一共有七種建立的方式,這裡對常見的五種方式進行舉例說明,其中有兩種方式使用頻繁,請務必掌握:

1.直接建立物件法

建立語法如下:

var 对象变量名 = new Object();
对象变量名. property1 = value1;
…;
对象变量名. propertyN = valueN;
对象变量名. methodName1 = function([参数列表]){
    //函数体}
…;
对象变量名. methodNameN = function([参数列表]){
    //函数体}
登入後複製

先建立一個對象,在對其中的屬性和函數功能進行定義和設定值

參考範例及呼叫見下:

var student =new Object();student.name="小李";student.age=21;student.dohomework=function(){
    console.log(this.name+"正在做作业");}
console.log(student.name);student.dohomework();
登入後複製

2.物件初始化器方式

建立語法如下:

var 对象变量名 = {
    property1 : value1,
    property2 : value2,
    …, 
    propertyN : valueN,
    methodName1 : function([parameter_list]){
        //函数体
    },
    …, 
    methodNameN : function([parameter_list]){
        //函数体
    }
}
登入後複製

直接在大括號內對該物件的屬性進行賦值與函數功能定義

參考範例及呼叫見下:

var teacher = {
    name:"Mr Li",
    age:21,
    teach:function(){
        console.log(this.name+"正在授课ing");
    }
}
teacher.teach();
登入後複製

註:不同屬性值直接用逗號分隔,最後一個值後面通常不加標點符號

3.建構函式方式

建立語法如下:

function 构造函数([参数列表]){ 
    this.属性 = 属性值; 
    …    this.属性N = 属性值N;    this.函数1 = method1; 
    …    this.函数N = methodN; 
}function method1([参数列表]){
    //函数体}
…function methodN([参数列表]){
     //函数体}
登入後複製

function  构造函数([参数列表]){ 
    this.属性 = 属性值; 
    …    this.属性N = 属性值N;    this.函数1 = function([参数列表]){
        //函数体
    } ;
    …    this.函数N = function([参数列表]){
        //函数体
    } ;
}
登入後複製

註:某些值可設定預設值,某些值可依需求在參數清單中給出,直接賦值
小結:
1.和上面兩種方式對比,採用建構函數方式創建對象能夠有效的節省代碼;
2、採用建構函數方式創建對象,則this不能省略,這是也普通函數的區別;
3 、採用建構函式方式建立對象,左邊的方式較可取,提高了程式碼的複用;

參考範例及呼叫見下:

function Student(name){
    this.name=name;    this.age=21;    this.play=function(){
        console.log(this.name+"正在玩");
    }
}var student=new Student("仔仔");
student.play();
登入後複製

4.prototype原型方式

建立語法如下:

function 对象构造器( ){} 
对象构造器.prototype.属性名=属性值;
对象构造器.prototype.函数名 = function([参数列表]){
    //函数体}
登入後複製

在宣告一個新的函數後,函數(在JavaScript中,函數也是物件)就會擁有一個prototype的屬性,透過這個屬性可以為物件新增新的屬性和方法。

參考範例及呼叫見下:

function Student(){}
Student.prototype.name="仔仔";
Student.prototype.age=21;
Student.prototype.dohomework=function(){
    console.log(this.name+"正在做作业");
}var student=new Student();
student.dohomework();
登入後複製

5.混合的建構子/原型方式

建立語法如下:

function 对象构造器([参数列表]){} 
对象构造器.prototype.函数名 = function([参数列表]){
    //函数体}
登入後複製

建構函式方式便於動態為屬性賦值,但是這種方式將方法也定義在了建構方法體中,使得程式碼比較雜亂;而原型方式不便於為屬性動態賦值,但是這種方式定義的屬性和方法實作了分離;所以取長補短-建構函式定義屬性,原型方式定義方法。

參考範例及呼叫見下:

function Student(name){
    this.name=name;    this.age=21;
}
Student.prototype.dohomework=function(){
    console.log(this.name+"正在做作业");
}var student=new Student("仔仔");
student.dohomework();
登入後複製

還有兩種方式,動態原型方式和工廠模式不常見,在此不作講解,謝謝收看我的作品!

相關推薦:

JavaScript建立物件的4種方式

圖解七種javascript創建物件的方式

#

以上是詳解Javascript創建物件的五種常見方式的詳細內容。更多資訊請關注PHP中文網其他相關文章!

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