javascript - 在 jQuery 扩展对象中从父级调用子级方法

Question

我有一个子 Javascript 对象

var child = {
    foo: function() {
        console.log('bar');
    }
};

和一个父对象

var parent = {
    baz: function() {
        this.foo();
    }
};

与 jQuery 合并

$.extend(child, parent);

我猜为什么这有效

child.baz();
// prints 'bar'

这并不

$('#btn').click(child.baz);
// Uncaught TypeError: this.foo is not a function

谢谢

Answer 1

您需要像这样修改代码:

$('#btn').click(child.baz.bind(child));

您的代码不起作用的原因是，当调用点击处理程序时，this 设置为按钮，而您希望将 this 设置为 child 。在 javascript 中，this 是动态绑定(bind)的，由调用该函数的人决定。因此，在第一种情况 child.baz(); 中，隐式绑定(bind)规则适用，并且 this 设置为 child。在按钮点击回调情况下，使用 bind 会将 this 硬绑定(bind)到 child。

var child = {
  foo: function() {
    console.log('bar');
  }
};

var parent = {
  baz: function() {
    this.foo();
  }
};

$.extend(child, parent);

child.baz();
$('#btn').click(child.baz.bind(child));

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="btn">Click</button>