`this` question

JavaScript
1

Hello guys!
Can someone explain me why the Window.prototype's methods return this?
What is actualy returning? becouse I know that this take place of what you need.
I know that is a stupid question, but I try to understand better how this works.
Thanks!


// tabs is an array of titles of each site open within the window
var Window = function(tabs) {
 this.tabs = tabs; // We keep a record of the array inside the object
};

// When you join two windows into one window
Window.prototype.join = function (otherWindow) {
 this.tabs = this.tabs.concat(otherWindow.tabs);
 return this;
};

// When you open a new tab at the end
Window.prototype.tabOpen = function (tab) {
 this.tabs.push('new tab'); // Let's open a new tab for now
 return this;
};

// When you close a tab
Window.prototype.tabClose = function (index) {

 // Only change code below this line

 var tabsBeforeIndex = this.tabs.slice(0, index); // Get the tabs before the tab
 var tabsAfterIndex = this.tabs.slice(index + 1); // Get the tabs after the tab

 this.tabs = tabsBeforeIndex.concat(tabsAfterIndex); // Join them together

 // Only change code above this line

 return this;
};

// Let's create three browser windows
var workWindow = new Window(['GMail', 'Inbox', 'Work mail', 'Docs', 'freeCodeCamp']); // Your mailbox, drive, and other work sites
var socialWindow = new Window(['FB', 'Gitter', 'Reddit', 'Twitter', 'Medium']); // Social sites
var videoWindow = new Window(['Netflix', 'YouTube', 'Vimeo', 'Vine']); // Entertainment sites

// Now perform the tab opening, closing, and other operations
var finalTabs = socialWindow
 .tabOpen() // Open a new tab for cat memes
 .join(videoWindow.tabClose(2)) // Close third tab in video window, and join
 .join(workWindow.tabClose(1).tabOpen());
console.log(finalTabs.tabs);

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/81.0.4044.138 Safari/537.36.

Challenge: Understand the Hazards of Using Imperative Code

Link to the challenge:

2

That’s a technique useful for “method chaining”, it works because this in that context refers to the instance of whatever object you’re calling the methods on.

obj.method1(...)
obj.method2(...)
obj.method3(...)

// can be represented as
obj
  .method1(...)
  .method2(...)
  .method3(...)

But only if said method returns this

Chaining also works if the method returns ANY object that has a method but ofc subsequent method calls will act on the object returned by the previous method.

3 Likes
3

Why don’t you do a console.log on 'this ’ and inspect what it holds?
Why don’t you add a debugger; statement just after this and see more details about it?

... your code ...
console.log(this);

debugger;

return this;

Sooner or later you will have to use console.log and debugger or an IDE debugging tool.
No JS developer ever can avoid this (See what I have done here?) :))

Dupa nume imi pari a fii Roman. Salut (Romanian greetings)

1 Like
4

Salut! Mi-ai citit gandurile :)) sa nu ne dea astia report ca nu scriem in engleza…

5

I don’t know where to look if I use debugger;…

6

Have a look in the browser’s console. Assuming you are using google chrome

For other browsers you may search on google.

7

You didn’t understand. I know to look for DevTools, but when I used debugger, it showed something, different from console. I don’t know what to do with that.