🎯 The JavaScript `this` Keyword: Complete Guide to Context Binding

Interview Importance: 🔴 Critical — this binding is frequently asked in JavaScript interviews. Understanding its behavior is essential for object-oriented patterns, React class components, event handlers, and debugging mysterious bugs.

1️⃣ What is this?

this is a special keyword in JavaScript that refers to the execution context of a function. Unlike variables, this isn't determined by where a function is written (lexical scope), but by how and where the function is called (runtime binding).

The Core Concept

+-------------------------------------------------------------+
|                    THE 'this' KEYWORD                        |
|                                                              |
|  Regular Function:                                           |
|  +---------------------------------------------------+      |
|  |  'this' = WHO CALLED ME?                          |      |
|  |                                                   |      |
|  |  Different caller -> Different 'this' ✓            |      |
|  +---------------------------------------------------+      |
|                                                              |
|  Arrow Function:                                             |
|  +---------------------------------------------------+      |
|  |  'this' = INHERITED FROM PARENT SCOPE             |      |
|  |                                                   |      |
|  |  Same 'this' regardless of caller ✓               |      |
|  +---------------------------------------------------+      |
+-------------------------------------------------------------+

Real-World Analogy: The Pronoun "You" 👤

Think of this like the pronoun "you" in English:

Scenario 1: Teacher to Student
"You need to study harder."  -> 'You' refers to the student

Scenario 2: Student to Teacher  
"You explained it well."     -> 'You' refers to the teacher

The word "you" doesn't change, but WHO it refers to 
depends on the CONTEXT of the conversation!

Similarly, 'this' refers to different objects 
depending on HOW the function is called.

Quick Example

const user = {
  name: 'Alice',
  greet: function() {
    console.log(`Hello, I'm ${this.name}`);
  }
};

user.greet();  // "Hello, I'm Alice" -> 'this' refers to 'user'

const greetFunc = user.greet;
greetFunc();   // "Hello, I'm undefined" -> 'this' is now window/undefined!

// Same function, different 'this'!

2️⃣ Why Does this Matter?

Use Cases Table

Why this is Confusing

+--------------------------------------------------------------+
|               THE 'this' CONFUSION                            |
+--------------------------------------------------------------+
|  ⚠️  Dynamic Binding    -> Value changes at runtime           |
|  ⚠️  Multiple Rules     -> 4 different binding rules          |
|  ⚠️  Implicit Behavior  -> Easy to lose binding accidentally  |
|  ⚠️  Arrow Functions    -> Different behavior entirely        |
|  ⚠️  Strict Mode        -> Changes default binding            |
+--------------------------------------------------------------+

Common Pain Points:

• Passing methods as callbacks loses this binding
• Event handlers have unexpected this values
• Arrow functions in objects don't work as expected
• Nested functions lose outer this context

3️⃣ How It Works — The 4 Binding Rules

JavaScript determines this using 4 rules in order of precedence:

Rule 1: new Binding (Highest Priority)

function User(name, age) {
  // 'new' creates a new empty object and sets 'this' to it
  this.name = name;
  this.age = age;
}

const user1 = new User('Alice', 25);
console.log(user1.name);  // "Alice" -> 'this' was the new object

Rule 2: Explicit Binding (call, apply, bind)

const person = { name: 'Bob' };

function greet(greeting) {
  console.log(`${greeting}, ${this.name}`);
}

greet.call(person, 'Hello');   // "Hello, Bob" -> 'this' = person
greet.apply(person, ['Hi']);   // "Hi, Bob"    -> 'this' = person

const boundGreet = greet.bind(person);
boundGreet('Hey');             // "Hey, Bob"   -> 'this' locked to person

Rule 3: Implicit Binding (Method Call)

const user = {
  name: 'Charlie',
  greet() {
    console.log(`Hello, ${this.name}`);
  }
};

user.greet();  // "Hello, Charlie" -> 'this' = user (left of the dot)

Rule 4: Default Binding (Lowest Priority)

function showThis() {
  console.log(this);
}

showThis();  
// Non-strict mode: window (in browser) or global (in Node)
// Strict mode: undefined

🔍 Dry Run: this Binding Resolution

Example:

const calculator = {
  value: 0,
  add: function(num) {
    this.value += num;
    return this;
  },
  multiply: function(num) {
    this.value *= num;
    return this;
  }
};

calculator.add(5).multiply(2);

Step-by-Step Execution:

Step 1: calculator.add(5)
---------------------------------------------------------
  Call site: calculator.add(5)
  Rule applied: Implicit Binding (Rule 3)
  'this' = calculator (object before the dot)
  
  Inside add():
    this.value += 5
    -> calculator.value = 0 + 5 = 5
  Returns: this (calculator object)

Step 2: .multiply(2)
---------------------------------------------------------
  Call site: (result from step 1).multiply(2)
  Since step 1 returned calculator:
    -> calculator.multiply(2)
  
  Rule applied: Implicit Binding (Rule 3)
  'this' = calculator
  
  Inside multiply():
    this.value *= 2
    -> calculator.value = 5 * 2 = 10
  Returns: this (calculator object)

Final Result: calculator.value = 10

4️⃣ Understanding Key Concepts

Concept 1: The Lost this Problem

Why it happens:

const user = {
  name: 'Dave',
  greet() {
    console.log(`Hi, ${this.name}`);
  }
};

// ✅ Works: Implicit binding
user.greet();  // "Hi, Dave"

// ❌ Breaks: Lost binding!
const greetFunc = user.greet;
greetFunc();   // "Hi, undefined" (or error in strict mode)

What's happening:

user.greet();
+-> 'this' = user (implicit binding)

const greetFunc = user.greet;
+-> Just copying the function, not the context!

greetFunc();
+-> No object before the dot -> default binding -> 'this' = window/undefined

The fix: Use bind, arrow functions, or preserve context:

// Fix 1: bind
const greetFunc = user.greet.bind(user);

// Fix 2: Arrow function wrapper
const greetFunc = () => user.greet();

// Fix 3: Call with context
greetFunc.call(user);

Concept 2: Arrow Functions Don't Have Their Own this

Arrow functions inherit this from their enclosing lexical scope:

const team = {
  name: 'Engineers',
  members: ['Alice', 'Bob'],
  
  // Regular function: 'this' depends on call
  printMembersRegular: function() {
    this.members.forEach(function(member) {
      // 'this' is undefined here! (forEach callback loses context)
      console.log(`${member} is in ${this.name}`);  // ERROR
    });
  },
  
  // Arrow function: 'this' inherited from parent scope
  printMembersArrow: function() {
    this.members.forEach((member) => {
      // 'this' still refers to 'team' object!
      console.log(`${member} is in ${this.name}`);  // ✓ Works
    });
  }
};

team.printMembersArrow();
// "Alice is in Engineers"
// "Bob is in Engineers"

Why this works:

printMembersArrow: function() {         <-- 'this' = team
    this.members.forEach((member) => {  <-- Arrow function: inherits 'this'
      console.log(this.name);           <-- Still 'team'!
    });
}

Concept 3: this in Event Handlers

const button = document.querySelector('button');

// Regular function: 'this' = the element
button.addEventListener('click', function() {
  console.log(this);  // <button> element
  this.classList.add('clicked');  // ✓ Works
});

// Arrow function: 'this' = outer scope (not the element!)
button.addEventListener('click', () => {
  console.log(this);  // window or outer context
  this.classList.add('clicked');  // ❌ Error!
});

// Solution: Use parameter instead
button.addEventListener('click', (event) => {
  console.log(event.currentTarget);  // <button> element
  event.currentTarget.classList.add('clicked');  // ✓ Works
});

5️⃣ Production/Advanced Implementation

Pattern 1: Safe Method Binding

class ApiClient {
  constructor(baseUrl) {
    this.baseUrl = baseUrl;
    this.requestCount = 0;
    
    // Bind all methods in constructor for safe callbacks
    this.get = this.get.bind(this);
    this.post = this.post.bind(this);
    this.incrementCount = this.incrementCount.bind(this);
  }
  
  incrementCount() {
    this.requestCount++;
    console.log(`Total requests: ${this.requestCount}`);
  }
  
  async get(endpoint) {
    this.incrementCount();
    const url = `${this.baseUrl}${endpoint}`;
    const response = await fetch(url);
    return response.json();
  }
  
  async post(endpoint, data) {
    this.incrementCount();
    const url = `${this.baseUrl}${endpoint}`;
    const response = await fetch(url, {
      method: 'POST',
      body: JSON.stringify(data),
      headers: { 'Content-Type': 'application/json' }
    });
    return response.json();
  }
}

// Usage: safe to pass methods as callbacks
const api = new ApiClient('https://api.example.com');
const getData = api.get;  // Would normally lose 'this'
await getData('/users');  // ✓ Still works! (pre-bound in constructor)

Pattern 2: Mixin Pattern with Proper this Handling

const cacheable = {
  // This mixin can be applied to any object
  cache: new Map(),
  
  getCached(key, fetchFn) {
    if (this.cache.has(key)) {
      console.log(`Cache hit for ${key}`);
      return this.cache.get(key);
    }
    
    console.log(`Cache miss for ${key}`);
    // fetchFn is called with correct 'this' context
    const value = fetchFn.call(this, key);
    this.cache.set(key, value);
    return value;
  },
  
  clearCache() {
    this.cache.clear();
    console.log('Cache cleared');
  }
};

// Apply mixin to a user service
const userService = {
  apiUrl: 'https://api.example.com',
  
  fetchUser(id) {
    console.log(`Fetching from ${this.apiUrl}/users/${id}`);
    return { id, name: `User ${id}` };  // Simulated fetch
  },
  
  getUser(id) {
    // Uses cacheable mixin with proper 'this' binding
    return this.getCached(id, this.fetchUser);
  }
};

// Merge mixin
Object.assign(userService, cacheable);

// Usage
console.log(userService.getUser(1));  // Cache miss, fetches
console.log(userService.getUser(1));  // Cache hit

Pattern 3: Decorator Pattern with this Preservation

// Decorator that logs method calls while preserving 'this'
const logMethod = (target, methodName) => {
  const originalMethod = target[methodName];
  
  target[methodName] = function(...args) {
    console.log(`[${methodName}] called with:`, args);
    console.log(`[${methodName}] 'this' context:`, this);
    
    // Call original with correct 'this' and arguments
    const result = originalMethod.apply(this, args);
    
    console.log(`[${methodName}] returned:`, result);
    return result;
  };
};

// Usage
class ShoppingCart {
  constructor() {
    this.items = [];
    this.total = 0;
  }
  
  addItem(item, price) {
    this.items.push(item);
    this.total += price;
    return this.total;
  }
  
  removeItem(item, price) {
    const index = this.items.indexOf(item);
    if (index > -1) {
      this.items.splice(index, 1);
      this.total -= price;
    }
    return this.total;
  }
}

// Decorate methods
const cart = new ShoppingCart();
logMethod(cart, 'addItem');
logMethod(cart, 'removeItem');

cart.addItem('Book', 20);
// [addItem] called with: ['Book', 20]
// [addItem] 'this' context: ShoppingCart { items: [], total: 0 }
// [addItem] returned: 20

6️⃣ Real-World Examples

React Class Components

import React from 'react';

class Counter extends React.Component {
  constructor(props) {
    super(props);
    this.state = { count: 0 };
    
    // Fix 1: Bind in constructor (best performance)
    this.handleIncrement = this.handleIncrement.bind(this);
  }
  
  handleIncrement() {
    // 'this' refers to component instance
    this.setState({ count: this.state.count + 1 });
  }
  
  // Fix 2: Class field with arrow function (no binding needed)
  handleDecrement = () => {
    this.setState({ count: this.state.count - 1 });
  }
  
  // Fix 3: Arrow function in JSX (creates new function each render)
  handleReset() {
    this.setState({ count: 0 });
  }
  
  render() {
    return (
      <div>
        <p>Count: {this.state.count}</p>
        
        {/* ✓ Bound in constructor */}
        <button onClick={this.handleIncrement}>+</button>
        
        {/* ✓ Arrow function class field */}
        <button onClick={this.handleDecrement}>-</button>
        
        {/* ✓ Arrow function wrapper (less efficient) */}
        <button onClick={() => this.handleReset()}>Reset</button>
        
        {/* ❌ BROKEN: loses 'this' binding! */}
        {/* <button onClick={this.handleReset}>Reset</button> */}
      </div>
    );
  }
}

jQuery Event Handlers

class ImageGallery {
  constructor(containerId) {
    this.$container = $(`#${containerId}`);
    this.currentIndex = 0;
    this.images = [];
    
    this.init();
  }
  
  init() {
    // Load images
    this.images = ['img1.jpg', 'img2.jpg', 'img3.jpg'];
    this.render();
    
    // Problem: jQuery event handlers lose 'this' context
    // Solution: Use arrow functions or .bind()
    
    this.$container.on('click', '.next-btn', (event) => {
      // Arrow function: 'this' = ImageGallery instance
      this.nextImage();
    });
    
    this.$container.on('click', '.prev-btn', (event) => {
      this.prevImage();
    });
    
    // Alternative with bind
    // this.$container.on('click', '.next-btn', this.nextImage.bind(this));
  }
  
  nextImage() {
    this.currentIndex = (this.currentIndex + 1) % this.images.length;
    this.render();
  }
  
  prevImage() {
    this.currentIndex = 
      (this.currentIndex - 1 + this.images.length) % this.images.length;
    this.render();
  }
  
  render() {
    const img = this.images[this.currentIndex];
    this.$container.find('img').attr('src', img);
  }
}

Debouncing with Correct this Context

const debounce = (fn, delay) => {
  let timeoutId;
  
  // Return function that preserves 'this' and arguments
  return function(...args) {
    const context = this;  // Capture 'this' from call site
    
    clearTimeout(timeoutId);
    
    timeoutId = setTimeout(() => {
      fn.apply(context, args);  // Call with correct 'this'
    }, delay);
  };
};

// Usage in a search component
class SearchBox {
  constructor(inputId) {
    this.input = document.getElementById(inputId);
    this.results = [];
    this.apiUrl = 'https://api.example.com/search';
    
    // Debounce the search method while preserving 'this'
    this.debouncedSearch = debounce(this.search, 300);
    
    this.input.addEventListener('input', (event) => {
      // Call debounced method with proper 'this'
      this.debouncedSearch(event.target.value);
    });
  }
  
  async search(query) {
    if (!query) {
      this.results = [];
      this.render();
      return;
    }
    
    // 'this' correctly refers to SearchBox instance
    const response = await fetch(`${this.apiUrl}?q=${query}`);
    this.results = await response.json();
    this.render();
  }
  
  render() {
    console.log(`Rendering ${this.results.length} results`);
    // Update DOM with results
    const resultsHTML = this.results
      .map(result => `<div class="result">${result.title}</div>`)
      .join('');
    document.getElementById('results').innerHTML = resultsHTML;
  }
}

7️⃣ Comparison: this Binding Rules

Precedence Example

const obj = {
  value: 42,
  getValue: function() {
    return this.value;
  }
};

const altObj = { value: 100 };

// Implicit binding
console.log(obj.getValue());  // 42

// Explicit binding overrides implicit
console.log(obj.getValue.call(altObj));  // 100

// 'new' binding overrides explicit
const BoundGetValue = obj.getValue.bind(obj);
const instance = new BoundGetValue();  
console.log(instance.value);  // undefined (new empty object, not obj!)

8️⃣ Common Interview Questions

Q1: What will this code output?

const obj = {
  name: 'Object',
  getName: function() {
    return this.name;
  }
};

const getName = obj.getName;
console.log(getName());

Answer: undefined (or error in strict mode)

Explanation: When we assign obj.getName to getName, we lose the implicit binding. Calling getName() is a default binding, so this becomes window/global (which doesn't have a name property) or undefined in strict mode.

Q2: How do you fix the setTimeout this problem?

const user = {
  name: 'John',
  greet: function() {
    setTimeout(function() {
      console.log(`Hello, ${this.name}`);  // Problem: 'this' is undefined
    }, 1000);
  }
};

Answer: Three solutions:

// Solution 1: Arrow function (inherits 'this')
greet: function() {
  setTimeout(() => {
    console.log(`Hello, ${this.name}`);  // ✓ Works
  }, 1000);
}

// Solution 2: Bind
greet: function() {
  setTimeout(function() {
    console.log(`Hello, ${this.name}`);
  }.bind(this), 1000);
}

// Solution 3: Save 'this' in variable
greet: function() {
  const self = this;
  setTimeout(function() {
    console.log(`Hello, ${self.name}`);
  }, 1000);
}

Q3: What's the difference between .call(), .apply(), and .bind()?

Answer:

const person = { name: 'Alice' };

function greet(greeting, punctuation) {
  console.log(`${greeting}, ${this.name}${punctuation}`);
}

// call: Invokes immediately, arguments passed individually
greet.call(person, 'Hello', '!');  // "Hello, Alice!"

// apply: Invokes immediately, arguments passed as array
greet.apply(person, ['Hi', '?']);  // "Hi, Alice?"

// bind: Returns new function, doesn't invoke
const boundGreet = greet.bind(person, 'Hey');
boundGreet('...');  // "Hey, Alice..."

Key Differences:

• call and apply invoke the function immediately
• bind returns a new function with locked this
• call takes arguments individually: fn.call(ctx, arg1, arg2)
• apply takes arguments as array: fn.apply(ctx, [arg1, arg2])

Q4: Why doesn't this work in arrow functions?

const obj = {
  value: 10,
  getValue: () => {
    return this.value;  // 'this' is NOT 'obj'!
  }
};

console.log(obj.getValue());  // undefined

Answer: Arrow functions don't have their own this binding. They lexically inherit this from the enclosing scope. In this case, the enclosing scope is the global scope (where the object literal is defined), so this refers to window/global, not obj.

When to use arrow functions:

• ✅ Callbacks where you want to preserve outer this
• ✅ Array methods (map, filter, etc.)
• ✅ setTimeout/setInterval
• ❌ Object methods (use regular functions)
• ❌ Prototype methods
• ❌ Event handlers when you need element context

Q5: What will this output and why?

const calculator = {
  value: 0,
  add(n) {
    this.value += n;
    return this;
  },
  multiply(n) {
    this.value *= n;
    return this;
  }
};

const calc = calculator;
calc.add(10).multiply(2);
console.log(calculator.value);

Answer: 20

Explanation:

1. calc and calculator reference the same object
2. calc.add(10) -> implicit binding, this = calculator, value becomes 10, returns this
3. .multiply(2) -> called on returned object (calculator), this = calculator, value becomes 20
4. Since calc and calculator are the same object, calculator.value is 20

This is method chaining pattern. Each method returns this to allow chaining.

Q6: How does this work in class constructors?

class Animal {
  constructor(name) {
    this.name = name;
    this.speak = this.speak.bind(this);  // Why bind?
  }
  
  speak() {
    console.log(`${this.name} makes a sound`);
  }
}

const dog = new Animal('Rex');
const speakFunc = dog.speak;
speakFunc();  // Works! Why?

Answer: Inside a constructor, this refers to the newly created instance (due to new binding). When we use bind in the constructor, we permanently lock the speak method to the specific instance. This prevents losing this when the method is passed as a callback.

Without binding:

const speakFunc = dog.speak;
speakFunc();  // Error: this.name is undefined (lost binding)

With binding:

const speakFunc = dog.speak;
speakFunc();  // "Rex makes a sound" (binding preserved)

9️⃣ Common Pitfalls

Pitfall 1: Losing this in Callbacks

❌ BAD: Method passed as callback loses this

class Timer {
  constructor() {
    this.seconds = 0;
  }
  
  start() {
    // Problem: 'tick' method loses 'this' when passed to setInterval
    setInterval(this.tick, 1000);
  }
  
  tick() {
    this.seconds++;  // Error: 'this' is undefined!
    console.log(this.seconds);
  }
}

const timer = new Timer();
timer.start();  // ❌ Crashes!

✅ GOOD: Preserve this with arrow function or bind

class Timer {
  constructor() {
    this.seconds = 0;
  }
  
  start() {
    // Solution 1: Arrow function wrapper
    setInterval(() => this.tick(), 1000);
    
    // Solution 2: Bind in call
    // setInterval(this.tick.bind(this), 1000);
  }
  
  tick() {
    this.seconds++;  // ✓ 'this' correctly refers to Timer instance
    console.log(this.seconds);
  }
}

// Alternative: Bind in constructor (best for performance)
class Timer {
  constructor() {
    this.seconds = 0;
    this.tick = this.tick.bind(this);  // Bind once
  }
  
  start() {
    setInterval(this.tick, 1000);  // ✓ Already bound
  }
  
  tick() {
    this.seconds++;
    console.log(this.seconds);
  }
}

Why this matters: Prevents "Cannot read property 'X' of undefined" errors that are extremely common in event handlers, async callbacks, and timers.

Pitfall 2: Arrow Functions in Object Literals

❌ BAD: Arrow function in object method

const user = {
  name: 'Alice',
  
  // Problem: Arrow function inherits 'this' from global scope
  greet: () => {
    console.log(`Hello, ${this.name}`);  // 'this' is NOT 'user'!
  }
};

user.greet();  // "Hello, undefined"

✅ GOOD: Use regular function for object methods

const user = {
  name: 'Alice',
  
  // Solution: Regular function for object methods
  greet: function() {
    console.log(`Hello, ${this.name}`);  // 'this' = user
  },
  
  // Or shorthand syntax
  greetShort() {
    console.log(`Hello, ${this.name}`);  // 'this' = user
  }
};

user.greet();       // "Hello, Alice" ✓
user.greetShort();  // "Hello, Alice" ✓

Rule of thumb: Never use arrow functions for object methods (methods defined directly in object literals). Arrow functions are great for callbacks INSIDE those methods.

Pitfall 3: Nested Functions Lose this

❌ BAD: Inner function loses outer this

const team = {
  name: 'Developers',
  members: ['Alice', 'Bob', 'Charlie'],
  
  printMembers: function() {
    this.members.forEach(function(member) {
      // Problem: 'this' is undefined in this inner function!
      console.log(`${member} is in ${this.name}`);  // Error!
    });
  }
};

team.printMembers();  // ❌ Crashes

✅ GOOD: Multiple solutions

const team = {
  name: 'Developers',
  members: ['Alice', 'Bob', 'Charlie'],
  
  // Solution 1: Arrow function (inherits 'this')
  printMembers1: function() {
    this.members.forEach((member) => {
      console.log(`${member} is in ${this.name}`);  // ✓ Works
    });
  },
  
  // Solution 2: Save 'this' in variable
  printMembers2: function() {
    const self = this;
    this.members.forEach(function(member) {
      console.log(`${member} is in ${self.name}`);  // ✓ Works
    });
  },
  
  // Solution 3: Use second parameter of forEach
  printMembers3: function() {
    this.members.forEach(function(member) {
      console.log(`${member} is in ${this.name}`);
    }, this);  // ✓ forEach accepts 'thisArg' as second parameter
  }
};

Pitfall 4: Destructuring Loses Method Context

❌ BAD: Destructuring breaks this binding

const user = {
  name: 'Dave',
  greet() {
    console.log(`Hello, ${this.name}`);
  }
};

// Problem: Destructuring extracts the function, loses 'this'
const { greet } = user;
greet();  // "Hello, undefined" ❌

✅ GOOD: Keep reference or bind

const user = {
  name: 'Dave',
  greet() {
    console.log(`Hello, ${this.name}`);
  }
};

// Solution 1: Don't destructure, call through object
user.greet();  // "Hello, Dave" ✓

// Solution 2: Bind after destructuring
const { greet } = user;
const boundGreet = greet.bind(user);
boundGreet();  // "Hello, Dave" ✓

// Solution 3: Arrow wrapper
const { greet: originalGreet } = user;
const greetWrapper = () => originalGreet.call(user);
greetWrapper();  // "Hello, Dave" ✓

🔟 Time & Space Complexity

Notes:

• this binding is determined at call time, not definition time (except arrows)
• All binding mechanisms have O(1) overhead
• The actual function execution time/space dominates
• Binding doesn't create copies of functions, just references with context

Summary

Quick Reference Table

5 Key Takeaways

1. this is determined by HOW a function is called, not where it's defined (except arrow functions)

2. Four binding rules in priority order:

   • new binding (highest)
   • Explicit binding (call/apply/bind)
   • Implicit binding (obj.method)
   • Default binding (lowest)

3. Arrow functions don't have their own this - they inherit it lexically from the enclosing scope. Never use them for object methods!

4. Common pitfalls:

   • Passing methods as callbacks loses this -> use bind or arrow wrappers
   • Arrow functions in object literals don't work -> use regular functions
   • Nested functions lose outer this -> use arrows for inner functions

5. Best practices:

   • Bind methods in constructor for class components
   • Use arrow functions for callbacks that need outer this
   • Use regular functions for object methods
   • Store this in self variable if working with older code

📚 Further Reading

• MDN: this
• You Don't Know JS: this & Object Prototypes
• JavaScript.info: Object methods, "this"