Deep understanding of the scope of JS function and this point _javascript tips

The scope of the function and this point is a very important part of JS, it needs a logic to clarify this thing, see how my logic ...

Here is an outline that you can read directly to the item you are interested in.

• Function definition: direct definition (under window, internal definition), object method, object prototype method;

• How functions are invoked: direct invocation, Call/apply,with

• For directly defined methods of functions and objects, the scope default state is the scope chain of its definition.

• For directly defined functions, this points to window.

• For the object's method, this points to the instantiated object (corresponds to the case where the instantiated object returns this by default).

• This point to change the method with Call/apply

• You can change the scope chain of a function or method as it is defined.

The following separate to specifically say:

The definition of a function, as mentioned in the outline, can be divided into two types: direct definition (under window, internal definition), method of object (or method of object prototype). From the following example code, you can see the function fn1 and fn2, and the method of the object dofunction the value of name when the function uses name comes from the corresponding domain.

var name = ' name<br/> under Window ';
var Resultcon;
function fn1 () {
  resultcon.innerhtml + = name;
}

function MyObj () {
  var name = ' name<br/> under MyObj ';
  This.dofunction = function () {
    resultcon.innerhtml + = name;

What happens when you replace "name" with "THIS.name" when you use the value of name to see the following example:

var name = ' name<br/> under Window ';
var Resultcon;
function fn1 () {
  resultcon.innerhtml + = this.name;
}

function MyObj () {
  var name = ' name<br/> under MyObj ';
  This.dofunction = function () {
    resultcon.innerhtml + = this.name;

From the results, you can verify the 4th and 5 in the outline, you can also see this and scope is two sets of separate chains, follow the logic of the independent variable query, the specific query logic in the following performance analysis will be mentioned, if the novice suggested that first look at "JS scope chain" Aspects of the basic knowledge.

On the invocation method of the function, I use the following example to illustrate the 2nd and 6 articles in the outline:

var name = ' name<br/> under Window ';
var Resultcon;
function fn1 () {
  resultcon.innerhtml + = this.name;
}

function MyObj () {
  var name = ' name<br/> under MyObj ';
  This.dofunction = function () {
    resultcon.innerhtml + = this.name;

Call and apply are used to change the this point of the called function. The use of with is to change the query field of the variable in the called function. We demonstrate the effect of the with by removing the call and name before this in the previous example, plus with the.

var name = ' name<br/> under Window ';
var Resultcon;
function Fn1 (myscope) {with
  (myscope) {
    resultcon.innerhtml = = name;
  }
}

function MyObj (myscope) {
  var name = name<br/> under ' myobj ';

It is not convenient to see the use of with, you need to add with in the called function, and one might want to be able to change the scope of the variable as a whole instead of changing the called function?

With (Myscope) {
  fn1 ();
  FN2 ();
  var obj = new MyObj ();
  Obj.dofunction ();
}

I'm sorry, it's not possible! So in some mature framework can be seen everywhere call and apply use, but rarely used with, in the use of Jshint to detect the JS syntax with a small red dot, in some JS code guidance also recommended as little as possible with, because with the change of the variable's default query chain, So will give later maintenance staff some confusion, as well as some of the performance considerations, please use with.

The above in-depth understanding of the scope of the JS function and this point is a small series to share all the content, I hope to give you a reference, but also hope that we support the cloud-dwelling community.