[Javascript] The "This" keyword

The very first thing to understand when we're talking about This-keyword are really understand what ' s the purpose of the TH Is-keyword is, or why we even has this-keyword in JavaScript.

What's the This-keyword allows us to does, is it allows us to reuse functions with different contexts, or in other words it al Lows us to decide which objects should is focal when invoking a function or a methods. Imagine we had one function, and we had a bunch of objects that had similar properties, we want this function to work thro Ughout all of our objects.

The first thing you need-to-ask yourself whenever you ' re-trying to a figure of what's the This-keyword is, was this question. Where is this function invoked? We won ' t know what the This-keyword are in a function until that function is invoked.

There is four this keyword binding:

1. Implicit Binding
2. Explicit Binding
3. New Binding
4. Window Binding

• Implicit Binding

Implicit binding says that if you call a function and when the function was invoked, look to the left of the dot, and tha T is what the This-keyword are going to reference.

var me = {    "Wan",    +,    function() {        Console.log (this. name);}    } Me.sayname ();

var function (obj) {    function() {        Console.log (this. Name);    }} var = {    "Zhenitan",    }saynamemixin (Me); Saynamemixin (you); Me.sayname ();     //  you.sayname ();  // Zhentian

varperson =function(name, age) {return{name:name, age:age, Sayname:function() {Console.log ( This. Name); }, Mother: {name:"Yun", Sayname:function() {Console.log ( This. Name); }        }    }}varJim = Person (' Jim ', 42); Jim.saynmae (); //JimJim.mother.sayNmae ();//Yun

You ' re going to find that whenever you get in these situation of trying to figure out what's the This-keyword is, the very f Irst thing you should do are look at when the function was invoked, and look if there ' s anything to the left of the dot, be Cause if there is, that's what's this-keyword is referencing.

• Explicit Binding

. Call ()

What if we were-take sayname out of the This function? Instead of being a method on the object, now, it's just a function currently on the global scope. Now, what we want to do are we want to somehow call this function in the context of the WAN. What we can does is if we type the function name, every function have a. Call property, which allows us to do just that.

var function () {    Console.log (this. name);}   var wan = {    "wan",    + };  

Let's go ahead and say if we wanted to pass a parameter, pass a few more arguments to sayname, what we can do are, let's SA Y we had an array of languages.

var function (Lang1, Lang2, lang3) {    Console.log (this. Name + ', and I know ' + lang1 + ', ' + lang2 + ', '+ lang 3); }  var wan = {    "wan",    + };   var languages = [' Javascript ', ' Ruby ', ' Python '];  Sayname.call (WAN, languages[0], languages[1], languages[2]);

What we can does here on. Call, the very first argument your pass is the context, and every argument after that's going to B E passed to the function, just as a normal argument.

. Apply ()

It would is nicer if we could just pass in languages, and some feature in the language of JavaScript would is able to pars E these out to us.

var function (Lang1, Lang2, lang3) {    Console.log (this. Name + ', and I know ' + lang1 + ', ' + lang2 + ', '+ lang 3); }  var wan = {    "wan",    + };   var languages = [' Javascript ', ' Ruby ', ' Python '];  Sayname.apply (WAN, languages);

. Bind ()

. Bind is almost the exact same thing as. Call, except there ' s one thing that ' s different. It returns a new function.

 var  sayname = function   (lang1, lang2, Lang3) {Console.log ( "My name is" + this . Name + ', and I kno W ' + lang1 + ', ' + lang2 + ', ' + var  NEWFN = Sayname.bind (WAN, languages[0],languages[1],languages[2< Span style= "color: #000000;" >]); Newfn ();  

To REACP,. Call, apply and bind allow us to specifically state what this keyword would be is within any given function. . Call and. Apply behave the same, they'll immediatelyh invoke that Funciton, but with. Call, you pass in arguments O Ne by one, and with. Apply, you pass the them in as an array. . Bind is the exact same thing as. Call, but EXECPT for immediately invoking the function, it's going to return you a brand New function that can invoke later.

• New Binding

var function (name, age) {  // this = {};  this. Name = name;   this. Age = Age ;}; var New Animal (' Zippy ', 3);

When you use ' new ' keyword, Javascript would auto create a ' this ' keyword and assgin it as an object.

• Window Binding

var greeting = function () {  console.log (this.message);} Greeting ();  Undefinedwindow.message = "Hello"; greeting ();  "Hello"

In the console, we want to log out of ' this.message ', but we didn ' t use implict binding, so it shows undefined.

In JavaScript, if none of above three methods applyed, ' This ' keyword would refer to the ' window ' object, so if we assign

Window.message = "Hello"

In greeting () would log out Hello.

To recap any of our rules, we had implicit binding, which is the "the left" of the dot, at call time, explicit binding , which is telling a function and what the context of the the This keyword are going to being using call, apply, or bind.

The new binding is whenever you has a function invoked with the New keyword and the This keyword are bound to the new object Being constructed. Then the window binding where if none of the these rules apply and then the This keyword was going to default to the Window object Unless you ' re in strict mode. Then it's just going to be undefined.

[Javascript] the "This" keyword