Function.prototype
的
.call
、.apply
、.bind
方法不适用于函数曾经在 .vue
文件中定义为 Vue 实例的方法。
我正在使用 @vue/cli
项目,使用 vue-cli-service serve
编译。
这是简化的代码示例,可以放在任何 Vue 单文件组件定义中。
methods: {
foo() {
console.log(this);
}
},
created() {
this.foo.call({ bar: 42 });
this.foo.apply({ bar: 42 });
this.foo.bind({ bar: 42 })();
}
控制台的预期输出是三重 { bar: 42 }
,因为这些调用的 this
值已更改。
然而,VueComponent
对象被打印到控制台。
我检查了这些重载方法,使用
this.foo.bind === Function.prototype.bind//返回 true
,
他们没有重载。
可能是Vue使用了Proxy
对象,甚至是模板编译导致的。
简单的 @vue/cli
项目和上面的代码就足以重现问题。
谢谢
最佳答案
Vue 组件方法绑定(bind)到上下文,即组件实例。这可以通过以下方式检查:
function foo() {
foo() {
console.log(this);
}
}
...
methods: { foo },
created() {
this.foo !== foo // true
}
...
this.foo.bind === Function.prototype.bind
检查不具有代表性,因为 this.foo
是常规函数,所以它继承了 bind
。
一旦一个函数被绑定(bind),它就不能被重新绑定(bind)或者被不同的上下文调用:
const context = {};
const boundFoo = (function foo() { return this; }).bind(context);
// boundFoo.call({}) === context
// boundFoo.bind({})() === context
在 JS OOP 中依赖任意动态 this
上下文不是一个好习惯。如果方法需要上下文,则应将其作为参数提供给它:
methods: {
foo(ctx) {
console.log(ctx);
}
},
created() {
this.foo({ bar: 42 });
}
或作为实例属性共享,具体取决于用途。
关于javascript - 如何更改 `this` 调用 Vue 实例方法的上下文?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58401346/