- 1: {name: "John", eat: f}, {name: "John", eat: f} - 2: Window {...}, Window {...} - 3: {name: "John", eat: f}, undefined - 4: {name: "John", eat: f}, Window {...}

##### Answer: 4 this keyword is dynamic scoped but not lexically scoped . In other words, it doesn't matter where this has been written but how it has been invoked really matter. In the above code snippet, the user object invokes eat function so this keyword refers to user object but eatFruit has been invoked by eat function and this will have default Window object. The above pit fall fixed by three ways, 1. In ES6, the arrow function will make this keyword as lexically scoped. Since the surrounding object of this object is user object, the eatFruit function will contain user object for this object. The next two solutions have been used before ES6 introduced. 2. It is possible create a reference of this into a separate variable and use that new variable inplace of this keyword inside eatFruit function. This is a common practice in jQuery and AngularJS before ES6 introduced. 3. The eatFruit function can bind explicitly with this keyword where it refers Window object.

JavaScript Coding Exercise 71 | JSCodingQuestions.com

javascript

1const user = {
2
3name: "John",
4
5eat() {
6
7console.log(this);
8
9var eatFruit = function () {
10
11console.log(this);
12};
13
14eatFruit();
15},
16};
17
18user.eat();

Choose the correct output:

{name: "John", eat: f}, {name: "John", eat: f}

Window {...}, Window {...}

{name: "John", eat: f}, undefined

{name: "John", eat: f}, Window {...}