ECMAScript和JavaScript的区别是什么?

我这里是简单概括一下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中使用关键字letconst来声明变量。

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

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

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

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

在上面的例子中,变量xlet关键字声明在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关键字声明为一个常量,所以尝试重新赋值会报错。而变量xif语句的块级作用域内声明,作用域外部无法访问。

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

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

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

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

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

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

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

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

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

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

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

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

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

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语句结束为止。

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

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

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 对象的属性 nameage,以及 person 对象的方法 sayHello()。在 student 对象中,我们也可以设置新的属性 grade

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

你可能感兴趣的:(前端,JavaScript,基础详细,ecmascript,前端,开发语言)