js怎么就就近原则了

JavaScript (JS) 是一种基于就近原则的编程语言，变量作用域、闭包机制、事件冒泡。其中，变量作用域是指在代码块内声明的变量在该代码块内是可见且可访问的。闭包机制则是指函数内部可以访问外部函数的变量，即使外部函数已经执行完毕。事件冒泡是指事件从最深的节点处开始，然后逐步向上传播到祖先节点，直到文档根节点。

一、变量作用域

在JavaScript中，变量的作用域决定了变量的可访问性。JavaScript有两种主要的作用域：全局作用域和局部作用域。

1、全局作用域

全局作用域中的变量可以在脚本的任何地方访问。通常，全局变量在脚本的顶部声明，并且没有被任何函数包裹。这样的变量在整个脚本中都是可见的。

var globalVariable = "I am a global variable";
function printGlobalVariable() {
    console.log(globalVariable); // 可以访问全局变量
}
printGlobalVariable(); // 输出: I am a global variable

2、局部作用域

局部作用域中的变量只能在声明它们的函数或代码块内访问。局部变量通常在函数内部声明，或者使用 let 和 const 关键字在代码块内声明。

function localScopeExample() {
    var localVariable = "I am a local variable";
    console.log(localVariable); // 可以访问局部变量
}
localScopeExample(); // 输出: I am a local variable
console.log(localVariable); // 报错: localVariable is not defined

二、闭包机制

闭包是指函数能够记住并访问它的词法作用域，即使该函数在其词法作用域之外执行。闭包是JavaScript中非常强大的特性之一，可以用于创建私有变量和函数。

1、基本闭包示例

function createCounter() {
    let count = 0;
    return function() {
        count++;
        return count;
    };
}
const counter = createCounter();
console.log(counter()); // 输出: 1
console.log(counter()); // 输出: 2
console.log(counter()); // 输出: 3

在上述示例中，createCounter 函数返回了一个匿名函数，该匿名函数可以访问 createCounter 函数的局部变量 count，即使 createCounter 函数已经执行完毕。

2、闭包的实际应用

闭包可以用于创建私有变量和方法，从而实现数据的封装和隐藏。

function createPerson(name) {
    let age = 0;
    return {
        getName: function() {
            return name;
        },
        getAge: function() {
            return age;
        },
        growOlder: function() {
            age++;
        }
    };
}
const person = createPerson("John");
console.log(person.getName()); // 输出: John
console.log(person.getAge()); // 输出: 0
person.growOlder();
console.log(person.getAge()); // 输出: 1

三、事件冒泡

事件冒泡是指事件从最深的目标节点开始，逐级向上传播到文档根节点的过程。事件冒泡机制允许我们在父元素上捕获子元素的事件，从而实现事件委托。

1、事件冒泡的基本概念

<!DOCTYPE html>
<html>
<body>
    <div id="parent">
        <button id="child">Click me</button>
    </div>
    <script>
        document.getElementById("parent").addEventListener("click", function() {
            alert("Parent clicked");
        });
        document.getElementById("child").addEventListener("click", function(event) {
            alert("Child clicked");
            event.stopPropagation(); // 阻止事件冒泡
        });
    </script>
</body>
</html>

在上述示例中，点击按钮时，会先触发按钮的点击事件，然后事件会冒泡到父 div 元素，触发父 div 元素的点击事件。如果我们不调用 event.stopPropagation()，父 div 元素的点击事件也会被触发。

2、事件委托

事件委托是一种将事件处理器添加到父元素上，而不是直接添加到多个子元素上的技术。通过事件委托，我们可以减少事件处理器的数量，提高性能，并且更容易管理事件处理。

<!DOCTYPE html>
<html>
<body>
    <ul id="list">
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
    </ul>
    <script>
        document.getElementById("list").addEventListener("click", function(event) {
            if (event.target.tagName === "LI") {
                alert(event.target.textContent + " clicked");
            }
        });
    </script>
</body>
</html>

在上述示例中，我们将点击事件处理器添加到 ul 元素上，而不是每个 li 元素上。通过事件冒泡机制，当点击 li 元素时，点击事件会冒泡到 ul 元素，并触发 ul 元素的点击事件处理器。

四、变量提升

变量提升是指在函数或全局作用域内，变量声明会被提升到作用域的顶部。需要注意的是，只有变量声明会被提升，而变量赋值不会被提升。

1、变量提升的基本示例

console.log(hoistedVariable); // 输出: undefined
var hoistedVariable = "I am hoisted";

在上述示例中，变量 hoistedVariable 的声明会被提升到作用域的顶部，但变量赋值不会被提升，因此在变量赋值之前访问变量会返回 undefined。

2、函数提升

函数声明也会被提升到作用域的顶部，因此可以在函数声明之前调用函数。

hoistedFunction(); // 输出: I am hoisted
function hoistedFunction() {
    console.log("I am hoisted");
}

需要注意的是，函数表达式不会被提升，因此在函数表达式之前调用函数会导致错误。

hoistedFunction(); // 报错: hoistedFunction is not a function
var hoistedFunction = function() {
    console.log("I am hoisted");
};

五、块级作用域

块级作用域是指变量在代码块内声明后，只在该代码块内可见。let 和 const 关键字用于声明块级作用域的变量。

1、块级作用域示例

{
    let blockScopedVariable = "I am block scoped";
    console.log(blockScopedVariable); // 输出: I am block scoped
}
console.log(blockScopedVariable); // 报错: blockScopedVariable is not defined

在上述示例中，变量 blockScopedVariable 只在代码块内可见，代码块外访问该变量会导致错误。

2、`let` 和 `const` 的区别

let 和 const 都用于声明块级作用域的变量，但 const 声明的变量必须在声明时初始化，并且不能重新赋值。

let variable = "I can be reassigned";
variable = "I am reassigned"; // 合法
const constant = "I cannot be reassigned";
constant = "I am reassigned"; // 报错: Assignment to constant variable.

六、作用域链

作用域链是指在嵌套的函数中，内部函数可以访问外部函数的变量。作用域链的形成是因为每个函数都有一个内部链接，指向其外部作用域。

1、作用域链的基本示例

function outerFunction() {
    let outerVariable = "I am an outer variable";
    function innerFunction() {
        let innerVariable = "I am an inner variable";
        console.log(outerVariable); // 可以访问外部变量
        console.log(innerVariable); // 可以访问内部变量
    }
    innerFunction();
    console.log(innerVariable); // 报错: innerVariable is not defined
}
outerFunction();

在上述示例中，innerFunction 可以访问 outerFunction 的变量 outerVariable，但 outerFunction 无法访问 innerFunction 的变量 innerVariable。

七、立即执行函数表达式 (IIFE)

立即执行函数表达式 (IIFE) 是一种在定义后立即执行的函数。IIFE 通常用于创建私有作用域，从而避免变量污染全局作用域。

1、IIFE 的基本示例

(function() {
    let privateVariable = "I am private";
    console.log(privateVariable); // 输出: I am private
})();
console.log(privateVariable); // 报错: privateVariable is not defined

在上述示例中，privateVariable 只在 IIFE 内部可见，IIFE 外部无法访问该变量。

2、IIFE 的实际应用

IIFE 通常用于模块化代码，将相关功能封装在一个私有作用域内，从而避免变量冲突和污染全局作用域。

const myModule = (function() {
    let privateVariable = "I am private";
    function privateMethod() {
        console.log(privateVariable);
    }
    return {
        publicMethod: function() {
            privateMethod();
        }
    };
})();
myModule.publicMethod(); // 输出: I am private

在上述示例中，myModule 对象只暴露了 publicMethod 方法，而 privateVariable 和 privateMethod 都是私有的，无法从外部访问。

八、总结

JavaScript 基于就近原则的编程语言特性，包括变量作用域、闭包机制和事件冒泡等，使得代码更加灵活和强大。通过掌握这些核心概念和技巧，开发者可以编写出高效、可维护和模块化的代码。理解和应用这些概念，将极大地提升你的JavaScript编程能力。