Detailed explanation of the instance of calling Kotlin method in JavaScript

Detailed explanation of the instance of calling Kotlin method in JavaScript

The Kotlin compiler generates normal JavaScript classes, functions and properties that can be used freely in JavaScript code. There are some subtle things you should remember, though.

Isolate declarations with standalone JavaScript

To prevent corruption of global objects, Kotlin creates an object containing all Kotlin declarations in the current module. So if you name the module myModule, then all declarations can be available in JavaScript via the myModule object. For example:

fun foo() = "Hello"

You can call it like this in JavaScript:

alert(());

This does not work when you compile a Kotlin module into a JavaScript module (see more information about thisJavaScript modules). In this case, there will be no wrapper object, but the declaration will be exposed as the corresponding type of JavaScript module. For example, for the CommonJS scenario, you should write:

alert(require('myModule').foo());

Package structure

Kotlin exposes its package structure to JavaScript, so unless you define a declaration in the root package, you must use a fully qualified name in JavaScript. For example:

package 

fun foo() = "Hello"

You can call it like this in JavaScript:

alert(());

@JsName annotation

In some cases (for example, to support overloading), the Kotlin compiler modifies the names of functions and attributes generated in JavaScript code. To control the generated name, you can use the @JsName annotation:

// Module "kjs"class Person(val name: String) {
  fun hello() {
    println("Hello $name!")
  }

  @JsName("helloWithGreeting")
  fun hello(greeting: String) {
    println("$greeting $name!")
  }
}

Now you can use this class in JavaScript in the following ways:

var person = new ("Dmitry");  // Reference to module "kjs"();             // Output "Hello Dmitry!"("Servus");   // Output "Servus Dmitry!"

If we do not specify the @JsName annotation, the name of the corresponding function will contain the suffix calculated from the function signature, such as hello_61zpoe$.

Note that the Kotlin compiler does not apply this modification to the external declaration, so you don't have to use @JsName on it. Another example worth noting is non-external classes inherited from external classes. In this case, any overwritten function will not be modified.

The argument to @JsName needs to be a constant string literal, which is a valid identifier. Any attempt to pass a non-identifier string to @JsName, the compiler will report an error. The following example produces a compile-time error:

@JsName("new C()")  // An error occurred hereexternal fun newC()

Representing Kotlin type in JavaScript

1. Except the Kotlin number type mapped to JavaScript Number.
2. Map to JavaScript Number to represent character code.
3. Kotlin cannot distinguish numeric types (except) at runtime, i.e. the following code works:

fun f() {
  val x: Int = 23
  val y: Any = x
  println(y as Float)
}

1. Kotlin retains the overflow semantics of , , , and .
2. There are no 64-bit integers in JavaScript, so they are not mapped to any JavaScript objects, which are simulated by a Kotlin class.
3. Map to JavaScript String.
4. Map to JavaScript Object (i.e. new Object(), {}, etc.).
5. Map to JavaScript Array.
6. Kotlin collections (i.e. List, Set, Map, etc.) are not mapped to any specific JavaScript type.
7. Map to JavaScript Error.
8. Kotlin retains lazy object initialization in JavaScript.
9. Kotlin does not implement lazy initialization of top-level properties in JavaScript.

Thank you for reading, I hope it can help you. Thank you for your support for this site!