请帮我理解Javascript的匿名函数和jQuery.proxy（）

我一直在试图围绕javascript函数和范围如何工作，而这对我来说没有任何意义。 有人可以解释为什么下面的代码输出：'动物说喵'而不是'猫咪说喵'吗？

(function($, exports){
  var animal = function(){};
  exports.Animal = animal;
})(jQuery, window);

(function($, Animal){
  var kitty = new Animal;
  kitty.sayHi = function(){
    console.log(this);
    console.log('says meow');
  }
  $($.proxy(function(){
    $('#js_test').click($.proxy(kitty.sayHi, kitty));
  }, kitty))
})(jQuery, Animal);

UPDATE

@FunkyFresh在注释中指出console.log在传递一个对象时会调用toString，它默认返回对象的类型（动物）。 当我更新上面的代码

animal.prototype.name = 'Mammal';

在代码的顶部，和

kitty.name = 'Zax';

在底部，控制台输出'ZAX说喵'，这似乎是正确的。

---

（function（$）{}）（jQuery）

在此代码中（函数（$）{}）声明该函数。 然后（jQuery）立即调用传递给jQuery对象的函数。

所以第一个代码块通过jQuery和窗口对象。 动物被添加到窗口对象，这是全球范围。

在第二个块中，单击事件被添加到元素，并且kitty.sayHi作为事件处理程序被传入。 但是，如果事件处理程序未被代理，则eventhandler中的this关键字将返回触发该事件的元素。 所以通过使用代理，事件处理程序的范围变成了小猫。

我希望这是正确的，这对我来说也是新的。

---

更新： kitty是Animal一个实例。 所以它永远不会说kitty。 所有这些proxy包装都是小心误导。

让我们来看看：

(function($, exports){
  var animal = function(){};
  exports.Animal = animal;
})(jQuery, window);

只是假装说： window.Animal = function(){};

您正在创建一个匿名函数，将jQuery和窗口对象传递给它并立即执行它。 这会在window范围内创建Animal类

---

现在jquery.proxy允许你改变一个函数的上下文： jQuery.proxy( functionName, context ) - 所以在functionName ， this是指context （ this == context ）。

$.proxy(kitty.sayHi, kitty)说调用sayHi传递kitty作为上下文。

现在kitty = new Animal （因为你正在访问父函数的变量，所以this被称为闭包），所以this - > Animal

(function($, Animal){

  // create a new instance of Animal, assign it to local variable kitty
  var kitty = new Animal;

  // assign sayHi to kitty object
  kitty.sayHi = function(){
    console.log(this);
    console.log('says meow');
  }


  // $() shortcut that says run this code on DOM ready
  $($.proxy(function(){   
    // this proxy almost does nothing as we do not refer to this object insdie it

    // says on click of js_Test, call kitty.sayHi with context = kitty
    $('#js_test').click($.proxy(kitty.sayHi, kitty));

  }, kitty))

})(jQuery, Animal);

所以当点击处理程序被调用时，它实际上是Animal.sayHi 。

链接地址: http://www.djcxy.com/p/54381.html

上一篇: Please help me understand Javascript anonymous functions and jQuery .proxy()

下一篇: How do I identify the lowest required visibility of methods?