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

this是事件处理程序中的DOM元素。您可以使用$.proxy()将this设置为函数调用中的对象

var child = {
    foo: function() {
        console.log('bar');
    }
};

var parent = {
    baz: function() {
        this.foo();
    }
};

$.extend(child, parent);

$("#btn").click($.proxy(child.baz, child));

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

Answer 2

你需要像这样修改代码：

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

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

＆＃13;

var child = {
  foo: function() {
    console.log('bar');
  }
};

var parent = {
  baz: function() {
    this.foo();
  }
};

$.extend(child, parent);

child.baz();
$('#btn').click(child.baz.bind(child));

＆＃13;

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

＆＃13;

在jQuery扩展对象中从parent调用child方法

2 个答案: