javascript - 如何始终使“this”关键字引用父类(将子方法绑定到父类)?
问题描述
这是我的问题的最简单形式:
class Service1 {
constructor() { this.name = 'service1' }
getThisName() { console.log('Name: ' + (this && this.name)) }
}
const service1 = new Service1();
service1.getThisName() // 'service1' => :)
function mapper(fn, ...params) {
this.name = 'mapper';
// ...params can be parsed or generated here
fn(...params);
}
mapper(service1.getThisName) // undefined => :'(
我知道我可以fn.bind(service1)
在mapper
函数中解决问题,但由于fn
是动态的,我宁愿不这样做。
我曾尝试搜索如何从子方法获取父类,但没有得到任何结果。
如果可能,我希望mapper
能够调用类(或对象)的方法,而不会以一种可读和直接的方式丢失 this 引用。mapper
总是在相同的上下文中调用。
javascript中有没有办法解决这个问题?
我试过的
function mapper(fn, serviceClass) {
fn.bind(serviceClass)();
}
mapper(service1.getThisName, service1) // OK but is not readable and seems hacky
function mapper(serviceClass, fnName) {
serviceClass[fnName]();
}
mapper(service1, 'getThisName') // OK but autocompletion in the IDE don't work
function mapper(fn) {
fn();
}
mapper(service1.getThisName.bind(service1)) // the "best practice" but in my case not enougth readable
真实用例上下文
在实际用例场景中,mapper
称为api2service
. 顾名思义,它与 expressJs 一起使用,将 api 路由映射到服务。这是代码的简化版本:
app.get(
'get/all/users', // api endpoint
api2service(
userService.getAll, // getAll take filter as the first param
['req.query'] // req.query is the filter and is mapped AND parsed as the first param of the service function. Eg: {name: 'blah'}
)
)
该代码重复了很多时间并且总是在相同的上下文中调用,这就是为什么我需要一些可读的东西,而不是严格遵守良好实践。
解决方案
在绑定运算符提案实施之前,您对此无能为力。除了您的尝试之外,您还可以在构建时自动绑定方法(另请参阅https://github.com/sindresorhus/auto-bind):
function autoBind(obj) {
let proto = Object.getPrototypeOf(obj);
for (let k of Object.getOwnPropertyNames(proto)) {
if (typeof proto[k] === 'function' && k !== 'constructor')
obj[k] = proto[k].bind(obj)
}
}
class Service1 {
constructor() {
this.name = 'service1'
autoBind(this);
}
getThisName() { console.log('Name: ' + (this && this.name)) }
}
function mapper(fn) {
fn();
}
let srv = new Service1
mapper(srv.getThisName)
或使用绑定代理:
function Bound(obj) {
return new Proxy(obj, {
get(target, prop) {
let el = target[prop];
if(typeof el === 'function')
return el.bind(target)
}
})
}
class Service1 {
constructor() {
this.name = 'service1'
}
getThisName() { console.log('Name: ' + (this && this.name)) }
}
function mapper(fn) {
fn();
}
let srv = new Service1
mapper(Bound(srv).getThisName)
推荐阅读
- php - 如何将数据插入两个表
- javascript - RTCPeerConnection IOS 12.2 到 Android 7.X
- java - 在私人课程中设置默认出生日期
- visual-studio - 用于打开方法/道具下拉列表的 Visual Studio 热键
- json - 将 Json 文件中的数据加载到 PostgresSql 中会导致:错误“重复键值违反唯一约束 - 已存在。”
- java - 在骆驼的'toD()'路线中使用jamod组件
- css - CSS 显示:桌面和移动设备上的 Flex
- c# - 使用 XUnit 对 MassTransit 消费者进行单元测试
- lua - LuaRocks - 检查最新的可用版本
- sql - 完成初始复制后刷新 Oracle 数据库表