Detailed introduction to the scope of JavaScript functions and this pointer

The following editor will bring you an in-depth understanding of the scope and this pointer of js functions. The editor thinks it is quite good, so I will share it with you now and give it as a reference for everyone. Let's follow the editor and take a look.

The scope of the function and this pointer are very important parts of js. To clarify this thing requires logic, let's see how my logic is...

The following is an outline, you can directly choose the items you are interested in and read them.

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

• Function calling method: direct Call, call/apply, with

• For directly defined functions and object methods, the scope defaults to the scope chain where it is defined.

• For directly defined functions, this points to window.

• For object methods, this points to the instantiated object (corresponding to the case where the instantiated object returns this by default).

• Use call/apply to change the this point of the method

• When defining a function or method, you can change its scope chain through with.

Let’s talk about it in detail below:

The definition of functions, as mentioned in the outline, can be divided into two types: direct definition ( under window, internally defined), object methods (or object prototype methods). From the sample code below, you can see that the functions fn1 and fn2 and the object's method doFunction are used. When the function uses name, the value of name comes from the corresponding field.

var name = &#39;window下的name<br/>&#39;;
var resultCon;
function fn1() {
  resultCon.innerHTML += name;
}

function MyObj() {
  var name = &#39;MyObj下的name<br/>&#39;;
  this.doFunction = function() {
    resultCon.innerHTML += name;

What will happen if "name" is replaced with "this.name" when using the value of name? See the following example:

var name = &#39;window下的name<br/>&#39;;
var resultCon;
function fn1() {
  resultCon.innerHTML += this.name;
}

function MyObj() {
  var name = &#39;MyObj下的name<br/>&#39;;
  this.doFunction = function() {
    resultCon.innerHTML += this.name;

From the results, we can verify items 4 and 5 in the outline. We can also see that this and scope are two separate chains, following their own rules. Variable query logic, the specific query logic will be mentioned in the performance analysis below. If you are a novice, it is recommended to take a look at the basic knowledge of "js scope chain" first.

Regarding the function calling method, I use the following example to illustrate items 2 and 6 in the outline:

var name = &#39;window下的name<br/>&#39;;
var resultCon;
function fn1() {
  resultCon.innerHTML += this.name;
}

function MyObj() {
  var name = &#39;MyObj下的name<br/>&#39;;
  this.doFunction = function() {
    resultCon.innerHTML += this.name;

The difference between call and apply when calling Used to change the this pointer of the called function. The use of with is to change the query domain of variables in the called function. We remove this before call and name in the above example and add with to demonstrate the function of with.

var name = &#39;window下的name<br/>&#39;;
var resultCon;
function fn1(myScope) {
  with (myScope) {
    resultCon.innerHTML += name;
  }
}

function MyObj(myScope) {
  var name = &#39;MyObj下的name<br/>&#39;;

Seeing that the use of with is not convenient, you need to add with in the called function. Some people may wonder if it can be called as follows to change the variable scope as a whole. What if you don't change the called function?

with (myScope) {
  fn1();
  fn2();
  var obj = new MyObj();
  obj.doFunction();
}

Sorry, no! Therefore, call and apply can be used everywhere in some mature frameworks, but with is rarely used. When using JSHint to detect js syntax, with is marked with a small red dot. In some js coding guidance, it is also recommended to use it as little as possible. with, because with changes the default query chain of variables, it will cause some confusion for later maintainers, and there are some performance considerations, so please use with with caution.

The above is the detailed content of Detailed introduction to the scope of JavaScript functions and this pointer. For more information, please follow other related articles on the PHP Chinese website!