Call and apply;this; closures

Source: Internet
Author: User

For the two native JS method, has been a little around, hazy feeling. Now a detailed comb:

Both are based on the idea of inheritance,

obj.call(thisObj, arg1, arg2, ...);obj.apply(thisObj, [arg1, arg2, ...]);

Both have the same effect, which is to bind obj (this) to Thisobj, when Thisobj has the properties and methods of obj. Or, Thisobj "inherits" the properties and methods of obj.

The only difference is that apply accepts an array parameter, and call accepts a continuous parameter.

Of course, you can also bind specific properties or methods to the target.   such as: BlackCat.say.call (Whitedog) original Whitedog does not have say method, and Blackcat has, all through call to bind say method to Whitedog. See a good way to remember a Netizen's method:

The cat eats the fish, the dog eats the meat, Ultraman plays the small monster.

A tengu wants to eat fish.

Cat. Eat fish. Call (dog, fish)

The dog will eat the fish.

The cat has become a sperm, want to play monsters

Ultraman. Play Little Monsters. Call (cat, Little Monster)

Just remember that.

For this, cite an example that is easier to understand, https://www.cnblogs.com/zwyyouho-1/p/4974787.html

First of all about this I want to say a word, this sentence remember the use of this and you will almost understand: this refers to the current function of the object. This sentence may be more around, I will cite a lot of examples and this sentence echoes! (see below)
1. First look at the following code, define a function, play this,

JS Code
    1. function dosomething () {
    2. Alert (this);
    3. }
    4. DoSomething ();

I am debugging in Firefox, so the result of the return is [Object Window].
So what is this [Object Window], exactly? Take a look at the following code
JS Code
    1. function dosomething () {
    2. Alert (This===window);
    3. }
    4. DoSomething ();

See the Popup is true, that is, in this normal case, this is actually the window
So, when we define a global variable, we can
var test= "Tony";
can also
window["Test"]= "Tony";
The following example further illustrates that, normally, this is the WINDOWJS code in the function.
    1. var test="Tony";
    2. function dosomething () {
    3. Alert (this.test);  //eject "Tony";
    4. alert (window.test);  //eject "Tony";
    5. }
    6. DoSomething ();

First echoes: With the above examples, I would say that this refers to the window object of his current function dosomething (). As the name implies this.test nature is equal to window.test. The same is true.

2. I will give another example of closure, but here I will not explain what is a closure, just talk about the use of this, tomorrow I'll learn to close the bag, today first when he is an unknown, to learn this tool.
See this example:

JS Code
  1. var name ="the window"; //Create a global variable name
  2. var object = { //creates another object (there are many ways to create an object)
  3. Name:"My Object", //Create a Name attribute (property is reference non-function)
  4. DoSomething: Function() { //Creates a DoSomething method (by referencing a function)
  5. return function () { //This dosomething method returns an anonymous function
  6. return this.name; //This anonymous function returns this.name
  7. };
  8. }
  9. };
  10. Alert (Object.dosomething () ());
  11. //Due to a function returned by this dosomething method, this function can be called.


The main explanation of this code is that I have been in the following, the main thing to say is: This code returns the result is "the window", rather than I expected "my Object", not in front of said? This refers to the object of the current function, but why isn't it here? In fact, because of the characteristics of closures, because this anonymous function constitutes a closure, so what he holds is the entire variable object, which is the Window object. Let's not say why, I will use this example when I learn to close the bag tomorrow, and I'll accept it first.
So what do you do to get the results back to "My Object"? Or that sentence this refers to the current function of the object, then the problem is simple, that is, let this in the DoSomething method, and not the anonymous function is not OK? Modify the code as follows:

JS Code
  1. var name ="the window";
  2. var object = {
  3. Name:"My Object",
  4. DoSomething:function () {
  5. var abc = this ;
  6. return function () {
  7. return abc.name;
  8. };
  9. }
  10. };
  11. Alert (Object.dosomething () ());


Second echo: Now look at the Code Red part of the modification, this is not referring to the current dosomething () function of the object? Then the output is naturally "My Object".
Through the two echoes, is not the feeling has a certain understanding of this, in fact, this used to a lot of places, and will slowly talk about, for example, in jquery this still refers to the current function of the object.

About closures, next time to learn, see too much code today, the brain a bit mushy. Https://www.cnblogs.com/yunfeifei/p/4019504.html

Call and apply;this; closures

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.