面试 JavaScript 框架八股文十问十答第七期
作者：程序员小白条，个人博客
相信看了本文后，对你的面试是有一定帮助的！关注专栏后就能收到持续更新！
⭐点赞⭐收藏⭐不迷路！⭐文章来源地址https://www.toymoban.com/news/detail-830397.html
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!
在上面的示例中，首先修改了 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]
在上面的示例中，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);
这个函数会依次打印出对象及其原型链上的所有对象，直到原型为 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"
}
}
在上述示例中，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
在这个例子中，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 对象
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'); -
apply() 方法：
apply()方法接收两个参数，第一个参数是函数执行时的上下文，第二个参数是一个数组或类数组对象，包含了传递给函数的参数。function greet(name) { console.log(`Hello, ${name}! I am ${this.title}.`); } const person = { title: 'Mr.' }; greet.apply(person, ['John']);
总的来说，call() 和 apply() 的目的都是在特定的上下文中调用函数，只是传递参数的方式不同。在现代 JavaScript 中，通常使用扩展运算符 ... 来代替 apply()，因为它更灵活，同时不需要明确指定上下文。
开源项目地址：https://gitee.com/falle22222n-leaves/vue_-book-manage-system
已 300 + Star！文章来源：https://www.toymoban.com/news/detail-830397.html
⭐点赞⭐收藏⭐不迷路！⭐
到了这里，关于面试 JavaScript 框架八股文十问十答第七期的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
