Question

我想了解以下模式：

// https://github.com/twitter/bootstrap/blob/master/js/bootstrap-collapse.js

  $.fn.collapse = function (option) {
    return this.each(function () {
      var $this = $(this)
        , data = $this.data('collapse')
        , options = typeof option == 'object' && option
      if (!data) $this.data('collapse', (data = new Collapse(this, options)))
      if (typeof option == 'string') data[option]()
    })
  }

  $.fn.collapse.defaults = {
    toggle: true
  }

看起来collapse是一个函数对象。那么，为什么defaults可以作为属性添加到collapse？

以下(jsFiddle) snippet尝试向函数对象添加新属性但无效。它是什么？

var my_object = function () {
    alert('Hello World!');
};
my_object.name = 'my_object';

console.log(my_object.name);  // prints an empty string

Answer 1

是的，它是一个函数对象。 javascript中的所有对象都可以包含属性，因此$.fn.collapse具有defaults。

你的小提琴不起作用，因为每个函数[object]都有一个不可写的name property，其中包含函数的名称 - 如果它被命名的话。您正在为my_object变量分配一个匿名函数，该变量具有空名称。注意它是一个字符串，而不是undefined！看看http://jsfiddle.net/KTzUw/3/

Answer 2

.name很特别，大多数其他属性名称都有效：

var my_object = function () {
    alert('Hello World!');
};
my_object.someprop = 'my_object';
console.log(my_object.someprop);  // prints an empty string

保留函数的name属性。

function foo() {};
console.log(foo.name); // "foo"

在你的情况下，它是一个空字符串，因为它被声明为匿名函数：

var foo = function() {};
console.log(foo.name); // ""

但是除了一些保留的属性名称之外，是的，您可以像任何对象一样分配函数的属性。这可能非常强大，因为它允许您以非常干净的方式将数据绑定到需要该数据的代码。

Answer 3

name是函数实例的保留属性，并且不可配置且不可写 flags，你不能覆盖它。除此之外，函数也继承自 Object 并且可能具有属性。

var my_fnc = function() { };

my_fnc.foobar = 42;

console.log( my_fnc_foobar ); // 42

向函数对象添加新属性

3 个答案: