javascript编写_用JavaScript深入探讨：为什么对编写好的代码至关重要。

javascript编写

Using simple terminology and a real world example, this post explains what this is and why it is useful.

这篇文章使用简单的术语和一个真实的例子，解释了this是什么以及为什么有用。

这是给你的吗 (Is this for you)

I have noticed that many explanations for this in JavaScript are taught assuming you are coming from some object-oriented programming language like Java, C++, or Python. This post is geared towards those of you who have no preconceptions of what you think this is or what it should be. I will try to explain what this is and why it is helpful in a simple manner without unnecessary jargon.

我已经注意到，假设您来自某种面向对象的编程语言(例如Java，C ++或Python)， this用JavaScript进行很多解释。 这篇文章是对那些你们谁没有的，你觉得是什么先入为主面向this 是或应该是什么。 我将尝试解释this是什么 ，以及为什么以一种简单的方式(没有不必要的行话)有所帮助。

Maybe you procrastinated diving into this because it looked weird and scary. Or maybe you only use it because StackOverflow says you need it in order to do certain things in React.

也许你拖延潜入this ，因为它看起来奇怪和可怕。 或者也许只使用它，因为StackOverflow表示您需要它以便在React中做某些事情。

Before we dive into what this really is and why you would use it, we first need to understand the difference between functional programming and object-oriented programming.

在深入了解this是什么以及为什么要使用它之前，我们首先需要了解函数式编程和面向对象的编程之间的区别。

功能与面向对象的编程 (Functional vs Object-Oriented Programming)

You may or may not know that JavaScript has both functional and object-oriented constructs, so you can choose to focus on one or the other or use both.

您可能会或可能不会知道JavaScript具有功能和面向对象的构造，因此您可以选择专注于一个或另一个，或者同时使用两者。

I embraced functional programming early in my JavaScript journey and avoided object-oriented programming like the plague. I didn’t know or understand object-oriented keywords such as this. I think one reason I didn’t understand it was because I didn’t really get why it was necessary. It seemed like I could do everything I needed to do without relying on this.

我在JavaScript之旅的早期就接受了函数式编程，并避免了像瘟疫这样的面向对象的编程。 我不了解或理解诸如this这样的面向对象的关键字。 我认为我不理解它的原因之一是因为我没有真正理解为什么有必要这样做。 这似乎是我能做到，我需要不依赖于尽this 。

And I was right.

我是对的。

Sort of. You can maybe get by only focusing on one paradigm and never learning about the other, but you will be limited as a JavaScript developer. To illustrate the differences between functional and object-oriented programming, I am going to use an array of Facebook friend data as an example.

有点。 您可能只专注于一种范例而从不学习另一种范例，但是作为JavaScript开发人员，您将受到限制。 为了说明功能性编程和面向对象编程之间的差异，我将以Facebook朋友数据数组为例。

Let’s say you’re building a web app where the user signs in with Facebook, and you show some data regarding their Facebook friends. You will need to hit a Facebook endpoint to get their friends’ data. It might have some information such as firstName, lastName,username, numFriends, friendData, birthday, and lastTenPosts.

假设您正在构建一个用户通过Facebook登录的Web应用，并显示一些有关其Facebook朋友的数据。 您需要点击一个Facebook端点以获取其朋友的数据。 它可能有一些信息，如firstName ， lastName ， username ， numFriends ， friendData ， birthday ，和lastTenPosts 。

const data = [{firstName: 'Bob',lastName: 'Ross',username: 'bob.ross',    numFriends: 125,birthday: '2/23/1985',lastTenPosts: ['What a nice day', 'I love Kanye West', ...],},...
]

The data above is what you get from the (fake, imaginary) Facebook API. Now you need to transform it, so that it is in a format that is useful to you and your project. Let’s say you want to show the following for each of the user’s friends:

上面的数据是从(虚构的，虚构的)Facebook API获得的。 现在，您需要对其进行转换，使其采用对您和您的项目有用的格式。 假设您要为每个用户的朋友显示以下内容：

• Their name in the format `${firstName} ${lastName}`

  它们的名称格式`${firstName} ${lastName}`

• Three random posts
  三个随机帖子
• Number of days until their birthday
  到生日为止的天数

功能方法 (Functional Approach)

A functional approach would be passing the whole array or each element of an array into a function that returns the manipulated data that you need:

一种功能方法是将整个数组或数组的每个元素传递到一个函数中，该函数返回所需的操作数据：

const fullNames = getFullNames(data)
// ['Ross, Bob', 'Smith, Joanna', ...]

You start with raw data (from the Facebook API). In order to get it to transform into data that is useful to you, you pass the data into a function and the output is or includes the manipulated data that you can use in your app to display to the user.

您从原始数据开始(来自Facebook API)。 为了使它转换为对您有用的数据，您将数据传递给一个函数，并且输出是或包含可在应用程序中使用以显示给用户的操纵数据。

You could imagine doing something similar for getting the three random posts and calculating the number of days until that friend’s birthday.

您可以想象做类似的事情来获得三个随机帖子并计算直到该朋友生日前的天数。

The functional approach is taking your raw data, passing it through a function or multiple functions, and outputting data that is useful to you and your project.

功能方法是获取原始数据，将其通过一个或多个函数传递，并输出对您和您的项目有用的数据。

面向对象的方法 (Object-Oriented Approach)

The object-oriented approach might be a little more difficult to grasp for those who are new to programming and learning JavaScript. The idea here is that you transform each friend into an object that has everything it needs to generate what you as the developer need.

对于那些刚开始编程和学习JavaScript的人来说，面向对象的方法可能会更难掌握。 这里的想法是，你变换每个朋友到拥有一切它需要生成你的开发人员需要一个对象。

You might create objects that have a fullName property, and two functions getThreeRandomPosts and getDaysUntilBirthday that are specific to that friend.

您可能会创建具有fullName属性的对象，以及两个特定于该朋友的函数getThreeRandomPosts和getDaysUntilBirthday 。

function initializeFriend(data) {return {fullName: `${data.firstName} ${data.lastName}`,getThreeRandomPosts: function() {// get three random posts from data.lastTenPosts},getDaysUntilBirthday: function() {// use data.birthday to get the num days until birthday}};
}
const objectFriends = data.map(initializeFriend)
objectFriends[0].getThreeRandomPosts() 
// Gets three of Bob Ross's posts

The object-oriented approach is creating objects for your data which have state and include all the information they need in order to generate the data that is useful to you and your project.

面向对象的方法是为数据创建对象，这些对象具有状态并包括它们所需要的所有信息，以便生成对您和您的项目有用的数据。

这与这有什么关系？ (What does this have to do with this?)

You might not have ever thought to write something like initializeFriend above, and you might think something like that could be pretty useful. You might also notice, however, that it is not truly object-oriented.

您可能从未想过要在上面编写类似initializeFriend东西，并且您可能会认为类似的事情可能非常有用。 但是，您可能还会注意到，它并不是真正的面向对象。

The only reason that the methods getThreeRandomPosts or getDaysUntilBirthday would even work in the example above is because of closure. They still have access to data after initializeFriend returns because of closure. For more information about closure, check out You Don’t Know JS: Scope & Closures.

在上面的示例中，方法getThreeRandomPosts或getDaysUntilBirthday甚至可以工作的唯一原因是因为关闭。 由于关闭， initializeFriend返回后，他们仍然有权访问data 。 有关闭包的更多信息，请查看“ 您不知道JS：范围和闭包” 。

What if you had another method, let’s call it greeting. Note that a method (in regards to an object in JavaScript) is just an attribute whose value is a function. We want greeting to do something like this:

如果您有另一种方法，那就称它为greeting 。 请注意，方法(就JavaScript中的对象而言)只是一个属性，其值是一个函数。 我们希望greeting执行以下操作：

function initializeFriend(data) {return {fullName: `${data.firstName} ${data.lastName}`,getThreeRandomPosts: function() {// get three random posts from data.lastTenPosts},getDaysUntilBirthday: function() {// use data.birthday to get the num days until birthday},greeting: function() {return `Hello, this is ${fullName}'s data!`}};
}

Will that work?

那行得通吗？

No!

没有！

Everything in our newly created object has access to all the variables in initializeFriend but NOT any of the attributes or methods within the object itself. Certainly, you’ll ask the question:

新创建的对象中的所有内容都可以访问initializeFriend所有变量，但不能访问对象本身内的任何属性或方法。 当然，您会问一个问题：

Couldn’t you just use data.firstName and data.lastName to return your greeting?

您不能只使用data.firstName和data.lastName返回您的问候吗？

Yes, you absolutely could. But what if we also wanted to include in the greeting how many days until that friend’s birthday? We would have to somehow find a way to call getDaysUntilBirthday from within greeting.

是的，您绝对可以。 但是，如果我们还想在问候语中包含距该朋友的生日多少天呢？ 我们会以某种方式找到一个方法来调用getDaysUntilBirthday从内部greeting 。

IT’S TIME FOR this !

现在this ！

最后，这是什么 (Finally, what is this)

this can refer to different things under different circumstances. By default, this refers to the global object (in the browser, this is the window object), which isn’t all that helpful. The this rule that is helpful for us right now is the following:

this可以指不同情况下的不同事物。 默认情况下， this是指全局对象(在浏览器中是window对象)，并不是全部有用。 现在对我们有用的this规则如下：

If this is used in an object method and the method is called within the context of that object, this refers to the object itself.

如果this是在对象的方法中使用，并且所述方法被调用该对象的上下文中， this指的是对象本身。

You say “called within the context of that object”…what does that even mean?

您说“在该对象的上下文中调用”……这甚至意味着什么？

Don’t worry, we will get to that later!

不用担心，我们稍后再讨论！

So if we wanted to call getDaysUntilBirthday from within greeting we can just call this.getDaysUntilBirthday because this in that scenario just refers to the object itself.

因此，如果我们想叫getDaysUntilBirthday内greeting ，我们只需调用this.getDaysUntilBirthday ，因为this在那种情况下只是指对象本身。

SIDE NOTE: Don’t use this in a regular ole function in the global scope or in the scope of another function! this is an object-oriented construct. Therefore, it only has meaning within the context of an object (or class)!

旁注：请勿在全局范围或其他功能范围的常规ole函数中使用this函数！ this是一个面向对象的构造。 因此，它仅在对象(或类)的上下文中具有意义！

Let’s refactor initializeFriend to use this:

让我们重构initializeFriend来使用this ：

function initializeFriend(data) {return {lastTenPosts: data.lastTenPosts,birthday: data.birthday,    fullName: `${data.firstName} ${data.lastName}`,getThreeRandomPosts: function() {// get three random posts from this.lastTenPosts},getDaysUntilBirthday: function() {// use this.birthday to get the num days until birthday},greeting: function() {const numDays = this.getDaysUntilBirthday()      return `Hello, this is ${this.fullName}'s data! It is ${numDays} until ${this.fullName}'s birthday!`}};
}

Now, everything that this object needs is scoped to the object itself once intializeFriend is executed. Our methods no longer rely on closure. They only use information contained within the object itself.

现在，执行intializeFriend ，此对象所需的所有内容都将限制在对象本身上。 我们的方法不再依赖于封闭。 它们仅使用对象本身包含的信息。

Ok, so that is one way to use this , but you said that this can be many different things depending on the context. What does that mean? Why wouldn’t it always refer to the object itself?

好了，这就是用一种方式this ，但你说， this可能是根据上下文许多不同的事情。 那是什么意思？ 为什么它不总是指对象本身？

There are some times where you want to force this to be something in particular. A good example is for event handlers. Let’s say we wanted to open up a friend’s Facebook page when the user clicks on them. We might add an onClick method to our object:

有些时候，你要强制this要的东西尤其如此。 一个很好的例子是事件处理程序。 假设我们想在用户单击朋友时打开朋友的Facebook页面。 我们可以向对象添加onClick方法：

function initializeFriend(data) {return {lastTenPosts: data.lastTenPosts,birthday: data.birthday,username: data.username,    fullName: `${data.firstName} ${data.lastName}`,getThreeRandomPosts: function() {// get three random posts from this.lastTenPosts},getDaysUntilBirthday: function() {// use this.birthday to get the num days until birthday},greeting: function() {const numDays = this.getDaysUntilBirthday()      return `Hello, this is ${this.fullName}'s data! It is ${numDays} until ${this.fullName}'s birthday!`},onFriendClick: function() {window.open(`https://facebook.com/${this.username}`)}};
}

Notice that we added username to our object, so that onFriendClick had access to it, so that we can open a new window with the Facebook page of that friend. Now we just need to write the HTML:

请注意，我们将username添加到了对象中，以便onFriendClick可以访问它，以便我们可以使用该朋友的Facebook页面打开一个新窗口。 现在我们只需要编写HTML：

<button id="Bob_Ross"><!-- A bunch of info associated with Bob Ross -->
</button>

And now the JavaScript:

现在是JavaScript：

const bobRossObj = initializeFriend(data[0])
const bobRossDOMEl = document.getElementById('Bob_Ross')
bobRossDOMEl.addEventListener("onclick", bobRossObj.onFriendClick)

In the code above, we create an object for Bob Ross. We get the DOM element associated with Bob Ross. And now we want to execute the onFriendClick method to open up Bob’s Facebook page. Should work as expected, right?

在上面的代码中，我们为Bob Ross创建了一个对象。 我们得到与鲍勃·罗斯相关的DOM元素。 现在，我们要执行onFriendClick方法以打开Bob的Facebook页面。 应该能按预期工作，对吗？

Nope!

不！

What went wrong?

什么地方出了错？

Notice that the function we chose for the onclick handler was bobRossObj.onFriendClick . See the problem yet? What if we re-wrote it like this:

注意，我们为onclick处理程序选择的函数是bobRossObj.onFriendClick 。 看到问题了吗？ 如果我们这样重写它，该怎么办：

bobRossDOMEl.addEventListener("onclick", function() {  window.open(`https://facebook.com/${this.username}`)})bobRossDOMEl.addEventListener("onclick", function() {window.open(`https://facebook.com/${this.username}`)
})

Now do you see the problem? When we set the onclick handler to be bobRossObj.onFriendClick what we are actually doing is grabbing the function that is stored in bobRossObj.onFriendClick and passing it in as an argument. It is no longer “attached” to bobRossObj which means this no longer refers to bobRossObj . It actually refers to the global object, which means that this.username is undefined. It seems as though we are out of luck at this point.

现在您看到问题了吗？ 当我们将onclick处理程序设置为bobRossObj.onFriendClick ，我们实际要做的就是获取存储在bobRossObj.onFriendClick的函数并将其作为参数传递。 它不再“附加”到bobRossObj ，这意味着this不再引用bobRossObj 。 它实际上是指全局对象，这意味着this.username是未定义的。 似乎我们在这一点上不走运。

IT’S TIME for bind!

是时候bind ！

明确绑定此 (Explicitly binding this)

What we need to do is explicitly bind this to bobRossObj. We can do that by using bind:

我们需要做的是明确绑定this到bobRossObj 。 我们可以通过使用bind来做到这一点：

const bobRossObj = initializeFriend(data[0])
const bobRossDOMEl = document.getElementById('Bob_Ross')
bobRossObj.onFriendClick = bobRossObj.onFriendClick.bind(bobRossObj)
bobRossDOMEl.addEventListener("onclick", bobRossObj.onFriendClick)

Earlier, this was being set based on the default rule. With the use of bind, we explicitly set the value of this in bobRossObj.onFriendClick to be the object itself, or bobRossObj.

之前， this是根据默认规则设置的。 通过使用bind ，我们在bobRossObj.onFriendClick this的值显式设置为对象本身或bobRossObj 。

Up to this point, we have seen why this is helpful and why you might want to explicitly bind this. The last topic we will cover regarding this is arrow functions.

到目前为止，我们已经看到了为什么this做有用以及为什么您可能想显式绑定this 。 我们将介绍关于最后的话题this是箭头的功能。

箭头功能 (Arrow functions)

You might have noticed that arrow functions are the hip new thing. People seem to like them because they are concise and elegant. You might know that they are a little different from normal functions but maybe you don’t quite know what the difference is.

您可能已经注意到，箭头功能是新事物。 人们似乎喜欢它们，因为它们简洁而优雅。 您可能知道它们与正常功能有些不同，但是也许您不太了解它们之间的区别。

Perhaps the simplest way to describe how arrow functions are different is this:

也许描述箭头功能不同的最简单方法是：

Whatever this refers to where an arrow function is declared, this refers to the same thing inside that arrow function.

无论this指的箭头声明函数时， this指的是箭头函数内同样的事情。

Ok…that’s not helpful…I thought that was the behavior of a normal function?

好的...那没有帮助...我以为那是正常功能的行为？

Let’s explain with our initializeFriend example. Let’s say we wanted to add a little helper function within greeting :

让我们用我们的initializeFriend示例进行解释。 假设我们要在greeting添加一个小助手功能：

function initializeFriend(data) {return {lastTenPosts: data.lastTenPosts,birthday: data.birthday,username: data.username,    fullName: `${data.firstName} ${data.lastName}`,getThreeRandomPosts: function() {// get three random posts from this.lastTenPosts},getDaysUntilBirthday: function() {// use this.birthday to get the num days until birthday},greeting: function() {function getLastPost() {return this.lastTenPosts[0]}const lastPost = getLastPost()           return `Hello, this is ${this.fullName}'s data!${this.fullName}'s last post was ${lastPost}.`},onFriendClick: function() {window.open(`https://facebook.com/${this.username}`)}};
}

Would this work? If not, how could we change it to make it work?

这行得通吗？ 如果没有，我们如何对其进行更改以使其起作用？

No, it will not work. Because getLastPost is not called within the context of an object, this inside getLastPost falls back to the default rule which is the global object.

不，它不起作用。 由于getLastPost没有对象的范围内调用， this里面getLastPost回落到这是全局对象的默认规则。

You say that it isn’t called “within the context of an object”…don’t you know that it is called inside the object that is returned from initializeFriend? If that isn’t called “within the context of an object” then I don’t know what is.

您说它不被称为“在对象的上下文内”……您是否不知道它是在从initializeFriend返回的对象内部被调用的？ 如果不将其称为“在对象上下文内”，那么我不知道是什么。

I know that “within the context of an object” is vague terminology. Perhaps a good way to determine if a function is called “within the context of an object” is to talk yourself through how the function is called and determine if an object is “attached” to the function.

我知道“在对象上下文中”是模糊的术语。 确定某个函数是否在“对象上下文内”被调用的一种好方法也许是与您自己交谈如何调用该函数，并确定对象是否“附加”到该函数。

Let’s talk through what happens when we execute bobRossObj.onFriendClick(). “Grab me the object bobRossObj, look for the attribute onFriendClick and call the function assigned to that attribute.”

让我们来谈谈执行bobRossObj.onFriendClick()时会发生什么。 “给我对象bobRossObj ，寻找属性onFriendClick并调用分配给该属性的函数 。”

Now let’s talk through what happens when we execute getLastPost(). “Grab me the function with the name getLastPost and call it.” Notice how there was no mention of an object?

现在让我们来谈谈执行getLastPost()时会发生什么。 “给我一个名称为getLastPost的函数，然后调用它。” 请注意，没有提到任何对象吗？

Ok, here’s a tricky one to test your knowledge. Let’s say there is a function functionCaller where all it does is call functions:

好的，这是一个棘手的测试您的知识的方法。 假设有一个函数functionCaller ，它所做的只是调用函数：

functionCaller(fn) {fn()
}

What if we did this: functionCaller(bobRossObj.onFriendClick)? Would you say that onFriendClick was called “within the context of an object”? Would this.username be defined?

如果我们这样做： functionCaller(bobRossObj.onFriendClick)怎么办？ 您是否可以说onFriendClick被称为“在对象上下文内”？ 可以定义this.username吗？

Let’s talk through it: “Grab the object bobRossObj and look for the attribute onFriendClick. Grab its value (which happens to be a function), pass it into functionCaller, and name it fn. Now, execute the function named fn.” Notice that the function gets “detached” from bobRossObj before it is called and is therefore not called “within the context of the object bobRossObj” which means that this.username will be undefined.

让我们来讨论一下：“抓取对象bobRossObj并查找onFriendClick属性。 抓住它的值(恰好是一个函数)，将其传递给functionCaller ，并将其命名为fn 。 现在，执行名为fn的函数。” 请注意，该函数在bobRossObj之前已与bobRossObj “分离”，因此未在“对象bobRossObj的上下文中”被调用，这意味着this.username将是未定义的。

Arrow functions to the rescue:

箭头功能可用于救援：

function initializeFriend(data) {return {lastTenPosts: data.lastTenPosts,birthday: data.birthday,username: data.username,    fullName: `${data.firstName} ${data.lastName}`,getThreeRandomPosts: function() {// get three random posts from this.lastTenPosts},getDaysUntilBirthday: function() {// use this.birthday to get the num days until birthday},greeting: function() {const getLastPost = () => {return this.lastTenPosts[0]}const lastPost = getLastPost()           return `Hello, this is ${this.fullName}'s data!${this.fullName}'s last post was ${lastPost}.`},onFriendClick: function() {window.open(`https://facebook.com/${this.username}`)}};
}

Our rule from above:

我们的规则是：

Whatever this refers to where an arrow function is declared, this refers to the same thing inside that arrow function.

无论this指的箭头声明函数时， this指的是箭头函数内同样的事情。

The arrow function is declared inside of greeting . We know that when we use this in greeting it is referring to the object itself. Therefore, this inside the arrow function is referring to the object itself which is what we want.

箭头函数在greeting声明。 我们知道，当我们用this来greeting它是指对象本身。 因此，箭头功能内部的this是指我们想要的对象本身。

结论 (Conclusion)

this is a sometimes-confusing but helpful tool for developing JavaScript apps. This is definitely not all there is to this. Some topics that were not covered are:

this是用于开发JavaScript应用程序的有时令人困惑但有用的工具。 这绝对不是所有有this 。 一些未涵盖的主题是：

• call and apply

  call apply

• how this changes when new is involved

  怎么this变化时， new参与

• how this changes with the ES6class

  怎么this变化与ES6 class

I encourage you to ask yourself questions about what you think this should be in certain situations, and then test yourself by running that code in the browser. If you want to learn more about this , check out You Don’t Know JS: this & Object Prototypes.

我鼓励你要问自己，什么你认为问题this应在某些情况下，然后通过运行在浏览器的代码测试自己。 如果您想了解更多有关this ，请查看“ 您不知道JS：this和Object Prototypes” 。

And if you want to test yourself, check out YDKJS Exercises: this & Object Prototypes.

如果您想测试一下自己，请查看YDKJS练习：this和Object Prototypes 。

翻译自: https://www.freecodecamp.org/news/a-deep-dive-into-this-in-javascript-why-its-critical-to-writing-good-code-7dca7eb489e7/

javascript编写