首頁 >web前端 >js教程 >js中物件導向以及Object類型的簡單介紹（附程式碼）

js中物件導向以及Object類型的簡單介紹（附程式碼）

不言原創: 2018-08-15 13:42:481489瀏覽

這篇文章帶給大家的內容是關於js中物件導向以及Object類型的簡單介紹（附程式碼），有一定的參考價值，有需要的朋友可以參考一下，希望對你有幫助。

物件導向

「物件導向程式設計的全稱為Object Oriented Programming,簡稱OOP。物件導向程式設計是用抽象方式創造基於現實世界模型的程式設計方式。
物件導向程式設計可以看做是使用一系列物件相互協作的軟體設計。物件導向程式設計的三個主要特徵是：封裝、繼承、多型。

封裝

所謂封裝就是依照要求使用並得到對應的結果，而不需要知道真實的執行原理。
封裝主要用於闡述物件中包含的（封裝的）內容，通常有兩部分組成

相關的資料（用於儲存屬性）
基於這些資料所能做的事

繼承繼承通常是指類別與類別之間的關係。如果兩個類別有相同的屬性或方法，那麼可以讓一個類別繼承另一個類，就不需要再次定義相同的屬性或方法。
建立一個或多個類別的專門版本類別方式稱為繼承（JavaScript只支援單體繼承）。創建的專門版本的類別通常叫做子類，另外的類別通常叫做父類。

多態

不同的物件可以定義相同名稱的方法，方法作用於所在的物件中。這種不同物件透過相同方法的呼叫實現各自行為的能力，稱為多態。

建構子

建構子又被稱為建構器或物件模板，是物件的一個方法，在實例化時建構器被呼叫。在JavaScript中函數就可以當作構造器使用。

/*  创建构造函数->用于创建对象
*    function 构造函数名称()｛
*       this.属性名 = 属性值
*       this.方法名 = function()｛
*           方法体
*           ｝
*     ｝
      this关键字指代利用当前构造函数创建的对象*/
function Dog() {//这是构造函数，构造函数的属性和方法使用this关键字
    this.name=function () {
        console.log('哈士奇')
    }
}

/*   利用构造函数创建对象*/
var dog = new Dog();
console.log(dog);

Object類型

屬性描述子

JavaScript提供了一個內部資料結構，用於描述物件的值，控制其行為，例如該屬性是否可寫，是否可配置，是否可刪除，是否可枚舉等，這個內部資料結構稱為屬性描述符。
物件裡目前存在的屬性描述符主要有兩種形式：資料描述符和存取描述符。

資料描述子

資料描述子是一個具有值的屬性，該值可能是可寫的，也可能是不可寫的。資料描述符具有以下可選鍵值：

value：此屬性對應的值。可以是任何有效的JavaScript值。預設為undefined、
writable：當且僅當屬性的writable為true時，value才能被賦值運算子改變。預設為false。
configurable：當且僅當該屬性的configurable為true時，此屬性描述子才能改變，同時該屬性也能從對應的物件上刪除。預設為false。
enumerable：當且僅當該屬性的enumerable為true時，此屬性才能夠出現在物件的列舉屬性中，預設為false。

存取描述子

存取描述子是由getter-setter函數對描述的屬性。有以下可選鍵值

get：給予屬性getter的方法，如果沒有getter則為undefined。當存取該屬性時，方法會被執行，方法執行時沒有參數傳入，但會傳入this物件。
set：給屬性提供setter的方法，如果沒有setter則為undefined。當屬性修改時，觸發執行該方法。此方法接受唯一參數，即改屬性新的參數值。
configurable：當且僅當該屬性的configurable為true時，此屬性描述子才能改變，同時該屬性也能從對應的物件上刪除。預設為false。
enumerable：當且僅當該屬性的enumerable為true時，此屬性才能夠出現在物件的列舉屬性中，預設為false。

取得屬性描述子

Object.getOwnPropentyDescriptor()方法傳回指定物件上一個自有屬性對應的屬性描述符

var obj = {
    name : '哈士奇'
}
/*
    使用Object.getOwnPropertyDescriptor()方法获取指定属性的描述符
    Object.getOwnPropertyDescriptor(obj,prop)
    * obj - 表示指定属性对应的目标对象
    * prop - 表示获取描述符的目标属性名称
    * 返回值 - 其属性描述符对象
    * 如果
  */
var v =Object.getOwnPropertyDescriptor(obj,'name');
console.log(v)

#設定屬性描述符可選鍵值value

Object.deginepropety()方法為物件定義新屬性或修改現有屬性，並傳回該物件。

var obj ={//定义对象时定义的属性是可以修改、删除、枚举的
    name : '阿拉斯加'
}
/*
    Object.defineProperty(obj, prop, descriptor)方法
    * 作用
      * 用于定义目标对象的新属性
      * 用于修改目标对象的已存在属性
    * 参数
      * obj - 表示目标对象
      * prop - 表示目标对象的目标属性名称
      * descriptor - 表示属性描述符，必须是对象格式
        {
            value : 值
        }
    * 返回值 - 返回传递的对象
 */
//修改name属性
Object.defineProperty(obj, 'name',{
    value:'哈士奇'
} );
console.log(obj.name);//哈士奇

/*
    同样都是为对象新增属性
    1.如果直接使用 "对象名.属性名 = 值" -> 可修改、可删除以及可枚举的
    2.如果使用Object.defineProperty()方法新增属性
      * 该新属性是不可修改、不可删除以及不可枚举的
 */
//新增age属性//用该方法新增的属性默认是不可以修改、删除、枚举的
Object.defineProperty(obj,'age',{
    value : 2
});

Object.degineproperties()方法為物件定義一個或多個新屬性或修改現有屬性，並傳回該值。

設定屬性描述符可選鍵值weitable

var obj = {
    // 定义对象的同时定义了该属性以及值(可修改、可删除以及可枚举的)
    name : '张无忌'
}
// 修改现有属性
Object.defineProperty(obj, 'name', {
    value : '周芷若',
    writable : false // 不可修改
});
console.log(obj.name);// 周芷若
// 修改name属性值
obj.name = '赵敏';
console.log(obj.name);// 周芷若

Object.defineProperty(obj, 'age', {
   value : 18,
   writable : true
});
console.log(obj.age);// 18
// 修改age属性值
obj.age = 80;
console.log(obj.age);// 80

設定屬性描述符可選鍵值configuarble

var obj = {
    // 定义对象的同时定义了该属性以及值(可修改、可删除以及可枚举的)
    name : '张无忌'
}
// 修改现有属性
Object.defineProperty(obj, 'name', {
    value : '周芷若',
    writable : true, // 控制当前属性是否可被修改
    configurable : true // 控制当前属性是否可被删除
});
console.log(obj.name);// 周芷若
// 修改name属性值
obj.name = '赵敏';
console.log(obj.name);// 赵敏
// 删除name属性值
delete obj.name;undefined
console.log(obj.name);// undefined

設定屬性描述符enumerable

var obj = {
    // 定义对象的同时定义了该属性以及值(可修改、可删除以及可枚举的)
    name : '张无忌'
}
Object.defineProperty(obj, 'name', {
    value : '周芷若',
    enumerable : false
});
console.log(obj.name);// 周芷若
/*
    属性描述符enumerable - 控制当前属性是否可被枚举(遍历)
    * 仅能循环遍历对象中可被枚举的属性
      * for...in语句
      * keys()方法
    * 可以循环遍历对象中可被枚举和不可被枚举的属性
      * getOwnPropertyNames()方法
 */
for (var i in obj) {
    console.log(i);
}
var result1 = Object.keys(obj);
console.log(result1);
var result2 = Object.getOwnPropertyNames(obj);
console.log(result2);

設定屬性描述符存取器

物件中的屬性除了可以直接定義外，還可以用存取器進行定義。 setter為取值函數，使用屬性描述符中的set；getter為取值函數，使用屬性描述符中的get。

var value;
var obj = {
    // 存取描述符中的get
    get attr() {// 表示当前目标属性名称
        return value;
    },
    // 存取描述符中的set
    set attr(newValue) {// 表示当前目标属性名称
        console.log('setter: ' + newValue);
        value = newValue;
    }
}
console.log(obj.attr);// undefined
obj.attr = 100;// "setter: 100"

防篡改物件

定義的物件預設在任何時候任何位置都可以隨意修改，所以添加了防止篡改的機制分為三個層級

#禁止擴充：禁止為物件擴充新的屬性和方法
密封物件：只允許讀寫屬性的值
凍結物件：禁止任何動作

禁止擴充

Object.preventExtensions()設定指定物件不可擴充
Object.isExtensible()判斷一個物件是否可以擴充

#密封對象

Objet.seal()方法用於密封對象，防止添加新屬性並將現有屬性標記為不可配置，當前屬性的值可寫。
Object.Sealead()判斷物件是否被封印

#凍結物件

##Object. freeze()用於凍結一個對象，無法對這個對像做任何操作，只可讀
#Object.isFrozen()判斷對像是否被凍結

js中物件導向以及Object類型的簡單介紹（附程式碼）

相關文章