JavaScript:对象

对象

对象是 JavaScript 中极其强大的特性,它允许将相关的数据段和功能封装到一个容器中,数组就是 JavaScript 中的特殊类型对象,数组具有 length 等属性以及 reverse、sort、push 和 pop 等方法,因此数组能高效处理结构化的组织数据。但对象并不只限于数组,在 JavaScript 中还可以找到一整套很有用的内置对象,甚至还可以创建自定义的对象。对象可以让我们更进一步,可以将与特定事物相关联的所有数据和功能组织并封装到对象中。

如果编写一段代码来控制一把雨伞,首先应该创建一个对象来表示雨伞,定义对象的一种方法是创建变量,并将这样一对空的大括号赋给变量。

然而空对象没有意义,对象具有属性并且能做一些事情,要添加这些信息可以为每个数据段定义键值对,如雨伞的颜色,是否开启等等,且继续希望 umbrella 对象能够执行将雨伞打开的任务,这不是描述雨伞特性的属性,对象能做的事情称为方法,方法是与对象关联的函数(比如数组中的 pop()push() 方法)

let umbrella = { 
  color: "pink", // 名为 color 的键名和名为 pink 的键值
  isOpen: false, // 是否开启
  open: function() { // 打开雨伞的方法
    if (umbrella.isOpen === true) {
      return "The umbrella is already opened!";
    } else {
      umbrella.isOpen = true;
      return "Julia opens the umbrella!";
    }
   }
};

// 有了方法该如何调用?
umbrella.isOpen; // 当前的开关状态是 false
umbrella.open(); // 使用方法,得到返回"Julia opens the umbrella!"
umbrella.isOpen; // 再次检查,发现开关是 true 了

提示:需要注意的是,虽然我们可以将现实中的对象表示为 JavaScript 对象,但是并非始终可以这么做。一开始这么理解,有助于你思考对象的结构和作用,但是作为开发者,随着经验的不断增长,就会发现 JavaScript 对象可能与实际的物体有很大的区别。

对象和数据类型

之前说过使用 typeof 可以查看一个东西是什么数据类型

console.log(typeof 'hi'); // string
console.log(typeof 10); // number
console.log(typeof undefind); // undefined
// ... 等等,但是数组是对象而不是 array
console.log(typeof []); // object

对象字面值

对象是 JavaScript 中的数据结构,它允许你存储任何类型的数据值,可以使用键来记录数据,在深入研究对象的定义语法之前,想一想表示一个人的对象可能需要什么信息,仅仅使用变量存储个人的姓名是不够的,还包括年龄、住址、喜好等等。对象不是在孤立的变量中定义所有个人数据,而是允许你组合这些信息,这就很强大了。

let firefox = {
    name: "Firefox Quantum",
    age: 15,
    friends: ["Google Chrome","Vivaldi"],
    url: "https://www.mozilla.org/zh-CN/firefox/"
}

对象字面值记法

这样的语法叫做对象字面值记法。在构建对象字面值时需要注意几个重要事项:

  • “键”(表示属性或方法名称)和它的“值”用冒号隔开了
  • 键值对用逗号隔开
  • 整个对象包含在花括号 { } 里。

括号记法和点记法

和在字典中查找单词的定义一样,通过键值对中的键可以查找关于对象的信息。

// 两种等价的方法来使用 key(键) 来返回它的 value(值)
firefox["friends"] // 返回 ["Google Chrome","Vivaldi"]
firefox.friends // 仍然返回 ["Google Chrome","Vivaldi"]

firefox["friends"] 叫做括号记法(因为使用了括号!),firefox.friends 叫做点记法(因为使用了点!)。

一般来说会更习惯点记法因为写起来更方便,括号记法主要用于一些不走常规的键名上

键名命名规范

let firefox = {
    "old-name": "Mozilla Firefox",
    "new name": "Firefox Quantum",
    "1stVersion": 2004
}
// 此时使用括号记法是正常的
firefox["new name"]; // "Firefox Quantum"

// 但若按直觉的的使用点记法就会得到报错
// firefox.old-name; // NaN
// firefox.new name; // SyntaxError: unexpected token: identifier

//不仅是空格,数字开头也是如此
//firefox.1stVersion; // SyntaxError: identifier starts immediately after numeric literal

创建对象时要遵守一些定义对象属性相关的命名约定,否则可能会暗中引发一些错误,在命名对象属性时要避免的做法和最佳的做法如下:

  • 不要使用空格和连字符作为键名,使用「驼峰式大小写」,否则不能使用点记法
  • 不要使用数字开头作为键名

不仅如此,上述例子中的键值都使用了引号包裹才避免了报错,否则还未等 JavaScript 引擎读取到调用对象就已经引发了错误。

对象的属性和方法

let firefox = {
    name: "Firefox Quantum",
    age: 15,
    friends: ["Google Chrome","Vivaldi"],
    siteHome: function(){ return "Welcome to https://www.mozilla.org/zh-CN/firefox/" }
}

firefox.name; // 调用对象的属性
firefox.siteHome(); // 调用对象的方法

对象中属性和方法的设置语法几乎一样,唯一的区别是方法的键值对中的值将为函数。

对象是 JavaScript 中最重要的数据结构之一。它们具有属性(关于对象的信息)和方法(对象具有的函数或功能)。对象是非常强大的数据类型,当使用 JavaScript 或任何其他面向对象编程语言时,将经常看到对象类型。

Conners Hua

这个家伙很懒,什么都没有留下。

您可能还喜欢...

发表评论

电子邮件地址不会被公开。 必填项已用*标注