Javascript function call types

Function.prototype.call()

The call() method calls the function with a given this value and arguments provided individually.

Try it

Syntax

call(thisArg) call(thisArg, arg1) call(thisArg, arg1, /* …, */ argN) 

Parameters

The value to use as this when calling func . If the function is not in strict mode, null and undefined will be replaced with the global object, and primitive values will be converted to objects.

Arguments for the function.

Return value

The result of calling the function with the specified this value and arguments.

Description

Note: This function is almost identical to apply() , except that the function arguments are passed to call() individually as a list, while for apply() they are combined in one object, typically an array — for example, func.call(this, «eat», «bananas») vs. func.apply(this, [«eat», «bananas»]) .

Normally, when calling a function, the value of this inside the function is the object that the function was accessed on. With call() , you can assign an arbitrary value as this when calling an existing function, without first attaching the function to the object as a property. This allows you to use methods of one object as generic utility functions.

Warning: Do not use call() to chain constructors (for example, to implement inheritance). This invokes the constructor function as a plain function, which means new.target is undefined , and classes throw an error because they can’t be called without new . Use Reflect.construct() or extends instead.

Examples

Using call() to invoke a function and specifying the this value

In the example below, when we call greet , the value of this will be bound to object obj , even when greet is not a method of obj .

function greet()  console.log(this.animal, "typically sleep between", this.sleepDuration); > const obj =  animal: "cats", sleepDuration: "12 and 16 hours", >; greet.call(obj); // cats typically sleep between 12 and 16 hours 

Using call() to invoke a function without specifying the first argument

If the first thisArg parameter is omitted, it defaults to undefined . In non-strict mode, the this value is then substituted with globalThis (which is akin to the global object).

.globProp = "Wisen"; function display()  console.log(`globProp value is $this.globProp>`); > display.call(); // Logs "globProp value is Wisen" 

In strict mode, the value of this is not substituted, so it stays as undefined .

"use strict"; globalThis.globProp = "Wisen"; function display()  console.log(`globProp value is $this.globProp>`); > display.call(); // throws TypeError: Cannot read the property of 'globProp' of undefined 

Transforming methods to utility functions

call() is almost equivalent to a normal function call, except that this is passed as a normal parameter instead of as the value that the function was accessed on. This is similar to how general-purpose utility functions work: instead of calling array.map(callback) , you use map(array, callback) , which avoids mutating Array.prototype , and allows you to use map with array-like objects that are not arrays (for example, arguments ).

Take Array.prototype.slice() , for example, which you want to use for converting an array-like object to a real array. You could create a shortcut like this:

const slice = Array.prototype.slice; // . slice.call(arguments); 

Note that you can’t save slice.call and call it as a plain function, because the call() method also reads its this value, which is the function it should call. In this case, you can use bind() to bind the value of this for call() . In the following piece of code, slice() is a bound version of Function.prototype.call() , with the this value bound to Array.prototype.slice() . This means that additional call() calls can be eliminated:

// Same as "slice" in the previous example const unboundSlice = Array.prototype.slice; const slice = Function.prototype.call.bind(unboundSlice); // . slice(arguments); 

Specifications

Browser compatibility

BCD tables only load in the browser

See also

Found a content problem with this page?

This page was last modified on Jun 1, 2023 by MDN contributors.

Your blueprint for a better internet.

MDN

Support

Our communities

Developers

Visit Mozilla Corporation’s not-for-profit parent, the Mozilla Foundation.
Portions of this content are ©1998– 2023 by individual mozilla.org contributors. Content available under a Creative Commons license.

Источник

JavaScript Function Type

Summary: in this tutorial, you’ll learn about the JavaScript Function type, which is the type of all functions in JavaScript.

Introduction to the JavaScript Function type

In JavaScript, all functions are objects. They are the instances of the Function type. Because functions are objects, they have properties and methods like other objects.

Functions properties

Each function has two important properties: length and prototype .

• The length property determines the number of named arguments specified in the function declaration.
• The prototype property references the actual function object.

See the following example:

function add(x, y) < return x + y; > console.log(add.length); // 2 console.log(add.prototype); // Object<>Code language: JavaScript (javascript)

The add() function accepts two arguments x and y . Therefore, the length property returns two.

new.target

Typically, you call a function normally like this:

let result = add(10,20); console.log(result); // 30Code language: JavaScript (javascript)

Also, you can call a function with new keyword as a constructor:

let obj = new add(10,20);Code language: JavaScript (javascript)

ES6 introduced the new.target pseudo-property that allows you to detect whether a function or constructor was called using the new operator.

If a function is called normally, the new.target is undefined . However, if the function is called using the new keyword as a constructor, the new.target return a reference to the constructor.

function add(x, y) < console.log(new.target); return x + y; > let result = add(10, 20); let obj = new add(10, 20); Code language: JavaScript (javascript)

undefined [Function: add]Code language: JavaScript (javascript)

By using the new.target , you can control how a function will be called.

For example, to prevent the add() function from being called with the new keyword as a constructor, you can throw an error by checking the new.target like this:

function add(x, y) < if (new.target) < throw 'The add function cannot be called as a constructor'; > return x + y; > let obj = new add(10, 20); console.log(obj);Code language: JavaScript (javascript)

Function methods: apply, call, and bind

A function object has three important methods: apply() , call() and bind() .

The apply() and call() methods

The apply() and call() methods call a function with a given this value and arguments.

The difference between the apply() and call() is that you need to pass the arguments to the apply() method as an array-like object, whereas you pass the arguments to the call() function individually. For example:

let cat = < type: 'Cat', sound: 'Meow' >; let dog = < type: 'Dog', sound: 'Woof' >; const say = function (message) < console.log(message); console.log(this.type + ' says ' + this.sound); >; say.apply(cat, ['What does a cat say?']); say.apply(dog, ['What does a dog say?']);Code language: JavaScript (javascript)

What does a cat sound? Cat says Meow What does a dog sound? Dog says Woof

First, declare two objects cat and dog with two properties:

let cat = < type: 'Cat', sound: 'Meow' >; let dog = < type: 'Dog', sound: 'Woof' >;Code language: JavaScript (javascript)

Second, define the say() function that accepts one argument:

const say = function (message) < console.log(message); console.log(this.type + ' says ' + this.sound); >;Code language: JavaScript (javascript)

Third, call the say() function via the apply() method:

say.apply(cat, ['What does a cat say?']);Code language: CSS (css)

In this example, the first argument of the apply() method is the cat object. Therefore, the this object in the say() function references the cat object.

Fourth, call say() function and pass the dog object:

say.apply(dog, ['What does a dog say?']);Code language: CSS (css)

In this example, the this in the say() function reference the dog object.

The call() method like the apply() method except for the way you pass the arguments to the function:

say.call(cat, 'What does a cat say?'); say.call(dog, 'What does a dog say?');Code language: JavaScript (javascript)

The bind() method

The bind() method creates a new function instance whose this value is bound to the object that you provide. For example:

First, define an object named car :

let car = < speed: 5, start: function( ) < console.log('Start with ' + this.speed + ' km/h'); > >; Code language: JavaScript (javascript)

Then, define another object named aircraft :

let aircraft = < speed: 10, fly: function( ) < console.log('Flying'); > >;Code language: JavaScript (javascript)

The aircraft has no start() method. To start an aircraft, you can use the bind() method of the start() method of the car object:

let taxiing = car.start.bind(aircraft);Code language: JavaScript (javascript)

In this statement, we change the this value inside the start() method of the car object to the aircraft object. The bind() method returns a new function that is assigned to the taxiing variable.

Now, you can call the start() method via the taxiing variable:

It will show the following message:

Start with 10 km/hCode language: JavaScript (javascript)

The following uses the call() method to call the start() method on the aircraft object:

car.start.call(aircraft);Code language: CSS (css)

As you can see, the bind() method creates a new function that you can execute later while the call() method executes the function immediately. This is the main difference between the bind() and call() methods.

Technically, the aircraft object borrows the start() method of the car object via the bind() , call() or apply() method.

For this reason, the bind() , call() , and apply() methods are also known as borrowing functions.

Summary

• All functions are instances of the Function type, which are the objects that have properties and methods.
• A function has two important properties: length and prototype .
• A function also has three important methods: call() , apply() , and bind() .

Источник