「深度解析」一文吃透JavaScript中var、this和严格模式的7个隐藏陷阱

爱学习的茄子
82 阅读4分钟

作为前端开发者，我们每天都在与JavaScript打交道，但你真的理解var声明、this指向和作用域的底层机制吗？今天咱们就来深入聊聊这些看似简单却暗藏玄机的JavaScript核心概念。

一、var声明的"神奇"特性：为什么会挂载到window上？

很多同学可能都遇到过这样的现象：

var a = 1;
console.log(window.a); // 1
function f(){console.log('haha');}
console.log(window.f); // function f(){console.log('haha');}

这背后的原理其实很有意思。在JavaScript的设计之初，全局变量和顶层对象的属性被设计成等价的。这意味着用var声明的全局变量会自动成为window对象的属性。这个设计在当时看来是合理的，但现在看来确实会造成全局命名空间的污染。

ES6的改进：let和const的块级作用域

到了ES6时代，let和const的出现改变了这一切：

let b = 2;
const c = 3;
console.log(window.b); // undefined
console.log(window.c); // undefined

let和const声明的变量不会挂载到顶层对象上，而是存在于一个叫做**TDZ（Temporal Dead Zone，暂时性死区）**的块级作用域中。这样的设计避免了全局对象的污染，让代码更加安全可控。

二、严格模式下的函数行为：只读的函数名

看这个有趣的例子：

"use strict";
var b = 10;
(function b(){
    b = 20; // 不生效的
    console.log(b); // 输出函数本身
})()

在严格模式下，函数名在函数体内部是只读的。即使JavaScript是弱类型语言，允许随意修改变量，但函数名这个特殊的标识符在其自身的函数体内部具有更高的优先级，不能被重新赋值。这是JavaScript引擎的一个保护机制。

三、this指向：JavaScript中最"善变"的关键字

说到this，这绝对是JavaScript中最让人头疼的概念之一。简单来说，this是函数执行时动态生成的对象，它的指向完全由调用方式决定。

1. 普通函数调用

var name = '王子';
function func(){
    console.log(this); // window对象
    console.log(this.name); // '王子'
}
func();

普通函数调用时，this指向全局对象（浏览器中是window）。

2. 严格模式下的差异

"use strict";
var name = "windowsName";
var a = {
    name: "公主",
    fn: function(){
        console.log(this); // a对象
        console.log(this.name); // "公主"
    }
}
a.fn(); // 对象方法调用，this指向调用者
var b = a.fn;
b(); // 普通函数调用，严格模式下this为undefined

这个例子很好地展示了调用方式决定this指向的原则。同一个函数，不同的调用方式会有完全不同的this指向。

3. 构造函数中的this

function Person(name, age){
    this.name = name;
    this.age = age;
}

const p = new Person('labubu', 2);
console.log(p.name); // 'labubu'

使用new关键字调用函数时，this指向新创建的实例对象。这是面向对象编程的基础。

4. 事件处理函数中的this

document.getElementById('btn').addEventListener('keyDown', function(){
    console.log(this); // 指向触发事件的DOM元素
    console.log(this.value);
})

在事件处理函数中，this指向触发事件的DOM元素，这让我们可以方便地访问元素的属性和方法。

5. 箭头函数：没有自己的this

var name = 'windowsName';
var a = {
    name: 'tom',
    func1: function(){
        console.log(this.name);
    },
    func2: function() {
        setTimeout(function(){
            this.func1(); // 这里的this指向window，会报错
        }, 1000);
    }
}

这个例子展示了传统函数在回调中this指向的问题。箭头函数的出现就是为了解决这个痛点——箭头函数本身没有this，它会继承外层作用域的this。

四、运行环境的差异：浏览器 vs Node.js

值得注意的是，JavaScript的运行环境会影响全局对象的表现：

// 浏览器环境
var a = 1;
console.log(window.a); // 1

// Node.js环境
var a = 1;
console.log(global.a); // 1

在浏览器中，全局对象是window；在Node.js中，全局对象是global。这种差异在编写同构JavaScript代码时需要特别注意。

总结

通过这些例子，我们可以看到JavaScript在变量声明、作用域和this指向方面的复杂性和精妙之处：

  1. var声明会污染全局对象，而let/const提供了更好的块级作用域
  2. 严格模式提供了更严格的语法检查，让代码更加安全
  3. this的指向完全由调用方式决定，理解这一点是掌握JavaScript面向对象编程的关键
  4. 箭头函数解决了传统函数this指向的痛点，但也要理解它的局限性
  5. 不同运行环境的差异需要在实际开发中加以考虑

掌握这些概念不仅能让我们写出更好的代码，也能帮助我们在面试和实际开发中游刃有余。JavaScript的魅力就在于这些看似简单却内涵丰富的特性，希望这篇文章能帮你更好地理解它们！

avatar
文章
阅读
粉丝