What does this Javascript syntax mean?

Question

I am working with ROS structure and facing some problem with debugging, and I found this snippet:

ros.visualization.GLNode = Class.extend({
    init: function () {
        this.meshGroupIDs = [ ];
        this.matrix       = sglIdentityM4();
        this.children     = [ ];
    },
});

What do these lines mean?

:: Is it trying to load some files? :: 是否试图加载一些文件？ What does this . represent?

:: What does this do? :: 这是做什么的？ Is it trying to extend the class, and if so then which one? In my way it will be GLnode .

:: What does this function mean in js? :: 这个 function 在 js 中是什么意思？ Is it a keyword? If not then why does everyone use it in onloadbody or window.onload() ?

Answer 1

ros.visualization.GLNode = Class.extend({

This is the definition of a new class (or type of object) using some sort of javascript library that has the function Class.extend() in it.

---

init: function () {

This is the definition of an attribute on the new class called "init". The type of the attribute is "function" which means it works like a method and can be called.

---

this.meshGroupIDs = [ ];

This is the definition of a member variable on an object of this class and initializes it to an empty array.

---

this.matrix = sglIdentityM4();

This is the definition of another member variable on an object of thisclass and initializes it to the return value from the sglIdentityM4() function call.

---

this.children = [ ];

This is the definition of a member variable on an object of this class and initializes it to an empty array.

---

"this" is a reference to the local object and is how you address instance variables of the object you are in.

Answer 2

ros.visualization.GLNode

The . operator lets you access object properties, so ros.visualization.GLNode =... means that there is an object called ros , with a visualization property, and you are assigning something to the GLNode property of that object.

Class.extend

Class.extend isn't a built-in part of JavaScript, so without knowing how it was defined, it's impossible to know exactly what it's doing. I can guess from the name and how it's used that it creates a new "class" or extends an existing one. The code is passing an object literal (the {... } part) that tells it how to define the class.

this.matrix

this is the context that a function was called in. When you call a function on an object (in this case, someGLNodeObject.init() ), this gets set to that object. So this.matrix = sglIdentityM4(); is setting the matrix property of the current object.

init: function()

Defines a function in the object literal called init . The Class.extend function presumably uses the init function like a constructor to initialize new GLnode instances.