[This,call,apply usage of Turn]js

Source: Internet
Author: User

(a) about this

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 thecurrent 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, under normal circumstances, the this in the function is the window JS Code
    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.
(ii) on the call
1. If we call the function, we want the this in the function to represent another object, not the object of the current function. Is there any way to do it? Then you have to use call and apply (for beginners like me, these two things are disgusting)
Usually we call a function that is called directly in the following form
[Invoke] Function name (); DoSomething ();
In fact, we can also use other methods, such as Call the word, is called the meaning, we need to use it here.
Or take the dosomething function as an example:
Chinese: Name of function. Call ();
English: Dosomething.call ();
The code is as follows:

JS Code
    1. var test=
    2. function dosomething () {  
    3.     alert (this.test);      //popup   "Tony";   
    4. }  
    5.   
    6. dosomething ();  //   [call ]  dosomething ();   
    7. Dosomething.call ();  //  function. Call ()   


Now that we've just made the call to the function and haven't changed this, how do you change this? Call is going to be a power at this time.
Originally the This in the DoSomething function is the window, we execute the following sentence.
Dosomething.call (an object);
This time in the dosomething, this becomes an "object", see the following example:

JS Code
  1. var test="Tony";
  2. var myobj={
  3. Test: "Tom"
  4. };
  5. function dosomething () {
  6. Alert (this.test);
  7. }
  8. Toolmao.call (); //eject window.test, i.e. "Tony"
  9. Toolmao.call (myobj); //At this time, this point in the DoSomething function points to myobj,
  10. //So the pop-up is myobj.test that "Tom"


2. What if there are parameters in it? Look at the code

JS Code
  1. var test="Tony";
  2. var myobj={
  3. Test: "Tom"
  4. };
  5. function dosomething (name, age) {
  6. Alert (this.test + ":" + name + age);
  7. }
  8. DoSomething ("Tony", at a); Normal call result tony:tony23
  9. Dosomething.call (MyObj,"Tony",); Call result tom:tony23


The above code, we can see, compared to ordinary calls, call is only one more to specify the parameters of this, what is called? That's what you do!! Have you learned it now?
(c) About apply
All know the use of call, apply is actually a meaning. It's just a different form of calling parameters.
Call is a calling parameter, and apply is an array called. Or use the same example above:

JS Code
  1. var test="Tony";
  2. var myobj={
  3. Test: "Tom"
  4. };
  5. function dosomething (name, age) {
  6. Alert (this.test + ":" + name + age);
  7. }
  8. DoSomething ("Tony", at a); Normal call result tony:tony23
  9. Dosomething.call (MyObj,"Tony",); Call result tom:tony23
  10. Dosomething.apply (object,["Tony", [+]); The result of the apply invocation is the same as call


[This,call,apply usage of Turn]js

Related Article

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.