每天推薦一個 GitHub 優質開源項目和一篇精選英文科技或編程文章原文,歡迎關注開源日報。交流QQ群:202790710;微博:https://weibo.com/openingsource;電報群 https://t.me/OpeningSourceOrg
今日推薦開源項目:《用 Vue.js 開發小程序 mpvue 》GitHub鏈接
推薦理由:和 Vuido 一樣,mpvue 也是讓你可以用 Vue.js 寫點別的東西,比如小程序。mpvue 不僅可以讓你寫個小程序,而且還可以讓你把網頁上的代碼改一改就丟到小程序上接著用。如果你不懂 Vue.js 也不懂小程序,它也有新手教程來簡單入門,對小程序感興趣的 Vue.js 使用者可千萬不能錯過。
今日推薦英文原文:《What is 「this」 in JavaScript?》作者:Rajat S
原文鏈接:https://blog.bitsrc.io/what-is-this-in-javascript-3b03480514a7
推薦理由:顧名思義,這篇文章介紹的是在各種地方 JavaScript 中的 this 究竟是什麼。雖然這算是比較細節的部分,但是有的時候這些細節可以幫助我們或者是帶給我們麻煩,推薦使用 JavaScript 的朋友一讀。
What is 「this」 in JavaScript?
If you have been building things using JavaScript libraries, you might have noticed a particular keyword called this
.
this
is quite a common thing in JavaScript, but there are a quite a few developers who have taken quite some time to fully understand what this keyword exactly does and where should it be used in your code.
In this post I will help you understand this
and its mechanism, in depth.
Before diving in, make sure you have Node installed on your system. Then, open a command terminal and run the node
command.
「this」 in Global Environment
The working mechanism of this
is not always easy to understand. To understand how this
works, we will start looking at this
in different environments. Let』s start by looking at the global
environment first.
At the global level, this
is equivalent to a global object called global
.
> this === global true
But this is true only inside node
. If we try to run this same code inside a JavaScript file, we will get the output as false.
To test this, create a file called index.js
with the following code inside it:
console.log(this === global);
Then run this file using the node
command:
$ node index.js false
The reason for this is that inside a JavaScript file, this
equates to module.exports
and not global
.
「this」 inside Functions
The value of this
inside a function is usually defined by the function』s call. So, this
can have different values inside it for each execution of the function.
In your index.js
file, write a very simple function that simply checks if this
is equal to the global object.
function rajat() { console.log(this === global) } rajat()
If we run this code using node
, we will the output as true
. But we add "use strict"
at the top of the file and run it again, we will get a false
output because now the value of this
is undefined
.
To further explain this, let』s create a simple function that defines a Superhero』s real name and hero name.
function Hero(heroName, realName) { this.realName = realName; this.heroName = heroName; } const superman= Hero("Superman", "Clark Kent"); console.log(superman);
Note that this function is not written in strict mode. Running this code in node
will not get us the value of 「Superman」 and 「Clark Kent」 as we expected, but it will instead just give us an undefined
.
The reason behind this is that since the function is not written in strict mode, this
refers to the global object.
If we run this code in strict mode, we will get an error because JavaScript does not allow us to assign properties realName
and heroName
to undefined
. This actually is a good thing because it prevents us from creating global variables.
Lastly, writing the function』s name in uppercase means that we need to call it as a constructor using the new
operator. Replace the last two lines of the above code snippet with this:
const superman = new Hero("Superman", "Clark Kent"); console.log(superman);
Run the node index.js
command again, and you will now get the expected output.
「this」 inside constructors
JavaScript does not have any special constructor functions. All we can do is convert a function call into a constructor call using new
operator as shown in the above section.
When a constructor call is made, a new object is created and set as the function』s this
argument. The object is then implicitly returned from the function, unless we have another object that is being returned explicitly.
Inside the hero
function write the following return
statement:
return { heroName: "Batman", realName: "Bruce Wayne", };
If we run the node
command now, we will see that the above
return statement overwrites the constructor call.
The only scenario where the return statement doesn』t overwrite the constructor call is if the return statement tries to return anything that is not an object. In this case, the object will contain the original values.
「this」 in Methods
When calling a function as a method of an object, this
refers to the object, which is then known as the receiver of the function call.
Here, I have a method dialogue
inside an object called hero
. The dialogue
『s this
value then refers to hero
itself. So hero
here will be know as the receiver of the dialogue
method』s call.
const hero = { heroName: "Batman", dialogue() { console.log(`I am ${this.heroName}!`); } }; hero.dialogue();
This is very simply example. But in the real-world cases it can get very hard for our method to keep track of the receiver. Write the following snippet at the end of index.js
.
const saying = hero.dialogue(); saying();
Here, I am storing the reference to dialogue
inside another variable and calling the variable as a function. Run this with node
and you will see that this
returns an undefined
because the method has lost track of the receiver. this
now refers to global
instead of hero
.
The loss of receiver usually happens when we are passing a method as a callback to another. We can either solve this by adding a wrapper function or by using bind
method to tie our this
to a specific object.
call() and apply()
Though a function』s this
value is set implicitly, we can also call function with explicit this
argument call()
and apply()
.
Lets restructure the previous sections code snippet like this:
function dialogue () { console.log (`I am ${this.heroName}`); }
const hero = { heroName: 'Batman', };
We need to connect the dialogue
function with the hero
object as a receiver. To do so, we can either use call()
or apply()
like this:
dialogue.call(hero) // or dialogue.apply(hero)
But if you are using call
or apply
outside of strict mode, then passing null
or undefined
using call
or apply
will be ignored by the JavaScript engine. This is one of the reasons why it is usually suggested to always write our code in strict mode.
bind()
When we pass a method as a callback to another function, there is always a risk of losing the intended receiver of the method, making the this
argument set to the global object instead.
The bind()
method allows us to permanently tie a this
argument to a value. So in the below code snippet, bind
will create a new dialogue
function and set its this
value to hero
.
const hero = { heroName: "Batman", dialogue() { console.log(`I am ${this.heroName}`); } }; setTimeOut(hero.dialogue.bind(hero), 1000);
By doing so, our this
cannot be changed by even call
or apply
methods.
Catching 「this」 inside an Arrow Function
Using this
with an arrow function is quite different from using it with any other kind of JavaScript function. An arrow function uses the this
value from its enclosing execution context, since it does have one of its own.
An arrow function permanently captures the this
value, preventing apply
or call
from changing it later on.
To explain how this
works with regards to the arrow functions, let』s write the arrow function shown below:
const batman = this;
const bruce = () => { console.log(this === batman); };
bruce();
Here, we are storing the value of a this
in a variable and then comparing the value with a this
value that is inside an arrow function. Running node index.js
in our terminal should give us true
as output.
An arrow function』s this
value cannot be set explicitly. Also, the arrow function will ignored any attempt from us at passing a value to this
using methods like call
, apply
, and bind
. An arrow function will refer to the this
value that was set when the arrow function was created.
An arrow function can also not be used as a constructor. Hence, we cannot assign properties to this
inside an arrow function.
So what can arrow functions do in regards to this
?
Arrow functions can help us access this
within a callback. To explain how this is done. Take a look at the counter
object that I have written below:
const counter = { count: 0, increase() { setInterval(function() { console.log(++this.count); }, 1000); } } counter.increase();
Running this code using node index.js
will only give an increase list of NaN
s. This is because this.count
is not referring to the counter
object. It actually refers to the global
object.
To make this counter work, lets rewrite it using an arrow function.
const counter = { count: 0, increase () { setInterval (() => { console.log (++this.count); }, 1000); }, }; counter.increase ();
Our callback now uses this
binding from the increase
method, and the counter
now works as it should.
Note: Do not try to write this.count + 1
instead of ++this.count
. The former of these two will only increase the value of count once, and return the that value on each iteration.
「this」 in Classes
Classes are one of the most important parts of any JavaScript apps. Lets see how this
behaves inside a class.
A class generally contains a constructor
, where this
would refer to any newly created object.
But in case of methods, this
can also refer to any other value if the method is called as an ordinary function. And just like a method, classes can also lose track of the receiver.
Let』s re-create the Hero
functions that we have seen earlier as a class. This class will contain a constructor and a dialogue()
method. Finally, we create an instance of this class and call the dialogue
method.
class Hero { constructor(heroName) { this.heroName = heroName; } dialogue() { console.log(`I am ${this.heroName}`) } } const batman = new Hero("Batman"); batman.dialogue();
this
inside the constructor
refers to the newly created instance of that class
. When we call batman.dialogue()
, we invoke dialogue()
as a method with batman
as a receiver.
But if we store a reference to the dialogue()
method, and later invoke it as a function, we once again lose the receiver of the method and the this
argument now refers to undefined
.
const say = batman.dialogue(); say();
The reason for error is that JavaScript classes are implicitly in strict mode. We are invoking say()
as an function without any autobinding. To solve this, we will need to manually bind()
to tie this dialogue()
function to batman
.
const say = batman.dialogue.bind(batman); say();
We can also do this binding inside the constructor
method.
To sum it up…
We need to use this
in JavaScript like we need to pronouns in English. Take these two sentences.
- Rajat loves DC Comics.
- Rajat also loves Marvel movies.
We use pronouns to combine these two sentences. so these two sentences now become:
Rajat loves DC Comics, and he also loves Marvel Comics
This short grammar lesson perfectly explains the importance of this
in JavaScript. Just like how the pronoun he
connects the two sentences, this
acts as a shortcut to refer the same thing again.
I hope this post helped you clear any confusions you had about this
in JavaScript and you now where and how to use this simple but extremely important keyword in your JavaScript code.
每天推薦一個 GitHub 優質開源項目和一篇精選英文科技或編程文章原文,歡迎關注開源日報。交流QQ群:202790710;微博:https://weibo.com/openingsource;電報群 https://t.me/OpeningSourceOrg