从指向看JavaScript中的难点(JavaScript难点解析：从指向角度深度剖析)

原创

ithorizon 7个月前 (10-20) 阅读数 24 #后端开发

JavaScript难点解析：从指向角度深度剖析

一、引言

JavaScript 是一种广泛使用的编程语言，以其灵活性和强盛的功能受到众多开发者的喜爱。然而，JavaScript 中的一些概念和特性让初学者和有经验的开发者 alike 都感到困惑。本文将从指向的角度，深度剖析 JavaScript 中的一些难点，帮助大家更好地明白和掌握这门语言。

二、变量提升（Hoisting）

变量提升是 JavaScript 中一个令人困惑的特性。在代码执行前，JavaScript 引擎会先进行变量提升，将变量声明提升到作用域的顶部。

2.1 变量声明提升

在函数或全局作用域中，使用 var 声明的变量会被提升到作用域的顶部，但初始化不会提升。


console.log(a); // undefined
var a = 1;

实际上，上面的代码会被引擎转换成以下形式：


var a;
console.log(a); // undefined
a = 1;

2.2 函数声明提升

函数声明也会被提升到作用域的顶部，而函数表达式不会被提升。


console.log(test); // function test() { console.log(1); }
test(); // 1
function test() {
    console.log(1);
}
// 相当于
function test() {
    console.log(1);
}
console.log(test); // function test() { console.log(1); }
test(); // 1

但是，函数表达式不会被提升：


console.log(test); // undefined
var test = function() {
    console.log(1);
};

三、作用域链（Scope Chain）

作用域链是 JavaScript 中用于查找变量值的一种机制。当在函数中访问一个变量时，JavaScript 引擎会从当前作用域起始向上查找，直到找到该变量的声明或到达全局作用域。

3.1 作用域链的工作原理

以下是一个易懂的例子，展示了作用域链的工作原理：


var a = 1;
function test() {
    var b = 2;
    console.log(a); // 1
    console.log(b); // 2
}
test();

在函数 test 中，当访问变量 a 时，JavaScript 引擎会从 test 作用域起始查找，但没有找到 a 的声明。然后，它会继续向上查找，直到全局作用域找到 a 的声明。

3.2 闭包（Closure）

闭包是 JavaScript 中一个强盛的特性，它允许函数访问并操作其外部作用域中的变量。闭包的形成与作用域链密切相关。


function outer() {
    var outerVar = 'Outer';
    function inner() {
        var innerVar = 'Inner';
        console.log(outerVar); // Outer
    }
    return inner;
}
var myFunc = outer();
myFunc(); // 调用 inner 函数，访问 outerVar

在这个例子中，函数 inner 能够访问并操作外部作用域（outer）中的变量 outerVar。这是归因于 inner 函数创建了一个闭包，保存了 outer 作用域的变量。

四、原型链（Prototype Chain）

原型链是 JavaScript 中实现对象继承的一种机制。每个对象都有一个原型（prototype），当访问一个对象的属性或方法时，如果该对象本身没有这个属性或方法，JavaScript 引擎会沿着原型链向上查找。

4.1 原型链的工作原理

以下是一个易懂的例子，展示了原型链的工作原理：


function Animal(name) {
    this.name = name;
}
Animal.prototype.sayName = function() {
    console.log(this.name);
};
var myAnimal = new Animal('Mittens');
myAnimal.sayName(); // Mittens

在这个例子中，对象 myAnimal 的原型是 Animal.prototype。当调用 myAnimal.sayName() 时，JavaScript 引擎会先在 myAnimal 对象中查找 sayName 方法，如果没有找到，它会沿着原型链向上查找，直到在 Animal.prototype 中找到 sayName 方法。

4.2 原型链的优化

为了优化原型链的性能，可以使用原型继承的行为，避免重复创建相同的属性和方法。


function Animal(name) {
    this.name = name;
}
Animal.prototype.sayName = function() {
    console.log(this.name);
};
function Dog(name) {
    Animal.call(this, name);
}
Dog.prototype = Object.create(Animal.prototype);
Dog.prototype.constructor = Dog;
Dog.prototype.bark = function() {
    console.log('Woof!');
};
var myDog = new Dog('Rex');
myDog.sayName(); // Rex
myDog.bark(); // Woof!

在这个例子中，Dog 类通过 Object.create() 方法继承了 Animal 类的原型，并添加了自己的 bark 方法。这样，myDog 对象就可以访问 Animal 类的 sayName 方法和 Dog 类的 bark 方法。

五、异步编程（Asynchronous Programming）

JavaScript 是单线程语言，异步编程是处理高延迟操作（如网络请求、定时器等）的一种机制。异步编程在 JavaScript 中首要通过回调函数、Promise 和 async/await 等行为实现。

5.1 回调函数

回调函数是一种常见的异步编程行为，它将一个函数作为参数传递给另一个函数，然后在合适的时候执行这个回调函数。


function fetchData(callback) {
    setTimeout(function() {
        callback('Data fetched');
    }, 1000);
}
fetchData(function(data) {
    console.log(data); // Data fetched
});

5.2 Promise

Promise 是一种更现代的异步编程行为，它描述一个异步操作的最终完成（或落败）及其于是值。


function fetchData() {
    return new Promise(function(resolve, reject) {
        setTimeout(function() {
            resolve('Data fetched');
        }, 1000);
    });
}
fetchData().then(function(data) {
    console.log(data); // Data fetched
});

5.3 async/await

async/await 是一种更简洁的异步编程行为，它允许开发者以同步的行为编写异步代码。


async function fetchData() {
    const data = await new Promise(function(resolve) {
        setTimeout(function() {
            resolve('Data fetched');
        }, 1000);
    });
    console.log(data); // Data fetched
}
fetchData();