Shulou(Shulou.com)06/03 Report--

This article mainly explains "what are the six fronts and sides of this". The explanation in the article is simple and clear, easy to learn and understand. Please follow the editor's train of thought to study and learn "what are the six fronts and sides of this".

Object method, "this"

Objects are typically created to represent real-world entities, such as users and orders:

Let user = {name: "John", age: 30}

And, in the real world, users can do something: pick something from the shopping cart, log in, log out, and so on.

In JavaScript, an action is represented by a function in an attribute.

2. Examples of methods

At first, let's teach user to say hello:

Let user = {name: "John", age: 30}; user.sayHi = function () {alert ("Hello!");}; user.sayHi (); / / Hello!

Here we create a function using a function expression and assign it to the object's user.sayHi property.

Then we call it like user.sayHi () like this. Users can talk now!

A function that is an object property is called a method.

So, here we get the sayHi method of the user object.

Of course, we can also use pre-declared functions as methods, like this:

Let user = {/ /...}; / / first, declare the function function sayHi () {alert ("Hello!");}; / / then add it as a method to user.sayHi = sayHi; user.sayHi (); / / Hello!

* object oriented programming *

When we use objects to represent entities in code, it is called object-oriented programming, referred to as "OOP" for short.

OOP is a great knowledge and an interesting science in itself. How to choose the right entity? How to organize the interaction between them? This is architecture, and there are many books on it, such as "Design patterns: the Foundation of Reusable object-oriented Software" by E. Gamma, R. Helm, R. Johnson and J. Vissides, and "object-oriented Analysis and Design" by G. Booch.

III. Abbreviation of the method

In object literals, there is a shorter syntax for (declaring) methods:

/ / these objects work the same way: user = {sayHi: function () {alert ("Hello");}}; / / method shorthand looks better, right? Let user = {sayHi () {/ / same as "sayHi: function ()" alert ("Hello");}}

As shown above, we can omit "function" and just write sayHi ().

To tell you the truth, this expression is still a little different. There are some subtle differences in object inheritance (which will be described later), but they are not important for now. In almost all cases, shorter syntax is preferred.

4. "this" in the method

In general, an object method needs to access the information stored in the object to complete its work.

For example, the code in user.sayHi () might need to use the name attribute of user.

To access the object, you can use the this keyword in the method.

The value of this is the object before the point, that is, the object that calls the method.

Give an example.

Let user = {name: "John", age: 30, sayHi () {/ / "this" refers to the "current object" alert (this.name);}}; user.sayHi (); / / John

Here, during the execution of user.sayHi (), the value of this is user.

Technically, it can also be referenced by an external variable name without using this:

Let user = {name: "John", age: 30, sayHi () {alert (user.name); / / "user" instead of "this"}}

…… But such code is unreliable. If we decide to copy user to another variable, such as admin = user, and assign another value to user, it will access the wrong object.

The following example confirms this:

Let user = {name: "John", age: 30, sayHi () {alert (user.name); / / cause error}}; let admin = user; user = null; / / rewrite to make it more obvious admin.sayHi (); / / TypeError: Cannot read property 'name' of null

If we replace user.name with this.name in alert, the code will work properly.

5. "this" is not restricted

In JavaScript, the this keyword is different from that in most other programming languages. This in JavaScript can be used for any function, even if it is not a method of an object.

There are no syntax errors in the following code:

Function sayHi () {alert (this.name);}

The value of this is calculated when the code is running, depending on the code context.

For example, here the same function is assigned to two different objects with different "this" values in the call:

Let user = {name: "John"}; let admin = {name: "Admin"}; function sayHi () {alert (this.name);} / / use the same function user.f = sayHi; admin.f = sayHi; / / the two calls have different this values / / the "this" inside the function is the object user.f () in front of the dot symbol. / / John (this = = user) admin.f (); / Admin (this = = admin) admin ['f'] (); / / Admin (it doesn't matter if you use dot symbols or square brackets syntax to access this method. )

The rule is simple: if obj.f () is called, this is obj during the f function call. So in the above example, this is first user, then admin.

Call: this = = undefined without an object

We can even call a function without an object:

Function sayHi () {alert (this);} sayHi (); / / undefined

In this case, the this value in strict mode is undefined. If we try to access this.name, we will get an error.

In the case of non-strict mode, this will be the global object (window in the browser, which we will learn later in the chapter on global objects). This is a historical behavior that has been fixed by "use strict".

Usually this kind of call is an error in the program. If there is a this inside a function, it usually means that it is called in the object context.

Consequences of unbinding this

If you often use other programming languages, you may be used to the concept of "binding this", that is, methods defined in an object always have a this that points to that object.

In JavaScript, this is "free", its value is calculated at the time of the call, and its value does not depend on the location of the method declaration, but on what object is in front of the "dot".

The concept of evaluating this at run time has both advantages and disadvantages. On the one hand, functions can be reused in different objects. On the other hand, greater flexibility makes it more likely to make mistakes.

Our position here is not to judge whether the design of a programming language is good or bad. But to understand how to use it, how to seek advantages and avoid disadvantages.

6. The arrow function does not have its own "this"

The arrow functions are something special: they don't have their own this. If we reference the this,this value in such a function, it depends on the external "normal" function.

For example, the this used by arrow () here comes from the external user.sayHi () method:

Let user = {firstName: "Ilya", sayHi () {let arrow = () = > alert (this.firstName); arrow ();}}; user.sayHi (); / / Ilya

This is a feature of the arrow function, which is useful when we don't want a separate this, but instead want to get it from an external context. In the following chapter on in-depth understanding of arrowhead functions, we will delve into arrowhead functions.

Thank you for your reading. The above is the content of "what are the six fronts and sides of this". After the study of this article, I believe you have a deeper understanding of what the six fronts and sides of this are, and the specific use needs to be verified in practice. Here is, the editor will push for you more related knowledge points of the article, welcome to follow!

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.