CINXE.COM

<!doctype html><html lang="en-US" prefix="og: https://ogp.me/ns#"><head><meta charSet="utf-8"/><meta name="viewport" content="width=device-width,initial-scale=1"/><link rel="icon" href="https://developer.mozilla.org/favicon-48x48.bc390275e955dacb2e65.png"/><link rel="apple-touch-icon" href="https://developer.mozilla.org/apple-touch-icon.528534bba673c38049c2.png"/><meta name="theme-color" content="#ffffff"/><link rel="manifest" href="https://developer.mozilla.org/manifest.f42880861b394dd4dc9b.json"/><link rel="search" type="application/opensearchdescription+xml" href="/opensearch.xml" title="MDN Web Docs"/><title>Function.prototype.bind() - JavaScript | MDN</title><link rel="alternate" title="Function.prototype.bind()" href="https://developer.mozilla.org/de/docs/Web/JavaScript/Reference/Global_Objects/Function/bind" hrefLang="de"/><link rel="alternate" title="Function.prototype.bind()" href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/bind" hrefLang="en"/><link rel="alternate" title="Function.prototype.bind()" href="https://developer.mozilla.org/es/docs/Web/JavaScript/Reference/Global_Objects/Function/bind" hrefLang="es"/><link rel="alternate" title="Function.prototype.bind()" href="https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Global_Objects/Function/bind" hrefLang="fr"/><link rel="alternate" title="Function.prototype.bind()" href="https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Function/bind" hrefLang="ja"/><link rel="alternate" title="Function.prototype.bind()" href="https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Function/bind" hrefLang="ko"/><link rel="alternate" title="Function.prototype.bind()" href="https://developer.mozilla.org/pt-BR/docs/Web/JavaScript/Reference/Global_Objects/Function/bind" hrefLang="pt"/><link rel="alternate" title="Function.prototype.bind()" href="https://developer.mozilla.org/ru/docs/Web/JavaScript/Reference/Global_Objects/Function/bind" hrefLang="ru"/><link rel="alternate" title="Function.prototype.bind()" href="https://developer.mozilla.org/zh-TW/docs/Web/JavaScript/Reference/Global_Objects/Function/bind" hrefLang="zh-Hant"/><link rel="alternate" title="Function.prototype.bind()" href="https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Function/bind" hrefLang="zh"/><link rel="preload" as="font" type="font/woff2" href="/static/media/Inter.var.c2fe3cb2b7c746f7966a.woff2" crossorigin=""/><link rel="alternate" type="application/rss+xml" title="MDN Blog RSS Feed" href="https://developer.mozilla.org/en-US/blog/rss.xml" hrefLang="en"/><meta name="description" content="Function 实例的 bind() 方法创建一个新函数，当调用该新函数时，它会调用原始函数并将其 this 关键字设置为给定的值，同时，还可以传入一系列指定的参数，这些参数会插入到调用新函数时传入的参数的前面。"/><meta property="og:url" content="https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Function/bind"/><meta property="og:title" content="Function.prototype.bind() - JavaScript | MDN"/><meta property="og:type" content="website"/><meta property="og:locale" content="zh_CN"/><meta property="og:description" content="Function 实例的 bind() 方法创建一个新函数，当调用该新函数时，它会调用原始函数并将其 this 关键字设置为给定的值，同时，还可以传入一系列指定的参数，这些参数会插入到调用新函数时传入的参数的前面。"/><meta property="og:image" content="https://developer.mozilla.org/mdn-social-share.d893525a4fb5fb1f67a2.png"/><meta property="og:image:type" content="image/png"/><meta property="og:image:height" content="1080"/><meta property="og:image:width" content="1920"/><meta property="og:image:alt" content="The MDN Web Docs logo, featuring a blue accent color, displayed on a solid black background."/><meta property="og:site_name" content="MDN Web Docs"/><meta name="twitter:card" content="summary_large_image"/><meta name="twitter:creator" content="MozDevNet"/><link rel="canonical" href="https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Function/bind"/><style media="print">.article-actions-container,.document-toc-container,.language-menu,.main-menu-toggle,.on-github,.page-footer,.place,.sidebar,.top-banner,.top-navigation-main,ul.prev-next{display:none!important}.main-page-content,.main-page-content pre{padding:2px}.main-page-content pre{border-left-width:2px}</style><script src="/static/js/gtag.js" defer=""></script><script defer="" src="/static/js/main.d80cfb3b.js"></script><link href="/static/css/main.87d0050e.css" rel="stylesheet"/></head><body><script>if(document.body.addEventListener("load",(t=>{t.target.classList.contains("interactive")&&t.target.setAttribute("data-readystate","complete")}),{capture:!0}),window&&document.documentElement){const t={light:"#ffffff",dark:"#1b1b1b"};try{const e=window.localStorage.getItem("theme");e&&(document.documentElement.className=e,document.documentElement.style.backgroundColor=t[e]);const o=window.localStorage.getItem("nop");o&&(document.documentElement.dataset.nop=o)}catch(t){console.warn("Unable to read theme from localStorage",t)}}</script><div id="root"><ul id="nav-access" class="a11y-nav"><li><a id="skip-main" href="#content">Skip to main content</a></li><li><a id="skip-search" href="#top-nav-search-input">Skip to search</a></li><li><a id="skip-select-language" href="#languages-switcher-button">Skip to select language</a></li></ul><div class="page-wrapper category-javascript document-page"><div class="top-banner loading"><section class="place top container"></section></div><div class="sticky-header-container"><header class="top-navigation "><div class="container "><div class="top-navigation-wrap"><a href="/zh-CN/" class="logo" aria-label="MDN homepage"><svg id="mdn-docs-logo" xmlns="http://www.w3.org/2000/svg" x="0" y="0" viewBox="0 0 694.9 104.4" style="enable-background:new 0 0 694.9 104.4" xml:space="preserve" role="img"><title>MDN Web Docs</title><path d="M40.3 0 11.7 92.1H0L28.5 0h11.8zm10.4 0v92.1H40.3V0h10.4zM91 0 62.5 92.1H50.8L79.3 0H91zm10.4 0v92.1H91V0h10.4z" class="logo-m"></path><path d="M627.9 95.6h67v8.8h-67v-8.8z" class="logo-_"></path><path d="M367 42h-4l-10.7 30.8h-5.5l-10.8-26h-.4l-10.5 26h-5.2L308.7 42h-3.8v-5.6H323V42h-6.5l6.8 20.4h.4l10.3-26h4.7l11.2 26h.5l5.7-20.3h-6.2v-5.6H367V42zm34.9 20c-.4 3.2-2 5.9-4.7 8.2-2.8 2.3-6.5 3.4-11.3 3.4-5.4 0-9.7-1.6-13.1-4.7-3.3-3.2-5-7.7-5-13.7 0-5.7 1.6-10.3 4.7-14s7.4-5.5 12.9-5.5c5.1 0 9.1 1.6 11.9 4.7s4.3 6.9 4.3 11.3c0 1.5-.2 3-.5 4.7h-25.6c.3 7.7 4 11.6 10.9 11.6 2.9 0 5.1-.7 6.5-2 1.5-1.4 2.5-3 3-4.9l6 .9zM394 51.3c.2-2.4-.4-4.7-1.8-6.9s-3.8-3.3-7-3.3c-3.1 0-5.3 1-6.9 3-1.5 2-2.5 4.4-2.8 7.2H394zm51 2.4c0 5-1.3 9.5-4 13.7s-6.9 6.2-12.7 6.2c-6 0-10.3-2.2-12.7-6.7-.1.4-.2 1.4-.4 2.9s-.3 2.5-.4 2.9h-7.3c.3-1.7.6-3.5.8-5.3.3-1.8.4-3.7.4-5.5V22.3h-6v-5.6H416v27c1.1-2.2 2.7-4.1 4.7-5.7 2-1.6 4.8-2.4 8.4-2.4 4.6 0 8.4 1.6 11.4 4.7 3 3.2 4.5 7.6 4.5 13.4zm-7.7.6c0-4.2-1-7.4-3-9.5-2-2.2-4.4-3.3-7.4-3.3-3.4 0-6 1.2-8 3.7-1.9 2.4-2.9 5-3 7.7V57c0 3 1 5.6 3 7.7s4.5 3.1 7.6 3.1c3.6 0 6.3-1.3 8.1-3.9 1.8-2.7 2.7-5.9 2.7-9.6zm69.2 18.5h-13.2v-7.2c-1.2 2.2-2.8 4.1-4.9 5.6-2.1 1.6-4.8 2.4-8.3 2.4-4.8 0-8.7-1.6-11.6-4.9-2.9-3.2-4.3-7.7-4.3-13.3 0-5 1.3-9.6 4-13.7 2.6-4.1 6.9-6.2 12.8-6.2 5.7 0 9.8 2.2 12.3 6.5V22.3h-8.6v-5.6h15.8v50.6h6v5.5zM493.2 56v-4.4c-.1-3-1.2-5.5-3.2-7.3s-4.4-2.8-7.2-2.8c-3.6 0-6.3 1.3-8.2 3.9-1.9 2.6-2.8 5.8-2.8 9.6 0 4.1 1 7.3 3 9.5s4.5 3.3 7.4 3.3c3.2 0 5.8-1.3 7.8-3.8 2.1-2.6 3.1-5.3 3.2-8zm53.1-1.4c0 5.6-1.8 10.2-5.3 13.7s-8.2 5.3-13.9 5.3-10.1-1.7-13.4-5.1c-3.3-3.4-5-7.9-5-13.5 0-5.3 1.6-9.9 4.7-13.7 3.2-3.8 7.9-5.7 14.2-5.7s11 1.9 14.1 5.7c3 3.7 4.6 8.1 4.6 13.3zm-7.7-.2c0-4-1-7.2-3-9.5s-4.8-3.5-8.2-3.5c-3.6 0-6.4 1.2-8.3 3.7s-2.9 5.6-2.9 9.5c0 3.7.9 6.8 2.8 9.4 1.9 2.6 4.6 3.9 8.3 3.9 3.6 0 6.4-1.3 8.4-3.8 1.9-2.6 2.9-5.8 2.9-9.7zm45 5.8c-.4 3.2-1.9 6.3-4.4 9.1-2.5 2.9-6.4 4.3-11.8 4.3-5.2 0-9.4-1.6-12.6-4.8-3.2-3.2-4.8-7.7-4.8-13.7 0-5.5 1.6-10.1 4.7-13.9 3.2-3.8 7.6-5.7 13.2-5.7 2.3 0 4.6.3 6.7.8 2.2.5 4.2 1.5 6.2 2.9l1.5 9.5-5.9.7-1.3-6.1c-2.1-1.2-4.5-1.8-7.2-1.8-3.5 0-6.1 1.2-7.7 3.7-1.7 2.5-2.5 5.7-2.5 9.6 0 4.1.9 7.3 2.7 9.5 1.8 2.3 4.4 3.4 7.8 3.4 5.2 0 8.2-2.9 9.2-8.8l6.2 1.3zm34.7 1.9c0 3.6-1.5 6.5-4.6 8.5s-7 3-11.7 3c-5.7 0-10.6-1.2-14.6-3.6l1.2-8.8 5.7.6-.2 4.7c1.1.5 2.3.9 3.6 1.1s2.6.3 3.9.3c2.4 0 4.5-.4 6.5-1.3 1.9-.9 2.9-2.2 2.9-4.1 0-1.8-.8-3.1-2.3-3.8s-3.5-1.3-5.8-1.7-4.6-.9-6.9-1.4c-2.3-.6-4.2-1.6-5.7-2.9-1.6-1.4-2.3-3.5-2.3-6.3 0-4.1 1.5-6.9 4.6-8.5s6.4-2.4 9.9-2.4c2.6 0 5 .3 7.2.9 2.2.6 4.3 1.4 6.1 2.4l.8 8.8-5.8.7-.8-5.7c-2.3-1-4.7-1.6-7.2-1.6-2.1 0-3.7.4-5.1 1.1-1.3.8-2 2-2 3.8 0 1.7.8 2.9 2.3 3.6 1.5.7 3.4 1.2 5.7 1.6 2.2.4 4.5.8 6.7 1.4 2.2.6 4.1 1.6 5.7 3 1.4 1.6 2.2 3.7 2.2 6.6zM197.6 73.2h-17.1v-5.5h3.8V51.9c0-3.7-.7-6.3-2.1-7.9-1.4-1.6-3.3-2.3-5.7-2.3-3.2 0-5.6 1.1-7.2 3.4s-2.4 4.6-2.5 6.9v15.6h6v5.5h-17.1v-5.5h3.8V51.9c0-3.8-.7-6.4-2.1-7.9-1.4-1.5-3.3-2.3-5.6-2.3-3.2 0-5.5 1.1-7.2 3.3-1.6 2.2-2.4 4.5-2.5 6.9v15.8h6.9v5.5h-20.2v-5.5h6V42.4h-6.1v-5.6h13.4v6.4c1.2-2.1 2.7-3.8 4.7-5.2 2-1.3 4.4-2 7.3-2s5.3.7 7.5 2.1c2.2 1.4 3.7 3.5 4.5 6.4 1.1-2.5 2.7-4.5 4.9-6.1s4.8-2.4 7.9-2.4c3.5 0 6.5 1.1 8.9 3.3s3.7 5.6 3.7 10.2v18.2h6.1v5.5zm42.5 0h-13.2V66c-1.2 2.2-2.8 4.1-4.9 5.6-2.1 1.6-4.8 2.4-8.3 2.4-4.8 0-8.7-1.6-11.6-4.9-2.9-3.2-4.3-7.7-4.3-13.3 0-5 1.3-9.6 4-13.7 2.6-4.1 6.9-6.2 12.8-6.2s9.8 2.2 12.3 6.5V22.7h-8.6v-5.6h15.8v50.6h6v5.5zm-13.3-16.8V52c-.1-3-1.2-5.5-3.2-7.3s-4.4-2.8-7.2-2.8c-3.6 0-6.3 1.3-8.2 3.9-1.9 2.6-2.8 5.8-2.8 9.6 0 4.1 1 7.3 3 9.5s4.5 3.3 7.4 3.3c3.2 0 5.8-1.3 7.8-3.8 2.1-2.6 3.1-5.3 3.2-8zm61.5 16.8H269v-5.5h6V51.9c0-3.7-.7-6.3-2.2-7.9-1.4-1.6-3.4-2.3-5.7-2.3-3.1 0-5.6 1-7.4 3s-2.8 4.4-2.9 7v15.9h6v5.5h-19.3v-5.5h6V42.4h-6.2v-5.6h13.6V43c2.6-4.6 6.8-6.9 12.7-6.9 3.6 0 6.7 1.1 9.2 3.3s3.7 5.6 3.7 10.2v18.2h6v5.4h-.2z" class="logo-text"></path></svg></a><button title="Open main menu" type="button" class="button action has-icon main-menu-toggle" aria-haspopup="menu" aria-label="Open main menu" aria-expanded="false"><span class="button-wrap"><span class="icon icon-menu "></span><span class="visually-hidden">Open main menu</span></span></button></div><div class="top-navigation-main"><nav class="main-nav" aria-label="Main menu"><ul class="main-menu nojs"><li class="top-level-entry-container active"><button type="button" id="references-button" class="top-level-entry menu-toggle" aria-controls="references-menu" aria-expanded="false">References</button><a href="/zh-CN/docs/Web" class="top-level-entry">References</a><ul id="references-menu" class="submenu references hidden inline-submenu-lg" aria-labelledby="references-button"><li class="apis-link-container mobile-only "><a href="/zh-CN/docs/Web" class="submenu-item "><div class="submenu-icon"></div><div class="submenu-content-container"><div class="submenu-item-heading">Overview / Web Technology</div><p class="submenu-item-description">Web technology reference for developers</p></div></a></li><li class="html-link-container "><a href="/zh-CN/docs/Web/HTML" class="submenu-item "><div class="submenu-icon html"></div><div class="submenu-content-container"><div class="submenu-item-heading">HTML</div><p class="submenu-item-description">Structure of content on the web</p></div></a></li><li class="css-link-container "><a href="/zh-CN/docs/Web/CSS" class="submenu-item "><div class="submenu-icon css"></div><div class="submenu-content-container"><div class="submenu-item-heading">CSS</div><p class="submenu-item-description">Code used to describe document style</p></div></a></li><li class="javascript-link-container "><a href="/zh-CN/docs/Web/JavaScript" class="submenu-item "><div class="submenu-icon javascript"></div><div class="submenu-content-container"><div class="submenu-item-heading">JavaScript</div><p class="submenu-item-description">General-purpose scripting language</p></div></a></li><li class="http-link-container "><a href="/zh-CN/docs/Web/HTTP" class="submenu-item "><div class="submenu-icon http"></div><div class="submenu-content-container"><div class="submenu-item-heading">HTTP</div><p class="submenu-item-description">Protocol for transmitting web resources</p></div></a></li><li class="apis-link-container "><a href="/zh-CN/docs/Web/API" class="submenu-item "><div class="submenu-icon apis"></div><div class="submenu-content-container"><div class="submenu-item-heading">Web APIs</div><p class="submenu-item-description">Interfaces for building web applications</p></div></a></li><li class="apis-link-container "><a href="/zh-CN/docs/Mozilla/Add-ons/WebExtensions" class="submenu-item "><div class="submenu-icon"></div><div class="submenu-content-container"><div class="submenu-item-heading">Web Extensions</div><p class="submenu-item-description">Developing extensions for web browsers</p></div></a></li><li class="apis-link-container desktop-only "><a href="/zh-CN/docs/Web" class="submenu-item "><div class="submenu-icon"></div><div class="submenu-content-container"><div class="submenu-item-heading">Web Technology</div><p class="submenu-item-description">Web technology reference for developers</p></div></a></li></ul></li><li class="top-level-entry-container "><button type="button" id="guides-button" class="top-level-entry menu-toggle" aria-controls="guides-menu" aria-expanded="false">Guides</button><a href="/zh-CN/docs/Learn" class="top-level-entry">Guides</a><ul id="guides-menu" class="submenu guides hidden inline-submenu-lg" aria-labelledby="guides-button"><li class="apis-link-container mobile-only "><a href="/zh-CN/docs/Learn" class="submenu-item "><div class="submenu-icon learn"></div><div class="submenu-content-container"><div class="submenu-item-heading">Overview / MDN Learning Area</div><p class="submenu-item-description">Learn web development</p></div></a></li><li class="apis-link-container desktop-only "><a href="/zh-CN/docs/Learn" class="submenu-item "><div class="submenu-icon learn"></div><div class="submenu-content-container"><div class="submenu-item-heading">MDN Learning Area</div><p class="submenu-item-description">Learn web development</p></div></a></li><li class="html-link-container "><a href="/zh-CN/docs/Learn/HTML" class="submenu-item "><div class="submenu-icon html"></div><div class="submenu-content-container"><div class="submenu-item-heading">HTML</div><p class="submenu-item-description">Learn to structure web content with HTML</p></div></a></li><li class="css-link-container "><a href="/zh-CN/docs/Learn/CSS" class="submenu-item "><div class="submenu-icon css"></div><div class="submenu-content-container"><div class="submenu-item-heading">CSS</div><p class="submenu-item-description">Learn to style content using CSS</p></div></a></li><li class="javascript-link-container "><a href="/zh-CN/docs/Learn/JavaScript" class="submenu-item "><div class="submenu-icon javascript"></div><div class="submenu-content-container"><div class="submenu-item-heading">JavaScript</div><p class="submenu-item-description">Learn to run scripts in the browser</p></div></a></li><li class=" "><a href="/zh-CN/docs/Web/Accessibility" class="submenu-item "><div class="submenu-icon"></div><div class="submenu-content-container"><div class="submenu-item-heading">Accessibility</div><p class="submenu-item-description">Learn to make the web accessible to all</p></div></a></li></ul></li><li class="top-level-entry-container "><button type="button" id="mdn-plus-button" class="top-level-entry menu-toggle" aria-controls="mdn-plus-menu" aria-expanded="false">Plus</button><a href="/zh-CN/plus" class="top-level-entry">Plus</a><ul id="mdn-plus-menu" class="submenu mdn-plus hidden inline-submenu-lg" aria-labelledby="mdn-plus-button"><li class=" "><a href="/zh-CN/plus" class="submenu-item "><div class="submenu-icon"></div><div class="submenu-content-container"><div class="submenu-item-heading">Overview</div><p class="submenu-item-description">A customized MDN experience</p></div></a></li><li class=" "><a href="/zh-CN/plus/ai-help" class="submenu-item "><div class="submenu-icon"></div><div class="submenu-content-container"><div class="submenu-item-heading">AI Help</div><p class="submenu-item-description">Get real-time assistance and support</p></div></a></li><li class=" "><a href="/zh-CN/plus/updates" class="submenu-item "><div class="submenu-icon"></div><div class="submenu-content-container"><div class="submenu-item-heading">Updates</div><p class="submenu-item-description">All browser compatibility updates at a glance</p></div></a></li><li class=" "><a href="/en-US/plus/docs/features/overview" class="submenu-item "><div class="submenu-icon"></div><div class="submenu-content-container"><div class="submenu-item-heading">Documentation</div><p class="submenu-item-description">Learn how to use MDN Plus</p></div></a></li><li class=" "><a href="/en-US/plus/docs/faq" class="submenu-item "><div class="submenu-icon"></div><div class="submenu-content-container"><div class="submenu-item-heading">FAQ</div><p class="submenu-item-description">Frequently asked questions about MDN Plus</p></div></a></li></ul></li><li class="top-level-entry-container "><a class="top-level-entry menu-link" href="/en-US/curriculum/">Curriculum <sup class="new">New</sup></a></li><li class="top-level-entry-container "><a class="top-level-entry menu-link" href="/en-US/blog/">Blog</a></li><li class="top-level-entry-container "><button type="button" id="tools-button" class="top-level-entry menu-toggle" aria-controls="tools-menu" aria-expanded="false">Tools</button><ul id="tools-menu" class="submenu tools hidden inline-submenu-lg" aria-labelledby="tools-button"><li class=" "><a href="/zh-CN/play" class="submenu-item "><div class="submenu-icon"></div><div class="submenu-content-container"><div class="submenu-item-heading">Playground</div><p class="submenu-item-description">Write, test and share your code</p></div></a></li><li class=" "><a href="/en-US/observatory" class="submenu-item "><div class="submenu-icon"></div><div class="submenu-content-container"><div class="submenu-item-heading">HTTP Observatory</div><p class="submenu-item-description">Scan a website for free</p></div></a></li><li class=" "><a href="/en-US/plus/ai-help" class="submenu-item "><div class="submenu-icon"></div><div class="submenu-content-container"><div class="submenu-item-heading">AI Help</div><p class="submenu-item-description">Get real-time assistance and support</p></div></a></li></ul></li></ul></nav><div class="header-search"><form action="/zh-CN/search" class="search-form search-widget" id="top-nav-search-form" role="search"><label id="top-nav-search-label" for="top-nav-search-input" class="visually-hidden">Search MDN</label><input aria-activedescendant="" aria-autocomplete="list" aria-controls="top-nav-search-menu" aria-expanded="false" aria-labelledby="top-nav-search-label" autoComplete="off" id="top-nav-search-input" role="combobox" type="search" class="search-input-field" name="q" placeholder=" " required="" value=""/><button type="button" class="button action has-icon clear-search-button"><span class="button-wrap"><span class="icon icon-cancel "></span><span class="visually-hidden">Clear search input</span></span></button><button type="submit" class="button action has-icon search-button"><span class="button-wrap"><span class="icon icon-search "></span><span class="visually-hidden">Search</span></span></button><div id="top-nav-search-menu" role="listbox" aria-labelledby="top-nav-search-label"></div></form></div><div class="theme-switcher-menu"><button type="button" class="button action has-icon theme-switcher-menu small" aria-haspopup="menu"><span class="button-wrap"><span class="icon icon-theme-os-default "></span>Theme</span></button></div><ul class="auth-container"><li><a href="/users/fxa/login/authenticate/?next=%2Fzh-CN%2Fdocs%2FWeb%2FJavaScript%2FReference%2FGlobal_Objects%2FFunction%2Fbind" class="login-link" rel="nofollow">Log in</a></li><li><a href="/users/fxa/login/authenticate/?next=%2Fzh-CN%2Fdocs%2FWeb%2FJavaScript%2FReference%2FGlobal_Objects%2FFunction%2Fbind" target="_self" rel="nofollow" class="button primary mdn-plus-subscribe-link"><span class="button-wrap">Sign up for free</span></a></li></ul></div></div></header><div class="article-actions-container"><div class="container"><button type="button" class="button action has-icon sidebar-button" aria-label="Expand sidebar" aria-expanded="false" aria-controls="sidebar-quicklinks"><span class="button-wrap"><span class="icon icon-sidebar "></span></span></button><nav class="breadcrumbs-container" aria-label="Breadcrumb"><ol typeof="BreadcrumbList" vocab="https://schema.org/" aria-label="breadcrumbs"><li property="itemListElement" typeof="ListItem"><a href="/zh-CN/docs/Web" class="breadcrumb" property="item" typeof="WebPage"><span property="name">面向开发者的 Web 技术</span></a><meta property="position" content="1"/></li><li property="itemListElement" typeof="ListItem"><a href="/zh-CN/docs/Web/JavaScript" class="breadcrumb" property="item" typeof="WebPage"><span property="name">JavaScript</span></a><meta property="position" content="2"/></li><li property="itemListElement" typeof="ListItem"><a href="/zh-CN/docs/Web/JavaScript/Reference" class="breadcrumb" property="item" typeof="WebPage"><span property="name">JavaScript 参考</span></a><meta property="position" content="3"/></li><li property="itemListElement" typeof="ListItem"><a href="/zh-CN/docs/Web/JavaScript/Reference/Global_Objects" class="breadcrumb" property="item" typeof="WebPage"><span property="name">JavaScript 标准内置对象</span></a><meta property="position" content="4"/></li><li property="itemListElement" typeof="ListItem"><a href="/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Function" class="breadcrumb" property="item" typeof="WebPage"><span property="name">Function</span></a><meta property="position" content="5"/></li><li property="itemListElement" typeof="ListItem"><a href="/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Function/bind" class="breadcrumb-current-page" property="item" typeof="WebPage"><span property="name">Function.prototype.bind()</span></a><meta property="position" content="6"/></li></ol></nav><div class="article-actions"><button type="button" class="button action has-icon article-actions-toggle" aria-label="Article actions"><span class="button-wrap"><span class="icon icon-ellipses "></span><span class="article-actions-dialog-heading">Article Actions</span></span></button><ul class="article-actions-entries"><li class="article-actions-entry"><div class="languages-switcher-menu open-on-focus-within"><button id="languages-switcher-button" type="button" class="button action small has-icon languages-switcher-menu" aria-haspopup="menu"><span class="button-wrap"><span class="icon icon-language "></span>中文 (简体)</span></button><div class="hidden"><ul class="submenu language-menu " aria-labelledby="language-menu-button"><li class=" "><form class="submenu-item locale-redirect-setting"><div class="group"><label class="switch"><input type="checkbox" name="locale-redirect"/><span class="slider"></span><span class="label">Remember language</span></label><a href="https://github.com/orgs/mdn/discussions/739" rel="external noopener noreferrer" target="_blank" title="Enable this setting to automatically switch to this language when it's available. (Click to learn more.)"><span class="icon icon-question-mark "></span></a></div></form></li><li class=" "><a data-locale="de" href="/de/docs/Web/JavaScript/Reference/Global_Objects/Function/bind" class="button submenu-item"><span>Deutsch</span><span title="Diese Übersetzung ist Teil eines Experiments."><span class="icon icon-experimental "></span></span></a></li><li class=" "><a data-locale="en-US" href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/bind" class="button submenu-item"><span>English (US)</span></a></li><li class=" "><a data-locale="es" href="/es/docs/Web/JavaScript/Reference/Global_Objects/Function/bind" class="button submenu-item"><span>Español</span></a></li><li class=" "><a data-locale="fr" href="/fr/docs/Web/JavaScript/Reference/Global_Objects/Function/bind" class="button submenu-item"><span>Français</span></a></li><li class=" "><a data-locale="ja" href="/ja/docs/Web/JavaScript/Reference/Global_Objects/Function/bind" class="button submenu-item"><span>日本語</span></a></li><li class=" "><a data-locale="ko" href="/ko/docs/Web/JavaScript/Reference/Global_Objects/Function/bind" class="button submenu-item"><span>한국어</span></a></li><li class=" "><a data-locale="pt-BR" href="/pt-BR/docs/Web/JavaScript/Reference/Global_Objects/Function/bind" class="button submenu-item"><span>Português (do Brasil)</span></a></li><li class=" "><a data-locale="ru" href="/ru/docs/Web/JavaScript/Reference/Global_Objects/Function/bind" class="button submenu-item"><span>Русский</span></a></li><li class=" "><a data-locale="zh-TW" href="/zh-TW/docs/Web/JavaScript/Reference/Global_Objects/Function/bind" class="button submenu-item"><span>正體中文 (繁體)</span></a></li></ul></div></div></li></ul></div></div></div></div><div class="container"><div class="notecard localized-content-note"><p><a href="/zh-CN/docs/MDN/Community/Contributing/Translated_content#活跃语言">此页面由社区从英文翻译而来。了解更多并加入 MDN Web Docs 社区。</a></p></div></div><div class="main-wrapper"><div class="sidebar-container"><aside id="sidebar-quicklinks" class="sidebar" data-macro="JSRef"><button type="button" class="button action backdrop" aria-label="Collapse sidebar"><span class="button-wrap"></span></button><nav aria-label="Related Topics" class="sidebar-inner"><header class="sidebar-actions"><section class="sidebar-filter-container"><div class="sidebar-filter "><label id="sidebar-filter-label" class="sidebar-filter-label" for="sidebar-filter-input"><span class="icon icon-filter"></span><span class="visually-hidden">Filter sidebar</span></label><input id="sidebar-filter-input" autoComplete="off" class="sidebar-filter-input-field false" type="text" placeholder="Filter" value=""/><button type="button" class="button action has-icon clear-sidebar-filter-button"><span class="button-wrap"><span class="icon icon-cancel "></span><span class="visually-hidden">Clear filter input</span></span></button></div></section></header><div class="sidebar-inner-nav"><div class="in-nav-toc"><div class="document-toc-container"><section class="document-toc"><header><h2 class="document-toc-heading">在本文中</h2></header><ul class="document-toc-list"><li class="document-toc-item "><a class="document-toc-link" href="#尝试一下">尝试一下</a></li><li class="document-toc-item "><a class="document-toc-link" href="#语法">语法</a></li><li class="document-toc-item "><a class="document-toc-link" href="#描述">描述</a></li><li class="document-toc-item "><a class="document-toc-link" href="#示例">示例</a></li><li class="document-toc-item "><a class="document-toc-link" href="#规范">规范</a></li><li class="document-toc-item "><a class="document-toc-link" href="#浏览器兼容性">浏览器兼容性</a></li><li class="document-toc-item "><a class="document-toc-link" href="#参见">参见</a></li></ul></section></div></div><div class="sidebar-body"><ol><li class="section"><a href="/zh-CN/docs/Web/JavaScript/Reference/Global_Objects">标准内置对象</a></li><li class="section"><a href="/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Function"><code>Function</code></a></li><li><details open=""><summary>构造函数</summary><ol><li><a href="/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Function/Function"><code>Function() 构造函数</code></a></li></ol></details></li><li><details open=""><summary>实例方法</summary><ol><li><a href="/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Function/apply"><code>Function.prototype.apply()</code></a></li><li><em><a href="/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Function/bind" aria-current="page"><code>Function.prototype.bind()</code></a></em></li><li><a href="/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Function/call"><code>Function.prototype.call()</code></a></li><li><a href="/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Function/Symbol.hasInstance"><code>Function.prototype[Symbol.hasInstance]()</code></a></li><li><a href="/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Function/toString"><code>Function.prototype.toString()</code></a></li></ol></details></li><li><details open=""><summary>实例属性</summary><ol><li><a href="/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Function/arguments"><code>Function.prototype.arguments</code></a><abbr class="icon icon-nonstandard" title="非标准。请在使用前检查跨浏览器支持。"> <span class="visually-hidden">非标准</span> </abbr><abbr class="icon icon-deprecated" title="已弃用。请不要在新的网站中使用。"> <span class="visually-hidden">已弃用</span> </abbr></li><li><a href="/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Function/caller"><code>Function.prototype.caller</code></a><abbr class="icon icon-nonstandard" title="非标准。请在使用前检查跨浏览器支持。"> <span class="visually-hidden">非标准</span> </abbr><abbr class="icon icon-deprecated" title="已弃用。请不要在新的网站中使用。"> <span class="visually-hidden">已弃用</span> </abbr></li><li><a href="/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Function/displayName"><code>Function.displayName</code></a><abbr class="icon icon-nonstandard" title="非标准。请在使用前检查跨浏览器支持。"> <span class="visually-hidden">非标准</span> </abbr></li><li><a href="/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Function/length"><code>Function：length</code></a></li><li><a href="/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Function/name"><code>Function.name</code></a></li><li><a href="/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Function/prototype"><code>Function.prototype.prototype</code></a></li></ol></details></li><li class="section no-link">继承</li><li class="section"><a href="/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object"><code>Object/Function</code></a></li><li><details open=""><summary>静态方法</summary><ol><li><a href="/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Function/apply"><code>Function.prototype.apply()</code></a></li><li><em><a href="/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Function/bind" aria-current="page"><code>Function.prototype.bind()</code></a></em></li><li><a href="/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Function/call"><code>Function.prototype.call()</code></a></li><li><a href="/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Function/Symbol.hasInstance"><code>Function.prototype[Symbol.hasInstance]()</code></a></li><li><a href="/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Function/toString"><code>Function.prototype.toString()</code></a></li></ol></details></li><li><details><summary>静态属性</summary><ol><li><a href="/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Function/arguments"><code>Function.prototype.arguments</code></a><abbr class="icon icon-nonstandard" title="非标准。请在使用前检查跨浏览器支持。"> <span class="visually-hidden">非标准</span> </abbr><abbr class="icon icon-deprecated" title="已弃用。请不要在新的网站中使用。"> <span class="visually-hidden">已弃用</span> </abbr></li><li><a href="/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Function/caller"><code>Function.prototype.caller</code></a><abbr class="icon icon-nonstandard" title="非标准。请在使用前检查跨浏览器支持。"> <span class="visually-hidden">非标准</span> </abbr><abbr class="icon icon-deprecated" title="已弃用。请不要在新的网站中使用。"> <span class="visually-hidden">已弃用</span> </abbr></li><li><a href="/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Function/displayName"><code>Function.displayName</code></a><abbr class="icon icon-nonstandard" title="非标准。请在使用前检查跨浏览器支持。"> <span class="visually-hidden">非标准</span> </abbr></li><li><a href="/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Function/length"><code>Function：length</code></a></li><li><a href="/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Function/name"><code>Function.name</code></a></li><li><a href="/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Function/prototype"><code>Function.prototype.prototype</code></a></li></ol></details></li><li><details><summary>实例方法</summary><ol><li><a href="/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object/__defineGetter__"><code>Object.prototype.__defineGetter__()</code></a><abbr class="icon icon-deprecated" title="已弃用。请不要在新的网站中使用。"> <span class="visually-hidden">已弃用</span> </abbr></li><li><a href="/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object/__defineSetter__"><code>Object.prototype.__defineSetter__()</code></a><abbr class="icon icon-deprecated" title="已弃用。请不要在新的网站中使用。"> <span class="visually-hidden">已弃用</span> </abbr></li><li><a href="/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object/__lookupGetter__"><code>Object.prototype.__lookupGetter__()</code></a><abbr class="icon icon-deprecated" title="已弃用。请不要在新的网站中使用。"> <span class="visually-hidden">已弃用</span> </abbr></li><li><a href="/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object/__lookupSetter__"><code>Object.prototype.__lookupSetter__()</code></a><abbr class="icon icon-deprecated" title="已弃用。请不要在新的网站中使用。"> <span class="visually-hidden">已弃用</span> </abbr></li><li><a href="/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object/hasOwnProperty"><code>Object.prototype.hasOwnProperty()</code></a></li><li><a href="/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object/isPrototypeOf"><code>Object.prototype.isPrototypeOf()</code></a></li><li><a href="/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object/propertyIsEnumerable"><code>Object.prototype.propertyIsEnumerable()</code></a></li><li><a href="/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object/toLocaleString"><code>Object.prototype.toLocaleString()</code></a></li><li><a href="/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object/toString"><code>Object.prototype.toString()</code></a></li><li><a href="/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object/valueOf"><code>Object.prototype.valueOf()</code></a></li></ol></details></li><li><details><summary>实例属性</summary><ol><li><a href="/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object/constructor"><code>Object.prototype.constructor</code></a></li><li><a href="/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object/proto"><code>Object.prototype.__proto__</code></a><abbr class="icon icon-deprecated" title="已弃用。请不要在新的网站中使用。"> <span class="visually-hidden">已弃用</span> </abbr></li></ol></details></li></ol></div></div><section class="place side"></section></nav></aside><div class="toc-container"><aside class="toc"><nav><div class="document-toc-container"><section class="document-toc"><header><h2 class="document-toc-heading">在本文中</h2></header><ul class="document-toc-list"><li class="document-toc-item "><a class="document-toc-link" href="#尝试一下">尝试一下</a></li><li class="document-toc-item "><a class="document-toc-link" href="#语法">语法</a></li><li class="document-toc-item "><a class="document-toc-link" href="#描述">描述</a></li><li class="document-toc-item "><a class="document-toc-link" href="#示例">示例</a></li><li class="document-toc-item "><a class="document-toc-link" href="#规范">规范</a></li><li class="document-toc-item "><a class="document-toc-link" href="#浏览器兼容性">浏览器兼容性</a></li><li class="document-toc-item "><a class="document-toc-link" href="#参见">参见</a></li></ul></section></div></nav></aside><section class="place side"></section></div></div><main id="content" class="main-content "><article class="main-page-content" lang="zh-CN"><header><h1>Function.prototype.bind()</h1><details class="baseline-indicator high"><summary><span class="indicator" role="img" aria-label="Baseline Check"></span><h2>Baseline <span class="not-bold">Widely available</span></h2><div class="browsers"><span class="engine" title="Supported in Chrome and Edge"><span class="browser chrome supported" role="img" aria-label="Chrome check"></span><span class="browser edge supported" role="img" aria-label="Edge check"></span></span><span class="engine" title="Supported in Firefox"><span class="browser firefox supported" role="img" aria-label="Firefox check"></span></span><span class="engine" title="Supported in Safari"><span class="browser safari supported" role="img" aria-label="Safari check"></span></span></div><span class="icon icon-chevron "></span></summary><div class="extra"><p>This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.</p><ul><li><a href="/zh-CN/docs/Glossary/Baseline/Compatibility" data-glean="baseline_link_learn_more" target="_blank" class="learn-more">Learn more</a></li><li><a href="#浏览器兼容性" data-glean="baseline_link_bcd_table">See full compatibility</a></li><li><a href="https://survey.alchemer.com/s3/7634825/MDN-baseline-feedback?page=%2Fzh-CN%2Fdocs%2FWeb%2FJavaScript%2FReference%2FGlobal_Objects%2FFunction%2Fbind&level=high" data-glean="baseline_link_feedback" class="feedback-link" target="_blank" rel="noreferrer">Report feedback</a></li></ul></div></details></header><div class="section-content"><p><a href="/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Function"><code>Function</code></a> 实例的 <strong><code>bind()</code></strong> 方法创建一个新函数，当调用该新函数时，它会调用原始函数并将其 <code>this</code> 关键字设置为给定的值，同时，还可以传入一系列指定的参数，这些参数会插入到调用新函数时传入的参数的前面。</p></div><section aria-labelledby="尝试一下"><h2 id="尝试一下"><a href="#尝试一下">尝试一下</a></h2><div class="section-content"><iframe class="interactive is-taller-height" height="200" src="https://interactive-examples.mdn.mozilla.net/pages/js/function-bind.html" title="MDN Web Docs Interactive Example" allow="clipboard-write" loading="lazy"></iframe></div></section><section aria-labelledby="语法"><h2 id="语法"><a href="#语法">语法</a></h2><div class="section-content"><div class="code-example"><div class="example-header"><span class="language-name">js</span></div><pre class="brush: js notranslate"><code>bind(thisArg) bind(thisArg, arg1) bind(thisArg, arg1, arg2) bind(thisArg, arg1, arg2, /* …, */ argN) </code></pre></div></div></section><section aria-labelledby="参数"><h3 id="参数"><a href="#参数">参数</a></h3><div class="section-content"><dl> <dt id="thisarg"><a href="#thisarg"><code>thisArg</code></a></dt> <dd> <p>在调用绑定函数时，作为 <code>this</code> 参数传入目标函数 <code>func</code> 的值。如果函数不在<a href="/zh-CN/docs/Web/JavaScript/Reference/Strict_mode">严格模式</a>下，<a href="/zh-CN/docs/Web/JavaScript/Reference/Operators/null"><code>null</code></a> 和 <a href="/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/undefined"><code>undefined</code></a> 会被替换为全局对象，并且原始值会被转换为对象。如果使用 <a href="/zh-CN/docs/Web/JavaScript/Reference/Operators/new"><code>new</code></a> 运算符构造绑定函数，则忽略该值。</p> </dd> <dt id="arg1_…_argn"><a href="#arg1_…_argn"><code>arg1, …, argN</code></a> <span class="badge inline optional">可选</span></dt> <dd> <p>在调用 <code>func</code> 时，插入到传入绑定函数的参数前的参数。</p> </dd> </dl></div></section><section aria-labelledby="返回值"><h3 id="返回值"><a href="#返回值">返回值</a></h3><div class="section-content"><p>使用指定的 <code>this</code> 值和初始参数（如果提供）创建的给定函数的副本。</p></div></section><section aria-labelledby="描述"><h2 id="描述"><a href="#描述">描述</a></h2><div class="section-content"><p><code>bind()</code> 函数创建一个新的<em>绑定函数（bound function）</em>。调用绑定函数通常会执行其所包装的函数，也称为<em>目标函数（target function）</em>。绑定函数将绑定时传入的参数（包括 <code>this</code> 的值和前几个参数）提前存储为其内部状态。而不是在实际调用时传入。通常情况下，你可以将 <code>const boundFn = fn.bind(thisArg, arg1, arg2)</code> 和 <code>const boundFn = (...restArgs) => fn.call(thisArg, arg1, arg2, ...restArgs)</code> 构建的绑定函数的调用效果视为等效（但就构建 <code>boundFn</code> 的过程而言，不是二者等效的）。</p> <p>绑定函数可以通过调用 <code>boundFn.bind(thisArg, /* more args */)</code> 进一步进行绑定，从而创建另一个绑定函数 <code>boundFn2</code>。新绑定的 <code>thisArg</code> 值会被忽略，因为 <code>boundFn2</code> 的目标函数是 <code>boundFn</code>，而 <code>boundFn</code> 已经有一个绑定的 <code>this</code> 值了。当调用 <code>boundFn2</code> 时，它会调用 <code>boundFn</code>，而 <code>boundFn</code> 又会调用 <code>fn</code>。<code>fn</code> 最终接收到的参数按顺序为：<code>boundFn</code> 绑定的参数、<code>boundFn2</code> 绑定的参数，以及 <code>boundFn2</code> 接收到的参数。</p> <div class="code-example"><div class="example-header"><span class="language-name">js</span></div><pre class="brush: js notranslate"><code>"use strict"; // 防止 `this` 被封装到到包装对象中 function log(...args) { console.log(this, ...args); } const boundLog = log.bind("this value", 1, 2); const boundLog2 = boundLog.bind("new this value", 3, 4); boundLog2(5, 6); // "this value", 1, 2, 3, 4, 5, 6 </code></pre></div> <p>如果目标函数是可构造的，绑定函数也可以使用 <code>new</code> 运算符进行构造。这样做的效果就好像目标函数本身被构造一样。前置的参数会像通常一样传递给目标函数，而提供的 <code>this</code> 值会被忽略（因为构造函数会准备自己的 <code>this</code>，如 <a href="/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Reflect/construct"><code>Reflect.construct</code></a> 的参数所示）。如果直接构造绑定函数，<a href="/zh-CN/docs/Web/JavaScript/Reference/Operators/new.target"><code>new.target</code></a> 将指向目标函数（也就是说，绑定函数对 <code>new.target</code> 是透明的）。</p> <div class="code-example"><div class="example-header"><span class="language-name">js</span></div><pre class="brush: js notranslate"><code>class Base { constructor(...args) { console.log(new.target === Base); console.log(args); } } const BoundBase = Base.bind(null, 1, 2); new BoundBase(3, 4); // true, [1, 2, 3, 4] </code></pre></div> <p>然而，由于绑定函数没有 <a href="/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Function/prototype"><code>prototype</code></a> 属性，它不能作为 <a href="/zh-CN/docs/Web/JavaScript/Reference/Classes/extends"><code>extends</code></a> 的基类。</p> <div class="code-example"><div class="example-header"><span class="language-name">js</span></div><pre class="brush: js example-bad notranslate"><code>class Derived extends class {}.bind(null) {} // TypeError: Class extends value does not have valid prototype property undefined </code></pre></div> <p>当将绑定函数用作 <a href="/zh-CN/docs/Web/JavaScript/Reference/Operators/instanceof"><code>instanceof</code></a> 运算符右操作数时，<code>instanceof</code> 会访问绑定函数内部存储的目标函数，并读取其 <code>prototype</code> 属性。</p> <div class="code-example"><div class="example-header"><span class="language-name">js</span></div><pre class="brush: js notranslate"><code>class Base {} const BoundBase = Base.bind(null, 1, 2); console.log(new Base() instanceof BoundBase); // true </code></pre></div> <p>绑定函数具有以下属性：</p> <dl> <dt id="length"><a href="/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Function/length"><code>length</code></a></dt> <dd> <p>目标函数的 <code>length</code> 减去被绑定的参数个数（不包括 <code>thisArg</code> 参数），最小值为 0。</p> </dd> <dt id="name"><a href="/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Function/name"><code>name</code></a></dt> <dd> <p>目标函数的 <code>name</code> 前加上 <code>"bound "</code> 前缀。</p> </dd> </dl> <p>绑定函数还会继承目标函数的<a href="/zh-CN/docs/Web/JavaScript/Inheritance_and_the_prototype_chain">原型链</a>。然而，它不会继承目标函数的其他自有属性（例如，如果目标函数是一个类，则不会继承其<a href="/zh-CN/docs/Web/JavaScript/Reference/Classes/static">静态属性</a>）。</p></div></section><section aria-labelledby="示例"><h2 id="示例"><a href="#示例">示例</a></h2><div class="section-content"></div></section><section aria-labelledby="创建绑定函数"><h3 id="创建绑定函数"><a href="#创建绑定函数">创建绑定函数</a></h3><div class="section-content"><p><code>bind()</code> 最简单的用法是创建一个函数，无论如何调用，它都会使用特定的 <code>this</code> 值进行调用。</p> <p>JavaScript 新手经常犯的一个错误是将一个方法从对象中提取出来，然后再调用，并期望方法中的 <code>this</code> 是原来的对象（比如在回调中传入这个方法）。</p> <p>然而，如果不做特殊处理的话，通常会丢失原始对象。使用这个函数加上原始的对象来创建一个绑定函数，巧妙地解决了这个问题：</p> <div class="code-example"><div class="example-header"><span class="language-name">js</span></div><pre class="brush: js notranslate"><code>// 顶级的“this”绑定到“globalThis”。 this.x = 9; const module = { x: 81, getX() { return this.x; }, }; // “getX”的“this”参数绑定到“module”。 console.log(module.getX()); // 81 const retrieveX = module.getX; // “retrieveX”的“this”参数在非严格模式下绑定到“globalThis”。 console.log(retrieveX()); // 9 // 创建一个新函数“boundGetX”，并将“this”参数绑定到“module”。 const boundGetX = retrieveX.bind(module); console.log(boundGetX()); // 81 </code></pre></div> <div class="notecard note"> <p><strong>备注：</strong>如果在<a href="/zh-CN/docs/Web/JavaScript/Reference/Strict_mode">严格模式</a>下运行这个示例，<code>retrieveX</code> 的 <code>this</code> 参数会绑定到 <code>undefined</code> 而不是 <code>globalThis</code>，这会导致 <code>retrieveX()</code> 的调用失败。</p> <p>如果在一个 ECMAScript 模块中运行这个示例，顶级的 <code>this</code> 会绑定到 <code>undefined</code> 而不是 <code>globalThis</code>，导致 <code>this.x = 9</code> 赋值失败。</p> <p>如果在 Node CommonJS 模块中运行这个示例，则顶级的 <code>this</code> 会绑定到 <code>module.exports</code> 而不是 <code>globalThis</code>。然而，在非严格模式下，<code>retrieveX</code> 的 <code>this</code> 仍然会绑定到 <code>globalThis</code>，而在严格模式下会绑定为 <code>undefined</code>。因此，在非严格模式下（默认情况下），<code>retrieveX()</code> 调用会返回 <code>undefined</code>, 因为 <code>this.x = 9</code> 会写入的是一个不同的对象（<code>module.exports</code>），而 <code>getX</code> 读取的是另一个对象（<code>globalThis</code>）。</p> </div> <p>实际上，一些内置的“方法”也是返回绑定函数的 getter 方法，其中一个显著的例子是 <a href="/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat/format#%E4%BD%BF%E7%94%A8_format_%E5%92%8C_map"><code>Intl.NumberFormat.prototype.format()</code></a>，当访问时，它返回一个绑定函数，你可以直接将其作为回调函数传递。</p></div></section><section aria-labelledby="偏函数"><h3 id="偏函数"><a href="#偏函数">偏函数</a></h3><div class="section-content"><p><code>bind()</code> 的另一个简单用法是创建一个具有预设初始参数的函数。</p> <p>这些参数（如果有的话）会跟随提供的 <code>this</code> 值，并在传递给目标函数的参数列表的开头插入，其后是在调用绑定函数时传递的参数。</p> <div class="code-example"><div class="example-header"><span class="language-name">js</span></div><pre class="brush: js notranslate"><code>function list(...args) { return args; } function addArguments(arg1, arg2) { return arg1 + arg2; } console.log(list(1, 2, 3)); // [1, 2, 3] console.log(addArguments(1, 2)); // 3 // 创建一个带有预设前导参数的函数 const leadingThirtySevenList = list.bind(null, 37); // 创建一个带有预设第一个参数的函数。 const addThirtySeven = addArguments.bind(null, 37); console.log(leadingThirtySevenList()); // [37] console.log(leadingThirtySevenList(1, 2, 3)); // [37, 1, 2, 3] console.log(addThirtySeven(5)); // 42 console.log(addThirtySeven(5, 10)); // 42 //（最后一个参数 10 被忽略） </code></pre></div></div></section><section aria-labelledby="配合_settimeout"><h3 id="配合_settimeout"><a href="#配合_settimeout">配合 setTimeout()</a></h3><div class="section-content"><p>在默认情况下，在 <a href="/zh-CN/docs/Web/API/Window/setTimeout" title="setTimeout()"><code>setTimeout()</code></a> 内部，<code>this</code> 关键字将被设置为 <a href="/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/globalThis"><code>globalThis</code></a>，在浏览器中它是 <a href="/zh-CN/docs/Web/API/Window"><code>window</code></a> 对象。当处理需要将 <code>this</code> 引用类实例的类方法时，你可以显式地将 <code>this</code> 绑定到回调函数，以便保持实例的引用。</p> <div class="code-example"><div class="example-header"><span class="language-name">js</span></div><pre class="brush: js notranslate"><code>class LateBloomer { constructor() { this.petalCount = Math.floor(Math.random() * 12) + 1; } bloom() { // 延迟 1 秒后宣布开花 setTimeout(this.declare.bind(this), 1000); } declare() { console.log(`I am a beautiful flower with ${this.petalCount} petals!`); } } const flower = new LateBloomer(); flower.bloom(); // 1 秒后调用“flower.declare()” </code></pre></div> <p>你还可以使用<a href="/zh-CN/docs/Web/JavaScript/Reference/Functions/Arrow_functions">箭头函数</a>来实现此目的。</p> <div class="code-example"><div class="example-header"><span class="language-name">js</span></div><pre class="brush: js notranslate"><code>class LateBloomer { bloom() { // 延迟 1 秒后宣布开花 setTimeout(() => this.declare(), 1000); } } </code></pre></div></div></section><section aria-labelledby="作为构造函数使用的绑定函数"><h3 id="作为构造函数使用的绑定函数"><a href="#作为构造函数使用的绑定函数">作为构造函数使用的绑定函数</a></h3><div class="section-content"><p>绑定函数自动适用于与 <a href="/zh-CN/docs/Web/JavaScript/Reference/Operators/new"><code>new</code></a> 运算符一起使用，以用于构造目标函数创建的新实例。当使用绑定函数是用来构造一个值时，提供的 <code>this</code> 会被忽略。然而，提供的参数仍会被插入到构造函数调用时的参数列表之前。</p> <div class="code-example"><div class="example-header"><span class="language-name">js</span></div><pre class="brush: js notranslate"><code>function Point(x, y) { this.x = x; this.y = y; } Point.prototype.toString = function () { return `${this.x},${this.y}`; }; const p = new Point(1, 2); p.toString(); // '1,2' // thisArg 的值并不重要，因为它被忽略了 const YAxisPoint = Point.bind(null, 0 /*x*/); const axisPoint = new YAxisPoint(5); axisPoint.toString(); // '0,5' axisPoint instanceof Point; // true axisPoint instanceof YAxisPoint; // true new YAxisPoint(17, 42) instanceof Point; // true </code></pre></div> <p>请注意，你无需采取任何特殊措施来创建一个绑定函数，以便与 <a href="/zh-CN/docs/Web/JavaScript/Reference/Operators/new"><code>new</code></a> 运算符一起使用。<a href="/zh-CN/docs/Web/JavaScript/Reference/Operators/new.target"><code>new.target</code></a>、<a href="/zh-CN/docs/Web/JavaScript/Reference/Operators/instanceof"><code>instanceof</code></a>、<a href="/zh-CN/docs/Web/JavaScript/Reference/Operators/this"><code>this</code></a> 等都如预期工作，就好像构造函数从未被绑定一样。唯一的区别是它不能再用于 <a href="/zh-CN/docs/Web/JavaScript/Reference/Classes/extends"><code>extends</code></a>。</p> <p>相应地，你无需采取任何特殊措施来创建一个绑定函数，使其只能以普通方式调用，即使你更希望要求只能使用 <a href="/zh-CN/docs/Web/JavaScript/Reference/Operators/new"><code>new</code></a> 来调用绑定函数。如果你在没有使用 <code>new</code> 的情况下调用它，绑定的 <code>this</code> 将不再被忽略。</p> <div class="code-example"><div class="example-header"><span class="language-name">js</span></div><pre class="brush: js notranslate"><code>const emptyObj = {}; const YAxisPoint = Point.bind(emptyObj, 0 /*x*/); // 仍然可以作为普通函数调用 //（尽管通常这是不可取的） YAxisPoint(13); // 现在可以从外部观察对 `this` 的修改 console.log(emptyObj); // { x: 0, y: 13 } </code></pre></div> <p>如果你希望限制绑定函数只能使用 <a href="/zh-CN/docs/Web/JavaScript/Reference/Operators/new"><code>new</code></a> 调用，或者只能在没有使用 <code>new</code> 的情况下调用，目标函数必须强制执行该限制，例如通过检查 <code>new.target !== undefined</code> 或使用 <a href="/zh-CN/docs/Web/JavaScript/Reference/Classes">class</a>。</p></div></section><section aria-labelledby="绑定类"><h3 id="绑定类"><a href="#绑定类">绑定类</a></h3><div class="section-content"><p>在类上使用 <code>bind()</code> 会保留大部分类的语义，只是当前类的所有静态自有属性会丢失。然而，由于原型链被保留，你仍然可以访问从父类继承的静态属性。这意味着绑定后的类实例仍然可以享受到继承自父类的静态属性的功能。</p> <div class="code-example"><div class="example-header"><span class="language-name">js</span></div><pre class="brush: js notranslate"><code>class Base { static baseProp = "基类属性"; } class Derived extends Base { static derivedProp = "派生类属性"; } const BoundDerived = Derived.bind(null); console.log(BoundDerived.baseProp); // "基类属性" console.log(BoundDerived.derivedProp); // undefined console.log(new BoundDerived() instanceof Derived); // true </code></pre></div></div></section><section aria-labelledby="将方法转换为实用函数"><h3 id="将方法转换为实用函数"><a href="#将方法转换为实用函数">将方法转换为实用函数</a></h3><div class="section-content"><p><code>bind()</code> 在某些情况下也非常有用，比如当你想将一个需要特定 <code>this</code> 值的方法转换为一个普通的实用函数，该函数将之前的 <code>this</code> 参数作为普通参数传入。这类似于通用实用函数的工作方式：而不是调用 <code>array.map(callback)</code>，你可以使用 <code>map(array, callback)</code>，这样可以避免修改 <code>Array.prototype</code>，并且可以在不是数组的类数组对象（比如 <a href="/zh-CN/docs/Web/JavaScript/Reference/Functions/arguments"><code>arguments</code></a>）上使用 <code>map</code>。</p> <p>以 <a href="/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/slice"><code>Array.prototype.slice()</code></a> 为例，你可以使用它将类数组对象转换为真正的数组。你可以创建一个类似下面的快捷方式：</p> <div class="code-example"><div class="example-header"><span class="language-name">js</span></div><pre class="brush: js notranslate"><code>const slice = Array.prototype.slice; // ... slice.call(arguments); </code></pre></div> <p>请注意，你不能保存 <code>slice.call</code> 并将其作为普通函数调用，因为 <code>call()</code> 方法还会读取其应该调用的函数作为其 <code>this</code> 值。在这种情况下，你可以使用 <code>bind()</code> 来绑定 <code>call()</code> 的 <code>this</code> 值。在下面的代码片段中，<code>slice()</code> 是一个绑定了 <code>this</code> 值为 <a href="/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/slice"><code>Array.prototype.slice()</code></a> 的 <a href="/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Function/call"><code>Function.prototype.call()</code></a> 的版本。这意味着可以消除额外的 <code>call()</code> 调用：</p> <div class="code-example"><div class="example-header"><span class="language-name">js</span></div><pre class="brush: js notranslate"><code>// 与上一个示例中的“slice”相同 const unboundSlice = Array.prototype.slice; const slice = Function.prototype.call.bind(unboundSlice); // ... slice(arguments); </code></pre></div></div></section><h2 id="规范"><a href="#规范">规范</a></h2><table class="standard-table"><thead><tr><th scope="col">Specification</th></tr></thead><tbody><tr><td><a href="https://tc39.es/ecma262/multipage/fundamental-objects.html#sec-function.prototype.bind">ECMAScript Language Specification <br/><small># sec-function.prototype.bind</small></a></td></tr></tbody></table><h2 id="浏览器兼容性"><a href="#浏览器兼容性">浏览器兼容性</a></h2><p>BCD tables only load in the browser<noscript> with JavaScript enabled. Enable JavaScript to view data.</noscript></p><section aria-labelledby="参见"><h2 id="参见"><a href="#参见">参见</a></h2><div class="section-content"><ul> <li><a href="https://github.com/zloirock/core-js#ecmascript-function" class="external" target="_blank"><code>core-js</code> 中 <code>Function.prototype.bind</code> 的 polyfill</a></li> <li><a href="/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Function/apply"><code>Function.prototype.apply()</code></a></li> <li><a href="/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Function/call"><code>Function.prototype.call()</code></a></li> <li><a href="/zh-CN/docs/Web/JavaScript/Reference/Functions">函数</a></li> </ul></div></section></article><aside class="article-footer"><div class="article-footer-inner"><div class="svg-container"><svg xmlns="http://www.w3.org/2000/svg" width="162" height="162" viewBox="0 0 162 162" fill="none" role="none"><mask id="b" fill="#fff"><path d="M97.203 47.04c8.113-7.886 18.004-13.871 28.906-17.492a78 78 0 0 1 33.969-3.39c11.443 1.39 22.401 5.295 32.024 11.411s17.656 14.28 23.476 23.86c5.819 9.579 9.269 20.318 10.083 31.385a69.85 69.85 0 0 1-5.387 32.44c-4.358 10.272-11.115 19.443-19.747 26.801-8.632 7.359-18.908 12.709-30.034 15.637l-6.17-21.698c7.666-2.017 14.746-5.703 20.694-10.773 5.948-5.071 10.603-11.389 13.606-18.467a48.14 48.14 0 0 0 3.712-22.352c-.561-7.625-2.938-15.025-6.948-21.625s-9.544-12.226-16.175-16.44-14.181-6.904-22.065-7.863a53.75 53.75 0 0 0-23.405 2.336c-7.513 2.495-14.327 6.62-19.918 12.053z"></path></mask><path stroke="url(#a)" stroke-dasharray="6, 6" stroke-width="2" d="M97.203 47.04c8.113-7.886 18.004-13.871 28.906-17.492a78 78 0 0 1 33.969-3.39c11.443 1.39 22.401 5.295 32.024 11.411s17.656 14.28 23.476 23.86c5.819 9.579 9.269 20.318 10.083 31.385a69.85 69.85 0 0 1-5.387 32.44c-4.358 10.272-11.115 19.443-19.747 26.801-8.632 7.359-18.908 12.709-30.034 15.637l-6.17-21.698c7.666-2.017 14.746-5.703 20.694-10.773 5.948-5.071 10.603-11.389 13.606-18.467a48.14 48.14 0 0 0 3.712-22.352c-.561-7.625-2.938-15.025-6.948-21.625s-9.544-12.226-16.175-16.44-14.181-6.904-22.065-7.863a53.75 53.75 0 0 0-23.405 2.336c-7.513 2.495-14.327 6.62-19.918 12.053z" mask="url(#b)" style="stroke:url(#a)" transform="translate(-63.992 -25.587)"></path><ellipse cx="8.066" cy="111.597" fill="var(--background-tertiary)" rx="53.677" ry="53.699" transform="matrix(.71707 -.697 .7243 .6895 0 0)"></ellipse><g clip-path="url(#c)" transform="translate(-63.992 -25.587)"><path fill="#9abff5" d="m144.256 137.379 32.906 12.434a4.41 4.41 0 0 1 2.559 5.667l-9.326 24.679a4.41 4.41 0 0 1-5.667 2.559l-8.226-3.108-2.332 6.17c-.466 1.233-.375 1.883-1.609 1.417l-2.253-.527c-.411-.155-.95-.594-1.206-1.161l-4.734-10.484-12.545-4.741a4.41 4.41 0 0 1-2.559-5.667l9.325-24.679a4.41 4.41 0 0 1 5.667-2.559m9.961 29.617 8.227 3.108 3.264-8.638-.498-6.768-4.113-1.555.548 7.258-4.319-1.632zm-12.339-4.663 8.226 3.108 3.264-8.637-.498-6.769-4.113-1.554.548 7.257-4.319-1.632z"></path></g><g clip-path="url(#d)" transform="translate(-63.992 -25.587)"><path fill="#81b0f3" d="M135.35 60.136 86.67 41.654c-3.346-1.27-7.124.428-8.394 3.775L64.414 81.938c-1.27 3.347.428 7.125 3.774 8.395l12.17 4.62-3.465 9.128c-.693 1.826-1.432 2.457.394 3.15l3.014 1.625c.609.231 1.637.274 2.477-.104l15.53-6.983 18.56 7.047c3.346 1.27 7.124-.428 8.395-3.775l13.862-36.51c1.27-3.346-.428-7.124-3.775-8.395M95.261 83.207l-12.17-4.62 4.852-12.779 7.19-7.017 6.085 2.31-7.725 7.51 6.389 2.426zm18.255 6.93-12.17-4.62 4.852-12.778 7.189-7.017 6.085 2.31-7.725 7.51 6.39 2.426z"></path></g><defs><clipPath id="c"><path fill="#fff" d="m198.638 146.586-65.056-24.583-24.583 65.057 65.056 24.582z"></path></clipPath><clipPath id="d"><path fill="#fff" d="m66.438 14.055 96.242 36.54-36.54 96.243-96.243-36.54z"></path></clipPath><linearGradient id="a" x1="97.203" x2="199.995" y1="47.04" y2="152.793" gradientUnits="userSpaceOnUse"><stop stop-color="#086DFC"></stop><stop offset="0.246" stop-color="#2C81FA"></stop><stop offset="0.516" stop-color="#5497F8"></stop><stop offset="0.821" stop-color="#80B0F6"></stop><stop offset="1" stop-color="#9ABFF5"></stop></linearGradient></defs></svg></div><h2>Help improve MDN</h2><fieldset class="feedback"><label>Was this page helpful to you?</label><div class="button-container"><button type="button" class="button primary has-icon yes"><span class="button-wrap"><span class="icon icon-thumbs-up "></span>Yes</span></button><button type="button" class="button primary has-icon no"><span class="button-wrap"><span class="icon icon-thumbs-down "></span>No</span></button></div></fieldset><a class="contribute" href="https://github.com/mdn/translated-content/blob/main/CONTRIBUTING.md" title="This will take you to our contribution guidelines on GitHub." target="_blank" rel="noopener noreferrer">Learn how to contribute</a>.<p class="last-modified-date">This page was last modified on <time dateTime="2024-10-08T11:46:54.000Z">2024年10月8日</time> by <a href="/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Function/bind/contributors.txt" rel="nofollow">MDN contributors</a>.</p><div id="on-github" class="on-github"><a href="https://github.com/mdn/translated-content/blob/main/files/zh-cn/web/javascript/reference/global_objects/function/bind/index.md?plain=1" title="Folder: zh-cn/web/javascript/reference/global_objects/function/bind (Opens in a new tab)" target="_blank" rel="noopener noreferrer">View this page on GitHub</a> • <a href="https://github.com/mdn/translated-content/issues/new?template=page-report-zh-cn.yml&mdn-url=https%3A%2F%2Fdeveloper.mozilla.org%2Fzh-CN%2Fdocs%2FWeb%2FJavaScript%2FReference%2FGlobal_Objects%2FFunction%2Fbind&metadata=%3C%21--+Do+not+make+changes+below+this+line+--%3E%0A%3Cdetails%3E%0A%3Csummary%3EPage+report+details%3C%2Fsummary%3E%0A%0A*+Folder%3A+%60zh-cn%2Fweb%2Fjavascript%2Freference%2Fglobal_objects%2Ffunction%2Fbind%60%0A*+MDN+URL%3A+https%3A%2F%2Fdeveloper.mozilla.org%2Fzh-CN%2Fdocs%2FWeb%2FJavaScript%2FReference%2FGlobal_Objects%2FFunction%2Fbind%0A*+GitHub+URL%3A+https%3A%2F%2Fgithub.com%2Fmdn%2Ftranslated-content%2Fblob%2Fmain%2Ffiles%2Fzh-cn%2Fweb%2Fjavascript%2Freference%2Fglobal_objects%2Ffunction%2Fbind%2Findex.md%0A*+Last+commit%3A+https%3A%2F%2Fgithub.com%2Fmdn%2Ftranslated-content%2Fcommit%2F9ce80bfea141b0a765556e9a825599b0505db2ee%0A*+Document+last+modified%3A+2024-10-08T11%3A46%3A54.000Z%0A%0A%3C%2Fdetails%3E" title="This will take you to GitHub to file a new issue." target="_blank" rel="noopener noreferrer">Report a problem with this content</a></div></div></aside></main></div></div><footer id="nav-footer" class="page-footer"><div class="page-footer-grid"><div class="page-footer-logo-col"><a href="/" class="mdn-footer-logo" aria-label="MDN homepage"><svg width="48" height="17" viewBox="0 0 48 17" fill="none" xmlns="http://www.w3.org/2000/svg"><title id="mdn-footer-logo-svg">MDN logo</title><path d="M20.04 16.512H15.504V10.416C15.504 9.488 15.344 8.824 15.024 8.424C14.72 8.024 14.264 7.824 13.656 7.824C12.92 7.824 12.384 8.064 12.048 8.544C11.728 9.024 11.568 9.64 11.568 10.392V14.184H13.008V16.512H8.472V10.416C8.472 9.488 8.312 8.824 7.992 8.424C7.688 8.024 7.232 7.824 6.624 7.824C5.872 7.824 5.336 8.064 5.016 8.544C4.696 9.024 4.536 9.64 4.536 10.392V14.184H6.6V16.512H0V14.184H1.44V8.04H0.024V5.688H4.536V7.32C5.224 6.088 6.32 5.472 7.824 5.472C8.608 5.472 9.328 5.664 9.984 6.048C10.64 6.432 11.096 7.016 11.352 7.8C11.992 6.248 13.168 5.472 14.88 5.472C15.856 5.472 16.72 5.776 17.472 6.384C18.224 6.992 18.6 7.936 18.6 9.216V14.184H20.04V16.512Z" fill="currentColor"></path><path d="M33.6714 16.512H29.1354V14.496C28.8314 15.12 28.3834 15.656 27.7914 16.104C27.1994 16.536 26.4154 16.752 25.4394 16.752C24.0154 16.752 22.8954 16.264 22.0794 15.288C21.2634 14.312 20.8554 12.984 20.8554 11.304C20.8554 9.688 21.2554 8.312 22.0554 7.176C22.8554 6.04 24.0634 5.472 25.6794 5.472C26.5594 5.472 27.2794 5.648 27.8394 6C28.3994 6.352 28.8314 6.8 29.1354 7.344V2.352H26.9754V0H32.2314V14.184H33.6714V16.512ZM29.1354 11.04V10.776C29.1354 9.88 28.8954 9.184 28.4154 8.688C27.9514 8.176 27.3674 7.92 26.6634 7.92C25.9754 7.92 25.3674 8.176 24.8394 8.688C24.3274 9.2 24.0714 10.008 24.0714 11.112C24.0714 12.152 24.3114 12.944 24.7914 13.488C25.2714 14.032 25.8394 14.304 26.4954 14.304C27.3114 14.304 27.9514 13.96 28.4154 13.272C28.8954 12.584 29.1354 11.84 29.1354 11.04Z" fill="currentColor"></path><path d="M47.9589 16.512H41.9829V14.184H43.4229V10.416C43.4229 9.488 43.2629 8.824 42.9429 8.424C42.6389 8.024 42.1829 7.824 41.5749 7.824C40.8389 7.824 40.2709 8.056 39.8709 8.52C39.4709 8.968 39.2629 9.56 39.2469 10.296V14.184H40.6869V16.512H34.7109V14.184H36.1509V8.04H34.5909V5.688H39.2469V7.344C39.9669 6.096 41.1269 5.472 42.7269 5.472C43.7509 5.472 44.6389 5.776 45.3909 6.384C46.1429 6.992 46.5189 7.936 46.5189 9.216V14.184H47.9589V16.512Z" fill="currentColor"></path></svg></a><p>Your blueprint for a better internet.</p><ul class="social-icons"><li><a href="https://mastodon.social/@mdn" target="_blank" rel="me noopener noreferrer"><span class="icon icon-mastodon"></span><span class="visually-hidden">MDN on Mastodon</span></a></li><li><a href="https://twitter.com/mozdevnet" target="_blank" rel="noopener noreferrer"><span class="icon icon-twitter-x"></span><span class="visually-hidden">MDN on X (formerly Twitter)</span></a></li><li><a href="https://github.com/mdn/" target="_blank" rel="noopener noreferrer"><span class="icon icon-github-mark-small"></span><span class="visually-hidden">MDN on GitHub</span></a></li><li><a href="/en-US/blog/rss.xml" target="_blank"><span class="icon icon-feed"></span><span class="visually-hidden">MDN Blog RSS Feed</span></a></li></ul></div><div class="page-footer-nav-col-1"><h2 class="footer-nav-heading">MDN</h2><ul class="footer-nav-list"><li class="footer-nav-item"><a href="/en-US/about">About</a></li><li class="footer-nav-item"><a href="/en-US/blog/">Blog</a></li><li class="footer-nav-item"><a href="https://www.mozilla.org/en-US/careers/listings/?team=ProdOps" target="_blank" rel="noopener noreferrer">Careers</a></li><li class="footer-nav-item"><a href="/en-US/advertising">Advertise with us</a></li></ul></div><div class="page-footer-nav-col-2"><h2 class="footer-nav-heading">Support</h2><ul class="footer-nav-list"><li class="footer-nav-item"><a class="footer-nav-link" href="https://support.mozilla.org/products/mdn-plus">Product help</a></li><li class="footer-nav-item"><a class="footer-nav-link" href="/zh-CN/docs/MDN/Community/Issues">Report an issue</a></li></ul></div><div class="page-footer-nav-col-3"><h2 class="footer-nav-heading">Our communities</h2><ul class="footer-nav-list"><li class="footer-nav-item"><a class="footer-nav-link" href="/en-US/community">MDN Community</a></li><li class="footer-nav-item"><a class="footer-nav-link" href="https://discourse.mozilla.org/c/mdn/236" target="_blank" rel="noopener noreferrer">MDN Forum</a></li><li class="footer-nav-item"><a class="footer-nav-link" href="/discord" target="_blank" rel="noopener noreferrer">MDN Chat</a></li></ul></div><div class="page-footer-nav-col-4"><h2 class="footer-nav-heading">Developers</h2><ul class="footer-nav-list"><li class="footer-nav-item"><a class="footer-nav-link" href="/zh-CN/docs/Web">Web Technologies</a></li><li class="footer-nav-item"><a class="footer-nav-link" href="/zh-CN/docs/Learn">Learn Web Development</a></li><li class="footer-nav-item"><a class="footer-nav-link" href="/zh-CN/plus">MDN Plus</a></li><li class="footer-nav-item"><a href="https://hacks.mozilla.org/" target="_blank" rel="noopener noreferrer">Hacks Blog</a></li></ul></div><div class="page-footer-moz"><a href="https://www.mozilla.org/" class="footer-moz-logo-link" target="_blank" rel="noopener noreferrer"><svg width="112" height="32" fill="none" xmlns="http://www.w3.org/2000/svg"><title id="mozilla-footer-logo-svg">Mozilla logo</title><path d="M41.753 14.218c-2.048 0-3.324 1.522-3.324 4.157 0 2.423 1.119 4.286 3.29 4.286 2.082 0 3.447-1.678 3.447-4.347 0-2.826-1.522-4.096-3.413-4.096Zm54.89 7.044c0 .901.437 1.618 1.645 1.618 1.427 0 2.949-1.024 3.044-3.352-.649-.095-1.365-.185-2.02-.185-1.426-.005-2.668.397-2.668 1.92Z" fill="currentColor"></path><path d="M0 0v32h111.908V0H0Zm32.56 25.426h-5.87v-7.884c0-2.423-.806-3.352-2.39-3.352-1.924 0-2.702 1.365-2.702 3.324v4.868h1.864v3.044h-5.864v-7.884c0-2.423-.806-3.352-2.39-3.352-1.924 0-2.702 1.365-2.702 3.324v4.868h2.669v3.044H6.642v-3.044h1.863v-7.918H6.642V11.42h5.864v2.11c.839-1.489 2.3-2.39 4.252-2.39 2.02 0 3.878.963 4.566 3.01.778-1.862 2.361-3.01 4.566-3.01 2.512 0 4.812 1.522 4.812 4.84v6.402h1.863v3.044h-.005Zm9.036.307c-4.314 0-7.296-2.635-7.296-7.106 0-4.096 2.484-7.481 7.514-7.481s7.481 3.38 7.481 7.29c0 4.472-3.228 7.297-7.699 7.297Zm22.578-.307H51.942l-.403-2.11 7.7-8.846h-4.376l-.621 2.17-2.888-.313.498-4.907h12.294l.313 2.11-7.767 8.852h4.533l.654-2.172 3.167.308-.872 4.908Zm7.99 0h-4.191v-5.03h4.19v5.03Zm0-8.976h-4.191v-5.03h4.19v5.03Zm2.618 8.976 6.054-21.358h3.945l-6.054 21.358h-3.945Zm8.136 0 6.048-21.358h3.945l-6.054 21.358h-3.939Zm21.486.307c-1.863 0-2.887-1.085-3.072-2.792-.805 1.427-2.232 2.792-4.498 2.792-2.02 0-4.314-1.085-4.314-4.006 0-3.447 3.323-4.253 6.518-4.253.778 0 1.584.034 2.3.124v-.465c0-1.427-.034-3.133-2.3-3.133-.84 0-1.488.061-2.143.402l-.453 1.578-3.195-.34.549-3.224c2.45-.996 3.692-1.27 5.992-1.27 3.01 0 5.556 1.55 5.556 4.75v6.083c0 .805.314 1.085.963 1.085.184 0 .375-.034.587-.095l.034 2.11a5.432 5.432 0 0 1-2.524.654Z" fill="currentColor"></path></svg></a><ul class="footer-moz-list"><li class="footer-moz-item"><a href="https://www.mozilla.org/privacy/websites/" class="footer-moz-link" target="_blank" rel="noopener noreferrer">Website Privacy Notice</a></li><li class="footer-moz-item"><a href="https://www.mozilla.org/privacy/websites/#cookies" class="footer-moz-link" target="_blank" rel="noopener noreferrer">Cookies</a></li><li class="footer-moz-item"><a href="https://www.mozilla.org/about/legal/terms/mozilla" class="footer-moz-link" target="_blank" rel="noopener noreferrer">Legal</a></li><li class="footer-moz-item"><a href="https://www.mozilla.org/about/governance/policies/participation/" class="footer-moz-link" target="_blank" rel="noopener noreferrer">Community Participation Guidelines</a></li></ul></div><div class="page-footer-legal"><p id="license" class="page-footer-legal-text">Visit <a href="https://www.mozilla.org" target="_blank" rel="noopener noreferrer">Mozilla Corporation’s</a> not-for-profit parent, the <a target="_blank" rel="noopener noreferrer" href="https://foundation.mozilla.org/">Mozilla Foundation</a>.<br/>Portions of this content are ©1998–2024 by individual mozilla.org contributors. Content available under <a href="/zh-CN/docs/MDN/Writing_guidelines/Attrib_copyright_license">a Creative Commons license</a>.</p></div></div></footer></div><script type="application/json" id="hydration">{"url":"/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Function/bind","doc":{"isMarkdown":true,"isTranslated":true,"isActive":true,"flaws":{},"title":"Function.prototype.bind()","mdn_url":"/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Function/bind","locale":"zh-CN","native":"中文 (简体)","browserCompat":["javascript.builtins.Function.bind"],"baseline":{"baseline":"high","baseline_high_date":"2018-01-29","baseline_low_date":"2015-07-29","support":{"chrome":"1","chrome_android":"18","edge":"12","firefox":"1","firefox_android":"4","safari":"1","safari_ios":"1"}},"sidebarHTML":"<ol><li class=\"section\"><a href=\"/zh-CN/docs/Web/JavaScript/Reference/Global_Objects\">标准内置对象</a></li><li class=\"section\"><a href=\"/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Function\"><code>Function</code></a></li><li><details open=\"\"><summary>构造函数</summary><ol><li><a href=\"/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Function/Function\"><code>Function() 构造函数</code></a></li></ol></details></li><li><details open=\"\"><summary>实例方法</summary><ol><li><a href=\"/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Function/apply\"><code>Function.prototype.apply()</code></a></li><li><em><a href=\"/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Function/bind\" aria-current=\"page\"><code>Function.prototype.bind()</code></a></em></li><li><a href=\"/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Function/call\"><code>Function.prototype.call()</code></a></li><li><a href=\"/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Function/Symbol.hasInstance\"><code>Function.prototype[Symbol.hasInstance]()</code></a></li><li><a href=\"/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Function/toString\"><code>Function.prototype.toString()</code></a></li></ol></details></li><li><details open=\"\"><summary>实例属性</summary><ol><li><a href=\"/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Function/arguments\"><code>Function.prototype.arguments</code></a><abbr class=\"icon icon-nonstandard\" title=\"非标准。请在使用前检查跨浏览器支持。\">\n <span class=\"visually-hidden\">非标准</span>\n</abbr><abbr class=\"icon icon-deprecated\" title=\"已弃用。请不要在新的网站中使用。\">\n <span class=\"visually-hidden\">已弃用</span>\n</abbr></li><li><a href=\"/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Function/caller\"><code>Function.prototype.caller</code></a><abbr class=\"icon icon-nonstandard\" title=\"非标准。请在使用前检查跨浏览器支持。\">\n <span class=\"visually-hidden\">非标准</span>\n</abbr><abbr class=\"icon icon-deprecated\" title=\"已弃用。请不要在新的网站中使用。\">\n <span class=\"visually-hidden\">已弃用</span>\n</abbr></li><li><a href=\"/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Function/displayName\"><code>Function.displayName</code></a><abbr class=\"icon icon-nonstandard\" title=\"非标准。请在使用前检查跨浏览器支持。\">\n <span class=\"visually-hidden\">非标准</span>\n</abbr></li><li><a href=\"/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Function/length\"><code>Function：length</code></a></li><li><a href=\"/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Function/name\"><code>Function.name</code></a></li><li><a href=\"/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Function/prototype\"><code>Function.prototype.prototype</code></a></li></ol></details></li><li class=\"section no-link\">继承</li><li class=\"section\"><a href=\"/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object\"><code>Object/Function</code></a></li><li><details open=\"\"><summary>静态方法</summary><ol><li><a href=\"/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Function/apply\"><code>Function.prototype.apply()</code></a></li><li><em><a href=\"/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Function/bind\" aria-current=\"page\"><code>Function.prototype.bind()</code></a></em></li><li><a href=\"/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Function/call\"><code>Function.prototype.call()</code></a></li><li><a href=\"/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Function/Symbol.hasInstance\"><code>Function.prototype[Symbol.hasInstance]()</code></a></li><li><a href=\"/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Function/toString\"><code>Function.prototype.toString()</code></a></li></ol></details></li><li><details><summary>静态属性</summary><ol><li><a href=\"/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Function/arguments\"><code>Function.prototype.arguments</code></a><abbr class=\"icon icon-nonstandard\" title=\"非标准。请在使用前检查跨浏览器支持。\">\n <span class=\"visually-hidden\">非标准</span>\n</abbr><abbr class=\"icon icon-deprecated\" title=\"已弃用。请不要在新的网站中使用。\">\n <span class=\"visually-hidden\">已弃用</span>\n</abbr></li><li><a href=\"/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Function/caller\"><code>Function.prototype.caller</code></a><abbr class=\"icon icon-nonstandard\" title=\"非标准。请在使用前检查跨浏览器支持。\">\n <span class=\"visually-hidden\">非标准</span>\n</abbr><abbr class=\"icon icon-deprecated\" title=\"已弃用。请不要在新的网站中使用。\">\n <span class=\"visually-hidden\">已弃用</span>\n</abbr></li><li><a href=\"/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Function/displayName\"><code>Function.displayName</code></a><abbr class=\"icon icon-nonstandard\" title=\"非标准。请在使用前检查跨浏览器支持。\">\n <span class=\"visually-hidden\">非标准</span>\n</abbr></li><li><a href=\"/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Function/length\"><code>Function：length</code></a></li><li><a href=\"/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Function/name\"><code>Function.name</code></a></li><li><a href=\"/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Function/prototype\"><code>Function.prototype.prototype</code></a></li></ol></details></li><li><details><summary>实例方法</summary><ol><li><a href=\"/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object/__defineGetter__\"><code>Object.prototype.__defineGetter__()</code></a><abbr class=\"icon icon-deprecated\" title=\"已弃用。请不要在新的网站中使用。\">\n <span class=\"visually-hidden\">已弃用</span>\n</abbr></li><li><a href=\"/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object/__defineSetter__\"><code>Object.prototype.__defineSetter__()</code></a><abbr class=\"icon icon-deprecated\" title=\"已弃用。请不要在新的网站中使用。\">\n <span class=\"visually-hidden\">已弃用</span>\n</abbr></li><li><a href=\"/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object/__lookupGetter__\"><code>Object.prototype.__lookupGetter__()</code></a><abbr class=\"icon icon-deprecated\" title=\"已弃用。请不要在新的网站中使用。\">\n <span class=\"visually-hidden\">已弃用</span>\n</abbr></li><li><a href=\"/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object/__lookupSetter__\"><code>Object.prototype.__lookupSetter__()</code></a><abbr class=\"icon icon-deprecated\" title=\"已弃用。请不要在新的网站中使用。\">\n <span class=\"visually-hidden\">已弃用</span>\n</abbr></li><li><a href=\"/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object/hasOwnProperty\"><code>Object.prototype.hasOwnProperty()</code></a></li><li><a href=\"/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object/isPrototypeOf\"><code>Object.prototype.isPrototypeOf()</code></a></li><li><a href=\"/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object/propertyIsEnumerable\"><code>Object.prototype.propertyIsEnumerable()</code></a></li><li><a href=\"/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object/toLocaleString\"><code>Object.prototype.toLocaleString()</code></a></li><li><a href=\"/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object/toString\"><code>Object.prototype.toString()</code></a></li><li><a href=\"/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object/valueOf\"><code>Object.prototype.valueOf()</code></a></li></ol></details></li><li><details><summary>实例属性</summary><ol><li><a href=\"/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object/constructor\"><code>Object.prototype.constructor</code></a></li><li><a href=\"/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object/proto\"><code>Object.prototype.__proto__</code></a><abbr class=\"icon icon-deprecated\" title=\"已弃用。请不要在新的网站中使用。\">\n <span class=\"visually-hidden\">已弃用</span>\n</abbr></li></ol></details></li></ol>","sidebarMacro":"JSRef","body":[{"type":"prose","value":{"id":null,"title":null,"isH3":false,"content":"<p><a href=\"/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Function\"><code>Function</code></a> 实例的 <strong><code>bind()</code></strong> 方法创建一个新函数，当调用该新函数时，它会调用原始函数并将其 <code>this</code> 关键字设置为给定的值，同时，还可以传入一系列指定的参数，这些参数会插入到调用新函数时传入的参数的前面。</p>"}},{"type":"prose","value":{"id":"尝试一下","title":"尝试一下","isH3":false,"content":"<iframe class=\"interactive is-taller-height\" height=\"200\" src=\"https://interactive-examples.mdn.mozilla.net/pages/js/function-bind.html\" title=\"MDN Web Docs Interactive Example\" allow=\"clipboard-write\" loading=\"lazy\"></iframe>"}},{"type":"prose","value":{"id":"语法","title":"语法","isH3":false,"content":"<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">js</span></div><pre class=\"brush: js notranslate\"><code>bind(thisArg)\nbind(thisArg, arg1)\nbind(thisArg, arg1, arg2)\nbind(thisArg, arg1, arg2, /* …, */ argN)\n</code></pre></div>"}},{"type":"prose","value":{"id":"参数","title":"参数","isH3":true,"content":"<dl>\n <dt id=\"thisarg\"><a href=\"#thisarg\"><code>thisArg</code></a></dt>\n <dd>\n <p>在调用绑定函数时，作为 <code>this</code> 参数传入目标函数 <code>func</code> 的值。如果函数不在<a href=\"/zh-CN/docs/Web/JavaScript/Reference/Strict_mode\">严格模式</a>下，<a href=\"/zh-CN/docs/Web/JavaScript/Reference/Operators/null\"><code>null</code></a> 和 <a href=\"/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/undefined\"><code>undefined</code></a> 会被替换为全局对象，并且原始值会被转换为对象。如果使用 <a href=\"/zh-CN/docs/Web/JavaScript/Reference/Operators/new\"><code>new</code></a> 运算符构造绑定函数，则忽略该值。</p>\n </dd>\n <dt id=\"arg1_…_argn\"><a href=\"#arg1_…_argn\"><code>arg1, …, argN</code></a> <span class=\"badge inline optional\">可选</span></dt>\n <dd>\n <p>在调用 <code>func</code> 时，插入到传入绑定函数的参数前的参数。</p>\n </dd>\n</dl>"}},{"type":"prose","value":{"id":"返回值","title":"返回值","isH3":true,"content":"<p>使用指定的 <code>this</code> 值和初始参数（如果提供）创建的给定函数的副本。</p>"}},{"type":"prose","value":{"id":"描述","title":"描述","isH3":false,"content":"<p><code>bind()</code> 函数创建一个新的<em>绑定函数（bound function）</em>。调用绑定函数通常会执行其所包装的函数，也称为<em>目标函数（target function）</em>。绑定函数将绑定时传入的参数（包括 <code>this</code> 的值和前几个参数）提前存储为其内部状态。而不是在实际调用时传入。通常情况下，你可以将 <code>const boundFn = fn.bind(thisArg, arg1, arg2)</code> 和 <code>const boundFn = (...restArgs) => fn.call(thisArg, arg1, arg2, ...restArgs)</code> 构建的绑定函数的调用效果视为等效（但就构建 <code>boundFn</code> 的过程而言，不是二者等效的）。</p>\n<p>绑定函数可以通过调用 <code>boundFn.bind(thisArg, /* more args */)</code> 进一步进行绑定，从而创建另一个绑定函数 <code>boundFn2</code>。新绑定的 <code>thisArg</code> 值会被忽略，因为 <code>boundFn2</code> 的目标函数是 <code>boundFn</code>，而 <code>boundFn</code> 已经有一个绑定的 <code>this</code> 值了。当调用 <code>boundFn2</code> 时，它会调用 <code>boundFn</code>，而 <code>boundFn</code> 又会调用 <code>fn</code>。<code>fn</code> 最终接收到的参数按顺序为：<code>boundFn</code> 绑定的参数、<code>boundFn2</code> 绑定的参数，以及 <code>boundFn2</code> 接收到的参数。</p>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">js</span></div><pre class=\"brush: js notranslate\"><code>\"use strict\"; // 防止 `this` 被封装到到包装对象中\n\nfunction log(...args) {\n console.log(this, ...args);\n}\nconst boundLog = log.bind(\"this value\", 1, 2);\nconst boundLog2 = boundLog.bind(\"new this value\", 3, 4);\nboundLog2(5, 6); // \"this value\", 1, 2, 3, 4, 5, 6\n</code></pre></div>\n<p>如果目标函数是可构造的，绑定函数也可以使用 <code>new</code> 运算符进行构造。这样做的效果就好像目标函数本身被构造一样。前置的参数会像通常一样传递给目标函数，而提供的 <code>this</code> 值会被忽略（因为构造函数会准备自己的 <code>this</code>，如 <a href=\"/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Reflect/construct\"><code>Reflect.construct</code></a> 的参数所示）。如果直接构造绑定函数，<a href=\"/zh-CN/docs/Web/JavaScript/Reference/Operators/new.target\"><code>new.target</code></a> 将指向目标函数（也就是说，绑定函数对 <code>new.target</code> 是透明的）。</p>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">js</span></div><pre class=\"brush: js notranslate\"><code>class Base {\n constructor(...args) {\n console.log(new.target === Base);\n console.log(args);\n }\n}\n\nconst BoundBase = Base.bind(null, 1, 2);\n\nnew BoundBase(3, 4); // true, [1, 2, 3, 4]\n</code></pre></div>\n<p>然而，由于绑定函数没有 <a href=\"/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Function/prototype\"><code>prototype</code></a> 属性，它不能作为 <a href=\"/zh-CN/docs/Web/JavaScript/Reference/Classes/extends\"><code>extends</code></a> 的基类。</p>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">js</span></div><pre class=\"brush: js example-bad notranslate\"><code>class Derived extends class {}.bind(null) {}\n// TypeError: Class extends value does not have valid prototype property undefined\n</code></pre></div>\n<p>当将绑定函数用作 <a href=\"/zh-CN/docs/Web/JavaScript/Reference/Operators/instanceof\"><code>instanceof</code></a> 运算符右操作数时，<code>instanceof</code> 会访问绑定函数内部存储的目标函数，并读取其 <code>prototype</code> 属性。</p>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">js</span></div><pre class=\"brush: js notranslate\"><code>class Base {}\nconst BoundBase = Base.bind(null, 1, 2);\nconsole.log(new Base() instanceof BoundBase); // true\n</code></pre></div>\n<p>绑定函数具有以下属性：</p>\n<dl>\n <dt id=\"length\"><a href=\"/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Function/length\"><code>length</code></a></dt>\n <dd>\n <p>目标函数的 <code>length</code> 减去被绑定的参数个数（不包括 <code>thisArg</code> 参数），最小值为 0。</p>\n </dd>\n <dt id=\"name\"><a href=\"/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Function/name\"><code>name</code></a></dt>\n <dd>\n <p>目标函数的 <code>name</code> 前加上 <code>\"bound \"</code> 前缀。</p>\n </dd>\n</dl>\n<p>绑定函数还会继承目标函数的<a href=\"/zh-CN/docs/Web/JavaScript/Inheritance_and_the_prototype_chain\">原型链</a>。然而，它不会继承目标函数的其他自有属性（例如，如果目标函数是一个类，则不会继承其<a href=\"/zh-CN/docs/Web/JavaScript/Reference/Classes/static\">静态属性</a>）。</p>"}},{"type":"prose","value":{"id":"示例","title":"示例","isH3":false,"content":""}},{"type":"prose","value":{"id":"创建绑定函数","title":"创建绑定函数","isH3":true,"content":"<p><code>bind()</code> 最简单的用法是创建一个函数，无论如何调用，它都会使用特定的 <code>this</code> 值进行调用。</p>\n<p>JavaScript 新手经常犯的一个错误是将一个方法从对象中提取出来，然后再调用，并期望方法中的 <code>this</code> 是原来的对象（比如在回调中传入这个方法）。</p>\n<p>然而，如果不做特殊处理的话，通常会丢失原始对象。使用这个函数加上原始的对象来创建一个绑定函数，巧妙地解决了这个问题：</p>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">js</span></div><pre class=\"brush: js notranslate\"><code>// 顶级的“this”绑定到“globalThis”。\nthis.x = 9;\nconst module = {\n x: 81,\n getX() {\n return this.x;\n },\n};\n\n// “getX”的“this”参数绑定到“module”。\nconsole.log(module.getX()); // 81\n\nconst retrieveX = module.getX;\n// “retrieveX”的“this”参数在非严格模式下绑定到“globalThis”。\nconsole.log(retrieveX()); // 9\n\n// 创建一个新函数“boundGetX”，并将“this”参数绑定到“module”。\nconst boundGetX = retrieveX.bind(module);\nconsole.log(boundGetX()); // 81\n</code></pre></div>\n<div class=\"notecard note\">\n <p><strong>备注：</strong>如果在<a href=\"/zh-CN/docs/Web/JavaScript/Reference/Strict_mode\">严格模式</a>下运行这个示例，<code>retrieveX</code> 的 <code>this</code> 参数会绑定到 <code>undefined</code> 而不是 <code>globalThis</code>，这会导致 <code>retrieveX()</code> 的调用失败。</p>\n <p>如果在一个 ECMAScript 模块中运行这个示例，顶级的 <code>this</code> 会绑定到 <code>undefined</code> 而不是 <code>globalThis</code>，导致 <code>this.x = 9</code> 赋值失败。</p>\n <p>如果在 Node CommonJS 模块中运行这个示例，则顶级的 <code>this</code> 会绑定到 <code>module.exports</code> 而不是 <code>globalThis</code>。然而，在非严格模式下，<code>retrieveX</code> 的 <code>this</code> 仍然会绑定到 <code>globalThis</code>，而在严格模式下会绑定为 <code>undefined</code>。因此，在非严格模式下（默认情况下），<code>retrieveX()</code> 调用会返回 <code>undefined</code>, 因为 <code>this.x = 9</code> 会写入的是一个不同的对象（<code>module.exports</code>），而 <code>getX</code> 读取的是另一个对象（<code>globalThis</code>）。</p>\n</div>\n<p>实际上，一些内置的“方法”也是返回绑定函数的 getter 方法，其中一个显著的例子是 <a href=\"/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat/format#%E4%BD%BF%E7%94%A8_format_%E5%92%8C_map\"><code>Intl.NumberFormat.prototype.format()</code></a>，当访问时，它返回一个绑定函数，你可以直接将其作为回调函数传递。</p>"}},{"type":"prose","value":{"id":"偏函数","title":"偏函数","isH3":true,"content":"<p><code>bind()</code> 的另一个简单用法是创建一个具有预设初始参数的函数。</p>\n<p>这些参数（如果有的话）会跟随提供的 <code>this</code> 值，并在传递给目标函数的参数列表的开头插入，其后是在调用绑定函数时传递的参数。</p>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">js</span></div><pre class=\"brush: js notranslate\"><code>function list(...args) {\n return args;\n}\n\nfunction addArguments(arg1, arg2) {\n return arg1 + arg2;\n}\n\nconsole.log(list(1, 2, 3)); // [1, 2, 3]\n\nconsole.log(addArguments(1, 2)); // 3\n\n// 创建一个带有预设前导参数的函数\nconst leadingThirtySevenList = list.bind(null, 37);\n\n// 创建一个带有预设第一个参数的函数。\nconst addThirtySeven = addArguments.bind(null, 37);\n\nconsole.log(leadingThirtySevenList()); // [37]\nconsole.log(leadingThirtySevenList(1, 2, 3)); // [37, 1, 2, 3]\nconsole.log(addThirtySeven(5)); // 42\nconsole.log(addThirtySeven(5, 10)); // 42\n//（最后一个参数 10 被忽略）\n</code></pre></div>"}},{"type":"prose","value":{"id":"配合_settimeout","title":"配合 setTimeout()","isH3":true,"content":"<p>在默认情况下，在 <a href=\"/zh-CN/docs/Web/API/Window/setTimeout\" title=\"setTimeout()\"><code>setTimeout()</code></a> 内部，<code>this</code> 关键字将被设置为 <a href=\"/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/globalThis\"><code>globalThis</code></a>，在浏览器中它是 <a href=\"/zh-CN/docs/Web/API/Window\"><code>window</code></a> 对象。当处理需要将 <code>this</code> 引用类实例的类方法时，你可以显式地将 <code>this</code> 绑定到回调函数，以便保持实例的引用。</p>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">js</span></div><pre class=\"brush: js notranslate\"><code>class LateBloomer {\n constructor() {\n this.petalCount = Math.floor(Math.random() * 12) + 1;\n }\n bloom() {\n // 延迟 1 秒后宣布开花\n setTimeout(this.declare.bind(this), 1000);\n }\n declare() {\n console.log(`I am a beautiful flower with ${this.petalCount} petals!`);\n }\n}\n\nconst flower = new LateBloomer();\nflower.bloom();\n// 1 秒后调用“flower.declare()”\n</code></pre></div>\n<p>你还可以使用<a href=\"/zh-CN/docs/Web/JavaScript/Reference/Functions/Arrow_functions\">箭头函数</a>来实现此目的。</p>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">js</span></div><pre class=\"brush: js notranslate\"><code>class LateBloomer {\n bloom() {\n // 延迟 1 秒后宣布开花\n setTimeout(() => this.declare(), 1000);\n }\n}\n</code></pre></div>"}},{"type":"prose","value":{"id":"作为构造函数使用的绑定函数","title":"作为构造函数使用的绑定函数","isH3":true,"content":"<p>绑定函数自动适用于与 <a href=\"/zh-CN/docs/Web/JavaScript/Reference/Operators/new\"><code>new</code></a> 运算符一起使用，以用于构造目标函数创建的新实例。当使用绑定函数是用来构造一个值时，提供的 <code>this</code> 会被忽略。然而，提供的参数仍会被插入到构造函数调用时的参数列表之前。</p>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">js</span></div><pre class=\"brush: js notranslate\"><code>function Point(x, y) {\n this.x = x;\n this.y = y;\n}\n\nPoint.prototype.toString = function () {\n return `${this.x},${this.y}`;\n};\n\nconst p = new Point(1, 2);\np.toString();\n// '1,2'\n\n// thisArg 的值并不重要，因为它被忽略了\nconst YAxisPoint = Point.bind(null, 0 /*x*/);\n\nconst axisPoint = new YAxisPoint(5);\naxisPoint.toString(); // '0,5'\n\naxisPoint instanceof Point; // true\naxisPoint instanceof YAxisPoint; // true\nnew YAxisPoint(17, 42) instanceof Point; // true\n</code></pre></div>\n<p>请注意，你无需采取任何特殊措施来创建一个绑定函数，以便与 <a href=\"/zh-CN/docs/Web/JavaScript/Reference/Operators/new\"><code>new</code></a> 运算符一起使用。<a href=\"/zh-CN/docs/Web/JavaScript/Reference/Operators/new.target\"><code>new.target</code></a>、<a href=\"/zh-CN/docs/Web/JavaScript/Reference/Operators/instanceof\"><code>instanceof</code></a>、<a href=\"/zh-CN/docs/Web/JavaScript/Reference/Operators/this\"><code>this</code></a> 等都如预期工作，就好像构造函数从未被绑定一样。唯一的区别是它不能再用于 <a href=\"/zh-CN/docs/Web/JavaScript/Reference/Classes/extends\"><code>extends</code></a>。</p>\n<p>相应地，你无需采取任何特殊措施来创建一个绑定函数，使其只能以普通方式调用，即使你更希望要求只能使用 <a href=\"/zh-CN/docs/Web/JavaScript/Reference/Operators/new\"><code>new</code></a> 来调用绑定函数。如果你在没有使用 <code>new</code> 的情况下调用它，绑定的 <code>this</code> 将不再被忽略。</p>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">js</span></div><pre class=\"brush: js notranslate\"><code>const emptyObj = {};\nconst YAxisPoint = Point.bind(emptyObj, 0 /*x*/);\n\n// 仍然可以作为普通函数调用\n//（尽管通常这是不可取的）\nYAxisPoint(13);\n\n// 现在可以从外部观察对 `this` 的修改\nconsole.log(emptyObj); // { x: 0, y: 13 }\n</code></pre></div>\n<p>如果你希望限制绑定函数只能使用 <a href=\"/zh-CN/docs/Web/JavaScript/Reference/Operators/new\"><code>new</code></a> 调用，或者只能在没有使用 <code>new</code> 的情况下调用，目标函数必须强制执行该限制，例如通过检查 <code>new.target !== undefined</code> 或使用 <a href=\"/zh-CN/docs/Web/JavaScript/Reference/Classes\">class</a>。</p>"}},{"type":"prose","value":{"id":"绑定类","title":"绑定类","isH3":true,"content":"<p>在类上使用 <code>bind()</code> 会保留大部分类的语义，只是当前类的所有静态自有属性会丢失。然而，由于原型链被保留，你仍然可以访问从父类继承的静态属性。这意味着绑定后的类实例仍然可以享受到继承自父类的静态属性的功能。</p>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">js</span></div><pre class=\"brush: js notranslate\"><code>class Base {\n static baseProp = \"基类属性\";\n}\n\nclass Derived extends Base {\n static derivedProp = \"派生类属性\";\n}\n\nconst BoundDerived = Derived.bind(null);\nconsole.log(BoundDerived.baseProp); // \"基类属性\"\nconsole.log(BoundDerived.derivedProp); // undefined\nconsole.log(new BoundDerived() instanceof Derived); // true\n</code></pre></div>"}},{"type":"prose","value":{"id":"将方法转换为实用函数","title":"将方法转换为实用函数","isH3":true,"content":"<p><code>bind()</code> 在某些情况下也非常有用，比如当你想将一个需要特定 <code>this</code> 值的方法转换为一个普通的实用函数，该函数将之前的 <code>this</code> 参数作为普通参数传入。这类似于通用实用函数的工作方式：而不是调用 <code>array.map(callback)</code>，你可以使用 <code>map(array, callback)</code>，这样可以避免修改 <code>Array.prototype</code>，并且可以在不是数组的类数组对象（比如 <a href=\"/zh-CN/docs/Web/JavaScript/Reference/Functions/arguments\"><code>arguments</code></a>）上使用 <code>map</code>。</p>\n<p>以 <a href=\"/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/slice\"><code>Array.prototype.slice()</code></a> 为例，你可以使用它将类数组对象转换为真正的数组。你可以创建一个类似下面的快捷方式：</p>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">js</span></div><pre class=\"brush: js notranslate\"><code>const slice = Array.prototype.slice;\n\n// ...\n\nslice.call(arguments);\n</code></pre></div>\n<p>请注意，你不能保存 <code>slice.call</code> 并将其作为普通函数调用，因为 <code>call()</code> 方法还会读取其应该调用的函数作为其 <code>this</code> 值。在这种情况下，你可以使用 <code>bind()</code> 来绑定 <code>call()</code> 的 <code>this</code> 值。在下面的代码片段中，<code>slice()</code> 是一个绑定了 <code>this</code> 值为 <a href=\"/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/slice\"><code>Array.prototype.slice()</code></a> 的 <a href=\"/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Function/call\"><code>Function.prototype.call()</code></a> 的版本。这意味着可以消除额外的 <code>call()</code> 调用：</p>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">js</span></div><pre class=\"brush: js notranslate\"><code>// 与上一个示例中的“slice”相同\nconst unboundSlice = Array.prototype.slice;\nconst slice = Function.prototype.call.bind(unboundSlice);\n\n// ...\n\nslice(arguments);\n</code></pre></div>"}},{"type":"specifications","value":{"title":"规范","id":"规范","isH3":false,"specifications":[{"bcdSpecificationURL":"https://tc39.es/ecma262/multipage/fundamental-objects.html#sec-function.prototype.bind","title":"ECMAScript Language Specification"}],"query":"javascript.builtins.Function.bind"}},{"type":"browser_compatibility","value":{"title":"浏览器兼容性","id":"浏览器兼容性","isH3":false,"query":"javascript.builtins.Function.bind"}},{"type":"prose","value":{"id":"参见","title":"参见","isH3":false,"content":"<ul>\n <li><a href=\"https://github.com/zloirock/core-js#ecmascript-function\" class=\"external\" target=\"_blank\"><code>core-js</code> 中 <code>Function.prototype.bind</code> 的 polyfill</a></li>\n <li><a href=\"/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Function/apply\"><code>Function.prototype.apply()</code></a></li>\n <li><a href=\"/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Function/call\"><code>Function.prototype.call()</code></a></li>\n <li><a href=\"/zh-CN/docs/Web/JavaScript/Reference/Functions\">函数</a></li>\n</ul>"}}],"toc":[{"text":"尝试一下","id":"尝试一下"},{"text":"语法","id":"语法"},{"text":"描述","id":"描述"},{"text":"示例","id":"示例"},{"text":"规范","id":"规范"},{"text":"浏览器兼容性","id":"浏览器兼容性"},{"text":"参见","id":"参见"}],"summary":"Function 实例的 bind() 方法创建一个新函数，当调用该新函数时，它会调用原始函数并将其 this 关键字设置为给定的值，同时，还可以传入一系列指定的参数，这些参数会插入到调用新函数时传入的参数的前面。","popularity":0.0086,"modified":"2024-10-08T11:46:54.000Z","other_translations":[{"locale":"de","title":"Function.prototype.bind()","native":"Deutsch"},{"locale":"en-US","title":"Function.prototype.bind()","native":"English (US)"},{"locale":"es","title":"Function.prototype.bind()","native":"Español"},{"locale":"fr","title":"Function.prototype.bind()","native":"Français"},{"locale":"ja","title":"Function.prototype.bind()","native":"日本語"},{"locale":"ko","title":"Function.prototype.bind()","native":"한국어"},{"locale":"pt-BR","title":"Function.prototype.bind()","native":"Português (do Brasil)"},{"locale":"ru","title":"Function.prototype.bind()","native":"Русский"},{"locale":"zh-TW","title":"Function.prototype.bind()","native":"正體中文 (繁體)"}],"pageType":"unknown","source":{"folder":"zh-cn/web/javascript/reference/global_objects/function/bind","github_url":"https://github.com/mdn/translated-content/blob/main/files/zh-cn/web/javascript/reference/global_objects/function/bind/index.md","last_commit_url":"https://github.com/mdn/translated-content/commit/9ce80bfea141b0a765556e9a825599b0505db2ee","filename":"index.md"},"short_title":"Function.prototype.bind()","parents":[{"uri":"/zh-CN/docs/Web","title":"面向开发者的 Web 技术"},{"uri":"/zh-CN/docs/Web/JavaScript","title":"JavaScript"},{"uri":"/zh-CN/docs/Web/JavaScript/Reference","title":"JavaScript 参考"},{"uri":"/zh-CN/docs/Web/JavaScript/Reference/Global_Objects","title":"JavaScript 标准内置对象"},{"uri":"/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Function","title":"Function"},{"uri":"/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Function/bind","title":"Function.prototype.bind()"}],"pageTitle":"Function.prototype.bind() - JavaScript | MDN","noIndexing":false}}</script></body></html>