Javascript基礎語法學習介紹2_Object

物件(Object)

1.物件屬性成員值之修改/值的獲取
2.物件之宣告 / 值之陳列打印
3.添加Array和Function到Object物件中
4.this關鍵字的意義及用途



物件屬性成員值之修改/值的獲取
用對應關鍵字去mapping

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16

//---------------物件---------------- var EmployeeObj = { name: 'Sam', lastName: 'Eric', age:28, job:'Engineer' } //物件中特定屬性之值修改 //寫法1. 物件名['屬性欄位'] EmployeeObj['name'] = 'Jimmy'; console.log(EmployeeObj['name']); //寫法2.物件名.屬性欄位 EmployeeObj.age = 30; console.log(EmployeeObj['age']);

PS: 物件是使用大括號來包覆，直到最後一個屬性欄位之前都需要用 ',' 隔開


物件之宣告 / 值之陳列打印

1 2 3 4 5 6 7

//動態宣告物件 var jackey = new Object(); jackey.name = 'Jackey'; jackey.lastName = 'Williams'; jackey.age = 22; console.log(jackey);

添加Array和Function到Object物件中

1 2 3 4 5 6 7 8 9 10 11 12 13 14

//---------------物件---------------- var EmployeeObj = { name: 'Sam', lastName: 'Eric', age:28, job:'Engineer', family: ['Ken','Tom','Mary'], calculate: function yearOfBirth(myAge){ return 2018-myAge; } } console.log(EmployeeObj); console.log(EmployeeObj.family[1]); console.log(EmployeeObj.calculate(23));

所以你會發現其實不管物件中指定的屬性欄位
元素格式或內容為何
基本結構很規律都是長這樣
很單純

this關鍵字的意義及用途

this.  ----> 主要可以讓我們取得當前物件
若我們想要在EmployeeObj物件中
去新增一個額外的屬性yearOfBirth要用來存放物件中calculate方法(出生西元年之轉換)
計算結果的話
方法1.一般原始作法
Step1.於外頭定義yearOfBirth使其值為物件EmployeeObj中的calculate方法返回結果
Step2.新屬性添加並命名為yearOfBirth 之後做值的指派

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22

var EmployeeObj = { name: 'Sam', lastName: 'Eric', age:28, job:'Engineer', family: ['Ken','Tom','Mary'], calculate: function yearOfBirth(){ return 2018-this.age; } } //於 Object添加一個新的元素屬性名為yearOfBirth //方法1.原始寫法 //Step1.於外頭定義yearOfBirth使其值為 //物件EmployeeObj中的calculate方法返回結果 var yearOfBirth = EmployeeObj.calculate(); //Step2.新屬性添加並命名為yearOfBirth //之後做值的指派 EmployeeObj.yearOfBirth = yearOfBirth; console.log(EmployeeObj);

我們會修改 calculate方法中的myAge(區域變數)且改為無參數傳入型態
將其用this.去調出屬性欄位 age


方法2.直接於物件內先透過this去新增屬性並存好計算結果

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19

//於 Object添加一個新的元素屬性名為yearOfBirth //方法2.於物件內先透過this去新增屬性並存好計算結果 var EmployeeObj = { name: 'Sam', lastName: 'Eric', age:28, job:'Engineer', family: ['Ken','Tom','Mary'], calculate: function yearOfBirth(){ //Step1.直接於物件中用this.去添加並命名新屬性 //同時做值的指派 this.yearOfBirth = 2018 - this.age; //return 2018-this.age; } } //Step2.物件方法運行 EmployeeObj.calculate(); console.log(EmployeeObj);