ECMAScript和JavaScript的区别是什么？

2024-01-03 18:32:41

我这里是简单概括一下JavaScript核心知识点，仅供参考！！?如看详细请看：

🎉博客主页：阿猫的故乡

🎉系列专栏：JavaScript专题栏

🎉ajax专栏：ajax知识点

🎉欢迎关注：👍点赞🙌收藏??留言

目录

学习目标：

学习内容：

学习时间：

学习产出：

了解ECMAScript的版本和特性，如ES5、ES6等。

ECMAScript是JavaScript的标准化规范，它定义了JavaScript的语法和语义。

不同版本的ECMAScript有不同的特性和语法改进。例如，ES5引入了严格模式、数组新增方法（如forEach、map等）；ES6引入了箭头函数、类、模板字符串等新特性。

学习JavaScript的语法，包括变量、数据类型、运算符等。

JavaScript中使用关键字let或const来声明变量。

JavaScript的数据类型包括数字（如整数和浮点数）、字符串（字符序列）、布尔值（true或false）、数组（有序集合）和对象（键值对的集合）。

运算符用于执行算术和逻辑操作，例如加法、减法、乘法、除法、取余等。

熟悉JavaScript的控制流程，如条件语句、循环语句等。

条件语句允许根据条件执行不同的代码路径。常见的条件语句是if语句，也有if...else和switch语句。

循环语句用于重复执行一段代码。常见的循环语句有for和while循环。

学习JavaScript的函数和作用域，包括函数的定义、参数传递、闭包等。

函数是一段可重复使用的代码块，可以接受参数并返回一个值。

函数可以通过function关键字定义，可以有参数和返回值。

参数传递是指将值传递给函数的参数，并在函数内部使用。可以通过位置、关键字或默认值进行参数传递。

闭包是指函数能够访问其定义时所在的作用域中的变量。闭包可以用于创建私有变量和保持状态。

学习JavaScript的对象和原型，包括对象的创建、属性和方法的定义、原型链等。

对象是 JavaScript 中的核心概念，可以用来存储键值对的集合。

对象可以通过字面量、构造函数或Object.create()进行创建。

对象的属性可以通过点表示法或方括号表示法进行访问，也可以通过赋值来定义新属性。

方法是对象中的函数，可以通过对象的属性来引用和调用。

JavaScript中的对象是基于原型的，每个对象都有一个原型对象，可以通过原型链来访问属性和方法。

?

学习目标：

  1. 理解ECMAScript的基本概念和规范。
  2. 掌握JavaScript的语法和基本特性。
  3. 学习如何使用JavaScript进行前端开发，包括HTML操作、事件处理、DOM操作等。
  4. 学习如何使用JavaScript进行后端开发，包括服务器端开发、数据操作、数据库操作等。

学习内容：

  1. 了解ECMAScript的版本和特性，如ES5、ES6等。
  2. 学习JavaScript的语法，包括变量、数据类型、运算符等。
  3. 熟悉JavaScript的控制流程，如条件语句、循环语句等。
  4. 学习JavaScript的函数和作用域，包括函数的定义、参数传递、闭包等。
  5. 学习JavaScript的对象和原型，包括对象的创建、属性和方法的定义、原型链等。
  6. 掌握JavaScript的数组和字符串操作，包括数组的遍历、排序、字符串的处理等。
  7. 学习JavaScript的事件处理和DOM操作，包括事件监听、元素选择、样式修改等。

学习时间：

  • 周一至周五晚上 7 点—晚上9点
  • 周六上午 9 点-上午 11 点
  • 周日下午 3 点-下午 6 点

学习产出：

  1. 了解ECMAScript的版本和特性，如ES5、ES6等。

  • ECMAScript是JavaScript的标准化规范，它定义了JavaScript的语法和语义。

当我们学习最新的ECMAScript 6（ES6）语法时，以下是一些常见的代码示例，每个示例都带有注释以解释其工作原理。

// 使用let关键字声明变量
let name = "John";
console.log(name); // 输出: John

// 使用const关键字声明常量
const PI = 3.14;
console.log(PI); // 输出: 3.14

// 箭头函数
const add = (a, b) => a + b;
console.log(add(2, 3)); // 输出: 5

// 模板字符串
const greeting = (name) => `Hello, ${name}!`;
console.log(greeting("Alice")); // 输出: Hello, Alice!

// 解构赋值
const [x, y] = [1, 2];
console.log(x, y); // 输出: 1 2

// 默认参数
const greet = (name = "Guest") => `Hello, ${name}!`;
console.log(greet()); // 输出: Hello, Guest!
console.log(greet("Bob")); // 输出: Hello, Bob!

// 扩展操作符
const arr1 = [1, 2, 3];
const arr2 = [...arr1, 4, 5];
console.log(arr2); // 输出: [1, 2, 3, 4, 5]

// 类
class Person {
  constructor(name) {
    this.name = name;
  }

  sayHello() {
    console.log(`Hello, ${this.name}!`);
  }
}

const john = new Person("John");
john.sayHello(); // 输出: Hello, John!

// 模块导入和导出
// utils.js
export const add = (a, b) => a + b;

// main.js
import { add } from './utils.js';
console.log(add(2, 3)); // 输出: 5

这些是一些ES6语法的例子，但ES6引入了更多功能和语法改进，因此建议进一步研究和探索ES6的更多内容，以充分利用新特性和提升JavaScript编程体验。

  • 不同版本的ECMAScript有不同的特性和语法改进。例如，ES5引入了严格模式、数组新增方法（如forEach、map等）；ES6引入了箭头函数、类、模板字符串等新特性。

ECMAScript是JavaScript的标准化规范，每个版本都引入了新的特性和语法改进。以下是ES5和ES6中一些重要的特性和语法改进的详细解释：

ES5特性和语法改进：

  1. 严格模式（Strict Mode）：通过在脚本或函数开头添加'use strict';来启用严格模式。严格模式引入了更严格的语法和错误处理，有助于提高代码质量和安全性。

  2. 数组新增方法：ES5引入了一些方便的数组方法，如forEach()、map()、filter()、reduce()等。这些方法简化了对数组的迭代和操作，提高了开发效率。

  3. JSON对象支持：ES5增加了对JSON（JavaScript Object Notation）的原生支持，通过JSON.parse()和JSON.stringify()方法实现对象和JSON字符串之间的转换。

  4. Function.prototype.bind()：bind()方法允许我们指定函数的执行上下文（this指向）并创建一个新的绑定函数。这在事件处理和回调函数绑定上特别有用。

ES6特性和语法改进：

  1. 箭头函数：箭头函数提供了更简洁的函数定义方式，并且自动绑定了上下文。例如：(a, b) => a + b等同于function(a, b) { return a + b; }。

  2. 类（Class）：ES6引入了类的概念，通过class关键字可以方便地定义类，包括构造函数、方法等。这使得JavaScript更接近传统的面向对象编程。

  3. 模板字符串：模板字符串允许在字符串中使用变量和表达式，使用反引号（）包围字符串，并使用`${}`来嵌入变量或表达式。例如：Hello, ${name}!``。

  4. 解构赋值：解构赋值允许从数组或对象中提取值并将其赋给变量。例如：const [x, y] = [1, 2];将数组的第一个元素赋给x，第二个元素赋给y。

  5. 扩展操作符（Spread Operator）：...符号可以将数组或对象展开为元素列表。这在拷贝数组、合并数组和对象等操作中非常有用。

  6. 默认参数：ES6允许函数参数设定默认值，简化了函数调用时的参数传递。例如：function greet(name = 'Guest') { ... }。

以上只是ES5和ES6中一些常见的特性和语法改进，ES6还引入了更多功能如模块化导入导出、迭代器和生成器、Promise等。熟悉这些特性和语法改进有助于更好地理解和使用JavaScript的最新版本。

  1. 学习JavaScript的语法，包括变量、数据类型、运算符等。

  • JavaScript中使用关键字let或const来声明变量。

是的，在ES6（ECMAScript 2015）中，引入了let和const关键字来声明变量。与之前的var关键字相比，let和const具有更严格的作用域和赋值规则。

使用let关键字声明的变量具有块级作用域，只在声明的块内有效。块级作用域是指由花括号{}包围的代码块，如条件语句、循环语句、函数等。例如：

if (true) {
  let x = 10;
  console.log(x); // 输出 10
}

console.log(x); // 报错，x未定义

在上面的例子中，变量x由let关键字声明在if语句的块级作用域内，所以在作用域外部访问x会报错。

而使用const关键字声明的变量也具有块级作用域，但是它是一个常量，一旦赋值就不能再修改。例如：

const PI = 3.1415926;
PI = 3.14; // 报错，常量不能被重新赋值

if (true) {
  const x = 10;
  console.log(x); // 输出 10
}

console.log(x); // 报错，x未定义

在上面的例子中，变量PI使用const关键字声明为一个常量，所以尝试重新赋值会报错。而变量x在if语句的块级作用域内声明，作用域外部无法访问。

总结：使用let关键字声明的变量具有块级作用域，而使用const关键字声明的变量也具有块级作用域，并且是一个常量，不可重新赋值。这些关键字的引入提供了更严格的变量声明和赋值规则，有助于避免一些潜在的问题和错误。

  • JavaScript的数据类型包括数字（如整数和浮点数）、字符串（字符序列）、布尔值（true或false）、数组（有序集合）和对象（键值对的集合）。

除了以上提到的数据类型，JavaScript还有一些其他的数据类型，如undefined（表示一个未定义的值）、null（表示一个空值）、Symbol（表示唯一的标识符）和函数（特殊的对象，可以被调用）。此外，JavaScript还支持复杂的数据结构，如Map（键值对的有序列表）、Set（不重复的值的集合）和Date（表示日期和时间的对象）。

  • 运算符用于执行算术和逻辑操作，例如加法、减法、乘法、除法、取余等。

JavaScript中的运算符可以分为数学运算符、比较运算符、逻辑运算符和赋值运算符。

数学运算符用于执行算术操作，包括加法（+）、减法（-）、乘法（*）、除法（/）和取余（%）等。

比较运算符用于比较两个值，并返回一个布尔值（true或false），包括相等（==）、不相等（!=）、严格相等（===）、严格不相等（!==）、大于（>）、小于（<）、大于等于（>=）和小于等于（<=）。

逻辑运算符用于将多个条件组合成一个结果，包括逻辑与（&&）、逻辑或（||）和逻辑非（!）。

赋值运算符用于给变量赋值，包括等于（=）、加等于（+=）、减等于（-=）、乘等于（*=）、除等于（/=）和取余等于（%=）。

此外，JavaScript还有一些其他的运算符，如三元运算符（条件 ? 表达式1 : 表达式2）和typeof运算符（返回操作数的数据类型）等。

  1. 熟悉JavaScript的控制流程，如条件语句、循环语句等。

  • 条件语句允许根据条件执行不同的代码路径。常见的条件语句是if语句，也有if...else和switch语句。

是的，条件语句是在程序中根据条件来执行不同的代码路径的结构。

if语句是最基本的条件语句，它根据某个条件的真假来判断是否执行代码块。语法如下：

if (condition) {
  // 如果条件为真，执行这里的代码
}

if语句也可以与else语句结合使用，如果条件为假，则执行else代码块中的代码。语法如下：

if (condition) {
  // 如果条件为真，执行这里的代码
} else {
  // 如果条件为假，执行这里的代码
}

还有一个更灵活的形式是if...else if...else语句，可以根据多个条件判断执行不同的代码块。语法如下：

if (condition1) {
  // 如果条件1为真，执行这里的代码
} else if (condition2) {
  // 如果条件2为真，执行这里的代码
} else {
  // 如果前面的条件都为假，执行这里的代码
}

另外，switch语句也可以用来根据不同的条件执行不同的代码块。它会将表达式的值与多个case值进行比较，如果匹配则执行对应的代码块。语法如下：

switch (expression) {
  case value1:
    // 如果expression的值与value1匹配，执行这里的代码
    break;
  case value2:
    // 如果expression的值与value2匹配，执行这里的代码
    break;
  default:
    // 如果expression的值与前面的所有case都不匹配，执行这里的代码
    break;
}

在switch语句中，break语句用于跳出switch语句，防止执行后续的case代码块。如果省略break，程序将继续执行下一个case代码块，直到遇到break或switch语句结束为止。

以上是常见的条件语句，它们可以根据不同的条件来控制程序的执行流程。

  • 循环语句用于重复执行一段代码。常见的循环语句有for和while循环。

for循环是一种常见的循环语句，它可以按照指定的次数重复执行一段代码。它的语法结构如下：

for 变量 in 可迭代对象:
    循环体代码

其中，变量是用来存储循环中每次迭代的值的变量，可迭代对象是一个序列（如列表、元组、字符串等）或者一个可迭代的对象（如迭代器对象、range对象等）。循环体代码是需要重复执行的代码块。

例如，下面的代码使用for循环输出从1到5的数字：

for i in range(1, 6):
    print(i)

执行上述代码会输出：

1
2
3
4
5

还有一种常见的循环语句是while循环。while循环根据一个条件判断是否继续执行循环体代码。它的语法结构如下：

while 条件:
    循环体代码

条件是一个布尔表达式，当条件为True时，循环体代码会被执行；当条件为False时，循环终止。

例如，下面的代码使用while循环输出从1到5的数字：

i = 1
while i <= 5:
    print(i)
    i += 1

执行上述代码会输出：

1
2
3
4
5

需要注意的是，在使用循环语句时，需要小心控制循环的终止条件，以避免出现无限循环的情况。

  1. 学习JavaScript的函数和作用域，包括函数的定义、参数传递、闭包等。

  • 函数是一段可重复使用的代码块，可以接受参数并返回一个值。

是的，JavaScript中的函数也是一段可重复使用的代码块，可以接受参数并返回一个值。

JavaScript中函数的定义可以使用function关键字，也可以使用箭头函数的语法。

函数的定义通常包括以下几个部分：

  • 函数名：用于标识函数的名称。
  • 参数列表：函数可以接受零个或多个参数，参数是传递给函数的值。
  • 函数体：包含函数执行的代码块。
  • 返回值：函数可以使用return语句返回一个值给调用它的地方。

函数定义的一般语法如下：

function 函数名(参数列表) {
    函数体
    return 返回值
}

或者使用箭头函数的语法：

const 函数名 = (参数列表) => {
    函数体
    return 返回值
}

例如，下面是一个计算两个数之和的函数的定义：

function addNumbers(a, b) {
    let sum = a + b;
    return sum;
}

或者使用箭头函数的语法定义：

const addNumbers = (a, b) => {
    let sum = a + b;
    return sum;
}

上述函数接受两个参数a和b，并返回它们的和。

函数可以通过调用（或执行）来使用。调用函数时，可以向函数传递参数，并获取函数的返回值。

例如，调用上述addNumbers函数并传递参数2和3：

let result = addNumbers(2, 3);
console.log(result);  // 输出5

在上述例子中，函数addNumbers返回了参数2和3的和，然后将结果赋给变量result，并通过console.log()函数输出结果。

通过使用函数，可以将复杂的任务分解为小的代码块，提高代码的可重用性和可维护性。同时，函数还可以使代码更加模块化，便于理解和调试。

  • 函数可以通过function关键字定义，可以有参数和返回值。

是的，函数可以通过使用function关键字来定义，并且可以包含参数和返回值。

函数定义的一般语法如下：

function functionName(parameter1, parameter2, ...) {
    // 函数体
    return returnValue;
}

  • functionName：函数的名称，用于标识函数。
  • parameter1, parameter2, ...：函数的参数列表，用于接收函数调用时传递的值。参数可以是任意有效的表达式，多个参数之间使用逗号分隔。
  • 函数体：函数的代码块，包含要执行的代码。
  • returnValue：可选项，可以使用return语句返回一个值给函数调用者。如果没有指定返回值，则函数返回undefined。

例如，下面是一个计算两个数之和的函数的定义：

function addNumbers(a, b) {
    let sum = a + b;
    return sum;
}

在上面的例子中，函数addNumbers接受两个参数a和b，并在函数体中计算它们的和。然后，使用return语句将计算结果作为返回值返回给函数调用者。

函数可以通过函数名和参数列表来调用，例如：

let result = addNumbers(2, 3);
console.log(result);  // 输出5

在上述例子中，调用addNumbers函数并传递参数2和3。函数执行后，返回结果5，并将其赋值给变量result。最后，使用console.log函数将结果输出到控制台。

函数在JavaScript中是非常灵活和强大的工具，在编写复杂的代码和实现可重用性时非常有用。它们可以接受不同数量和类型的参数，执行任意的代码逻辑，并返回一个值。

  • 参数传递是指将值传递给函数的参数，并在函数内部使用。可以通过位置、关键字或默认值进行参数传递。

是的，参数传递是指将值传递给函数的参数，并在函数内部使用。

在JavaScript中，有几种方式可以进行参数传递：

  1. 位置参数传递：按照函数参数定义的顺序，将值传递给函数。例如：
function greet(name, age) {
    console.log(`Hello, ${name}! You are ${age} years old.`);
}

greet("John", 25);

上面的例子中，调用greet函数并传递"name"和"age"参数的值。在函数内部，这些值将分别赋给"name"和"age"参数，然后使用它们来打印欢迎消息。

  1. 关键字参数传递：通过指定参数名称和相应的值，将值传递给函数。这种方式可以不按照参数定义的顺序传递参数。例如：
function greet(name, age) {
    console.log(`Hello, ${name}! You are ${age} years old.`);
}

greet({ age: 25, name: "John" });

在上面的例子中，使用对象字面量的形式传递参数，并通过参数名称指定值。函数内部会根据参数名称将值赋给对应的参数。

  1. 默认值参数传递：在函数参数定义时，可以为参数指定默认值。如果在函数调用时没有传递对应的参数值，将使用默认值。例如：
function greet(name = "Anonymous", age = 18) {
    console.log(`Hello, ${name}! You are ${age} years old.`);
}

greet();  // 使用默认值
greet("John");  // 仅传递name参数的值
greet("Jane", 30);  // 传递所有参数的值

在上面的例子中，定义了两个参数"name"和"age"，并给它们指定了默认值。如果在函数调用时没有提供对应的参数值，将使用默认值。

这些参数传递方式可以结合使用，根据需要选择合适的方式。通过参数传递，可以将外部的值传递给函数内部，并在函数内部使用这些值执行相关的逻辑。这样可以使函数更加灵活和可复用。

  • 闭包是指函数能够访问其定义时所在的作用域中的变量。闭包可以用于创建私有变量和保持状态。

是的，闭包是指函数能够访问其定义时所在的作用域中的变量。具体来说，闭包可以捕获和保存它们所在的词法作用域的变量，即使在这些变量的作用域外部调用函数时也可以访问这些变量。

闭包可以用于创建私有变量和保持状态。通过将变量定义在外部函数的作用域中，并在内部函数中引用这些变量，就可以创建私有变量。这样，这些变量就不会被外部访问到，只能通过内部函数来操作。

另外，闭包还可以用于保持状态。由于闭包可以捕获和保存其所在作用域中的变量，内部函数可以在其定义外部的作用域中访问这些变量，并保持它们的状态。这样，每次调用内部函数时，都可以使用和更新这些变量的值。

以下是一个简单的闭包示例，用于计数器的实现：

function createCounter() {
    let count = 0;

    function increment() {
        count++;
        console.log(count);
    }

    return increment;
}

const counter = createCounter();

counter();  // 输出1
counter();  // 输出2
counter();  // 输出3

在上面的例子中，createCounter函数定义了一个内部变量count，并返回了一个内部函数increment。在每次调用increment函数时，count的值会增加。由于increment函数引用了count变量，使得count的值在函数调用之间保持了状态。

闭包是JavaScript中强大的特性之一，它可以帮助我们实现一些高级的功能和模式，如模块模式、函数柯里化等。然而，过度使用闭包可能会导致内存泄漏，因此在使用闭包时需要注意内存管理。

  1. 学习JavaScript的对象和原型，包括对象的创建、属性和方法的定义、原型链等。

  • 对象是 JavaScript 中的核心概念，可以用来存储键值对的集合。

是的，对象是JavaScript中的核心概念之一，用于存储键值对的集合。对象由一组属性（键值对）组成，每个属性由一个键（也称为属性名）和一个值组成。

可以通过两种方式创建对象：

  1. 字面量方式：使用花括号{}创建对象，并在其中定义属性和对应的值。
const person = {
  name: '张三',
  age: 20,
  gender: '男'
};

  1. 构造函数方式：使用new关键字和构造函数创建对象。
function Person(name, age, gender) {
  this.name = name;
  this.age = age;
  this.gender = gender;
}

const person = new Person('张三', 20, '男');

在对象中，可以使用点表示法或方括号表示法来访问属性的值。

console.log(person.name);   // 输出 "张三"
console.log(person['age']); // 输出 20

对象的属性还可以是函数，称为对象的方法。

const person = {
  name: '张三',
  age: 20,
  sayHello: function() {
    console.log('你好，我是' + this.name);
  }
};

person.sayHello();  // 输出 "你好，我是张三"

除了常规属性和方法，对象还可以具有特殊属性和方法，如constructor属性、prototype属性等。

对象是JavaScript中非常重要的数据类型之一，它提供了一种组织和操作数据的方式，并可以用于构建复杂的数据结构和实现面向对象的编程。

  • 对象可以通过字面量、构造函数或Object.create()进行创建。

是的，对象可以通过字面量、构造函数或Object.create()进行创建。

  1. 字面量方式：使用花括号{}创建对象，并在其中定义属性和对应的值。
const person = {
  name: '张三',
  age: 20,
  gender: '男'
};

  1. 构造函数方式：使用new关键字和构造函数创建对象。
function Person(name, age, gender) {
  this.name = name;
  this.age = age;
  this.gender = gender;
}

const person = new Person('张三', 20, '男');

  1. Object.create()方式：使用Object.create()方法创建一个新对象，该对象的原型是指定的对象。
const personPrototype = {
  sayHello: function() {
    console.log('你好，我是' + this.name);
  }
};

const person = Object.create(personPrototype);
person.name = '张三';
person.age = 20;
person.gender = '男';

person.sayHello();  // 输出 "你好，我是张三"

无论是哪种方式，都可以用来创建对象，选择使用哪种方式取决于具体的需求和开发习惯。

  • 对象的属性可以通过点表示法或方括号表示法进行访问，也可以通过赋值来定义新属性。

是的，对象的属性可以通过点表示法或方括号表示法进行访问，并且可以通过赋值来定义新属性。

使用点表示法：

const person = {
  name: '张三',
  age: 20,
  gender: '男'
};

console.log(person.name);  // 输出 "张三"
console.log(person.age);   // 输出 20
console.log(person.gender);  // 输出 "男"

person.name = '李四';
console.log(person.name);  // 输出 "李四"

使用方括号表示法：

const person = {
  name: '张三',
  age: 20,
  gender: '男'
};

console.log(person['name']);  // 输出 "张三"
console.log(person['age']);   // 输出 20
console.log(person['gender']);  // 输出 "男"

person['name'] = '李四';
console.log(person['name']);  // 输出 "李四"

通过赋值来定义新属性：

const person = {};

person.name = '张三';
person.age = 20;
person.gender = '男';

console.log(person.name);  // 输出 "张三"
console.log(person.age);   // 输出 20
console.log(person.gender);  // 输出 "男"

注意，使用方括号表示法时，属性名需要用引号括起来。这对于属性名包含特殊字符或变量的情况非常有用。例如：

const propName = 'name';
console.log(person[propName]);  // 输出 "张三"

const specialChar = '@$%^';
person[specialChar] = '特殊属性';
console.log(person[specialChar]);  // 输出 "特殊属性"

  • 方法是对象中的函数，可以通过对象的属性来引用和调用。

是的，方法是对象中的函数，可以通过对象的属性来引用和调用。

在对象中，可以使用字面量语法或构造函数语法定义方法。例如：

// 使用字面量语法定义对象及其方法
const person = {
  name: '张三',
  age: 20,
  sayHello: function() {
    console.log('你好！我是' + this.name + '，今年' + this.age + '岁。');
  }
};

person.sayHello();  // 输出 "你好！我是张三，今年20岁。"

// 使用构造函数语法定义对象及其方法
function Person(name, age) {
  this.name = name;
  this.age = age;
  this.sayHello = function() {
    console.log('你好！我是' + this.name + '，今年' + this.age + '岁。');
  };
}

const person2 = new Person('李四', 22);
person2.sayHello();  // 输出 "你好！我是李四，今年22岁。"

在上述例子中，通过定义一个属性为函数的属性来创建一个方法，然后通过使用“实例名.方法名()”的方式调用该方法。在方法内部，可以使用关键字this来引用对象本身的属性。

另外需要注意的是，对象的方法也可以使用箭头函数定义，但是箭头函数中的this将不再指向对象本身，而是指向定义箭头函数时的环境。

  • JavaScript中的对象是基于原型的，每个对象都有一个原型对象，可以通过原型链来访问属性和方法。

是的，JavaScript 中的对象是基于原型的。每个对象都有一个原型对象，该原型对象包含一些共享的属性和方法。这些属性和方法可以通过原型链来访问。

当我们访问一个对象的属性或方法时，JavaScript 首先会在该对象本身查找，如果找不到，就会继续在它的原型对象上查找，然后是原型对象的原型对象，依此类推，直到找到或者到达原型链的末尾。

我们可以使用 Object.getPrototypeOf() 方法来获取一个对象的原型对象，使用 Object.setPrototypeOf() 方法来设置一个对象的原型对象。

例如：

const person = {
  name: '张三',
  age: 20,
  sayHello() {
    console.log('你好！我是' + this.name + '，今年' + this.age + '岁。');
  }
};

const student = Object.create(person);  // student 对象的原型是 person 对象

student.name = '李四';
student.grade = 90;

console.log(student.name);  // 输出 "李四"
console.log(student.grade);  // 输出 90

student.sayHello();  // 输出 "你好！我是李四，今年20岁。"

在上述例子中，我们使用 Object.create() 方法创建了一个新对象 student，并将 person 对象设置为 student 对象的原型。因此，student 对象可以继承 person 对象的属性和方法。

通过原型链，student 对象可以访问 person 对象的属性 name 和 age，以及 person 对象的方法 sayHello()。在 student 对象中，我们也可以设置新的属性 grade。

需要注意的是，如果在对象本身和原型对象中都存在同名的属性或方法，对象本身的属性或方法会覆盖原型对象中的同名属性或方法

文章来源:https://blog.csdn.net/weixin_70007095/article/details/135367470
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。