[{"data":1,"prerenderedAt":186},["ShallowReactive",2],{"qa-\u002Fjavascript\u002Ffunctions\u002Fthis-keyword":3},{"page":4,"siblings":165,"blog":183},{"id":5,"title":6,"body":7,"description":11,"difficulty":14,"extension":15,"framework":16,"frameworkSlug":17,"meta":18,"navigation":19,"order":12,"path":20,"questions":21,"related":156,"seo":157,"seoDescription":158,"stem":159,"subtopic":160,"topic":161,"topicSlug":162,"updated":163,"__hash__":164},"qa\u002Fjavascript\u002Ffunctions\u002Fthis-keyword.md","This Keyword",{"type":8,"value":9,"toc":10},"minimark",[],{"title":11,"searchDepth":12,"depth":12,"links":13},"",2,[],"hard","md","JavaScript","javascript",{},true,"\u002Fjavascript\u002Ffunctions\u002Fthis-keyword",[22,27,31,35,39,43,47,51,55,59,63,67,71,75,79,83,87,91,96,100,104,108,112,116,120,124,128,132,136,140,144,148,152],{"id":23,"difficulty":24,"q":25,"a":26},"what-is-this","medium","How is the value of `this` determined?","The single most important idea: in a regular function `this` is decided by\n**how the function is *called*, not where it's defined**. There are four\nbinding rules, in order of precedence:\n\n1. **`new` binding** — `new Fn()` -> `this` is the brand-new instance.\n2. **Explicit binding** — `fn.call(obj)`, `fn.apply(obj)`, `fn.bind(obj)` ->\n   `this` is the object you pass.\n3. **Implicit binding** — `obj.fn()` -> `this` is `obj` (the thing left of the\n   dot).\n4. **Default binding** — a plain `fn()` -> `this` is `undefined` in strict mode,\n   or the global object (`window`\u002F`globalThis`) in sloppy mode.\n\n```js\nfunction who() { return this }\nconst obj = { who }\nobj.who()            \u002F\u002F obj      (implicit)\nwho.call('hi')       \u002F\u002F 'hi'     (explicit)\nnew who()            \u002F\u002F {}       (new instance)\nwho()                \u002F\u002F undefined in strict mode\n```\n\nArrow functions are the exception — they ignore all four rules and inherit\n`this` lexically (next question).\n",{"id":28,"difficulty":24,"q":29,"a":30},"arrow-this","How does `this` work in arrow functions?","Arrow functions **don't have their own `this`**. They capture it\n**lexically** — from the enclosing scope at the moment they're *defined* — and\nthat binding can never be changed (even `call`\u002F`apply`\u002F`bind` can't reassign\nit). This makes them perfect for callbacks where you want to keep the\nsurrounding object's `this`.\n\n```js\nclass Timer {\n  seconds = 0\n  start() {\n    \u002F\u002F arrow inherits `start`'s `this` (the Timer instance)\n    setInterval(() => this.seconds++, 1000)\n\n    \u002F\u002F a regular function here would be called by the timer with\n    \u002F\u002F `this` === undefined, so `this.seconds` would throw\n  }\n}\n```\n\nThe flip side: because they lack their own `this`, arrows are a poor choice for\n**object methods that need to reference the object** (`this` would point to the\nouter scope, not the object) and they **cannot be used as constructors**.\n",{"id":32,"difficulty":24,"q":33,"a":34},"call-apply-bind","What is the difference between call, apply and bind?","All three let you **explicitly set `this`**; they differ in *when* they invoke\nand *how* they take arguments:\n\n- `fn.call(thisArg, a, b)` — invokes **immediately**, arguments passed\n  **individually**.\n- `fn.apply(thisArg, [a, b])` — invokes **immediately**, arguments passed as an\n  **array**.\n- `fn.bind(thisArg, a)` — does **not** invoke; returns a **new function** with\n  `this` (and any given args) **permanently** locked in.\n\n```js\nfunction greet(greeting, mark) {\n  return `${greeting}, ${this.name}${mark}`\n}\nconst user = { name: 'Ada' }\n\ngreet.call(user, 'Hi', '!')      \u002F\u002F 'Hi, Ada!'   (args listed)\ngreet.apply(user, ['Hi', '!'])   \u002F\u002F 'Hi, Ada!'   (args in array)\nconst greetAda = greet.bind(user) \u002F\u002F returns a function\ngreetAda('Hey', '.')             \u002F\u002F 'Hey, Ada.'\n```\n\nMemory aid: **A**pply = **A**rray; **bind** = \"remember for later.\" `bind` is\nthe usual fix for passing a method as a callback without losing its receiver.\n",{"id":36,"difficulty":14,"q":37,"a":38},"lost-this","Why does `this` become undefined when passing a method as a callback?","Because `this` is set at **call time** by the *call site*, and passing a method\nsomewhere else detaches it from its object. `setTimeout(obj.fn)` only copies\nthe **function** — the `obj.` context is lost, so when the timer later calls it\nas a plain function, `this` is `undefined` (strict) \u002F global (sloppy).\n\n```js\nconst counter = {\n  count: 0,\n  inc() { this.count++ },\n}\n\nsetTimeout(counter.inc, 100)        \u002F\u002F `this` is not `counter` -> throws\u002FNaN\n\nsetTimeout(counter.inc.bind(counter), 100)  \u002F\u002F bind the receiver\nsetTimeout(() => counter.inc(), 100)        \u002F\u002F arrow calls it ON counter\n```\n\nThis is exactly why React class components had to do\n`this.handleClick = this.handleClick.bind(this)` in the constructor — or use\nclass arrow-field methods, which sidestep the problem.\n",{"id":40,"difficulty":24,"q":41,"a":42},"new-binding","What does `this` refer to inside a constructor function?","When you call a function with `new`, JavaScript does four things: (1) creates a\nfresh empty object, (2) sets that object's prototype to the constructor's\n`.prototype`, (3) binds `this` to the new object inside the call, and (4)\nreturns that object automatically — **unless** the constructor explicitly\nreturns its own (non-primitive) object.\n\n```js\nfunction User(name) {\n  this.name = name      \u002F\u002F `this` is the new instance\n  \u002F\u002F no return needed — the instance is returned for you\n}\nconst u = new User('Ada')\nu.name \u002F\u002F 'Ada'\n\nfunction Weird() {\n  this.a = 1\n  return { b: 2 } \u002F\u002F returning an object overrides the default `this`\n}\nnew Weird() \u002F\u002F { b: 2 }  (the `this.a = 1` is discarded)\n```\n\nForgetting `new` is a classic bug: calling `User('Ada')` plainly runs default\nbinding, so `this` is the global object and you accidentally create a global\n`name`.\n",{"id":44,"difficulty":24,"q":45,"a":46},"this-strict","How does strict mode change `this` in a plain function call?","In **sloppy (non-strict) mode**, a plain function call defaults `this` to the\n**global object** (`window` \u002F `globalThis`). In **strict mode** — and inside ES\nmodules and class bodies, which are *always* strict — that same call leaves\n`this` as **`undefined`**.\n\n```js\nfunction show() { return this }\n\n\u002F\u002F sloppy mode\nshow() \u002F\u002F the global object\n\n\u002F\u002F strict mode\n'use strict'\nshow() \u002F\u002F undefined\n```\n\nThis is a feature, not a nuisance: with `undefined` you get a loud\n`TypeError` the moment you accidentally rely on default binding\n(`Cannot read properties of undefined`), instead of silently leaking\nproperties onto the global object. It surfaces \"I forgot to bind `this`\" bugs\nimmediately.\n",{"id":48,"difficulty":14,"q":49,"a":50},"this-precedence","What is the precedence order of the this binding rules?","When multiple rules could apply, they resolve in this order (highest first):\n\n1. **`new` binding** — `new Fn()` wins over everything.\n2. **Explicit binding** — `call`\u002F`apply`\u002F`bind`.\n3. **Implicit binding** — `obj.method()`.\n4. **Default binding** — plain `fn()` -> `undefined`\u002Fglobal.\n\n```js\nfunction f() { return this.id }\nconst obj = { id: 1, f }\nconst bound = f.bind({ id: 2 })\nobj.f()            \u002F\u002F 1 (implicit)\nbound()            \u002F\u002F 2 (explicit beats implicit)\nnew bound().id     \u002F\u002F undefined-> new beats bind (this is the new instance)\n```\n\nArrow functions sit outside this hierarchy entirely — they ignore all four rules\nand inherit `this` lexically.\n",{"id":52,"difficulty":24,"q":53,"a":54},"this-event-listener","What is this inside a DOM event listener?","In a **regular function** listener, `this` is the **element** the handler is\nattached to (the `currentTarget`). In an **arrow function**, `this` is inherited\nfrom the surrounding scope instead.\n\n```js\nbutton.addEventListener('click', function () {\n  this \u002F\u002F the button element\n})\nbutton.addEventListener('click', () => {\n  this \u002F\u002F whatever `this` was outside (NOT the button)\n})\n```\n\nSo use a regular function when you want `this` to be the element; use an arrow\n(and `e.currentTarget`) when you need the outer `this`. This trips people up when\nconverting handlers to arrows.\n",{"id":56,"difficulty":24,"q":57,"a":58},"this-foreach","How do you control this inside forEach and similar methods?","`forEach`, `map`, `filter`, etc. accept an optional **`thisArg`** second argument\nthat sets `this` for the callback. Alternatively, use an arrow function that\ninherits `this` lexically.\n\n```js\nconst obj = {\n  prefix: '>',\n  log(arr) {\n    arr.forEach(function (x) { console.log(this.prefix, x) }, this) \u002F\u002F thisArg\n    arr.forEach(x => console.log(this.prefix, x))                   \u002F\u002F arrow\n  },\n}\n```\n\nWithout the `thisArg` (or an arrow), a regular callback's `this` would be\n`undefined`\u002Fglobal, and `this.prefix` would throw. Arrows are the modern,\npreferred fix.\n",{"id":60,"difficulty":24,"q":61,"a":62},"method-borrowing","What is method borrowing?","Method borrowing uses `call`\u002F`apply` to invoke a method from one object **on**\nanother object that doesn't have it — by explicitly setting `this`. Classic for\narray-like objects.\n\n```js\nfunction sum() {\n  \u002F\u002F `arguments` is array-like, not a real array\n  return Array.prototype.reduce.call(arguments, (a, b) => a + b, 0)\n}\nsum(1, 2, 3) \u002F\u002F 6\n\nconst arrayLike = { 0: 'a', 1: 'b', length: 2 }\nArray.prototype.join.call(arrayLike, '-') \u002F\u002F 'a-b'\n```\n\nYou \"borrow\" `Array.prototype` methods for array-likes (`arguments`, NodeLists).\nModern code often uses `Array.from`\u002Fspread instead, but borrowing shows how `this`\ndecouples a method from its object.\n",{"id":64,"difficulty":24,"q":65,"a":66},"bind-partial","How does bind enable partial application?","Beyond setting `this`, `bind` lets you **pre-fill leading arguments**, returning a\nfunction that takes the rest — partial application.\n\n```js\nfunction multiply(a, b) { return a * b }\nconst double = multiply.bind(null, 2) \u002F\u002F a is fixed to 2\ndouble(5) \u002F\u002F 10\n\nconst log = console.log.bind(console, '[APP]')\nlog('started') \u002F\u002F [APP] started\n```\n\nThe `null` thisArg is common when you only care about pre-binding arguments, not\n`this`. The bound arguments are remembered via the bound function's internal\nstate.\n",{"id":68,"difficulty":14,"q":69,"a":70},"new-overrides-bind","Does the new operator override a bound this?","Yes. `new` takes precedence over `bind` — when you call `new` on a bound function,\n`this` is the **new instance**, not the value you bound. (Pre-bound **arguments**\nare still applied, though.)\n\n```js\nfunction Point(x, y) { this.x = x; this.y = y }\nconst BoundPoint = Point.bind({ ignored: true }, 10)\nconst p = new BoundPoint(20)\np.x \u002F\u002F 10 (bound arg kept)\np.y \u002F\u002F 20\n\u002F\u002F p is a fresh instance; the bound { ignored: true } this was ignored\n```\n\nThis is the one case where `bind`'s \"permanent\" `this` is overridden, reflecting\nthat `new` is the highest-precedence binding rule.\n",{"id":72,"difficulty":24,"q":73,"a":74},"this-callback-loss","Why is this lost when passing an object method as a callback?","Passing `obj.method` as a callback copies only the **function**, detaching it from\n`obj`. When the receiver later calls it as a plain function, implicit binding is\ngone, so `this` is `undefined`\u002Fglobal.\n\n```js\nconst user = { name: 'Ada', greet() { return this.name } }\nconst fn = user.greet\nfn()                       \u002F\u002F undefined — detached\nsetTimeout(user.greet, 0)  \u002F\u002F also detached\n\nsetTimeout(() => user.greet(), 0)     \u002F\u002F called ON user\nsetTimeout(user.greet.bind(user), 0)  \u002F\u002F bound\n```\n\nThe fix is to preserve the receiver via an arrow wrapper or `bind`.\n",{"id":76,"difficulty":24,"q":77,"a":78},"this-promise","What is this inside a promise .then callback?","A regular-function `.then` callback is invoked by the promise machinery with no\nreceiver, so `this` is `undefined` (strict) \u002F global. An **arrow** `.then`\ncallback inherits `this` from the enclosing scope.\n\n```js\nclass Loader {\n  url = '\u002Fapi'\n  load() {\n    fetch(this.url)\n      .then(r => r.json())\n      .then(data => this.handle(data)) \u002F\u002F arrow keeps `this` = the Loader\n  }\n  handle(data) {}\n}\n```\n\nUsing arrows in `.then` chains is the norm precisely so `this` stays the\nsurrounding object. A regular function there would lose it.\n",{"id":80,"difficulty":24,"q":81,"a":82},"this-in-class","How does this behave in class methods?","Inside a class method, `this` refers to the **instance** when called as\n`instance.method()`. But class bodies are **always strict**, so an extracted\nmethod called plainly has `this === undefined` (not the global object).\n\n```js\nclass Counter {\n  count = 0\n  inc() { this.count++ }\n}\nconst c = new Counter()\nconst f = c.inc\nf() \u002F\u002F TypeError: Cannot read properties of undefined\n\n\u002F\u002F fix with a class field arrow method:\nclass Counter2 { count = 0; inc = () => this.count++ }\n```\n\nArrow **class fields** bind `this` to the instance permanently, which is why\nthey're popular for handlers.\n",{"id":84,"difficulty":24,"q":85,"a":86},"this-module-top","What is this at the top level of a module or script?","It depends on the context. In a **classic script** (non-strict), top-level `this`\nis the **global object** (`window`). In an **ES module**, top-level `this` is\n**`undefined`** (modules are always strict and have their own scope). In **Node\nCommonScript** modules, it's `module.exports`.\n\n```js\n\u002F\u002F classic \u003Cscript>:  this === window\n\u002F\u002F ES module (type=\"module\" \u002F .mjs):  this === undefined\n\u002F\u002F Node CommonScript module:  this === module.exports\n```\n\nUse **`globalThis`** to reliably reference the global object across all of these\nenvironments.\n",{"id":88,"difficulty":14,"q":89,"a":90},"arrow-method-pitfall","Why shouldn't you use an arrow function as an object method?","An arrow method captures `this` from the **enclosing scope at definition time** —\nwhich for an object literal is the surrounding scope, **not the object**. So\n`this` won't be the object you expect.\n\n```js\nconst obj = {\n  name: 'Ada',\n  greet: () => `Hi, ${this.name}`, \u002F\u002F `this` is the outer scope, not obj\n}\nobj.greet() \u002F\u002F 'Hi, undefined'\n\nconst obj2 = { name: 'Ada', greet() { return `Hi, ${this.name}` } }\nobj2.greet() \u002F\u002F 'Hi, Ada'\n```\n\nUse **method shorthand** (a regular function) for object methods that reference\n`this`. Reserve arrows for callbacks where you *want* the outer `this`.\n",{"id":92,"difficulty":93,"q":94,"a":95},"globalthis","easy","What is globalThis?","`globalThis` (ES2020) is a standardized way to access the **global object** in any\nJavaScript environment — `window` in browsers, `self` in workers, `global` in\nNode — without environment checks.\n\n```js\nglobalThis.myGlobal = 42\n\u002F\u002F before globalThis you needed:\nconst g = typeof window !== 'undefined' ? window\n        : typeof global !== 'undefined' ? global : self\n```\n\nIt removes the brittle feature-detection people used to write. Relevant to `this`\nbecause default-bound `this` in sloppy mode *is* this global object.\n",{"id":97,"difficulty":24,"q":98,"a":99},"this-destructuring","What happens to this when you destructure a method off an object?","Destructuring extracts the **function value** without its object, so calling it\nloses implicit binding — `this` becomes `undefined`\u002Fglobal, exactly like assigning\nthe method to a variable.\n\n```js\nconst { greet } = user\ngreet() \u002F\u002F `this` is not `user` -> likely a TypeError\n\n\u002F\u002F common real example: destructuring instance methods\nconst { increment } = counter\nincrement() \u002F\u002F detached\n```\n\nIf a method uses `this`, don't destructure it (or `bind` it first). This bites\npeople destructuring class instances or React class methods.\n",{"id":101,"difficulty":24,"q":102,"a":103},"this-settimeout","What is this inside a setTimeout callback?","A regular-function `setTimeout` callback is invoked by the timer with no receiver,\nso `this` is the global object (sloppy) \u002F `undefined` (strict). An arrow callback\ninherits `this` from the surrounding scope.\n\n```js\nconst obj = {\n  value: 42,\n  start() {\n    setTimeout(function () { console.log(this.value) }, 100) \u002F\u002F undefined\u002Fglobal\n    setTimeout(() => console.log(this.value), 100)           \u002F\u002F 42 (arrow)\n  },\n}\n```\n\nThe arrow form (or `bind(this)`) is the standard way to keep the surrounding\nobject's `this` in timer callbacks.\n",{"id":105,"difficulty":24,"q":106,"a":107},"this-getter","What is this inside a getter or setter?","In a getter\u002Fsetter, `this` is the **object the property is accessed on** — just\nlike a regular method — so you can compute the value from other properties of that\nobject.\n\n```js\nconst person = {\n  first: 'Ada', last: 'Lovelace',\n  get fullName() { return `${this.first} ${this.last}` },\n  set fullName(v) { [this.first, this.last] = v.split(' ') },\n}\nperson.fullName        \u002F\u002F 'Ada Lovelace'\nperson.fullName = 'Grace Hopper'\n```\n\nDon't define a getter\u002Fsetter with an arrow — it wouldn't bind `this` to the\nobject. Use regular `get`\u002F`set` syntax.\n",{"id":109,"difficulty":24,"q":110,"a":111},"this-static","What is this inside a static method?","In a `static` method, `this` refers to the **class itself** (the constructor\nfunction), not an instance — so you can access other static members.\n\n```js\nclass MathUtil {\n  static PI = 3.14159\n  static circleArea(r) { return this.PI * r * r } \u002F\u002F this === MathUtil\n}\nMathUtil.circleArea(2) \u002F\u002F 12.566...\n```\n\nBecause `this` is the class, static methods can call sibling statics via `this`,\nand `this` even respects subclasses (if called as `SubClass.method()`, `this` is\n`SubClass`).\n",{"id":113,"difficulty":93,"q":114,"a":115},"self-pattern","What is the \"const self = this\" pattern?","Before arrow functions, you'd capture the outer `this` into an ordinary variable\n(`self`, `that`, or `_this`) so nested regular functions could reference it via\nthe closure, sidestepping their own `this`.\n\n```js\nfunction Timer() {\n  const self = this\n  this.seconds = 0\n  setInterval(function () {\n    self.seconds++ \u002F\u002F uses the captured outer `this`\n  }, 1000)\n}\n```\n\nArrow functions made this obsolete — `setInterval(() => this.seconds++, 1000)`\ndoes the same thing — but you'll still see `self`\u002F`that` in older codebases and\ntranspiled output.\n",{"id":117,"difficulty":24,"q":118,"a":119},"this-react-class","Why do React class components need to bind this?","A class method passed as an event handler (`onClick={this.handleClick}`) is\ndetached from the instance, so `this` is `undefined` when React calls it. Class\nbodies are strict, so you get a `TypeError` on `this.setState`.\n\n```js\nclass Btn extends React.Component {\n  constructor(p) { super(p); this.handleClick = this.handleClick.bind(this) }\n  handleClick() { this.setState(...) } \u002F\u002F needs bound `this`\n  \u002F\u002F or: handleClick = () => this.setState(...)  \u002F\u002F arrow class field\n}\n```\n\nFixes: bind in the constructor, or use an **arrow class field** (which captures\nthe instance `this`). Function components with hooks avoid the issue entirely.\n",{"id":121,"difficulty":24,"q":122,"a":123},"fluent-this","How does returning this enable method chaining?","If each method **returns `this`** (the instance), you can chain calls together —\nthe basis of fluent\u002Fbuilder APIs.\n\n```js\nclass Query {\n  parts = []\n  where(c) { this.parts.push(c); return this }\n  order(o) { this.parts.push(o); return this }\n  build() { return this.parts.join(' ') }\n}\nnew Query().where('a=1').order('b').build()\n```\n\nEach call resolves `this` to the same instance (implicit binding) and hands it\nback, so the next call operates on the same object. Returning `this` is the key.\n",{"id":125,"difficulty":14,"q":126,"a":127},"this-nested-regular","What is this in a regular function nested inside a method?","A regular function defined **inside** a method does **not** inherit the method's\n`this`. When called plainly, it gets its own default binding (`undefined`\u002Fglobal),\nwhich is a frequent bug.\n\n```js\nconst obj = {\n  items: [1, 2],\n  process() {\n    this.items.forEach(function (x) {\n      console.log(this.items) \u002F\u002F `this` is not obj here\n    })\n  },\n}\n```\n\nFixes: arrow function (inherits `this`), `thisArg`, or `const self = this`. The\nnested **regular** function losing `this` is the classic gotcha arrows solved.\n",{"id":129,"difficulty":24,"q":130,"a":131},"this-apply-spread","What is the difference between apply and the spread operator for arguments?","`apply` was historically used to pass an array of arguments **and** set `this`.\nThe **spread** operator (`...`) spreads an array into arguments without dealing\nwith `this`, so it's cleaner when you only need to forward arguments.\n\n```js\nconst nums = [5, 6, 2, 3]\nMath.max.apply(null, nums) \u002F\u002F 6 (old way — null thisArg)\nMath.max(...nums)          \u002F\u002F 6 (modern, no thisArg needed)\n```\n\nUse spread when `this` is irrelevant (most cases); keep `apply` when you must set\n`this` **and** pass an arguments array together.\n",{"id":133,"difficulty":24,"q":134,"a":135},"this-iife","What is this inside an IIFE?","An IIFE is invoked as a **plain function call**, so default binding applies:\n`this` is the **global object** in sloppy mode and **`undefined`** in strict mode.\n\n```js\n(function () {\n  console.log(this) \u002F\u002F window (sloppy) \u002F undefined (strict)\n})()\n\n(function () {\n  'use strict'\n  console.log(this) \u002F\u002F undefined\n})()\n```\n\nThat's why old module-pattern IIFEs sometimes passed `this`\u002F`window` in\nexplicitly: `(function (global) { ... })(this)`.\n",{"id":137,"difficulty":93,"q":138,"a":139},"this-object-literal","What is this in object method shorthand?","Method shorthand (`method() {}`) creates a regular function, so `this` is the\nobject the method is called on — standard implicit binding.\n\n```js\nconst calculator = {\n  value: 0,\n  add(n) { this.value += n; return this },\n}\ncalculator.add(5).add(3) \u002F\u002F this is calculator throughout -> value 8\n```\n\nShorthand is the right way to define methods that use `this`. (Contrast with an\narrow property, which would NOT bind to the object.)\n",{"id":141,"difficulty":14,"q":142,"a":143},"this-rebind-bound","Can you rebind an already-bound function?","No. Once a function is bound with `bind`, its `this` is **permanently fixed** —\ncalling `bind` again, or `call`\u002F`apply` with a different `this`, **cannot change**\nit.\n\n```js\nfunction f() { return this.id }\nconst bound = f.bind({ id: 1 })\nbound.call({ id: 2 }) \u002F\u002F 1 — the rebind is ignored\nbound.bind({ id: 3 })() \u002F\u002F 1 — still 1\n```\n\nThe first `bind` wins. This \"hard binding\" is sometimes the goal (locking `this`),\nbut it surprises people expecting `call` to override it.\n",{"id":145,"difficulty":14,"q":146,"a":147},"this-call-primitive","What happens when you pass a primitive as thisArg in sloppy mode?","In **sloppy mode**, a primitive `thisArg` passed to `call`\u002F`apply`\u002F`bind` is\n**boxed** into its wrapper object (`Number`, `String`, `Boolean`), and `null`\u002F\n`undefined` become the **global object**. In **strict mode**, `this` is left\nexactly as passed.\n\n```js\nfunction f() { return this }\n\u002F\u002F sloppy mode:\nf.call(5)         \u002F\u002F Number {5}  (boxed)\nf.call(null)      \u002F\u002F global object\n\u002F\u002F strict mode:\nf.call(5)         \u002F\u002F 5 (primitive, unboxed)\nf.call(null)      \u002F\u002F null\n```\n\nStrict mode's \"leave `this` as-is\" behavior is more predictable, another reason\nmodern code runs strict by default.\n",{"id":149,"difficulty":24,"q":150,"a":151},"arrow-no-arguments","Besides this, what else do arrow functions not have?","Arrow functions also lack their own **`arguments`** object, **`super`**, and\n**`new.target`**, and they **can't be used as constructors** (no `new`). Like\n`this`, `arguments` is inherited lexically from the enclosing function.\n\n```js\nfunction outer() {\n  const arrow = () => arguments[0] \u002F\u002F refers to outer's arguments\n  return arrow\n}\nouter(42)() \u002F\u002F 42\n\nconst Foo = () => {}\nnew Foo() \u002F\u002F TypeError: Foo is not a constructor\n```\n\nUse rest parameters (`...args`) instead of `arguments` in arrows. These omissions\nare why arrows are lightweight callbacks, not general-purpose functions.\n",{"id":153,"difficulty":24,"q":154,"a":155},"this-prototype","What is this in a prototype method?","A method on a constructor's `prototype` behaves like any method: when called as\n`instance.method()`, `this` is the **instance**. The method lives once on the\nprototype but `this` resolves per call to whichever instance invoked it.\n\n```js\nfunction User(name) { this.name = name }\nUser.prototype.greet = function () { return `Hi, ${this.name}` }\nconst u = new User('Ada')\nu.greet() \u002F\u002F 'Hi, Ada' — this === u\n```\n\nThis is how one shared prototype method serves all instances correctly — `this`\nis determined by the call site, not where the method is defined.\n",null,{"description":11},"JavaScript `this` interview questions — how this is bound, arrow vs regular functions, call\u002Fapply\u002Fbind and common context bugs.","javascript\u002Ffunctions\u002Fthis-keyword","The this Keyword","Functions","functions","2026-06-17","T0rjf5OhY_1gyL0HET2e_qhZvmR8BBTBn2VHHhuvRuI",[166,170,171,175,179],{"subtopic":167,"path":168,"order":169},"Closures","\u002Fjavascript\u002Ffunctions\u002Fclosures",1,{"subtopic":160,"path":20,"order":12},{"subtopic":172,"path":173,"order":174},"Higher-Order Functions","\u002Fjavascript\u002Ffunctions\u002Fhigher-order-functions",3,{"subtopic":176,"path":177,"order":178},"Function Types & Parameters","\u002Fjavascript\u002Ffunctions\u002Ffunction-types-parameters",4,{"subtopic":180,"path":181,"order":182},"Generators & Iterators","\u002Fjavascript\u002Ffunctions\u002Fgenerators-iterators",5,{"path":184,"title":185},"\u002Fblog\u002Fjavascript-this-keyword-binding-guide","The \"this\" Keyword in JavaScript — A Complete Guide to Binding",1781808676513]