DEV Community

M.Ark
M.Ark

Posted on

Methods in Javascript

Methods are nothing more than properties that hold function values. This is a simple method:

Image description
Usually a method needs to do something with the object it was called on. When a function is called as a method—looked up as a property and immediately called, as in object.method()—the binding called this in its body automatically points at the object that it was called on.

Image description
If you want to pass it explicitly, you can use a function’s call method, which takes the this value as its first argument and treats further arguments as normal parameters.
Since each function has its own this binding, whose value depends on the way it is called, you cannot refer to the this of the wrapping scope in a regular function defined with the function keyword.
Arrow functions are different—they do not bind their own this but can see the this binding of the scope around them. Thus, you can do something like the following code, which references this from inside a local function:

Image description
If I had written the argument to map using the function keyword, the code wouldn’t work.

PROTOTYPES

Watch this.

Image description
I pulled a property out of an empty object. Magic!
A prototype is another object that is used as a fallback source of properties. In addition to their set of properties, most objects also have a prototype.
When an object gets a request for a property that it does
not have, its prototype will be searched for the property, then the prototype’s prototype, and so on.
So who is the prototype of that empty object?
It is the great ancestral prototype, the entity behind almost all objects, Object.prototype

console.log(Object.getPrototypeOf({}) ==
Object.prototype);
// → true
console.log(Object.getPrototypeOf(Object.prototype));
// → null

As you guess, Object.getPrototypeOf returns the prototype of an object.
The prototype relations of JavaScript objects form a tree-shaped structure, and at the root of this structure sits Object.prototype. It provides a few methods that show up in all objects, such as toString, which converts an object to a string representation.
Many objects don’t directly have Object.prototype as their prototype but instead have another object that provides a different set of default properties. Functions derive from Function.prototype, and arrays derive from Array.prototype
console.log(Object.getPrototypeOf(Math.max) ==
Function.prototype);
// → true
console.log(Object.getPrototypeOf([]) ==
Array.prototype);
// → true

Such a prototype object will itself have a prototype, often Object.prototype, so that it still indirectly provides methods like toString.
You can use Object.create to create an object with a specific prototype.

let protoRabbit = {
speak(line) {
console.log(The ${this.type} rabbit says '${line}');
}
};
let killerRabbit = Object.create(protoRabbit);
killerRabbit.type = "killer";
killerRabbit.speak("SKREEEE!");
// → The killer rabbit says 'SKREEEE!'

A property like speak(line) in an object expression is a shorthand way of defining a method. It creates a property called speak and gives it a function as its value.
The “proto” rabbit acts as a container for the properties that are shared by all rabbits. An individual rabbit object, like the killer rabbit, contains properties that apply only to itself—in this case its type—and derives shared properties

Top comments (0)