0const obj = { name: 'Alice', greet() { console.log(this.name); } }; obj.greet();
| Step | Code Line | 'this' Value | Action | Output |
|---|---|---|---|---|
| 1 | const obj = {...} | N/A | Create object with name and greet method | |
| 2 | obj.greet() | obj | Call greet as method, 'this' is obj | |
| 3 | console.log(this.name) | obj | Access this.name, which is 'Alice' | Alice |
| 4 | Function ends | N/A | No more code to run |
| Variable | Start | After Call |
|---|---|---|
| this | undefined (before call) | obj (inside greet) |
this in functions (JavaScript): - 'this' depends on how function is called - Method call: 'this' = object before dot - Standalone call: 'this' = undefined (strict) or global - call/apply/bind can set 'this' explicitly - Arrow functions inherit 'this' from surrounding scope
this refer to inside a regular function called as obj.method()?this works in method callsthis points to that object.obj.method()method is called by obj, this inside method refers to obj.obj that calls the method -> Option Dobj.method() means this = obj [OK]this is the caller object in method calls [OK]this is always globalthis with the function itselfthis is undefined in method callsthis refers to the object?thisthis; they inherit from the outer scope. Regular functions have their own this.this is inherited from outer scope (global), not the object. B uses concise method syntax, which binds this to the object. C uses invalid syntax (cannot define concise method with arrow). D uses invalid syntax (function() => not valid).this in objects [OK]this as objectmethod() => {}function() => {} inside objectconst obj = {
name: 'Alice',
greet() {
function inner() {
console.log(this.name);
}
inner();
}
};
obj.greet();this inside inner functioninner is a regular function called without an object, so this inside it is undefined in strict mode (or global object in non-strict).this.name printsthis is undefined, this.name is undefined, so console.log prints undefined.this = undefined [OK]this undefined [OK]this inside inner function is the objectthis.name inside inner refers to obj.const obj = {
name: 'Bob',
greet() {
function inner() {
console.log(this.name);
}
inner();
}
};
obj.greet();this is wrong inside innerinner is a regular function called alone, this is undefined, not obj.this correctlyinner to an arrow function: Using arrow function for inner inherits this from greet, which is obj. Bind inner to this using inner.bind(this)(): Using inner.bind(this)() explicitly sets this to obj. Assign const self = this and use self.name inside inner: Saving this in self and using self.name works because self is accessible inside inner.this [OK]this in inner functions [OK]thisbind methodcounter with a method count that increases a number every second and logs it using this.value. Which code correctly keeps this referring to counter inside setInterval callback?const counter = {
value: 0,
count() {
setInterval(function() {
this.value++;
console.log(this.value);
}, 1000);
}
};
counter.count();this in setIntervalthis inside it is not counter but undefined or global object.this as countersetInterval(() => { this.value++; console.log(this.value); }, 1000);: Arrow functions inherit this from count, so this.value works. Bind this to the callback: setInterval(function() { ... }.bind(this), 1000);: Using bind(this) explicitly sets this inside callback. Save const self = this before setInterval and use self.value inside callback: Saving this in self and using self.value works because self is accessible inside callback.this referring to counter.this in callbacks [OK]this in callbacks [OK]thisthis to be counter automaticallythis before callbackPass the test and this pattern moves unknown strong while earning +1 Grip toward your certificate.