1. 程式人生 > >js中自定義物件

js中自定義物件

4.7 自定義物件

JS除了內建物件之外,還允許我們程式自己定義屬於我們自己的物件,在JS中自定義物件的方式有2種:通過構造器建立物件,通過JSON建立物件。

 

4.7.1 構造器建立物件(原生JS物件)

構造器,就是一個普通的函式,函式中可以定義0到N個引數,具體的程式碼如下:

/*物件構造器,就是一個普通函式*/
    function Student(stuName,age,password,gender){
       /*定義物件的屬性*/
        

this.stuName = stuName;
        this.age = age;
        this.password = password;
        this.gender = gender;

        /*定義物件的方法*/
        
this.study = function(){
            console.log(this.stuName + "寫的方法!")
        }
    }

 

4.7.1.1 建立物件

//使用該物件
// var stu = new Student("胡帥",18,'123456',1);
    

var stu = new Student();
    stu.stuName = "胡帥";
    stu.age = 18;
    stu.gender = 1;
    stu.password = "123456";

 

4.7.1.2 動態新增屬性和行為

//如果需要給胡帥這個物件,動態的新增屬性
    Student.prototype.address = null;
    stu.address = "九眼橋1號橋洞!";

    //如果需要給胡帥這個物件,動態的新增行為
    Student.prototype.playGame = function(game){
        console.log(this.stuName + "玩[" + game +"]遊戲!")
    }

4.7.1.3 使用物件

console.log(stu)
stu.study();//呼叫胡帥學習的行為
stu.playGame("老鷹捉小雞");

//呼叫某一個屬性
console.log(stu.stuName)

 

4.7.2 通過JSON建立物件

/*使用JSON格式建立一個新的物件*/
var stu = {
    /*定義物件的屬性*/
    stuName: "胡帥",
    age: 18,
    gender: 1,
    password: "123456",
    /*定義物件的行為*/
    study: function () {
        console.log(this.stuName + "正在格智學習JAVA!");
    }
};
//使用學生物件
console.log(stu.stuName);

//定義一個物件,物件屬性中可以包含其他物件,如下面的妻子,和他兒子
var person = {
    userName: "胡帥",
    wife: {userName: "趙鐵錘", age: 28},
    sons: [{userName: "狗蛋兒"}, {userName: "二狗蛋"}, {userName: "小狗蛋"}],
    kiss: function () {
        console.log(this.userName + "給他妻子" + this.wife.userName + "說:妹妹,來波爾一個!!!")
    },
    gun: function () {
        console.log(this.userName + "給他的兒子說:兒子,去玩泥巴!!!")
    }
};

/*Json物件的行為呼叫*/
person.gun();
person.kiss();

 

4.7.3 JSON簡單介紹

JSON在JS中,也是一種物件的描述方式,它的作用跟XML描述物件的一樣。只不過XML描述物件更加複雜,解析起來更加困難,所以我們一般推薦大家使用JSON來描述一個物件,它是一種輕量級的文字資料轉換格式。

 

它跟XML都是常見的資料描述手段,但是它們區別在於:

  1. 它不需要像XML那樣去定義一系列的標籤,也不需要提供對應的標籤解析程式
    2、它的內容更短更小,傳輸時花費的網路代價就非常的小,傳輸速度也就更加的快

3、它除了可以正常描述屬性和方法以外,還可以描述其他物件和陣列[JSONArray]

比如wife以及sons:

//定義一個物件,物件屬性中可以包含其他物件,如下面的妻子,和他兒子
var person = {
    userName: "胡帥",
    wife: {userName: "趙鐵錘", age: 28},
    sons: [{userName: "狗蛋兒"}, {userName: "二狗蛋"}, {userName: "小狗蛋"}],
    kiss: function () {
        console.log(this.userName + "給他妻子" + this.wife.userName + "說:妹妹,來波爾一個!!!")
    },
    gun: function () {
        console.log(this.userName + "給他的兒子說:兒子,去玩泥巴!!!")
    }
};

 

4.7.3.1 JSON的語法

  1. 所有的資料都是以KV鍵值對結構方式存在
    2、KV鍵值對需要使用冒號分割,每個成對的KV鍵值對需要使用逗號進行分割
    3、花括號來描述一個完整的JSON物件

4、花括號來描述一個完整的JSON物件
5、中括號來描述一個完成的JSONArray,陣列物件

 

4.7.3.2 JSON的使用

Json物件的使用,很簡單,語法如下.:
jisonObject.屬性名|方法名();

 

4.7.3.3 JSON文字轉換為JSON物件

JSON格式在很多地方,都需要使用到,比如:前後臺的資料互動,分散式系統的資料互動,其他系統的資料互動(京東永珍、百度地圖 ......)

 

但是一般他們返回的結果,都是JSON格式的字串,如何將JSON格式的字串轉換為JSON物件,在JS中,需要使用到eval(),該函式的最大作用,就是將字串程式碼識別成指令碼程式碼並進行執行

比如:

下面的程式碼為轉換程式碼:

//返回JSON格式的字串物件
 var text = '{stuName:"胡帥",age:18,gender:1,password:"123456"}';
 console.log(text);
 var obj = eval("(" + text +")");//將JSON格式的字串,轉換為JS物件
console.log(obj);//在控制檯輸出JS物件