面试题：JavaScript中原型链与作用域链区别的基础应用

Question

请编写一个JavaScript函数，在函数内部通过原型链和作用域链分别访问变量，并解释这两种访问方式在函数执行过程中的具体区别。

Answer 1

function Example() {
    // 定义局部变量
    let localVar = '通过作用域链访问的局部变量';

    // 访问原型链上的变量
    this.prototypeVar = '通过原型链访问的变量';
}

// 创建Example的实例
let exampleInstance = new Example();

// 定义函数来展示两种访问方式
function accessVariables() {
    // 通过作用域链访问局部变量
    console.log(localVar);

    // 通过原型链访问变量
    console.log(this.prototypeVar);
}

// 调用函数
accessVariables.call(exampleInstance);

区别解释

1. 原型链：原型链是JavaScript对象之间的一种继承关系。当访问对象的属性时，如果对象本身没有该属性，JavaScript会沿着原型链向上查找，直到找到该属性或到达原型链的顶端（null）。在上述代码中，this.prototypeVar是通过exampleInstance的原型链来访问的。因为exampleInstance是Example构造函数的实例，它可以访问Example.prototype上的属性。
2. 作用域链：作用域链是在函数执行时创建的，它定义了函数可以访问的变量的层次结构。函数首先会在自己的局部作用域中查找变量，如果找不到，会沿着作用域链向上查找，直到全局作用域。在上述代码中，localVar是在accessVariables函数的局部作用域中定义的，所以它是通过作用域链来访问的。作用域链主要用于函数内部变量的查找，而原型链主要用于对象属性的查找。