SAP Fiori开发中的JavaScript基础知识5 - 对象（Object）

1 背景

在本篇博客中，我将介绍JavaScript中对象（Object）的概念和用法。

2 对象

首先我们要明明确一点，在JavaScript中对象（Object）和类（Class）是不同的，它们是两个不同的概念。

对象 (Object) 是JavaScript的数据类型之一，它是一种复合数据类型，它是键/值对的集合，它们可以是基本类型的值，也可以是其他对象或函数，这些键/值对被称为对象的属性（Property）。

JavaScript中并没有真正的类。

JavaScript是一种基于原型的编程语言，它并没有像Java或ABAP中那样传统的类（Class）。在JavaScript中，只是使用函数和原型链来实现类似类的行为。在JavaScript中，类是可以看做是一种特殊的函数，是创建对象的模板。

类（Class） 是ES6（ECMAScript 2015）引入的关键字，允许我们使用类似于传统面向对象语言的语法来创建对象。这看起来像是JavaScript引入了真正的类，但实际上，这只是基于原型的继承的语法糖。

在后续的博客中，我将进一步解释class关键字。

2.1 对象的创建

在JavaScript中，对象可以通过两种方式创建：声明式定义 和 构造式定义。

声明式定义：这是最常见的创建对象的方式。

let obj = {
  key1: 'value1',
  key2: 'value2',
  key3: function() {
    // ...
  },
  key4: ['content1', 'content2']
};

构造式定义：这种方式使用new关键字和Object()构造函数。

let obj = new Object();
obj.key1 = 'value1';
obj.key2 = 'value2';
obj.key3 = function() {
  // ...
};
obj.key4 = ['content1', 'content2'];

2.2 对象的使用

一旦创建了对象，我们就可以通过 . 或 [ ] 来访问、修改或添加对象的属性。

// 访问属性
console.log(obj.key1); // 输出：value1
console.log(obj['key2']); // 输出：value2

// 修改属性
obj.key1 = 'new value';
console.log(obj.key1); // 输出：new value

// 添加新属性
obj.key5 = 'value5';
console.log(obj.key5); // 输出：value5

可以使用.hasOwnPropery(“property”)来检查是否有某个属性。

console.log(obj.hasOwnProperty("key1")); // 输出：true

此外，我们还可以使用delete关键字来删除对象的属性。

delete obj.key1;
console.log(obj.key1); // 输出：undefined

我们可以使用Object.keys() 和 Object.getOwnPropertyNames() 来获取对象属性名的方法。

它们的区别在于Object.keys() 只返回可枚举的属性，而 Object.getOwnPropertyNames() 返回对象的所有自身属性，包括不可枚举的属性。

console.log(Object.keys(obj)); 
console.log( Object.getOwnPropertyNames(obj)); 

2.3 对象声明和使用的一些示例代码

下面给出了基于命名规范的一些代码示例：

//对象的声明
let oPerson = {
    sName: "Michael Jordan",
    iAge: 35,
    oBody: {
        iLegs: 2,
        iArms: 2,
        iHead: 1
    },
    fnGetAge: function () { return this.iAge },
    fnPrintData: function () { console.log("My name is " + this.sName + ". I'm " + this.iAge + ". I have " + this.oBody.iArms + " arms."); }

}

//对象的使用
console.log("----------------");
console.log(oPerson.sName);
console.log(oPerson["oBody"]);
console.log(oPerson.fnGetAge());
oPerson.fnPrintData();
console.log(oPerson);



//对象属性的处理
console.log("----------------");
for (prop in oPerson) {
    if (oPerson.hasOwnProperty(prop)) {
        console.log(prop + ": " + oPerson[prop]);

    }
}

console.log("----------------");
delete oPerson.sName;
console.log(oPerson.sName); // 输出：undefined


console.log("----------------");
console.log(oPerson.hasOwnProperty("sName")); // 输出false, 因为此属性已经被删除
console.log(oPerson.hasOwnProperty("iAge"));
console.log(oPerson.hasOwnProperty("oBody"));

console.log("----------------");
console.log(Object.keys(oPerson)); 
console.log(Object.getOwnPropertyNames(oPerson));

3. 小结

本文介绍了JavaScript中对象（Object）的概念和用法，并给出了相应的示例代码。在理解上，要注意区分对象与传统类的区别。希望本篇博客对您有帮助！