JavaScript 引擎的内部世界 – 了解对象

什么是JavaScript中的对象？

在JavaScript的世界中，对象就像是一个神奇的盒子，可以存储各种数据。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ymba/64702.html

想象一下，如果你有一个装满玩具的盒子，每个玩具都有自己的名字和特点，这就是JavaScript中的对象。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ymba/64702.html

对象由属性和方法组成，属性是它的特点，方法则是它能做什么。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ymba/64702.html

对象的构成

和其他主流语言不一样的是，JavaScript是一门基于对象(Object-Based) 的语言，可以说JavaScript中大部分的内容都是由对象构成的，诸如函数、数组，也可以说JavaScript是建立在对象之上的语言 虽然 JavaScript 是基于对象设计的,但它却不是一门完全的面向对象语言。这主要体现在以下两个方面:文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ymba/64702.html

首先,面向对象语言天生支持封装、继承、多态等特性,但 JavaScript 并没有直接提供多态的支持。要在 JavaScript 中使用多态并不是一件容易的事,开发者需要采取一些技巧性的方法。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ymba/64702.html

其次,面向对象语言通常会提供大量的关键字,如 public、protected、friend、interface 等,使得继承机制变得异常繁琐和复杂。而 JavaScript 中实现继承的方式却非常简单清爽 - 基于原型链。开发者只需要在对象中添加一个称为原型的属性,把继承的对象通过原型链关联起来,就可以实现继承了。这种基于原型链的继承方式更加简洁优雅。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ymba/64702.html

总的来说,虽然 JavaScript 是基于对象设计的,但它并不完全属于面向对象范畴,它有自己独特的对象模型和继承机制,这给 JavaScript 编程带来了一些独特的优势。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ymba/64702.html

其实JavaScript中的对象非常简单，每个对象就是由一组组属性和值构成的集合，文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ymba/64702.html

创建对象

假设我们要创建一个代表"人"的对象,它包含姓名、年龄和职业三个属性:文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ymba/64702.html

// 创建一个"人"对象
let person = {
  name: "John Doe",
  age: 30,
  occupation: "Software Engineer"
};

在这个例子中,我们创建了一个名为 person 的对象,它包含三个属性:name、age 和 occupation。每个属性都有一个名字(key)和一个值(value)，为了直观理解，你可以参看下图: 上图展示了对象person的结构，我们可以看到蓝色的属性在左边，绿色的值在右边，有多组属性和值组成，这就是JavaScript中的对象，虽然JavaScript对象用途非常广泛，使用的方式也非常之多，但是万变不离其宗，其核心本质都就是由一组组属性和值组成的集合，抓住了这一点，当我们再分析对象时，就会轻松很多。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ymba/64702.html

访问对象属性

我们可以通过点符号或方括号的方式来访问对象的属性:文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ymba/64702.html

console.log(person.name); // 输出: "John Doe"
console.log(person["age"]); // 输出: 30

添加方法

对象不仅可以包含属性,还可以包含方法(函数)。比如我们可以给 person 对象添加一个 greet() 方法:文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ymba/64702.html

person.greet = function() {
  console.log("Hello, my name is " + this.name);
};

person.greet(); // 输出: "Hello, my name is John Doe"

添加新对象

对象除了可以包含属性，函数，我们还可以继续给person 对象添加一个新的 address 对象:文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ymba/64702.html

// 动态地添加 address 属性
person.address = {
  street: "奥运村xxx",
  city: "北京",
  country: "China"
};

为了直观的了解对象的类型你可以查看下图: 文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ymba/64702.html

对象的三种类型

观看上图，我们可以看出来，对象的属性值有三种类型:文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ymba/64702.html

第一种是原始类型(primitive) ，所谓的原始类的数据，是指值本身无法被改变，比如JavaScript中的字符串就是原始类型，如果你修改了JavaScript中字符串的值，那么V8会返回给你一个新的字符串，原始字符串并没有被改变，我们称这些类型的值为“原始值”。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ymba/64702.html

JavaScript中的原始值主要包括null、undefined、boolean、number、string、bigint、symbol 这七种。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ymba/64702.html

第二种就是我们现在介绍的对象类型(Object) ，对象的属性值也可以是另外一个对象，比如上图中的address 属性值就是一个对象。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ymba/64702.html

第三种是函数类型(Function) ，如果对象中的属性值是函数，那么我们把这个属性称为方法，所以我们又说对象具备属性和方法,那么上图中的greet 就是person对象的一个方法。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ymba/64702.html

函数是一等公民

分析完对象，现在我们就能更好地理解JavaScript中函数的概念了，简单来说，函数就是一段可以重复使用的代码块，它可以接收输入（参数），经过一系列操作后产生输出（返回值）。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ymba/64702.html

一等公民的定义

一等公民（First-Class Citizen）是指在一个编程语言中，具有与其他数据类型相同地位和功能的数据类型。在JavaScript中，函数可以作为变量赋值、作为参数传递、作为返回值返回，以及可以作为对象的属性等。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ymba/64702.html

函数作为变量

在JavaScript中，函数可以被赋值给变量，这意味着我们可以将函数存储在变量中，并通过变量来调用函数。例如：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ymba/64702.html

// 定义一个函数，用于计算两个数的和
const add = (a, b) => a + b;

// 调用函数并打印结果
console.log(add(1, 2)); // 输出: 3

在这个例子中，我们定义了一个函数，并将其赋值给了一个名为add的变量。然后，我们通过变量add来调用函数，实现了两个数字相加的功能。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ymba/64702.html

函数作为参数

在JavaScript中，函数也可以作为参数传递给其他函数。这种特性使得我们可以轻松地将函数作为参数传递给其他函数，并在需要时执行它们。例如：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ymba/64702.html

// 定义一个函数，它接受另一个函数作为参数
function applyOperation(num, operation) {
  return operation(num);
}

// 定义一个加法操作的函数
const addFive = (x) => x + 5;

// 使用 applyOperation 函数，传递数值和加法操作
const result = applyOperation(3, addFive);

// 打印结果
console.log(result); // 输出: 8

在这个例子中，我们定义了一个函数applyOperation，它接受一个数字和一个函数作为参数，并将这个数字传递给函数进行操作。我们创建了一个名为addFive的箭头函数，用于实现加五的操作。通过将addFive作为参数传递给applyOperation，并传入数字3，我们得到了结果8，这个结果随后被存储在变量result中，并打印到控制台。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ymba/64702.html

函数作为返回值

在JavaScript中，函数还可以作为其他函数的返回值。这种特性使得我们可以创建返回函数的函数，从而创建出更加灵活和可重用的代码。例如：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ymba/64702.html

// 定义一个函数，它返回另一个函数
function createFunction() {
  return function() {
    return "Hello, World!";
  };
}

// 获取由 createFunction 返回的函数
const returnedFunction = createFunction();

// 使用返回的函数
console.log(returnedFunction()); // 输出: "Hello, World!"

在这个例子中，我们定义了一个名为 createFunction 的函数，它返回一个匿名函数，这个匿名函数执行时会返回字符串 "Hello, World!"。我们调用 createFunction 并将其返回的函数赋值给变量 returnedFunction。然后，我们通过变量 returnedFunction 来调用这个函数，实现了打印 "Hello, World!" 的功能。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ymba/64702.html

通过上述示例，在JavaScript中，函数作为一等公民的核心地位。它们不仅能够被赋值给变量、作为参数传递，以及作为返回值，还能通过高阶函数等高级技术，增强代码的灵活性和可复用性。因此，深入理解并运用函数作为一等公民的特性，对于JavaScript编程至关重要。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ymba/64702.html

函数表达式和函数声明的差异

在上文中，我们聊到了什么是对象，对象的构成，及对象的类型，以及函数为什么是一等公民，接下去我们继续学习什么是函数表达式。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ymba/64702.html

这里有两份代码，你能区分它们谁是函数表达式和函数声明吗？

function add(a, b) {
  return a + b;
}

const add = function(a, b) {
  return a + b;
};

思考一下！！！文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ymba/64702.html

上面的是函数表达式 ，下面的则是函数声明文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ymba/64702.html

因为语义不同，所以我们给这两种定义函数的方式使用了不同的名称，第一种称之为函数声明，第二种称之为函数表达式。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ymba/64702.html

而函数声明是一种传统的函数定义方式，它使用function关键字并提供函数名。函数声明在代码执行前就会被解析，这意味着它们可以在定义之前被调用（提升）。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ymba/64702.html

函数表达式是将一个函数赋值给一个变量的过程。它通常用于创建匿名函数，即没有函数名的函数。函数表达式直到执行到它所在的代码行时才会被解析。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ymba/64702.html

区别演示

 // 尝试在函数声明之前调用它
console.log(greet("Cindy")); // 输出: Hello, Cindy!

function greet(name) {
  console.log(`Hello, ${name}!`);
}

// 尝试在函数表达式之前调用它
console.log(welcome("David")); // 输出: TypeError: welcome is not a function

const welcome = function(name) {
  console.log(`Welcome, ${name}!`);
};

在这个例子中，greet函数声明可以在定义之前被调用，因为它被提升到了作用域的顶部。而welcome函数表达式则不能在定义之前调用，因为这会导致一个TypeError，因为变量welcome在赋值之前是未定义的。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ymba/64702.html