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

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中文網其他相關文章！