diff --git a/misc_docs/syntax/decorator_this.mdx b/misc_docs/syntax/decorator_this.mdx new file mode 100644 index 000000000..1a443dfad --- /dev/null +++ b/misc_docs/syntax/decorator_this.mdx @@ -0,0 +1,56 @@ +--- +id: "this-decorator" +keywords: ["this", "decorator"] +name: "@this" +summary: "This is the `@this` decorator." +category: "decorators" +--- + +The `@this` decorator may be used to bind to an **external** callback function that require access to a `this` context. + +### Example + + + +```res +type counter + +// Function to create an empty object +@new external create: unit => counter = "Object" + +// Functions that set and get a "value" property +@set external setValue: (counter, int) => unit = "value" +@get external getValue: counter => int = "value" + +// Functions that create "increment" and "decrement" function properties which have access to "this" +@set external setIncrement: (counter, @this (counter, int) => unit) => unit = "increment" +@set external setDecrement: (counter, @this (counter, int) => unit) => unit = "decrement" + +// Use the functions above to create a counter instance +let counter = create() +setValue(counter, 0) +setIncrement(counter, @this (me, amount) => me->setValue(me->getValue + amount)) +setDecrement(counter, @this (me, amount) => me->setValue(me->getValue - amount)) +``` + +```js +var counter = new Object() + +counter.value = 0 + +counter.increment = function (amount) { + var me = this + me.value = (me.value + amount) | 0 +} + +counter.decrement = function (amount) { + var me = this + me.value = (me.value - amount) | 0 +} +``` + + + +### References + +* [Modeling `this`-based Callbacks](/docs/manual/latest/bind-to-js-function#modeling-this-based-callbacks)