JavaScript函数分类与this指向深度解析

"这篇文档详细介绍了JavaScript中的函数分类和`this`指向的概念，并通过实例进行了深入解析。文档首先展示了三种不同的函数定义方式：方法1是标准函数定义，方法2是变量赋值函数，方法3是使用`new Function`构造函数。接着，文档探讨了JavaScript中`this`关键字在不同函数调用场景下的指向行为，包括普通函数、对象方法、构造函数、事件处理函数、定时器函数以及立即执行函数的情况。" 在JavaScript中，函数是一种第一类公民，即它们可以作为值赋给变量、作为参数传递给其他函数，甚至可以作为返回值。文档通过以下三个示例展示了函数的不同创建方式： 1. 标准函数定义： ```javascript function fn() { console.log('fn created '); } ``` 这是最常见的函数定义方式，`fn` 是函数的名称。 2. 变量赋值函数： ```javascript var fn2 = function () { console.log('fn2 created'); }; ``` 这里，函数没有指定名称，而是赋值给了变量 `fn2`。 3. 使用 `new Function` 构造函数： ```javascript var fn3 = new Function('test', 'console.log(test);'); fn3('fn3test'); ``` 这种方式创建函数的效率较低，但可以动态定义函数体。 关于 `this` 指向的讨论，文档列举了六种情况： 1. 普通标准函数： ```javascript function fn1() { console.log('fn1' + this); } fn1(); ``` 在全局环境中，`this` 指向全局对象（在浏览器中是 `window`）。 2. 对象的方法： ```javascript var o = { sayHi: function() { console.log('fn2' + this); } }; o.sayHi(); ``` 当函数作为对象的方法调用时，`this` 指向调用该方法的对象。 3. 构造函数： ```javascript function Star(username) { this.username = username; } var star1 = new Star('ldh'); ``` 在构造函数中，`this` 指向新创建的对象。 4. 事件处理函数： ```javascript var btn = document.getElementById('myBtn'); var fn = function() { console.log('btn被点击了' + this); }; btn.onclick = fn; ``` 事件处理函数的 `this` 指向触发事件的元素。 5. 定时器函数： ```javascript setInterval(function() {}, 1000); ``` 定时器函数（如 `setInterval` 或 `setTimeout`）中的 `this` 也指向全局对象。 6. 立即执行函数： ```javascript (function() { console.log('function executed'); })(); ``` 立即执行函数（IIFE）的 `this` 同样指向全局对象。 通过这些实例，开发者可以更好地理解JavaScript中函数的创建方式以及`this`关键字在不同上下文中的行为，这对于编写高效、准确的JavaScript代码至关重要。