首頁 > web前端 > js教程 > javascript物件導向是什麼? js中物件的理解

javascript物件導向是什麼? js中物件的理解

不言
發布: 2020-09-04 15:01:41
原創
18422 人瀏覽過

本篇文章帶給大家的內容是關於javascript物件導向是什麼? js中物件的理解,有一定的參考價值,有需要的朋友可以參考一下,希望對你有幫助。

javascript物件導向是什麼? js中物件的理解

1、物件導向

物件導向的語言最基本的標誌就是類別的概念。什麼是類別?類別是包含多個屬性和方法的集合,類別的實例即物件。 
因為歷史原因,ECMAScript(後面簡稱JS)中物件的概念與基於類別的語言的物件有所不同。 ECMA-262 中把物件定義為「無序屬性的集合,其屬性可以包含基本值、物件或函數」。 
每個物件都是基於一個引用類型所建立的。

2、理解物件

2.1、JS中建立物件有兩種方式:

// 第一种:创建Object实例
var person = new Object();
person.name = 'tom';
person.age = 20;
person.sayIt = function(){console.log(this.name, this.age)}

// 第二种:对象字面量值
var person = {
   name: 'tom',
   age: 20,
   sayIt: function(){console.log(this.name, this.age)}
}
登入後複製

上面兩個範例所建立的物件是一樣的,都有相同的屬性和方法。

2.2、資料屬性和存取器屬性

JS物件的(即name、sayIt這種屬性和方法)分為兩種類型的屬性:數據屬性和存取器屬性。

2.2.1、資料屬性

資料屬性包含一個資料值的位置,在這個位置可以讀取和寫入值。包含以下4個特性:

Configurable:表示能否delete刪除屬性、該屬性描述符的類型能否被改變。預設值為false,建立實例不指定該值時會預設為true。
Enumerable:表示屬性是否可枚舉(for-in)。預設值為false,建立實例不指定該值時會預設為true。
Writable:表示屬性值是否可修改。預設值為false,建立實例不指定該值時會預設為true。
Value:表示屬性的值。預設值為undefined,建立實例不指定該值時會預設為undefined。

如建立實例:

var person = {
    name: 'tom'
}
登入後複製

person物件的屬性name的資料屬性Configurable、Enumerable、Writable均為true,即name屬性可刪除、可列舉、可改寫值,name屬性的當前值為'tom'。
想要修改屬性的資料屬性,可以透過ES5提供的Object.defineProperty()方法,這個方法也可以為物件新增一個屬性,該方法有三個參數:目標對象,要定義或修改的屬性的名稱,需要定義或修改的資料屬性
下面修改person實例的name屬性:

var person = {
    name: 'tom'
}
Object.defineProperty(person, 'name', {
    configurable: false,
    enumerable: false,
    writable: false,
    value: 1
})
console.log(person.name); // 1,name属性的值已修改为1

delete person.name; 
console.log(person.name); // 1, name属性依然存在

for(var i in person){
    console.log(i); // undefined,name属性不可枚举
}

person.name = 2; 
console.log(person.name); // 1,name的值依然为1,不可修改
登入後複製

注意:Object.defineProperty()方法在設定configurable為false後不能在修改除writable之外的特性。

2.2.2、存取器屬性

存取器屬性沒有資料值,只有兩個函數:

getter函數,取得有效值
setter函數,設定有效值

存取器屬性的常用使用方式就是透過設定一個屬性的值來改變其他屬性,存取器屬性同樣包含4個特性:

Configurable:表示能否delete刪除屬性、該屬性描述符的類型能否被改變。預設值為false,建立實例不指定該值時會預設為true。
Enumerable:表示屬性是否可枚舉(for-in)。預設值為false,建立實例不指定該值時會預設為true。
Get:在讀取屬性時呼叫的函數,預設值為undefine。
Set:寫入屬性時呼叫的函數,預設值為undefine。

var book = {
    _year: 2004,
     edition: 1
};
Object.defineProperty(book, "year", {
     get: function(){
         return this._year;
     },
     set: function(newValue){
         if (newValue > 2004) {
             this._year = newValue;
             this.edition += newValue - 2004;
         }
     }
});
book.year = 2005;
console.log(book.edition); //2
登入後複製

其中year即為存取器屬性,_year是資料屬性。 存取器屬性year的Configurable和Enumerable未設置,所以是false,即存取器屬性year不可刪除、不可枚舉。

可以透過Object.getOwnPropertyDescriptor()方法讀取屬性的特性:

var descriptor = Object.getOwnPropertyDescriptor(book, '_year'); 
console.log(descriptor.writable); // true
console.log(descriptor.configurable); // true
登入後複製

總結:

javasc的物件即為多個屬性與方法的集合的實例,其屬性分為資料屬性和存取器屬性兩種類型,可以透過Object提供的各種方法讀取、修改物件的屬性。

相關推薦:

JavaScript中的物件導向介紹_js物件導向

Javascript 物件導向之重載_ js物件導向

以上是javascript物件導向是什麼? js中物件的理解的詳細內容。更多資訊請關注PHP中文網其他相關文章!

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