Kotlin是否支持传递内联函数？KotlinJS简化Vue this调用问询

嘿，这个场景我太熟悉了！先直接回答你的核心问题：Kotlin里内联函数本身不能直接作为参数传递——因为内联函数在编译时会被直接展开到调用处，不会生成真正的函数对象。但咱们可以利用内联函数的特性，解决你在Vue组件里写thisAs太繁琐的问题，而且完全符合Vue要求生成硬编码this.username的限制。

针对你不想反复写thisAs<MyVueComponent.Data>().username的痛点，给你两个更优雅的方案：

方案1：简化版的类型化this访问 #

先封装一个更简洁的内联属性替代thisAs：

inline val <reified T> jsThis: T
    get() = js("this")

之后用的时候就可以写成：

this.click = { jsThis<MyVueComponent.Data>().username = "changed" }

比原来的写法少敲几个字符，而且语义更清晰。

方案2：利用带接收者的lambda彻底简化 #

如果想彻底摆脱每次写类型后的.，可以用带接收者的内联函数：

inline fun <reified T> withJsThis(block: T.() -> Unit) {
    block(js("this") as T)
}

这样在处理事件的时候，直接把逻辑放在lambda里，内部可以直接访问属性：

this.click = {
    withJsThis<MyVueComponent.Data> {
        username = "changed"
        // 还可以直接调用组件的方法，比如 this.submit() 直接写成 submit()
    }
}

这个写法编译后生成的JS代码就是原生的this.username = "changed"，完美适配Vue的内部逻辑要求，而且代码清爽太多！

补充关于内联函数的小细节 #

如果你之后真的需要传递内联函数的lambda参数给其他非内联函数，记得用crossinline修饰lambda参数，它会告诉编译器这个lambda不会被提前返回，这样就能安全地在非内联环境里使用了。不过在咱们这个Vue的场景里，完全不需要这一步，因为咱们的内联函数只是用来封装js("this")的逻辑，直接展开后就生成了原生代码。

内容的提问来源于stack exchange，提问作者Freewind