[{"data":1,"prerenderedAt":1206},["ShallowReactive",2],{"blog-\u002Fblog\u002Fjavascript-this-keyword-binding-guide":3},{"id":4,"title":5,"body":6,"description":1190,"difficulty":1191,"extension":1192,"framework":1193,"frameworkSlug":1194,"meta":1195,"navigation":1196,"order":153,"path":1197,"qaPath":1198,"seo":1199,"stem":1200,"subtopic":1201,"topic":1202,"topicSlug":1203,"updated":1204,"__hash__":1205},"blog\u002Fblog\u002Fjavascript-this-keyword-binding-guide.md","The \"this\" Keyword in JavaScript — A Complete Guide to Binding",{"type":7,"value":8,"toc":1177},"minimark",[9,19,48,52,58,115,226,235,239,262,337,347,431,444,451,466,538,552,601,608,612,618,645,791,834,840,916,980,984,1006,1123,1127,1173],[10,11,13,14,18],"h2",{"id":12},"understanding-the-this-keyword-in-javascript","Understanding the ",[15,16,17],"code",{},"this"," keyword in JavaScript",[20,21,22,24,25,27,28,32,33,36,37,40,41,40,44,47],"p",{},[15,23,17],{}," confuses more developers than any other part of JavaScript, because it doesn't\nbehave like a normal variable. The value of ",[15,26,17],{}," isn't fixed where a function is\nwritten — it's decided by ",[29,30,31],"strong",{},"how the function is called",". Master the handful of rules\nthat govern it and the bugs (lost context, ",[15,34,35],{},"undefined"," in callbacks, surprising\nglobals) stop being mysterious. This guide covers the binding rules, arrow functions,\n",[15,38,39],{},"call","\u002F",[15,42,43],{},"apply",[15,45,46],{},"bind",", and the classic pitfalls.",[10,49,51],{"id":50},"the-four-binding-rules","The four binding rules",[20,53,54,55,57],{},"For a regular function, ",[15,56,17],{}," is set by the call site according to four rules, in\norder of precedence:",[59,60,61,78,94,103],"ol",{},[62,63,64,70,71,74,75,77],"li",{},[29,65,66,69],{},[15,67,68],{},"new"," binding"," — ",[15,72,73],{},"new Fn()"," -> ",[15,76,17],{}," is the brand-new instance.",[62,79,80,70,83,86,87,86,90,93],{},[29,81,82],{},"Explicit binding",[15,84,85],{},"fn.call(obj)",", ",[15,88,89],{},"fn.apply(obj)",[15,91,92],{},"fn.bind(obj)"," -> the object\nyou pass.",[62,95,96,70,99,102],{},[29,97,98],{},"Implicit binding",[15,100,101],{},"obj.fn()"," -> the object left of the dot.",[62,104,105,108,109,74,112,114],{},[29,106,107],{},"Default binding"," — a plain ",[15,110,111],{},"fn()",[15,113,35],{}," in strict mode, or the global\nobject in sloppy mode.",[116,117,122],"pre",{"className":118,"code":119,"language":120,"meta":121,"style":121},"language-js shiki shiki-themes github-light github-dark","function 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","js","",[15,123,124,151,166,182,203,215],{"__ignoreMap":121},[125,126,129,133,137,141,144,148],"span",{"class":127,"line":128},"line",1,[125,130,132],{"class":131},"szBVR","function",[125,134,136],{"class":135},"sScJk"," who",[125,138,140],{"class":139},"sVt8B","() { ",[125,142,143],{"class":131},"return",[125,145,147],{"class":146},"sj4cs"," this",[125,149,150],{"class":139}," }\n",[125,152,154,157,160,163],{"class":127,"line":153},2,[125,155,156],{"class":131},"const",[125,158,159],{"class":146}," obj",[125,161,162],{"class":131}," =",[125,164,165],{"class":139}," { who }\n",[125,167,169,172,175,178],{"class":127,"line":168},3,[125,170,171],{"class":139},"obj.",[125,173,174],{"class":135},"who",[125,176,177],{"class":139},"()       ",[125,179,181],{"class":180},"sJ8bj","\u002F\u002F obj      (implicit)\n",[125,183,185,188,190,193,197,200],{"class":127,"line":184},4,[125,186,187],{"class":139},"who.",[125,189,39],{"class":135},[125,191,192],{"class":139},"(",[125,194,196],{"class":195},"sZZnC","'hi'",[125,198,199],{"class":139},")  ",[125,201,202],{"class":180},"\u002F\u002F 'hi'     (explicit)\n",[125,204,206,208,210,212],{"class":127,"line":205},5,[125,207,68],{"class":131},[125,209,136],{"class":135},[125,211,177],{"class":139},[125,213,214],{"class":180},"\u002F\u002F {}       (new instance)\n",[125,216,218,220,223],{"class":127,"line":217},6,[125,219,174],{"class":135},[125,221,222],{"class":139},"()           ",[125,224,225],{"class":180},"\u002F\u002F undefined in strict mode\n",[20,227,228,229,231,232,234],{},"When several could apply, precedence decides: ",[15,230,68],{}," beats ",[15,233,46],{}," beats implicit beats\ndefault.",[10,236,238],{"id":237},"arrow-functions-ignore-all-of-that","Arrow functions ignore all of that",[20,240,241,242,247,248,251,252,40,254,40,256,258,259,261],{},"Arrow functions ",[29,243,244,245],{},"don't have their own ",[15,246,17],{},". They capture it ",[29,249,250],{},"lexically"," — from\nthe enclosing scope at definition time — and it can never be reassigned, not even by\n",[15,253,39],{},[15,255,43],{},[15,257,46],{},". This makes them ideal for callbacks that need the surrounding\n",[15,260,17],{},".",[116,263,265],{"className":118,"code":264,"language":120,"meta":121,"style":121},"class Timer {\n  seconds = 0\n  start() {\n    setInterval(() => this.seconds++, 1000) \u002F\u002F arrow keeps `this` = the Timer\n  }\n}\n",[15,266,267,278,289,297,327,332],{"__ignoreMap":121},[125,268,269,272,275],{"class":127,"line":128},[125,270,271],{"class":131},"class",[125,273,274],{"class":135}," Timer",[125,276,277],{"class":139}," {\n",[125,279,280,284,286],{"class":127,"line":153},[125,281,283],{"class":282},"s4XuR","  seconds",[125,285,162],{"class":131},[125,287,288],{"class":146}," 0\n",[125,290,291,294],{"class":127,"line":168},[125,292,293],{"class":135},"  start",[125,295,296],{"class":139},"() {\n",[125,298,299,302,305,308,310,313,316,318,321,324],{"class":127,"line":184},[125,300,301],{"class":135},"    setInterval",[125,303,304],{"class":139},"(() ",[125,306,307],{"class":131},"=>",[125,309,147],{"class":146},[125,311,312],{"class":139},".seconds",[125,314,315],{"class":131},"++",[125,317,86],{"class":139},[125,319,320],{"class":146},"1000",[125,322,323],{"class":139},") ",[125,325,326],{"class":180},"\u002F\u002F arrow keeps `this` = the Timer\n",[125,328,329],{"class":127,"line":205},[125,330,331],{"class":139},"  }\n",[125,333,334],{"class":127,"line":217},[125,335,336],{"class":139},"}\n",[20,338,339,340,343,344,346],{},"The flip side: arrows are a ",[29,341,342],{},"poor choice for object methods"," that reference the\nobject, because ",[15,345,17],{}," points to the outer scope, not the object — and they can't be\nconstructors.",[116,348,350],{"className":118,"code":349,"language":120,"meta":121,"style":121},"const obj = {\n  name: 'Ada',\n  greet: () => `Hi, ${this.name}`,   \u002F\u002F this is the outer scope -> undefined\n  greet2() { return `Hi, ${this.name}` }, \u002F\u002F method shorthand -> 'Ada'\n}\n",[15,351,352,362,373,402,427],{"__ignoreMap":121},[125,353,354,356,358,360],{"class":127,"line":128},[125,355,156],{"class":131},[125,357,159],{"class":146},[125,359,162],{"class":131},[125,361,277],{"class":139},[125,363,364,367,370],{"class":127,"line":153},[125,365,366],{"class":139},"  name: ",[125,368,369],{"class":195},"'Ada'",[125,371,372],{"class":139},",\n",[125,374,375,378,381,383,386,388,390,393,396,399],{"class":127,"line":168},[125,376,377],{"class":135},"  greet",[125,379,380],{"class":139},": () ",[125,382,307],{"class":131},[125,384,385],{"class":195}," `Hi, ${",[125,387,17],{"class":146},[125,389,261],{"class":195},[125,391,392],{"class":139},"name",[125,394,395],{"class":195},"}`",[125,397,398],{"class":139},",   ",[125,400,401],{"class":180},"\u002F\u002F this is the outer scope -> undefined\n",[125,403,404,407,409,411,413,415,417,419,421,424],{"class":127,"line":184},[125,405,406],{"class":135},"  greet2",[125,408,140],{"class":139},[125,410,143],{"class":131},[125,412,385],{"class":195},[125,414,17],{"class":146},[125,416,261],{"class":195},[125,418,392],{"class":139},[125,420,395],{"class":195},[125,422,423],{"class":139}," }, ",[125,425,426],{"class":180},"\u002F\u002F method shorthand -> 'Ada'\n",[125,428,429],{"class":127,"line":205},[125,430,336],{"class":139},[20,432,433,434,86,437,440,441,261],{},"Arrows also lack their own ",[15,435,436],{},"arguments",[15,438,439],{},"super",", and ",[15,442,443],{},"new.target",[10,445,447,448,450],{"id":446},"losing-this-the-most-common-bug","Losing ",[15,449,17],{},": the most common bug",[20,452,453,454,456,457,459,460,462,463,465],{},"Because ",[15,455,17],{}," is set at call time, passing a method somewhere else detaches it from\nits object. The function is copied without the ",[15,458,171],{}," context, so when it's later called\nplainly, ",[15,461,17],{}," is ",[15,464,35],{},"\u002Fglobal.",[116,467,469],{"className":118,"code":468,"language":120,"meta":121,"style":121},"const 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",[15,470,471,499,511,522],{"__ignoreMap":121},[125,472,473,475,478,480,483,485,487,490,492,494,496],{"class":127,"line":128},[125,474,156],{"class":131},[125,476,477],{"class":146}," user",[125,479,162],{"class":131},[125,481,482],{"class":139}," { name: ",[125,484,369],{"class":195},[125,486,86],{"class":139},[125,488,489],{"class":135},"greet",[125,491,140],{"class":139},[125,493,143],{"class":131},[125,495,147],{"class":146},[125,497,498],{"class":139},".name } }\n",[125,500,501,503,506,508],{"class":127,"line":153},[125,502,156],{"class":131},[125,504,505],{"class":146}," fn",[125,507,162],{"class":131},[125,509,510],{"class":139}," user.greet\n",[125,512,513,516,519],{"class":127,"line":168},[125,514,515],{"class":135},"fn",[125,517,518],{"class":139},"()                       ",[125,520,521],{"class":180},"\u002F\u002F undefined — detached\n",[125,523,524,527,530,533,535],{"class":127,"line":184},[125,525,526],{"class":135},"setTimeout",[125,528,529],{"class":139},"(user.greet, ",[125,531,532],{"class":146},"0",[125,534,199],{"class":139},[125,536,537],{"class":180},"\u002F\u002F also detached\n",[20,539,540,541,544,545,548,549,551],{},"The same happens with ",[29,542,543],{},"destructuring"," (",[15,546,547],{},"const { greet } = user","). Fixes: an arrow\nwrapper that calls the method on the object, or ",[15,550,46],{},":",[116,553,555],{"className":118,"code":554,"language":120,"meta":121,"style":121},"setTimeout(() => user.greet(), 0)      \u002F\u002F called ON user\nsetTimeout(user.greet.bind(user), 0)   \u002F\u002F permanently bound\n",[15,556,557,581],{"__ignoreMap":121},[125,558,559,561,563,565,568,570,573,575,578],{"class":127,"line":128},[125,560,526],{"class":135},[125,562,304],{"class":139},[125,564,307],{"class":131},[125,566,567],{"class":139}," user.",[125,569,489],{"class":135},[125,571,572],{"class":139},"(), ",[125,574,532],{"class":146},[125,576,577],{"class":139},")      ",[125,579,580],{"class":180},"\u002F\u002F called ON user\n",[125,582,583,585,588,590,593,595,598],{"class":127,"line":153},[125,584,526],{"class":135},[125,586,587],{"class":139},"(user.greet.",[125,589,46],{"class":135},[125,591,592],{"class":139},"(user), ",[125,594,532],{"class":146},[125,596,597],{"class":139},")   ",[125,599,600],{"class":180},"\u002F\u002F permanently bound\n",[20,602,603,604,607],{},"This is exactly why React class components needed\n",[15,605,606],{},"this.handleClick = this.handleClick.bind(this)"," in the constructor, or arrow class\nfields.",[10,609,611],{"id":610},"call-apply-and-bind","call, apply, and bind",[20,613,614,615,617],{},"All three set ",[15,616,17],{}," explicitly; they differ in invocation and arguments:",[619,620,621,627,633],"ul",{},[62,622,623,626],{},[15,624,625],{},"fn.call(thisArg, a, b)"," — invoke now, args listed.",[62,628,629,632],{},[15,630,631],{},"fn.apply(thisArg, [a, b])"," — invoke now, args as an array.",[62,634,635,638,639,641,642,644],{},[15,636,637],{},"fn.bind(thisArg, a)"," — return a ",[29,640,68],{}," function with ",[15,643,17],{}," (and any given args)\npermanently locked in.",[116,646,648],{"className":118,"code":647,"language":120,"meta":121,"style":121},"function greet(g, mark) { return `${g}, ${this.name}${mark}` }\nconst user = { name: 'Ada' }\ngreet.call(user, 'Hi', '!')     \u002F\u002F 'Hi, Ada!'\ngreet.apply(user, ['Hi', '!'])  \u002F\u002F 'Hi, Ada!'\nconst greetAda = greet.bind(user)\ngreetAda('Hey', '.')            \u002F\u002F 'Hey, Ada.'\n",[15,649,650,695,709,733,753,770],{"__ignoreMap":121},[125,651,652,654,657,659,662,664,667,670,672,675,677,680,682,684,686,689,691,693],{"class":127,"line":128},[125,653,132],{"class":131},[125,655,656],{"class":135}," greet",[125,658,192],{"class":139},[125,660,661],{"class":282},"g",[125,663,86],{"class":139},[125,665,666],{"class":282},"mark",[125,668,669],{"class":139},") { ",[125,671,143],{"class":131},[125,673,674],{"class":195}," `${",[125,676,661],{"class":139},[125,678,679],{"class":195},"}, ${",[125,681,17],{"class":146},[125,683,261],{"class":195},[125,685,392],{"class":139},[125,687,688],{"class":195},"}${",[125,690,666],{"class":139},[125,692,395],{"class":195},[125,694,150],{"class":139},[125,696,697,699,701,703,705,707],{"class":127,"line":153},[125,698,156],{"class":131},[125,700,477],{"class":146},[125,702,162],{"class":131},[125,704,482],{"class":139},[125,706,369],{"class":195},[125,708,150],{"class":139},[125,710,711,714,716,719,722,724,727,730],{"class":127,"line":168},[125,712,713],{"class":139},"greet.",[125,715,39],{"class":135},[125,717,718],{"class":139},"(user, ",[125,720,721],{"class":195},"'Hi'",[125,723,86],{"class":139},[125,725,726],{"class":195},"'!'",[125,728,729],{"class":139},")     ",[125,731,732],{"class":180},"\u002F\u002F 'Hi, Ada!'\n",[125,734,735,737,739,742,744,746,748,751],{"class":127,"line":184},[125,736,713],{"class":139},[125,738,43],{"class":135},[125,740,741],{"class":139},"(user, [",[125,743,721],{"class":195},[125,745,86],{"class":139},[125,747,726],{"class":195},[125,749,750],{"class":139},"])  ",[125,752,732],{"class":180},[125,754,755,757,760,762,765,767],{"class":127,"line":205},[125,756,156],{"class":131},[125,758,759],{"class":146}," greetAda",[125,761,162],{"class":131},[125,763,764],{"class":139}," greet.",[125,766,46],{"class":135},[125,768,769],{"class":139},"(user)\n",[125,771,772,775,777,780,782,785,788],{"class":127,"line":217},[125,773,774],{"class":135},"greetAda",[125,776,192],{"class":139},[125,778,779],{"class":195},"'Hey'",[125,781,86],{"class":139},[125,783,784],{"class":195},"'.'",[125,786,787],{"class":139},")            ",[125,789,790],{"class":180},"\u002F\u002F 'Hey, Ada.'\n",[20,792,793,795,796,799,800,803,804,806,807,40,809,40,811,813,814,816,817,821,822,824,825,827,828,831,832,261],{},[15,794,46],{}," also enables ",[29,797,798],{},"partial application"," (pre-fill leading args with a ",[15,801,802],{},"null","\nthisArg). Once bound, ",[15,805,17],{}," is fixed — a later ",[15,808,39],{},[15,810,43],{},[15,812,46],{}," can't change it.\nBut ",[15,815,68],{}," ",[818,819,820],"em",{},"does"," override a bound ",[15,823,17],{}," (the new instance wins, though bound arguments\nare kept). For just forwarding an array of arguments without caring about ",[15,826,17],{},", modern\ncode uses the spread operator (",[15,829,830],{},"Math.max(...nums)",") instead of ",[15,833,43],{},[10,835,837,839],{"id":836},"this-in-different-contexts",[15,838,17],{}," in different contexts",[619,841,842,851,865,882,891,900],{},[62,843,844,847,848,850],{},[29,845,846],{},"Methods"," (shorthand or prototype): ",[15,849,17],{}," is the object the method is called on.",[62,852,853,858,859,861,862,864],{},[29,854,855,856],{},"Constructors \u002F ",[15,857,68],{},": a fresh object is created and ",[15,860,17],{}," points to it; it's\nreturned automatically unless the constructor returns its own object. Forgetting\n",[15,863,68],{}," triggers default binding and leaks globals.",[62,866,867,870,871,874,875,878,879,881],{},[29,868,869],{},"Classes",": bodies are always strict, so an extracted method called plainly has\n",[15,872,873],{},"this === undefined"," (a ",[15,876,877],{},"TypeError",", not the global object). Arrow class fields bind\n",[15,880,17],{}," to the instance.",[62,883,884,887,888,890],{},[29,885,886],{},"Static methods",": ",[15,889,17],{}," is the class itself.",[62,892,893,896,897,899],{},[29,894,895],{},"Event listeners",": a regular-function handler's ",[15,898,17],{}," is the element; an arrow's is\nthe surrounding scope.",[62,901,902,905,906,908,909,911,912,915],{},[29,903,904],{},"Top level",": in a classic script (sloppy) ",[15,907,17],{}," is the global object; in an ES\nmodule it's ",[15,910,35],{},". Use ",[15,913,914],{},"globalThis"," to reliably reference the global object\nanywhere.",[116,917,919],{"className":118,"code":918,"language":120,"meta":121,"style":121},"class Counter {\n  count = 0\n  inc() { this.count++ }\n  incArrow = () => this.count++ \u002F\u002F bound to the instance\n}\n",[15,920,921,930,939,955,976],{"__ignoreMap":121},[125,922,923,925,928],{"class":127,"line":128},[125,924,271],{"class":131},[125,926,927],{"class":135}," Counter",[125,929,277],{"class":139},[125,931,932,935,937],{"class":127,"line":153},[125,933,934],{"class":282},"  count",[125,936,162],{"class":131},[125,938,288],{"class":146},[125,940,941,944,946,948,951,953],{"class":127,"line":168},[125,942,943],{"class":135},"  inc",[125,945,140],{"class":139},[125,947,17],{"class":146},[125,949,950],{"class":139},".count",[125,952,315],{"class":131},[125,954,150],{"class":139},[125,956,957,960,962,965,967,969,971,973],{"class":127,"line":184},[125,958,959],{"class":135},"  incArrow",[125,961,162],{"class":131},[125,963,964],{"class":139}," () ",[125,966,307],{"class":131},[125,968,147],{"class":146},[125,970,950],{"class":139},[125,972,315],{"class":131},[125,974,975],{"class":180}," \u002F\u002F bound to the instance\n",[125,977,978],{"class":127,"line":205},[125,979,336],{"class":139},[10,981,983],{"id":982},"strict-mode-and-method-chaining","Strict mode and method chaining",[20,985,986,987,816,989,993,994,996,997,999,1000,1002,1003,551],{},"Strict mode makes a plain call's ",[15,988,17],{},[29,990,991],{},[15,992,35],{}," instead of the global object,\nsurfacing \"I forgot to bind ",[15,995,17],{},"\" bugs immediately (a loud ",[15,998,877],{}," rather than\nsilent global leakage). ES modules and classes are always strict. A useful pattern that\nrelies on implicit binding: returning ",[15,1001,17],{}," from methods to enable ",[29,1004,1005],{},"fluent chaining",[116,1007,1009],{"className":118,"code":1008,"language":120,"meta":121,"style":121},"class Query {\n  parts = []\n  where(c) { this.parts.push(c); return this }\n  order(o) { this.parts.push(o); return this }\n}\nnew Query().where('a=1').order('b') \u002F\u002F each call returns the same instance\n",[15,1010,1011,1020,1030,1059,1086,1090],{"__ignoreMap":121},[125,1012,1013,1015,1018],{"class":127,"line":128},[125,1014,271],{"class":131},[125,1016,1017],{"class":135}," Query",[125,1019,277],{"class":139},[125,1021,1022,1025,1027],{"class":127,"line":153},[125,1023,1024],{"class":282},"  parts",[125,1026,162],{"class":131},[125,1028,1029],{"class":139}," []\n",[125,1031,1032,1035,1037,1040,1042,1044,1047,1050,1053,1055,1057],{"class":127,"line":168},[125,1033,1034],{"class":135},"  where",[125,1036,192],{"class":139},[125,1038,1039],{"class":282},"c",[125,1041,669],{"class":139},[125,1043,17],{"class":146},[125,1045,1046],{"class":139},".parts.",[125,1048,1049],{"class":135},"push",[125,1051,1052],{"class":139},"(c); ",[125,1054,143],{"class":131},[125,1056,147],{"class":146},[125,1058,150],{"class":139},[125,1060,1061,1064,1066,1069,1071,1073,1075,1077,1080,1082,1084],{"class":127,"line":184},[125,1062,1063],{"class":135},"  order",[125,1065,192],{"class":139},[125,1067,1068],{"class":282},"o",[125,1070,669],{"class":139},[125,1072,17],{"class":146},[125,1074,1046],{"class":139},[125,1076,1049],{"class":135},[125,1078,1079],{"class":139},"(o); ",[125,1081,143],{"class":131},[125,1083,147],{"class":146},[125,1085,150],{"class":139},[125,1087,1088],{"class":127,"line":205},[125,1089,336],{"class":139},[125,1091,1092,1094,1096,1099,1102,1104,1107,1110,1113,1115,1118,1120],{"class":127,"line":217},[125,1093,68],{"class":131},[125,1095,1017],{"class":135},[125,1097,1098],{"class":139},"().",[125,1100,1101],{"class":135},"where",[125,1103,192],{"class":139},[125,1105,1106],{"class":195},"'a=1'",[125,1108,1109],{"class":139},").",[125,1111,1112],{"class":135},"order",[125,1114,192],{"class":139},[125,1116,1117],{"class":195},"'b'",[125,1119,323],{"class":139},[125,1121,1122],{"class":180},"\u002F\u002F each call returns the same instance\n",[10,1124,1126],{"id":1125},"recap","Recap",[20,1128,1129,1131,1132,1135,1136,1138,1139,40,1141,40,1143,1145,1146,1149,1150,1152,1153,1156,1157,1159,1160,1163,1164,1166,1167,1169,1170,1172],{},[15,1130,17],{}," is determined by the ",[29,1133,1134],{},"call site",", not the definition site, following four\nrules: ",[15,1137,68],{},", explicit (",[15,1140,39],{},[15,1142,43],{},[15,1144,46],{},"), implicit (",[15,1147,1148],{},"obj.method()","), and default\n(",[15,1151,35],{},"\u002Fglobal). ",[29,1154,1155],{},"Arrow functions"," opt out and inherit ",[15,1158,17],{}," lexically — great\nfor callbacks, wrong for object methods. Passing a method as a callback ",[29,1161,1162],{},"loses"," its\nreceiver; fix it with an arrow wrapper or ",[15,1165,46],{},". Class bodies and modules are strict,\nso detached methods get ",[15,1168,35],{},". Internalize the rules and ",[15,1171,17],{}," becomes\npredictable instead of magical.",[1174,1175,1176],"style",{},"html pre.shiki code .szBVR, html code.shiki .szBVR{--shiki-default:#D73A49;--shiki-dark:#F97583}html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .sj4cs, html code.shiki .sj4cs{--shiki-default:#005CC5;--shiki-dark:#79B8FF}html pre.shiki code .sJ8bj, html code.shiki .sJ8bj{--shiki-default:#6A737D;--shiki-dark:#6A737D}html pre.shiki code .sZZnC, html code.shiki .sZZnC{--shiki-default:#032F62;--shiki-dark:#9ECBFF}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .s4XuR, html code.shiki .s4XuR{--shiki-default:#E36209;--shiki-dark:#FFAB70}",{"title":121,"searchDepth":153,"depth":153,"links":1178},[1179,1181,1182,1183,1185,1186,1188,1189],{"id":12,"depth":153,"text":1180},"Understanding the this keyword in JavaScript",{"id":50,"depth":153,"text":51},{"id":237,"depth":153,"text":238},{"id":446,"depth":153,"text":1184},"Losing this: the most common bug",{"id":610,"depth":153,"text":611},{"id":836,"depth":153,"text":1187},"this in different contexts",{"id":982,"depth":153,"text":983},{"id":1125,"depth":153,"text":1126},"JavaScript `this` interview questions — how this is bound, arrow vs regular functions, call\u002Fapply\u002Fbind and common context bugs.","hard","md","JavaScript","javascript",{},true,"\u002Fblog\u002Fjavascript-this-keyword-binding-guide","\u002Fjavascript\u002Ffunctions\u002Fthis-keyword",{"title":5,"description":1190},"blog\u002Fjavascript-this-keyword-binding-guide","The this Keyword","Functions","functions","2026-06-17","crxYvUQ4nYJ7pZMSINy48AD7dwkiRhy88oM8Oel92Cw",1781808673080]