{"id":2073,"date":"2025-02-26T23:34:16","date_gmt":"2025-02-26T15:34:16","guid":{"rendered":"https:\/\/www.laixuexila.com\/?p=2073"},"modified":"2025-02-26T23:34:16","modified_gmt":"2025-02-26T15:34:16","slug":"javascript-this-%e5%85%b3%e9%94%ae%e5%ad%97","status":"publish","type":"post","link":"https:\/\/www.laixuexila.com\/index.php\/2025\/02\/26\/javascript-this-%e5%85%b3%e9%94%ae%e5%ad%97\/","title":{"rendered":"JavaScript this \u5173\u952e\u5b57"},"content":{"rendered":"\n

\u5728 JavaScript \u4e2d\uff0cthis<\/code> \u662f\u4e00\u4e2a\u975e\u5e38\u91cd\u8981\u7684\u5173\u952e\u5b57\uff0c\u5b83\u6307\u5411\u5f53\u524d\u6267\u884c\u4e0a\u4e0b\u6587\u7684\u5bf9\u8c61\u3002this<\/code> \u7684\u503c\u5728\u4e0d\u540c\u7684\u60c5\u51b5\u4e0b\u4f1a\u6709\u6240\u4e0d\u540c\uff0c\u7406\u89e3 this<\/code> \u7684\u884c\u4e3a\u5bf9\u4e8e\u7f16\u5199\u6b63\u786e\u7684 JavaScript \u4ee3\u7801\u81f3\u5173\u91cd\u8981\u3002<\/p>\n\n\n\n

1. \u5728\u5168\u5c40\u4e0a\u4e0b\u6587\u4e2d\uff1a<\/strong><\/h3>\n\n\n\n

\u5728\u5168\u5c40\u4ee3\u7801\u4e2d\uff0cthis<\/code> \u6307\u5411\u5168\u5c40\u5bf9\u8c61\u3002\u5728\u6d4f\u89c8\u5668\u4e2d\uff0cthis<\/code> \u6307\u5411 window<\/code> \u5bf9\u8c61\uff0c\u800c\u5728 Node.js \u4e2d\uff0cthis<\/code> \u6307\u5411 global<\/code> \u5bf9\u8c61\u3002<\/p>\n\n\n\n

\u793a\u4f8b\uff1a<\/strong><\/h5>\n\n\n\n
console.log(this); \/\/ \u5728\u6d4f\u89c8\u5668\u4e2d\u8f93\u51fa window \u5bf9\u8c61<\/code><\/pre>\n\n\n\n
2. \u5728\u51fd\u6570\u4e2d\uff1a<\/strong><\/h3>\n\n\n\n
    \n
  • \u666e\u901a\u51fd\u6570\uff1a<\/strong> \u5728\u666e\u901a\u51fd\u6570\u4e2d\uff0cthis<\/code> \u7684\u503c\u53d6\u51b3\u4e8e\u51fd\u6570\u7684\u8c03\u7528\u65b9\u5f0f\u3002\u5982\u679c\u51fd\u6570\u662f\u4f5c\u4e3a\u5bf9\u8c61\u7684\u65b9\u6cd5\u8c03\u7528\uff0cthis<\/code> \u4f1a\u6307\u5411\u8be5\u5bf9\u8c61\uff1b\u5982\u679c\u51fd\u6570\u662f\u76f4\u63a5\u8c03\u7528\uff0cthis<\/code> \u4f1a\u6307\u5411\u5168\u5c40\u5bf9\u8c61\uff08\u5728\u4e25\u683c\u6a21\u5f0f\u4e0b\uff0cthis<\/code> \u4e3a undefined<\/code>\uff09\u3002<\/li>\n\n\n\n
  • \u7bad\u5934\u51fd\u6570\uff1a<\/strong> \u7bad\u5934\u51fd\u6570\u6ca1\u6709\u81ea\u5df1\u7684 this<\/code>\uff0c\u5b83\u4f1a\u4ece\u5916\u5c42\u4f5c\u7528\u57df\u7ee7\u627f this<\/code>\u3002\u8fd9\u610f\u5473\u7740\u7bad\u5934\u51fd\u6570\u4e2d\u7684 this<\/code> \u6307\u5411\u5916\u90e8\u51fd\u6570\u6216\u5bf9\u8c61\uff0c\u800c\u4e0d\u662f\u8c03\u7528\u8be5\u51fd\u6570\u7684\u5bf9\u8c61\u3002<\/li>\n<\/ul>\n\n\n\n
    \u793a\u4f8b\uff1a<\/strong><\/h5>\n\n\n\n
    function regularFunction() {\n  console.log(this); \/\/ \u975e\u4e25\u683c\u6a21\u5f0f\u4e0b\uff0c\u6307\u5411\u5168\u5c40\u5bf9\u8c61 (window \u6216 global)\n}\n\nconst obj = {\n  method: function() {\n    console.log(this); \/\/ \u5728\u5bf9\u8c61\u65b9\u6cd5\u4e2d\uff0cthis \u6307\u5411\u8be5\u5bf9\u8c61\n  }\n};\n\nconst arrowFunction = () => {\n  console.log(this); \/\/ \u7ee7\u627f\u5916\u90e8\u4f5c\u7528\u57df\u7684 this\n};\n\nregularFunction(); \/\/ \u8f93\u51fa window \u5bf9\u8c61\nobj.method(); \/\/ \u8f93\u51fa obj \u5bf9\u8c61\narrowFunction(); \/\/ \u8f93\u51fa\u5916\u90e8\u4f5c\u7528\u57df\u7684 this<\/code><\/pre>\n\n\n\n
    3. \u5728\u6784\u9020\u51fd\u6570\u4e2d\uff1a<\/strong><\/h3>\n\n\n\n
    \u5f53\u4f7f\u7528\u6784\u9020\u51fd\u6570\u521b\u5efa\u5bf9\u8c61\u65f6\uff0cthis<\/code> \u4f1a\u6307\u5411\u65b0\u521b\u5efa\u7684\u5bf9\u8c61\u3002\u6784\u9020\u51fd\u6570\u901a\u5e38\u4f7f\u7528 new<\/code> \u5173\u952e\u5b57\u6765\u8c03\u7528\u3002<\/p>\n\n\n\n
    \u793a\u4f8b\uff1a<\/strong><\/h5>\n\n\n\n
    function Person(name, age) {\n  this.name = name;\n  this.age = age;\n}\n\nconst person1 = new Person(\"Alice\", 25);\nconsole.log(person1.name); \/\/ \u8f93\u51fa \"Alice\"<\/code><\/pre>\n\n\n\n
    \u5728\u4e0a\u9762\u7684\u4f8b\u5b50\u4e2d\uff0cthis<\/code> \u6307\u5411\u65b0\u521b\u5efa\u7684 person1<\/code> \u5bf9\u8c61\uff0c\u5e76\u5c06 name<\/code> \u548c age<\/code> \u5c5e\u6027\u6dfb\u52a0\u5230\u8be5\u5bf9\u8c61\u3002<\/p>\n\n\n\n
    4. \u5728\u4e8b\u4ef6\u5904\u7406\u7a0b\u5e8f\u4e2d\uff1a<\/strong><\/h3>\n\n\n\n
    \u5728\u4e8b\u4ef6\u5904\u7406\u7a0b\u5e8f\u4e2d\uff0cthis<\/code> \u901a\u5e38\u6307\u5411\u89e6\u53d1\u4e8b\u4ef6\u7684 DOM \u5143\u7d20\u3002\u5bf9\u4e8e\u4e0d\u540c\u7684\u4e8b\u4ef6\u7c7b\u578b\uff0cthis<\/code> \u7684\u884c\u4e3a\u53ef\u80fd\u4f1a\u6709\u6240\u4e0d\u540c\uff0c\u7279\u522b\u662f\u5728\u4f7f\u7528 addEventListener()<\/code> \u65f6\u3002<\/p>\n\n\n\n
    \u793a\u4f8b\uff1a<\/strong><\/h5>\n\n\n\n
    const button = document.querySelector(\"button\");\n\nbutton.addEventListener(\"click\", function() {\n  console.log(this); \/\/ \u5728\u4e8b\u4ef6\u5904\u7406\u7a0b\u5e8f\u4e2d\uff0cthis \u6307\u5411\u89e6\u53d1\u4e8b\u4ef6\u7684\u6309\u94ae\u5143\u7d20\n});<\/code><\/pre>\n\n\n\n
    \u5728\u8fd9\u4e2a\u4f8b\u5b50\u4e2d\uff0c\u5f53\u6309\u94ae\u88ab\u70b9\u51fb\u65f6\uff0cthis<\/code> \u6307\u5411 button<\/code> \u5143\u7d20\u3002<\/p>\n\n\n\n
    5. \u4f7f\u7528 call()<\/code>\u3001apply()<\/code> \u548c bind()<\/code> \u6539\u53d8 this<\/code> \u7684\u6307\u5411\uff1a<\/strong><\/h3>\n\n\n\n
    JavaScript \u63d0\u4f9b\u4e86\u4e09\u4e2a\u65b9\u6cd5\u6765\u663e\u5f0f\u5730\u6539\u53d8 this<\/code> \u7684\u6307\u5411\uff1a<\/p>\n\n\n\n
      \n
    • call()<\/code><\/strong>\uff1a\u7acb\u5373\u8c03\u7528\u51fd\u6570\uff0c\u5e76\u5c06 this<\/code> \u8bbe\u7f6e\u4e3a\u6307\u5b9a\u7684\u5bf9\u8c61\u3002<\/li>\n\n\n\n
    • apply()<\/code><\/strong>\uff1a\u4e0e call()<\/code> \u7c7b\u4f3c\uff0c\u4f46\u662f\u4f20\u9012\u53c2\u6570\u7684\u65b9\u5f0f\u4e0d\u540c\uff0c\u5b83\u63a5\u53d7\u4e00\u4e2a\u6570\u7ec4\u4f5c\u4e3a\u53c2\u6570\u3002<\/li>\n\n\n\n
    • bind()<\/code><\/strong>\uff1a\u8fd4\u56de\u4e00\u4e2a\u65b0\u7684\u51fd\u6570\uff0c\u8be5\u51fd\u6570\u7684 this<\/code> \u88ab\u6c38\u4e45\u7ed1\u5b9a\u5230\u6307\u5b9a\u7684\u5bf9\u8c61\u3002<\/li>\n<\/ul>\n\n\n\n
      \u793a\u4f8b\uff1a<\/strong><\/h5>\n\n\n\n
      function greet() {\n  console.log(\"Hello, \" + this.name);\n}\n\nconst person = { name: \"John\" };\n\ngreet.call(person); \/\/ \u8f93\u51fa \"Hello, John\"\ngreet.apply(person); \/\/ \u8f93\u51fa \"Hello, John\"\n\nconst greetPerson = greet.bind(person);\ngreetPerson(); \/\/ \u8f93\u51fa \"Hello, John\"<\/code><\/pre>\n\n\n\n
      \u5728\u8fd9\u4e2a\u4f8b\u5b50\u4e2d\uff0ccall()<\/code>\u3001apply()<\/code> \u548c bind()<\/code> \u90fd\u5c06 this<\/code> \u6307\u5411 person<\/code> \u5bf9\u8c61\uff0c\u4ece\u800c\u53ef\u4ee5\u8bbf\u95ee\u8be5\u5bf9\u8c61\u7684 name<\/code> \u5c5e\u6027\u3002<\/p>\n\n\n\n
      6. \u5728\u4e25\u683c\u6a21\u5f0f\u4e0b\uff1a<\/strong><\/h3>\n\n\n\n
      \u5728\u4e25\u683c\u6a21\u5f0f\u4e0b\uff0cthis<\/code> \u7684\u884c\u4e3a\u6709\u6240\u4e0d\u540c\u3002\u7279\u522b\u662f\u5728\u51fd\u6570\u4e2d\uff0cthis<\/code> \u4e0d\u518d\u9ed8\u8ba4\u6307\u5411\u5168\u5c40\u5bf9\u8c61\u3002\u5982\u679c\u51fd\u6570\u6ca1\u6709\u660e\u786e\u7ed1\u5b9a this<\/code>\uff0c\u5b83\u4f1a\u53d8\u6210 undefined<\/code>\u3002<\/p>\n\n\n\n
      \u793a\u4f8b\uff1a<\/strong><\/h5>\n\n\n\n
      \"use strict\";\n\nfunction regularFunction() {\n  console.log(this); \/\/ \u8f93\u51fa undefined\n}\n\nregularFunction();<\/code><\/pre>\n\n\n\n
      \u5728\u4e25\u683c\u6a21\u5f0f\u4e0b\uff0cthis<\/code> \u5728\u51fd\u6570\u4e2d\u4e0d\u4f1a\u6307\u5411\u5168\u5c40\u5bf9\u8c61\uff0c\u907f\u514d\u4e86\u6f5c\u5728\u7684\u9519\u8bef\u3002<\/p>\n\n\n\n
      \u603b\u7ed3<\/strong><\/h3>\n\n\n\n
        \n
      • this<\/code> \u662f JavaScript \u4e2d\u7684\u4e00\u4e2a\u7279\u6b8a\u5173\u952e\u5b57\uff0c\u5b83\u6307\u5411\u5f53\u524d\u6267\u884c\u4e0a\u4e0b\u6587\u7684\u5bf9\u8c61\u3002<\/li>\n\n\n\n
      • \u5728\u5168\u5c40\u4f5c\u7528\u57df\u4e2d\uff0cthis<\/code> \u6307\u5411\u5168\u5c40\u5bf9\u8c61\u3002<\/li>\n\n\n\n
      • \u5728\u666e\u901a\u51fd\u6570\u4e2d\uff0cthis<\/code> \u6307\u5411\u5168\u5c40\u5bf9\u8c61\uff08\u975e\u4e25\u683c\u6a21\u5f0f\uff09\uff0c\u5728\u4e25\u683c\u6a21\u5f0f\u4e0b\u4e3a undefined<\/code>\u3002<\/li>\n\n\n\n
      • \u5728\u5bf9\u8c61\u65b9\u6cd5\u4e2d\uff0cthis<\/code> \u6307\u5411\u8be5\u5bf9\u8c61\u3002<\/li>\n\n\n\n
      • \u5728\u6784\u9020\u51fd\u6570\u4e2d\uff0cthis<\/code> \u6307\u5411\u65b0\u521b\u5efa\u7684\u5bf9\u8c61\u3002<\/li>\n\n\n\n
      • \u5728\u4e8b\u4ef6\u5904\u7406\u7a0b\u5e8f\u4e2d\uff0cthis<\/code> \u901a\u5e38\u6307\u5411\u89e6\u53d1\u4e8b\u4ef6\u7684\u5143\u7d20\u3002<\/li>\n\n\n\n
      • \u53ef\u4ee5\u4f7f\u7528 call()<\/code>\u3001apply()<\/code> \u548c bind()<\/code> \u6765\u663e\u5f0f\u5730\u8bbe\u7f6e this<\/code>\u3002<\/li>\n<\/ul>\n\n\n\n
        \u7406\u89e3 this<\/code> \u7684\u5de5\u4f5c\u539f\u7406\u5bf9\u4e8e\u638c\u63e1 JavaScript \u81f3\u5173\u91cd\u8981\uff0c\u80fd\u591f\u5e2e\u52a9\u4f60\u7f16\u5199\u66f4\u6e05\u6670\u3001\u65e0\u9519\u8bef\u7684\u4ee3\u7801\u3002<\/p>\n","protected":false},"excerpt":{"rendered":"
        \u5728 JavaScript \u4e2d\uff0cthis \u662f\u4e00\u4e2a\u975e\u5e38\u91cd\u8981\u7684\u5173\u952e\u5b57\uff0c\u5b83\u6307\u5411\u5f53\u524d\u6267\u884c\u4e0a\u4e0b\u6587\u7684\u5bf9\u8c61\u3002this \u7684\u503c\u5728\u4e0d […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[46],"tags":[],"class_list":["post-2073","post","type-post","status-publish","format-standard","hentry","category-javascript"],"_links":{"self":[{"href":"https:\/\/www.laixuexila.com\/index.php\/wp-json\/wp\/v2\/posts\/2073","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.laixuexila.com\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.laixuexila.com\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.laixuexila.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.laixuexila.com\/index.php\/wp-json\/wp\/v2\/comments?post=2073"}],"version-history":[{"count":1,"href":"https:\/\/www.laixuexila.com\/index.php\/wp-json\/wp\/v2\/posts\/2073\/revisions"}],"predecessor-version":[{"id":2074,"href":"https:\/\/www.laixuexila.com\/index.php\/wp-json\/wp\/v2\/posts\/2073\/revisions\/2074"}],"wp:attachment":[{"href":"https:\/\/www.laixuexila.com\/index.php\/wp-json\/wp\/v2\/media?parent=2073"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.laixuexila.com\/index.php\/wp-json\/wp\/v2\/categories?post=2073"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.laixuexila.com\/index.php\/wp-json\/wp\/v2\/tags?post=2073"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}