This example in JavaScript learn about the basics and how it works _

Source: Internet
Author: User

The working principle of this

If a function is invoked as a method of an object, then this will be assigned as the object.

Copy Code code as follows:

var parent = {
Method:function () {
Console.log (this);
}
};

Parent.method ();
<-Parent


Note that this behavior is very "fragile", and if you get a reference to a method and call it, then the value of this is not parent, but the window global object. This is confusing to most developers.

Copy Code code as follows:

Thisclowncar ();
<-Window

Change this

The call,. Apply, and. Bind methods are used to manipulate the way a function is invoked, helping us define the value of this and the parameter values passed to the function.

Function.prototype.call can have any number of arguments, the first parameter is assigned to this, and the rest is passed to the calling function.

Copy Code code as follows:

Array.prototype.slice.call ([1, 2, 3], 1, 2)
<-[2]

Function.prototype.apply behaves like. Call, but the argument it passes to a function is an array, not any argument.

String.prototype.split.apply (' 13.12.02 ', ['. '])
<-[' 13 ', ' 12 ', ' 02 ']

Function.prototype.bind creates a special function that will always use the parameter passed to. Bind as the value of this, as well as the ability to allocate part of the parameters and create the Curride version of the original function.

Copy Code code as follows:

var arr = [1, 2];
var add = Array.prototype.push.bind (arr, 3);

Effectively the same as Arr.push (3)
Add ();

Effectively the same as Arr.push (3, 4)
Add (4);

Console.log (arr);
<-[1, 2, 3, 3, 4]


This in the scope chain

In the following example, this will not remain unchanged in the scope chain. This is a flaw in the rules and often creates confusion for amateur developers.

Copy Code code as follows:

function Scoping () {
Console.log (this);

return function () {
Console.log (this);
};
}

Scoping () ();
<-Window
<-Window

There is a common way to create a local variable to keep a reference to this, and you cannot have the same variable in the child scope. A variable with the same name in a child scope overrides the reference to this in the parent scope. http://www.cnblogs.com/sosoft/

Copy Code code as follows:

function retaining () {
var self = this;

return function () {
Console.log (self);
};
}

Retaining () ();
<-Window

Unless you really want to use this of the parent scope as well as the current this value, for some inexplicable reason, I prefer the method used. Bind function. This can be used to specify the this of the parent scope to the child scope.

Copy Code code as follows:

function bound () {
return function () {
Console.log (this);
}.bind (this);
}

Bound () ();
<-Window

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.