详解JavaScript基础知识（JSON、Function对象、原型、引用类型）

下面我来详细讲解“详解JavaScript基础知识（JSON、Function对象、原型、引用类型）”的完整攻略。

JSON

什么是 JSON

JSON（JavaScript Object Notation）是一种轻量级的数据交换格式，常用于前后端数据传输。它基于 JavaScript 对象结构，但是具有更严格的格式要求，在很多编程语言中也得到了支持。

JSON 的语法

JSON 的语法非常简单，它由两种类型的对象组成：

• 键值对：由一个字符串作为键和对应的值组成，中间用冒号 : 分隔，多个键值对之间用逗号 , 分隔。键必须是字符串，值可以是任意类型。
• 数组：由多个值组成，用方括号 [ ] 包裹，每个值之间用逗号 , 分隔。

JSON 的最外层通常是一个对象或者数组。

JSON 的使用

在 JavaScript 中，我们可以使用 JSON.parse() 方法将 JSON 字符串转换为 JavaScript 对象；使用 JSON.stringify() 方法将 JavaScript 对象转换为 JSON 字符串。

下面将通过示例来演示如何使用 JSON：

// 将 JSON 字符串转换成 JavaScript 对象
const jsonString = '{"name": "Tom", "age": 18, "hobby": ["reading", "music"]}';
const person = JSON.parse(jsonString);
console.log(person); // {name: "Tom", age: 18, hobby: Array(2)}

// 将 JavaScript 对象转换成 JSON 字符串
const person2 = {name: "Jerry", age: 20, hobby: ["dance", "basketball"]};
const jsonString2 = JSON.stringify(person2);
console.log(jsonString2); // {"name":"Jerry","age":20,"hobby":["dance","basketball"]}

Function 对象

什么是 Function 对象

在 JavaScript 中，函数也是一个对象，可以像其他对象一样被创建、赋值、传递和使用。Function 对象是所有函数的基础，它是一个特殊的 JavaScript 对象，拥有一些额外的属性和方法。

Function 对象的创建

在 JavaScript 中，我们可以通过三种方式创建 Function 对象：

• 函数声明
• 函数表达式
• Function 构造函数

其中函数声明和函数表达式比较常用，Function 构造函数不太常用，这里就不赘述了。

Function 对象的方法

Function 对象除了拥有常规对象的属性和方法外，还有一些特殊的方法：

• call() 和 apply() 方法：可以在指定的 this 值和参数上调用一个函数。
• bind() 方法：创建一个新函数，该函数与原函数拥有相同的函数体，但是 this 值和指定的参数不同。

下面将通过示例来演示 Function 对象的使用：

// 函数声明
function add(num1, num2) {
  return num1 + num2;
}
console.log(add(1, 2)); // 3

// 函数表达式
const sub = function(num1, num2) {
  return num1 - num2;
}
console.log(sub(3, 2)); // 1

// call() 和 apply() 方法
const person = {
  name: "Tom",
  age: 18,
  sayHello: function() {
    console.log("Hello, my name is " + this.name + ", I am " + this.age + " years old.");
  }
};
const person2 = {
  name: "Jerry",
  age: 20,
};
person.sayHello.call(person2); // Hello, my name is Jerry, I am 20 years old.

// bind() 方法
const myAdd = add.bind(null, 2);
console.log(myAdd(3)); // 5

原型

什么是原型

在 JavaScript 中，每个对象都有一个原型（prototype）属性，原型是 JavaScript 实现对象继承的机制。当对象需要访问一个属性或者方法时，如果对象本身没有定义该属性或者方法，就会去原型中查找。

原型链

原型链是一种链式结构，它由若干个原型对象组成，每一个对象都有一个指向自己原型的引用 __proto__，最终指向一个空对象（Object.prototype）。

当访问对象的某个属性时，如果对象本身没有定义该属性，则会沿着原型链往上查找，直到找到该属性为止。

原型的使用

在 JavaScript 中，我们可以通过 Object.create() 方法来创建一个新对象，并将其原型设置为指定对象。这样新对象就可以继承指定对象的属性和方法，称为“继承”。

下面将通过示例来演示原型的使用：

// 定义一个构造函数
function Person(name, age) {
  this.name = name;
  this.age = age;
}
// 定义一个方法
Person.prototype.sayHello = function() {
  console.log("Hello, my name is " + this.name + ", I am " + this.age + " years old.");
}
// 创建一个新对象并继承 Person 原型
const person = Object.create(Person.prototype);
person.name = "Tom";
person.age = 18;
person.sayHello(); // Hello, my name is Tom, I am 18 years old.

引用类型

什么是引用类型

在 JavaScript 中，除了基本类型（Number、String、Boolean、Null、Undefined）外，还有一种复杂类型，称为引用类型。引用类型是指在内存中保存为对象实例的值，它们是由多个值构成的对象。

常见的引用类型有：

• Object
• Array
• Date
• RegExp
• Function

引用类型的特点

引用类型有以下几个特点：

• 引用类型的值是对象，在内存中是按引用存储的，因此永远不会将引用类型复制到新的变量中，只会将引用复制到新的变量中。
• 在使用引用类型时，可以随时添加、修改、删除其属性和方法。

引用类型的使用

引用类型的使用与其他变量的使用非常类似，只不过要注意变量的赋值方式。当使用一个对象变量的属性或方法时，需要通过 . 或者 [] 来访问。当对象的值被修改时，原对象也会被修改。下面将通过示例来演示引用类型的使用：

// 创建一个数组对象
const arr = [];
// 添加元素
arr.push("apple");
arr.push("banana");
console.log(arr); // ["apple", "banana"]
// 修改元素
arr[1] = "orange";
console.log(arr); // ["apple", "orange"]
// 删除元素
arr.splice(0, 1);
console.log(arr); // ["orange"]