Uncover The riddle in JavaScript

uncover The riddle in JavaScript

In this article I want to clarify this in JavaScript and hope to help you understand how this works. Learning this as a JavaScript programmer is a great help to your development and can be said to outweigh the disadvantages. This article is inspired by my recent work-the final chapter of my upcoming book--javascript Application design (Note: Now you can buy an earlier version), I'm writing about how scope works.

Paradoxically, this may be your feeling about this:

It's crazy, isn't it? In this short article, I aim to uncover its mystery.

How this works

If a function is called as a method of an object, then this is assigned to this object.

var parent = {    method:function () {        console.log (this);    }}; Parent.method ();//<-Parent

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

var parentless = parent.method;parentless ();//<-Window

The bottom line is that you should look at the call chain to see if the called function is an object's property or its own. If it is called as a property, then the value of this will become an object of that property, otherwise the value of this will be assigned as a global object or window. If in strict mode, the value of this will be undefined.

When used as a constructor, this is assigned as the created instance object when using the New keyword.

function Thisclowncar () {  console.log (this);} New Thisclowncar ();//<-Thisclowncar {}

Note that in this case there is no way to identify whether a function should be used as a constructor, thus omitting the result of the New keyword this will be a global object, as we saw above without the example of parent invocation.

Thisclowncar ();//<-Window

Tampering with this

The. Call,.apply and. Bind methods are used to manipulate the way the function is called, 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.

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

The behavior of Function.prototype.apply is similar to. Call, but the argument it passes to the function is an array rather than an arbitrary parameter.

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, and the ability to assign partial parameters to create a currided version of the original function.

var arr = [1, 2];var add = Array.prototype.push.bind (arr, 3);//effectively the same as Arr.push (3) Add ();//effectively th E 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 confuses the amateur developer.

function scoping () {  console.log (this);  return function () {    console.log (this);}  ;} Scoping () ();//<-window//<-Window

A common approach is to create a local variable that holds a reference to this and cannot have a same-life variable in a child scope. A variable with the same name in the child scope overrides the reference to this in the parent scope.

function retaining () {  var = this;  return function () {    console.log (self);}  ;} Retaining () ();//<-Window

Unless you really want to use both the parent scope of this and the current this value for some inexplicable reason, I prefer the method that is used. bind function. This can be used to assign the this of the parent scope to the child scope.

function bound () {  return function () {    console.log (this);  }. Bind (this);} Bound () ();//<-Window

Uncover The riddle in JavaScript