面试 JavaScript 框架八股文十问十答第七期

面试 JavaScript 框架八股文十问十答第七期

作者：程序员小白条，个人博客

相信看了本文后，对你的面试是有一定帮助的！关注专栏后就能收到持续更新！

⭐点赞⭐收藏⭐不迷路！⭐

1）原型修改、重写

在 JavaScript 中，可以通过修改或重写对象的原型来改变对象的行为。原型修改指的是直接修改对象的原型，而原型重写指的是创建一个新的对象，并将其作为原型赋值给目标对象。这两种操作都会影响到所有基于该原型创建的实例。

示例：

function Person(name) {
  this.name = name;
}

// 修改原型
Person.prototype.sayHello = function() {
  console.log("Hello, I'm " + this.name);
};

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

// 重写原型
Person.prototype = {
  sayGoodbye: function() {
    console.log("Goodbye!");
  }
};

const alice = new Person("Alice");
// john.sayHello(); // 报错：john.sayHello is not a function
alice.sayGoodbye(); // 输出: Goodbye!
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

在上面的示例中，首先修改了 Person 的原型，添加了 sayHello 方法，然后重写了 Person 的原型，赋值一个新对象。因此，对于之前创建的 john 对象，仍然可以调用 sayHello 方法，但对于之后创建的 alice 对象，则无法调用 sayHello 方法。

2）原型链指向

在 JavaScript 中，每个对象都有一个原型（prototype）属性，它指向另一个对象，这个对象就是当前对象的原型。通过原型链，对象可以访问其他对象的属性和方法。

当试图访问一个对象的属性或方法时，如果该对象本身没有定义该属性或方法，JavaScript 引擎会沿着原型链向上查找，直到找到该属性或方法或者到达原型链的终点为止。

3）原型链的终点是什么？

在 JavaScript 中，原型链的终点是 null。当试图访问一个对象的属性或方法时，如果在对象本身及其原型链上都找不到该属性或方法，则返回 undefined。原型链的终点是 null 是因为 null 是 JavaScript 中的原始值之一，不是对象，因此没有原型。

const obj = {};

console.log(obj.toString()); // 输出: [object Object]
1
2
3

在上面的示例中，obj 对象本身没有定义 toString 方法，但由于 obj 的原型链上存在 Object.prototype.toString 方法，因此可以调用成功。如果在整个原型链上都找不到 toString 方法，则会返回 undefined。

4）如何打印出原型链的终点？

要打印出原型链的终点，可以通过循环访问对象及其原型链，并判断原型是否为 null。以下是一个简单的方法：

function printPrototypeChain(obj) {
  let currentObj = obj;
  while (currentObj !== null) {
    console.log(currentObj);
    currentObj = Object.getPrototypeOf(currentObj);
  }
}

const exampleObj = {}; // 你可以替换为具体的对象
printPrototypeChain(exampleObj);
1
2
3
4
5
6
7
8
9
10

这个函数会依次打印出对象及其原型链上的所有对象，直到原型为 null。

5）如何获得对象非原型链上的属性？

要获得对象自身的属性（即非原型链上的属性），可以使用 Object.keys()、Object.values() 或 Object.entries() 方法。这些方法会返回对象自身可枚举属性的键、值或键值对。

示例：

function Person(name, age) {
  this.name = name;
  this.age = age;
}

Person.prototype.sayHello = function() {
  console.log("Hello, I'm " + this.name);
};

const john = new Person("John", 30);

// 获取对象自身的属性
const ownProperties = Object.keys(john);
console.log(ownProperties); // 输出: ["name", "age"]

// 或者使用 for...in 循环
for (const prop in john) {
  if (john.hasOwnProperty(prop)) {
    console.log(prop); // 输出: "name", "age"
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

在上述示例中，Object.keys(john) 返回 john 对象自身的属性数组，即 ["name", "age"]。

6）对闭包的理解

闭包是指在函数内部创建的函数，它可以访问包含它的外部函数的变量，即使外部函数已经执行完毕。闭包是 JavaScript 中强大且常见的特性，可以用于创建私有变量、实现模块化等。

简单说，闭包就是一个函数和其相关的引用环境的组合。当函数被定义时，它就记住了自己被创建时的作用域，即使在其定义的地方之外调用它，它依然可以访问这个作用域内的变量。

function outerFunction() {
  let outerVar = "I am from outer function";

  function innerFunction() {
    console.log(outerVar);
  }

  return innerFunction;
}

const closureExample = outerFunction();
closureExample(); // 输出: I am from outer function
1
2
3
4
5
6
7
8
9
10
11
12

在这个例子中，innerFunction 是一个闭包，它可以访问 outerFunction 中声明的 outerVar 变量，即使 outerFunction 已经执行完毕。通过将 innerFunction 赋值给 closureExample，我们创建了一个闭包，可以在之后的任何时候调用它，而它仍然能够访问到 outerVar。

7）对作用域、作用域链的理解

作用域（Scope）： 作用域是指在程序中定义变量的区域，它规定了变量的可访问性和生命周期。在 JavaScript 中，有全局作用域和局部作用域。全局作用域指的是在整个程序中都可访问的范围，而局部作用域则是在函数内部或块级作用域中定义的变量范围。

作用域链（Scope Chain）： 作用域链是指在 JavaScript 中，每个函数都有一个作用域链，用于查找变量。当在一个函数内访问一个变量时，JavaScript 引擎会首先查找当前函数的作用域，如果找不到就会顺着作用域链向上查找，直到找到该变量或到达全局作用域。

8）对执行上下文的理解

执行上下文（Execution Context）： 执行上下文是 JavaScript 中代码执行的环境，包含了变量对象、作用域链、this 指向等信息。每次调用函数时，都会创建一个新的执行上下文。全局上下文是在程序开始执行时创建的，每个函数调用都会创建一个新的函数执行上下文。

执行上下文分为三种类型：

• 全局执行上下文： 在程序执行之初创建，全局上下文是唯一的，负责整个程序的执行。
• 函数执行上下文： 每次调用函数时创建，包含了函数的局部变量和参数。
• eval 函数执行上下文： 在使用 eval 函数时创建，eval 函数可以动态地执行一段 JavaScript 代码。

9）对this对象的理解

this 对象： 在 JavaScript 中，this 是一个关键字，代表当前执行代码的对象。具体指向的对象取决于函数的调用方式。在全局上下文中，this 指向全局对象（在浏览器环境中通常是 window），而在函数内部，this 的值取决于函数的调用方式。

示例：

function exampleFunction() {
  console.log(this);
}

exampleFunction(); // 在浏览器中，输出: window

const obj = {
  method: function() {
    console.log(this);
  }
};

obj.method(); // 输出: obj 对象
1
2
3
4
5
6
7
8
9
10
11
12
13

10）call() 和 apply() 的区别？

call() 和 apply() 都是 JavaScript 中用于调用函数的方法，它们的作用是改变函数执行时的上下文（即 this 的值）。它们的区别在于传递参数的方式。

• call() 方法： call() 方法接收一个参数列表，参数之间用逗号分隔。

  function greet(name) {
    console.log(`Hello, ${name}! I am ${this.title}.`);
  }
  
  const person = { title: 'Mr.' };
  
  greet.call(person, 'John');
  1
  2
  3
  4
  5
  6
  7

• apply() 方法： apply() 方法接收两个参数，第一个参数是函数执行时的上下文，第二个参数是一个数组或类数组对象，包含了传递给函数的参数。

  function greet(name) {
    console.log(`Hello, ${name}! I am ${this.title}.`);
  }
  
  const person = { title: 'Mr.' };
  
  greet.apply(person, ['John']);
  1
  2
  3
  4
  5
  6
  7

总的来说，call() 和 apply() 的目的都是在特定的上下文中调用函数，只是传递参数的方式不同。在现代 JavaScript 中，通常使用扩展运算符 ... 来代替 apply()，因为它更灵活，同时不需要明确指定上下文。

开源项目地址：https://gitee.com/falle22222n-leaves/vue_-book-manage-system

已 300 + Star！

⭐点赞⭐收藏⭐不迷路！⭐