JavaScript 函数的属性添加在哪了

JavaScript 函数的属性通常添加在函数对象本身上。在JavaScript中，函数既是一段可执行的代码，也是一个对象。这意味着除了执行代码，你也可以像对待其他对象一样，为函数添加属性。这些属性可以存储任何类型的值，如数字、字符串、对象或其他函数，提供了保存状态和行为的能力。定义属性通常使用点符号或者方括号语法，并且可以在函数的任何地方被访问和修改。

一个详细的描述是，JavaScript 中的函数对象可以拥有属性，比如说 name 属性表示函数名称，length 属性表示函数期望的参数个数。此外，用户可以自定义属性，下面就详细讨论如何在函数上添加自定义属性。

一、函数属性的定义与使用

属性定义

定义函数属性很简单，只需在函数对象上像操作普通对象属性一样赋予它们值即可。例如，考虑一个简单的函数：

function myFunction() {
  // 函数体
}
myFunction.description = "这是一个具有自定义属性的函数。";

在上述代码中，我们添加了一个名为 description 的自定义属性到 myFunction 函数上。这个属性就如同函数对象的一个普通属性一样，可以存储任何类型的数据。

属性使用

一旦属性被添加到函数上，你可以在函数内部或外部访问或修改这个属性：

// 访问属性
console.log(myFunction.description);  // 输出: "这是一个具有自定义属性的函数。"
// 函数内部访问
function myFunction() {
  // 使用 `this` 访问属性
  console.log(this.description);
}
myFunction(); // 输出: undefined （默认情况下，函数调用的 this 不指向函数对象本身）

在函数体内使用 this 关键字时，需要注意 this 的值取决于函数的调用方式。在非严格模式的普通函数调用中，this 默认指向全局对象（在浏览器中是 window 对象）。为了使 this 指向函数对象本身，可以使用 Function.prototype.bind 方法：

function myFunction() {
  console.log(this.description);
}
var boundFunction = myFunction.bind(myFunction);
boundFunction.description = "这是一个绑定后的函数。";
boundFunction(); // 输出: "这是一个绑定后的函数。"

二、函数属性与闭包

属性与状态存储

函数属性还可以用来存储状态信息。这是一个存储计数状态的示例：

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

使用函数属性来存储状态的方式比使用全局变量更优，因为它可以减少全局命名空间的污染。

结合闭包使用

函数属性和闭包共同可以创建非常强大的模式。闭包允许函数访问创建时作用域中的变量，即便那个作用域已经消失。结合函数属性可以模拟私有属性：

function createCounter() {
  var count = 0; // 私有变量，外部无法直接访问
  function counter() {
    count++;
    return count;
  }
  return counter;
}
var counterInstance = createCounter();
console.log(counterInstance()); // 输出: 1
console.log(counterInstance()); // 输出: 2

在此模式下，count 变量被封装在 createCounter 函数作用域内，外部代码无法访问，只有 counter 函数可以访问。这为模块化编程提供了一个有力的工具。

三、函数属性与原型

函数原型

在JavaScript中，所有的函数默认都有一个 prototype 属性，这个属性是一个对象，当函数作为构造器调用时，新创建的对象将继承自该原型。

属性与方法

通常，我们在函数的 prototype 对象上定义方法，以便所有实例可以共享这些方法，而不是在每个对象实例上都创建一遍：

function Person(name) {
  this.name = name;
}
Person.prototype.sayHello = function() {
  console.log("Hello, my name is " + this.name);
};
var person1 = new Person("Alice");
var person2 = new Person("Bob");
person1.sayHello(); // 输出: "Hello, my name is Alice"
person2.sayHello(); // 输出: "Hello, my name is Bob"

在上述例子中，sayHello 方法定义在 Person 函数的 prototype 属性上，因此，通过 Person 构造函数创建的所有实例都可以调用 sayHello 方法，而不需要在每个实例上都复制这个方法。

四、函数属性的枚举性

属性枚举

函数对象的属性默认是可以枚举的。这意味着当你使用 for-in 循环或 Object.keys() 方法时，函数的自定义属性会被遍历到。

function myFunction() {
  // 函数体
}
myFunction.description = "这是一个函数。";
for (var key in myFunction) {
  console.log(key+": "+myFunction[key]);
}
// 输出: "description: 这是一个函数。"

如需使函数属性不可枚举，可以使用 Object.defineProperty() 方法：

function myFunction() {
  // 函数体
}
Object.defineProperty(myFunction, 'description', {
  value: "这是一个函数。",
  enumerable: false
});
for (var key in myFunction) {
  console.log(key); // 不会输出 description
}