Apperception: 🌟🌟🌟🌟🌟🌟🌟🌟🌟

Taste: fresh mung bean

Cooking time: 15min

Your skin is your skin. I will be your skin.

As we all know, the direction of this in JavaScript is always difficult for people to understand. To learn JavaScript well, this is what we have to figure out. In fact, this is not so difficult, this article will strive to take you to treat this "skin".

First of all, three questions about popular science!

What is this?

this is an additional parameter when a function is declared, pointing to a specific object, that is, hidden parameter.

For example, all kinds of hidden eggs in LOL will imitate pet elves when crystal pioneer scana stays in the grass for more than 15 seconds.

Pickup! Pickup! Picachu! "

"Ska! Ska! Scana! "

OK, I believe you have understood what this is. It's a hidden parameter. It's not magic. Actually, every function can access this.

Why use this?

this provides a more elegant way to implicitly pass object references.

Generally speaking, we can make the API design more concise and easy to reuse.

Say: that is, this can help us omit parameters.

Direction of this

Only need to understand and remember a sentence, plus a few small circumstances, you can completely understand this.

OK, listen carefully.

This sentence is "the direction of this will not be determined when the function is declared, only when the function is executed, and this ultimately points to the object that calls it".

Some say it's too long to remember.

OK, shorten it.

In a word.

"The direction of this depends on how the function is called."

Conclusion:

1.this is an additional parameter when a function is declared, pointing to a specific object, that is, a hidden parameter.

2.this can help us omit parameters.

3. The direction of this depends on the way the function is called.

Is it very simple? After making these three points clear, we will thoroughly understand the direction of this from eight situations.

Code directly.

I. to the end of the world

Yes, that's right. Do you remember the theme song of dunk master?

First of all, we need to understand the world outlook, which can be divided into three situations.

1. In non strict mode, the end of browser is window.

2. In strict mode, when "use strict" is turned on, the end is undefined.

3. The end of node's global environment is global.

The situation in the following part mainly explains and explains the direction of this from the first non strict mode.

// Let's look at the following two.

function demo(){
  var user = "Front end canteen ";
  console.log(this.user);   // undefined
  console.log(this);       // window
}

demo();

// The function demo here is actually pointed out by the window object using point syntax, as follows:

function demo(){
    var user = "Front end canteen ";
    console.log(this.user);    // undefined
    console.log(this);        // window
}

window.demo();

// It can be found that the result is the same as the above code.

II. Finishing touch

var obj = {
  user:"Front end canteen ",
  fn:function(){
     console.log(this.user);   // Front end canteen
  }
}

obj.fn();

// this here points to obj
// Notice the last line of code that calls the function
// obj.fn();

// Say important things twice!!
// The direction of this cannot be determined when the function is created
// It can only be determined at the time of calling. Whoever calls will point to whom.

// The direction of this cannot be determined when the function is created
// It can only be determined at the time of calling. Whoever calls will point to whom.

III. turning stone into gold

// In fact, the above two points are not accurate enough. Let's look down.

var obj = {
  user:"Front end canteen ",
  fn:function(){
     console.log(this.user); // Front end canteen
  }
}
window.obj.fn(); 

// This code is almost the same as the above code
// But why doesn't it point to window?
// As you said above, is not the method called by window?
// Let's stop and make a debugger and think about why.
// It's ok if you don't understand. Let's take a look at the next code with questions.

var obj = {
    a:1,
    b:{
        a:2,
        fn:function(){
            console.log(this.a); // 2
        }
    }
}

obj.b.fn();

// The execution here is also the execution of obj through point syntax.
// But this also doesn't point to window s. Why?

// Well, we have several situations to remember:

// 1. If there is this in a function
// But it is not called by the object at the next level
// Then this will point to window (in non strict mode)

// 2. If there is this in a function
// This function is called by the object at the next level.
// Then this will point to the upper level object

// 3. If there is this in a function
// This function contains multiple objects
// Although this function is called by the outermost object
// this will point to its upper level object

var obj = {
  a:1;
  b:{
    // a:2,
    fn:function(){
       console.log(this.a);   // undefined
    }
  }
}
obj.b.fn();

// We can see that there is no attribute a in object b, and this points to
// Object b, because this only points to its upper level object
// No matter if there's something in this object

// Let's take another look.

var obj = {
    a:1,
    b:{
        a:2,
        fn:function(){
            console.log(this.a);  // undefined
            console.log(this);   // window
        }
    }
}
var demo = obj.b.fn;
demo();

// In the above code, this refers to window.
// You may find it strange
// In fact, it's like this. One sentence is very important. Knock on the blackboard again.

// this always points to the object that finally calls it.
// It depends on who called it when it was executed.

// In the above example, although function fn is referenced by object b,
// But when fn is assigned to the variable demo, it is not executed.
// So in the end, this points to window.

IV. bamboos and horses

function returnThis(){
  return this;
}
var user = {name:"Front end canteen"};

returnThis();            // window
returnThis.call(user);   // Front end canteen
returnThis.apply(user) ; // Front end canteen

// Here is Object.prototype.call
// And Object.prototype.apply methods
// They can specify this with parameters

V. perseverance

function returnThis(){
  return this;
}

var user1 = {name:"Front end canteen"};
var user1returnThis = returnThis.bind(user1);
user1returnThis();             // Front end canteen
var user2 = {name:"Front end canteen"};
user1returnThis.call(user2);   // still front canteen

// Object.prototype.bind provides permanent binding through a new function
// And it will override the direction of call and apply.

Vi. great changes of heaven and earth

function Fn(){
  this.user = "Front end canteen";
}
var demo = new Fn();
console.log(demo.user);  // Front end canteen

// Here, the new keyword changes the direction of this
// new keyword creates an object instance
// So you can point out the user in the function Fn through the object demo point syntax.
// this points to the object demo

// Note: here new will override bind
function demo(){
  console.log(this);
}

demo();             // window
new demo();         // demo
var user1 = {name:"Front end canteen"};
demo.call(user1);   // Front end canteen

var user2 = demo.bind(user1);
user2();            // Front end canteen
new user2();        // demo

7. Love corner meets return

// When this encounters return
function fn(){
  this.user = "Front end canteen";
  return{};
}
var a = new fn;
console.log(a.user);  // undefined

function fn(){
  this.user = "Front end canteen";
  return function(){};
}
var a = new fn;
console.log(a.user);  // undefined

function fn(){
  this.user = "Front end canteen";
  return 1;
}
var a = new fn;
console.log(a.user); // Front end canteen

function fn(){
  this.user = "Front end canteen";
  return undefined;
}
var a = new fn;
console.log(a.user); // Front end canteen

// Summary: if the return value is an object
// So this point is the returned object.
// If the return value is not an object
// So this is still an instance of a function.

// null is special, although it is an object
// But this still points to the instance of that function.

function fn(){
  this.user = "Front end canteen";
  return null;
}
var a = new fn;
console.log(a.user); // Front end canteen

8. Heroes on the stage

// Finally, we introduce an arrow function in ES6
// this in the arrow function can't be hammered by garrio's hero.
// It won't peel
// Moreover, it has been determined before the code runs
// No one can cover it

// This is for the convenience of using the current scope of this in the callback function.
// Make this pointer clearer
// So for this point in the arrow function
// We just need to see where it's created.

function callback(qdx){
  qdx();
}
callback(()=>{console.log(this)});        // window

var user = {
    name:"Front end canteen",
    callback:callback,
    callback1(){
      callback(()=>{console.log(this)});
    }
}
user.callback(()=>{console.log(this)});  // still window
user.callback1(()=>{console.log(this)}); // user

What about? this is just so. No matter how skinny you are, you have to stop him.~

Communication

Welcome to my personal public exchange, high-quality original articles will be pushed simultaneously. You know, you can get benefits when you reply to the benefits in the background.~

Your front-end canteen, remember to eat on time.