js + 函数/变量提升 + 作用域 + 上下文 + this 应用

文章目录

- js 基础应用（变量/函数/作用域）
- 函数提升与变量提升的差异
- this 应用
- js 中的上下文
- 作用域参数共享

js 基础应用（变量/函数/作用域）

变量声明提升实例
- 在JavaScript中，变量声明会被提升到当前作用域的顶部。例如：
```
console.log(a); // 输出：undefined
var a = 10;
```
- 解释：虽然变量a的赋值语句在console.log之后，但是变量声明var a会被提升到作用域的顶部。在代码执行之前，JavaScript引擎会先处理变量声明。此时a已经被声明，但是还没有赋值，所以输出undefined。
函数提升实例
- 函数声明也会被提升。例如：
```
sayHello(); // 输出：Hello!
function sayHello() {
    console.log("Hello!");
}
```
- 解释：函数sayHello的声明被提升到了当前作用域的顶部，所以在调用它之前，JavaScript引擎已经知道了这个函数的存在，因此可以正常调用。
- 注意，如果是函数表达式，情况会有所不同：
```
sayHi(); // 报错：Uncaught TypeError: sayHi is not a function
var sayHi = function() {
    console.log("Hi!");
};
```
- 解释：这里var sayHi这个变量声明被提升了，但是赋值（也就是函数表达式部分）没有被提升。所以在调用sayHi的时候，它的值是undefined，并不是一个函数，从而导致报错。
作用域实例应用
- 全局作用域和局部作用域
  - 全局作用域：
```
var globalVar = 100;
function globalFunction() {
    console.log(globalVar);
}
globalFunction(); // 输出：100
```
    - 解释：变量globalVar在全局作用域中声明，函数globalFunction也在全局作用域中定义。函数globalFunction可以访问全局变量globalVar。
  - 局部作用域：
```
function outerFunction() {
    var outerVar = 200;
    function innerFunction() {
        console.log(outerVar);
    }
    innerFunction(); // 输出：200
}
outerFunction();
```
    - 解释：outerFunction创建了一个局部作用域，变量outerVar在这个局部作用域中声明。innerFunction在outerFunction的内部，它可以访问outerFunction作用域中的变量outerVar，这是因为JavaScript的词法作用域规则，内部函数可以访问其外部函数的变量。
- 块级作用域（ES6中的let和const）
  - 例如：
```
{
    let blockVar = 300;
    console.log(blockVar); // 输出：300
}
console.log(blockVar); 
// 报错：Uncaught ReferenceError: blockVar is not a defined
```
    - 解释：使用let声明的变量具有块级作用域。在这个例子中，变量blockVar只在花括号{}内部的块级作用域中有效。在块级作用域外部访问它会导致报错。const也有类似的块级作用域特性，并且const声明的变量一旦赋值就不能重新赋值（对于基本数据类型）。例如：
```
const PI = 3.14;
// PI = 3.14159;
 // 报错：Uncaught TypeError: Assignment to constant variable.
```

函数提升与变量提升的差异

提升机制的本质差异
- 变量提升：
  - 对于使用var关键字声明的变量，JavaScript引擎会在执行代码之前，将变量声明提升到当前作用域的顶部。但变量的初始化不会被提升。例如：
```
console.log(a); // 输出：undefined
var a = 10;
```
  - 在这里，变量a的声明被提升了，所以在console.log语句执行时，JavaScript知道有变量a这个标识符，但是此时a还没有被赋值，所以它的值是undefined。
- 函数提升：
  - 函数声明会被整个提升到当前作用域的顶部。这意味着函数的定义在代码执行之前就已经被处理好了，包括函数体内部的逻辑。例如：
```
sayHello(); // 输出：Hello!
function sayHello() {
    console.log("Hello!");
}
```
  - 函数sayHello的整个定义被提升，所以在调用它之前，JavaScript引擎就已经知道这个函数的存在，并且可以正确地执行函数内部的代码。
提升后的行为差异
- 变量提升后访问行为：
  - 变量提升后，如果在变量初始化之前访问它，会得到undefined。而且如果在一个作用域内重复使用var声明同一个变量，JavaScript会忽略后面的声明，例如：
```
var a = 10;
var a;
console.log(a); // 输出：10
```
  - 这是因为变量声明被提升后，后面的var a声明就相当于被忽略了，变量a的值还是最初赋值的10。
- 函数提升后访问行为：
  - 函数提升后，可以在函数声明之前调用函数。而且如果在同一个作用域内重复定义同名函数，后面的函数定义会覆盖前面的函数定义。例如：
```
function add(a, b) {
    return a + b;
}
function add(a, b) {
    return a * b;
}
console.log(add(2, 3)); // 输出：6
```
  - 这里后面定义的add函数覆盖了前面的add函数，所以调用add函数时，执行的是后面的乘法运算逻辑。
对作用域的影响差异
- 变量提升对作用域的影响：
  - 变量提升是基于当前作用域的。在全局作用域中声明的变量可以在全局范围内访问，在函数作用域中声明的变量只能在函数内部访问（不考虑闭包等特殊情况）。例如：
```
var globalVar = 100;
function testFunction() {
    var localVar = 200;
    console.log(globalVar); // 输出：100
    console.log(localVar); // 输出：200
}
testFunction();
console.log(globalVar); // 输出：100
console.log(localVar); // 报错：Uncaught ReferenceError: localVar is not defined
```
  - 变量globalVar在全局作用域声明，localVar在函数testFunction的局部作用域声明，它们的访问受到作用域的限制。
- 函数提升对作用域的影响：
  - 函数提升同样基于作用域。函数内部可以访问外部作用域的变量，但是外部作用域通常不能直接访问函数内部的变量（除非通过返回值等方式）。例如：
```
var globalVar = 100;
function outerFunction() {
    var outerVar = 200;
    function innerFunction() {
        console.log(outerVar); // 输出：200
        console.log(globalVar); // 输出：100
    }
    innerFunction();
}
outerFunction();
```
  - 函数innerFunction可以访问其外部函数outerFunction中的变量outerVar以及全局变量globalVar，体现了函数提升后的作用域访问规则。

this 应用

全局应用中的this
- 在全局环境下（浏览器中的window对象或者Node.js中的global对象），this通常指向全局对象。
- 例如在浏览器环境中：
```
console.log(this === window); // true
var globalVariable = 10;
this.globalVariable; // 可以通过this访问全局变量，等同于window.globalVariable
function globalFunction() {
    console.log(this); // 这里的this指向window
}
globalFunction();
```
- 解释：在全局函数内部，this同样指向全局对象。因为全局函数实际上是作为全局对象（window）的方法来执行的。当在全局范围内定义变量时，这些变量实际上是全局对象的属性，所以可以通过this来访问。
局部函数应用中的this
- 对象方法中的this
  - 当函数作为对象的方法被调用时，this指向该对象。例如：
```
let person = {
    name: "Alice",
    sayHello: function() {
        console.log("Hello, my name is " + this.name);
    }
};
person.sayHello(); // 输出：Hello, my name is Alice
```
  - 解释：在sayHello方法中，this指向person对象。所以可以通过this.name访问person对象的name属性。
- 事件处理函数中的this
  - 在HTML事件处理函数中（在浏览器环境下），this通常指向触发事件的元素。例如：
```
<button onclick="console.log(this.textContent)">Click me</button>
```
  - 解释：当按钮被点击时，this指向按钮元素本身，this.textContent可以获取按钮上显示的文本内容。
- 构造函数中的this
  - 在构造函数中，this指向新创建的对象实例。例如：
```
function Person(name) {
    this.name = name;
    this.sayHello = function() {
        console.log("Hello, my name is " + this.name);
    };
}
let person1 = new Person("Bob");
person1.sayHello(); // 输出：Hello, my name is Bob
```
  - 解释：当使用new关键字调用Person构造函数时，this在构造函数内部指向新创建的person1对象。通过this.name为对象添加属性，并且this.sayHello为对象添加方法。
调用this的方法
- 作为对象方法调用
  - 如前面提到的person.sayHello()这种方式，通过对象来调用方法，this就会指向该对象。
- 使用call和apply方法
  - call方法：可以用来调用一个函数，并且指定函数内部this的指向，同时传递参数。例如：
```
function greet(greeting) {
    console.log(greeting + ", " + this.name);
}
let person = {name: "Charlie"};
greet.call(person, "Hi"); // 输出：Hi, Charlie
```
  - 解释：call方法的第一个参数是要绑定this的对象，后面的参数是函数greet需要的参数。在这里，this在greet函数内部就指向了person对象。
  - apply方法：和call类似，但是传递参数的方式不同。apply接收两个参数，第一个是要绑定this的对象，第二个是一个包含函数参数的数组。例如：
```
function addNumbers(a, b) {
    return this.sum + a + b;
}
let calculator = {sum: 10};
let args = [2, 3];
addNumbers.apply(calculator, args); // 输出：15
```
- 使用bind方法
  - bind方法会创建一个新的函数，新函数内部的this会永久地绑定到指定的对象上。例如：
```
function multiply(a, b) {
    console.log(this.value * a * b);
}
let multiplier = {value: 2};
let boundMultiply = multiply.bind(multiplier);
boundMultiply(3, 4); // 输出：24
```
  - 解释：bind方法返回一个新的函数boundMultiply，这个新函数内部的this永远指向multiplier对象。即使将boundMultiply作为其他对象的方法调用或者在其他作用域中调用，this的指向也不会改变。
改变this指向的方法总结
- 主要有三种方式：call、apply和bind。它们的区别在于参数传递方式和是否立即执行函数。call和apply会立即执行函数，而bind返回一个新的函数，需要再次调用这个新函数才会执行。这些方法在处理面向对象编程、函数复用以及事件处理等场景中非常有用，可以灵活地控制this的指向，以满足不同的业务需求。

js 中的上下文

全局上下文（Global Context）
- 定义：
  - 全局上下文是JavaScript代码执行的最外层环境。在浏览器环境中，全局上下文对应的对象是window，在Node.js环境中是global。它包含了所有全局变量和函数，这些变量和函数可以在代码的任何位置访问（除非被函数作用域或块级作用域隐藏）。
- 实例：
  - 在浏览器环境下，我们可以这样理解全局上下文：
```
var globalVariable = 10;
function globalFunction() {
    console.log("This is a global function");
}
console.log(window.globalVariable);
 // 输出：10，说明globalVariable是window对象的属性
console.log(window.globalFunction);
 // 输出：function globalFunction() {...}，说明globalFunction是window对象的属性
```
  - 解释：这里的globalVariable和globalFunction都是在全局上下文中定义的，它们实际上是window对象的属性和方法。当我们在浏览器中访问window对象时，可以看到这些定义的变量和函数。
  - 在Node.js环境下：
```
global.sharedVariable = 20;
function sharedFunction() {
    console.log("This is a global function in Node.js");
}
console.log(global.sharedVariable); // 输出：20
console.log(global.sharedFunction); // 输出：function sharedFunction() {...}
```
  - 解释：在Node.js中，全局对象是global，和浏览器中的window类似，全局变量和函数是作为global对象的属性和方法存在的。
作用域上下文（Scope Context）
- 定义：
  - 作用域上下文决定了变量和函数的可访问性和生命周期。JavaScript有函数作用域和块级作用域。函数作用域是指在函数内部定义的变量只能在函数内部访问，块级作用域（通过let和const声明变量）是指在{}大括号内定义的变量只能在这个块内访问。
- 函数作用域实例：
  - 例如：
```
function outerFunction() {
    var outerVariable = 30;
    function innerFunction() {
        console.log(outerVariable); // 输出：30，可以访问outerVariable
    }
    innerFunction();
}
outerFunction();
console.log(outerVariable); 
// 报错：Uncaught ReferenceError: outerVariable is not defined，无法在函数外部访问outerVariable
```
  - 解释：outerVariable是在outerFunction的函数作用域内定义的，innerFunction可以访问outerVariable是因为JavaScript的词法作用域规则，内部函数可以访问其外部函数定义的变量。但是在outerFunction外部，outerVariable是不可访问的。
- 块级作用域实例：
```
{
    let blockVariable = 40;
    console.log(blockVariable); // 输出：40
}
console.log(blockVariable); 
// 报错：Uncaught ReferenceError: blockVariable is not defined，无法在块外部访问blockVariable
```
  - 解释：这里使用let声明了blockVariable，它具有块级作用域，只能在{}这个块内部被访问。当代码执行到块外部时，变量blockVariable就不再可访问了。

作用域参数共享

通过返回值共享变量（函数作用域）
- 原理：
  - 在函数内部定义的变量，默认情况下其作用域仅限于函数内部。但是可以通过将变量作为函数的返回值，使得外部代码能够访问函数内部的变量。
- 示例：
```
function createCounter() {
    let count = 0;
    return function() {
        count++;
        return count;
    };
}
let counter = createCounter();
console.log(counter()); // 输出：1
console.log(counter()); // 输出：2
```
  - 解释：createCounter函数内部定义了变量count，它的初始值为0。然后createCounter返回一个内部函数，这个内部函数可以访问count变量。当我们调用counter（也就是createCounter返回的内部函数）时，count变量的值会递增并返回。这样就通过返回值的方式，让外部代码能够访问和修改函数内部定义的变量。
全局变量共享（全局作用域与函数作用域交互）
- 原理：
  - 全局变量可以在函数内部访问和修改，从而实现作用域之间的交互。不过，过度使用全局变量可能会导致代码的可维护性变差。
- 示例：
```
let globalVariable = 10;
function modifyGlobalVariable() {
    globalVariable += 5;
    console.log(globalVariable); // 输出：15
}
modifyGlobalVariable();
console.log(globalVariable); // 输出：15
```
  - 解释：在这个例子中，globalVariable是一个全局变量。modifyGlobalVariable函数可以访问并修改这个全局变量。在函数内部修改globalVariable后，其值在函数外部也会发生改变，因为它们引用的是同一个变量。
闭包共享变量（函数作用域与外部作用域）
- 原理：
  - 闭包是指有权访问另一个函数内部变量的函数。一个函数返回了另一个函数，并且这个返回的函数引用了外部函数的局部变量，就形成了闭包。通过闭包可以在不同的函数调用之间保持变量的状态，并且可以从外部访问内部变量。
- 示例：
```
function outerFunction() {
    let privateVariable = 20;
    function innerFunction() {
        console.log(privateVariable);
    }
    return innerFunction;
}
let closureFunction = outerFunction();
closureFunction(); // 输出：20
```
  - 解释：outerFunction返回innerFunction，innerFunction可以访问outerFunction内部的privateVariable，形成了闭包。当我们调用closureFunction（也就是innerFunction）时，它能够访问privateVariable，即使outerFunction已经执行完毕。这样就实现了从外部访问函数内部变量的效果，并且通过闭包可以在不同的时间点访问和操作这些变量。
通过对象属性共享（函数作用域与对象作用域）
- 原理：
  - 可以将函数内部的变量作为对象的属性，通过返回对象或者修改对象属性的方式，让外部代码能够访问这些变量。
- 示例：
```
function createObjectWithVariable() {
    let internalVariable = 30;
    return {
        getVariable: function() {
            return internalVariable;
        },
        setVariable: function(newValue) {
            internalVariable = newValue;
        }
    };
}
let objectWithVariable = createObjectWithVariable();
console.log(objectWithVariable.getVariable()); // 输出：30
objectWithVariable.setVariable(40);
console.log(objectWithVariable.getVariable()); // 输出：40
```
  - 解释：createObjectWithVariable函数内部定义了internalVariable，然后返回一个对象，这个对象有两个方法getVariable和setVariable。getVariable方法可以获取internalVariable的值，setVariable方法可以修改它的值。通过这种方式，外部代码可以通过对象的方法来访问和修改函数内部的变量。