[Back To Basic] Javascript - 物件存取(Object Accessors)

• 物件存取(Object Accessors)
• 別名 getter and setter
• ECMA 5 推出

Getter and Setter

var user = {

    name: 'Shawn',

    firstName: 'Tseng',

    age: 18,

    get fullName() {

        return this.name + ' ' + this.firstName;

    },

    set setFirstName(firstName) {

        this.firstName = firstName;

    }

}

var fullNameNode = document.createTextNode(user.fullName);

var demo1 = document.getElementById('demo1');

demo1.appendChild(fullNameNode);

user.setFirstName = 'Sanada';

var fullNameNode = document.createTextNode(user.firstName);

var demo2 = document.getElementById('demo2');

demo2.appendChild(fullNameNode);

Function vs Getter

get fullName() {

        return this.name + ' ' + this.firstName;

}

和

function fullName() {

        return this.name + ' ' + this.firstName;

}

有何不同?

使用的時候:

user.fullName; // 語法較輕便

user.fullName();

Object.defineProperty()

Object.defineProperty() 中也可使用 Accessors

source code

[Back To Basic] Javascript - Object Methods

在 function 中使用 this

method 是物件(object)的屬性(property)，這個屬性定義了一個 function
var user = {
    name: 'Shawn',
    getName: function () {
        return this.name;
    }
}

• 使用 function

user.getName()

• 取得 property

user.getName

可視為可執行的 function，也可視為 object 的 property

新增 function

user.attachPrefix = function (prefix) {

    return prefix + ' ' + this.name;

}

source code

[Back To Basic] Javascript - Object Property

• 屬性(Properties)是和物件(Objects)相關的值
• 屬性(Properties)可以被新增、修改、刪除
• 屬性(Properties)有一些是唯讀的

for...in

逐一針對物件的每個屬性進行邏輯處理

var user = { name: 'Shawn', age: 18 };

for (const key in user) {

    if (user.hasOwnProperty(key)) {

        const element = user[key];

    }

}

新增屬性(add property)

user.dept = 'mkpl';

刪除屬性(delete property)

• delete 會刪除屬性和屬性值
• delete 只適用於屬性
• 若屬性不存在，使用 delete 系統會壞掉

delete user.age;

屬性(Property)的屬性(Attribute)

Property 除了 Property value 以外，還有其他的 Attribute

• enumerable
• configurable
• writable

source code