Shulou(Shulou.com)05/31 Report--

Today, the editor will share with you the relevant knowledge points of case analysis of the role of JavaScript method, the content is detailed, and the logic is clear. I believe most people still know too much about this knowledge, so share this article for your reference. I hope you can get something after reading this article. Let's take a look.

1. What is the method?

Define and call a regular function:

Function greet (who) {return `Hello, ${who}! `;} greet ('World'); / / = >' Hello, Worldwide'

The function keyword is followed by its name, argument, and body: function greet (who) {...} for general function definition.

Greet ('World') is a regular function call. The function greet ('World') accepts the data in the parameters.

What if who is a property of an object? To facilitate access to the properties of an object, we can attach a function to the object, in other words, create a method.

We use greet () as a method of object world:

Const world = {who: 'World', greet () {return `Hello, ${this.who}! `;}} world.greet (); / / = >' Hello, Worldwide'

Greet () {...} is now a method belonging to the world object, and world.greet () is the method call.

Inside the greet () method, this points to the object to which the method belongs-world, which is why the word property can be accessed by this.who.

Note that this is also called context.

Context is optional

In the previous example, we used this to access the object to which the method belongs, but JS did not force the method to use this.

Therefore, you can use an object as a namespace for a method:

Const namespace = {greet (who) {return `Hello, ${who}! `;}, farewell (who) {return `Good bye, ${who}!`;}} namespace.greet ('World'); / / = >' Hello, Worldwide' Namespace.farewell ('World'); / / = >' Good bye, Worldwide'

Namespace is an object that contains two methods: namespace.greet () and namespace.farewell ().

two。 Object literal method

As mentioned earlier, we can define methods directly in the literals of objects.

Const world = {who: 'World', greet () {return `Hello, ${this.who}! `;}}; world.greet (); / / = >' Hello, Worldwide'

Greet () {.... } is the method defined in the object, and this type of definition is called shorthand method definition (available from ES2015). The syntax of the method definition is also longer:

Const world = {who: 'World', greet: function () {return `Hello, ${this.who}! `;}} world.greet (); / / = >' Hello, Worldwide'

Greet: function () {...} is a method definition. Note the additional colons and function keywords.

Dynamic add method

Method is just a function that is stored on the object as a property. Therefore, we can dynamically add methods to the object:

Const world = {who: 'World', greet () {return `Hello, ${this.who}! `;}}; / / An a new property holding a function world.farewell = function () {return `Good bye, ${this.who}!`;} world.farewell (); / / = >' Good bye, WorldAccess3. Class method

In JavaScript, the category syntax defines a category that will be used as a template for its instance.

Classes can also have methods:

Class Greeter {constructor (who) {this.who = who;} greet () {console.log (this = myGreeter); / / logs true return `Hello, ${this.who}! `;}} const myGreeter = new Greeter ('World'); myGreeter.greet (); / / = >' Hello, Worldwide'

Greet () {...} is a method defined within the class.

Every time we create an instance of a class using the new operator (for example, myGreeter = new Greeter ('World')), we can call the method on the created instance.

How myGreeter.greet () calls the method greet () on the instance. The important thing is that the this inside the method is equal to the instance itself: this is equal to the myGreeter inside the greet () {...} method.

4. How to call a method

4.1 method call

What is particularly interesting about JavaScript is that defining a method on an object or class is only half the job done. In order to maintain the context of the method, we must make sure that the method is called as a method.

Let's see why it's important.

Recall the world object with the greet () method. Let's test what the is value is when greet () is called as a method and a regular function:

Const world = {who: 'World', greet () {console.log (this = world); return `Hello, ${this.who}! `;}; / / method call world.greet (); / / logs true const greetFunc = world.greet; / / regular function call greetFunc (); / / = > logs false

World.greet () is a method call. The object world, followed by a dot, and finally the method itself that causes the method to be called.

GreetFunc and world.greet are the same function. But when called as a regular function greetFunc (), this in greet () is not equal to the world object, but the global object (window in the browser)

We name expressions such as greetFunc = world.greet as methods that separate a method from its object. When the detached method greetFunc () is called, this equals the global object.

Separating a method from its object can take a different form:

/ / method separation, this is lost! Const myMethodFunc = myObject.myMethod; / / method detach, this is lost! SetTimeout (myObject.myMethod, 1000); / / method separation, this is lost! MyButton.addEventListener ('click', myObject.myMethod) / / method separation, this is missing! My React Button

To avoid losing the context of the method, be sure to use the method call world.greet () or manually bind the method to the object greetFunc = world.greet.bind (this).

4.2 indirect function calls

As mentioned in the previous section, regular function calls have resolved the this to a global object. Can regular functions customize this values through methods?

Welcome to the following indirect function calls:

MyFunc.call (thisArg, arg1, arg2,..., argN)

MyFunc.apply (thisArg, [arg1, arg2,..., argN])

The methods available on the function object.

The first argument to myFunc.call (thisArg) and myFunc.apply (thisArg) is the context of the indirect call (the this value). In other words, we can manually specify the value of this inside the function.

For example, let's define greet () as a regular function and an object alien with the who property:

Function greet () {return `Hello, ${this.who}! `;} const aliens = {who: 'Aliens'}; greet.call (aliens); / / = >' Hello, Aliensi' Greet.apply (aliens); / / = > 'Hello, aliens'

Greet.call (aliens) and greet.apply (aliens) are both indirect method calls. The value in the greet () function is equal to the aliens object.

4.3 binding function calls

Finally, there is a third way to make a function as a method call on an object. We can bind the function to have a specific context.

You can use special methods to create binding functions

Const myBoundFunc = myFunc.bind (thisArg, arg1, arg2,..., argN)

The first argument to myFunc.bind (thisArg) is the context to which the function is bound.

For example, let's reuse greet () and bind it to the aliens context

Function greet () {return `Hello, ${this.who}! `;} const aliens = {who: 'Aliens'}; const greetAliens = greet.bind (aliens); greetAliens (); / / = >' Hello, Aliens'

Calling greet.bind (aliens) creates a new function that binds this to the aliens object.

Similarly, you can use binding functions to simulate method calls. When the binding function greetAliens () is called, this equals aliens in that function.

5. Arrow function as a method

The arrow function is not recommended as a method for the following reasons.

We define the greet () method as an arrow function:

Const world = {who: 'World', greet: () = > {return `Hello, ${this.who}! `;}}; world.greet (); / / = >' Hello, undefined'

Unfortunately, world.greet () returns' Hello, undefined! 'instead of the' Hello, Worldword'we expected.

The problem is that the this inside the arrow function is equal to the this of the external scope. At this point, however, the this we want is a world object.

The internal this of the above arrow function is equal to the global object: window. Hello, ${this.who}!' The result is Hello, ${windows.who}!, and finally 'Hello, undefined'.

I like arrowheads, but they can't be used as methods.

6. Summary

This method is a function that belongs to the object. The this of the method is equal to the object to which the method belongs.

You can also define methods on a class. The method of this class is internally equal to the instance. What is unique to JS is that it is not enough to define a method. We also need to make sure that method calls are used. In general, a method call has the following syntax

/ / Method invocation myObject.myMethod ('Arg 1,' Arg 2')

Interestingly, in JS, we can define a regular function that does not belong to an object, and then call that function as a method of an arbitrary object. You can do this using indirect function calls or binding functions to a specific context

/ / Indirect function invocation myRegularFunc.call (myObject, 'Arg 1 examples,' Arg 2'); myRegularFunc.apply (myObject, 'Arg 1 examples,' Arg 2'); / / Bound function const myBoundFunc = myRegularFunc.bind (myObject); myBoundFunc ('Arg 1 examples,' Arg 2'). These are all the contents of this article, thank you for reading! I believe you will gain a lot after reading this article. The editor will update different knowledge for you every day. If you want to learn more knowledge, please pay attention to the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.