1 |
- (window.webpackJsonp=window.webpackJsonp||[]).push([[92],{370:function(a,t,s){"use strict";s.r(t);var n=s(0),e=Object(n.a)({},(function(){var a=this,t=a.$createElement,s=a._self._c||t;return s("ContentSlotsDistributor",{attrs:{"slot-key":a.$parent.slotKey}},[s("h1",{attrs:{id:"this、apply、call、bind"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#this、apply、call、bind"}},[a._v("#")]),a._v(" this、apply、call、bind")]),a._v(" "),s("h2",{attrs:{id:"this"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#this"}},[a._v("#")]),a._v(" this")]),a._v(" "),s("ul",[s("li",[s("code",[a._v("this")]),a._v(" 永远指向最后调用它的那个对象")])]),a._v(" "),s("h2",{attrs:{id:"apply、call-的区别"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#apply、call-的区别"}},[a._v("#")]),a._v(" apply、call 的区别")]),a._v(" "),s("h4",{attrs:{id:"对于-apply、call-二者而言,作用完全一样,只是接受参数的方式不太一样。例如,有一个函数定义如下:"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#对于-apply、call-二者而言,作用完全一样,只是接受参数的方式不太一样。例如,有一个函数定义如下:"}},[a._v("#")]),a._v(" 对于 apply、call 二者而言,作用完全一样,只是接受参数的方式不太一样。例如,有一个函数定义如下:")]),a._v(" "),s("div",{staticClass:"language-js line-numbers-mode"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[a._v("var")]),a._v(" "),s("span",{pre:!0,attrs:{class:"token function-variable function"}},[a._v("func")]),a._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[a._v("=")]),a._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[a._v("function")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[a._v("(")]),s("span",{pre:!0,attrs:{class:"token parameter"}},[a._v("arg1"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[a._v(",")]),a._v(" arg2")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[a._v(")")]),a._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[a._v("{")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[a._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[a._v(";")]),a._v("\n")])]),a._v(" "),s("div",{staticClass:"line-numbers-wrapper"},[s("span",{staticClass:"line-number"},[a._v("1")]),s("br")])]),s("p",[a._v("就可以通过如下方式来调用:")]),a._v(" "),s("h4",{attrs:{id:"使用场景"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#使用场景"}},[a._v("#")]),a._v(" 使用场景")]),a._v(" "),s("p",[a._v("参数明确使用"),s("code",[a._v("call")]),a._v(",参数不明确使用"),s("code",[a._v("apply")]),a._v(";")]),a._v(" "),s("div",{staticClass:"language-js line-numbers-mode"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token function"}},[a._v("func")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[a._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[a._v("call")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[a._v("(")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[a._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[a._v(",")]),a._v(" arg1"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[a._v(",")]),a._v(" arg2"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[a._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[a._v(";")]),a._v("\n"),s("span",{pre:!0,attrs:{class:"token function"}},[a._v("func")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[a._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[a._v("apply")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[a._v("(")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[a._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[a._v(",")]),a._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[a._v("[")]),a._v("arg1"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[a._v(",")]),a._v(" arg2"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[a._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[a._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[a._v(";")]),a._v("\n")])]),a._v(" "),s("div",{staticClass:"line-numbers-wrapper"},[s("span",{staticClass:"line-number"},[a._v("1")]),s("br"),s("span",{staticClass:"line-number"},[a._v("2")]),s("br")])]),s("h2",{attrs:{id:"bind"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#bind"}},[a._v("#")]),a._v(" bind")]),a._v(" "),s("p",[s("code",[a._v("MDN")]),a._v("的解释是:"),s("code",[a._v("bind()")]),a._v("方法会创建一个新函数,称为绑定函数,当调用这个绑定函数时,绑定函数会以创建它时传入 bind()方法的第一个参数作为 "),s("code",[a._v("this")]),a._v(",传入 "),s("code",[a._v("bind()")]),a._v(" 方法的第二个以及以后的参数加上绑定函数运行时本身的参数按照顺序作为原函数的参数来调用原函数。")]),a._v(" "),s("h2",{attrs:{id:"总结"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#总结"}},[a._v("#")]),a._v(" 总结")]),a._v(" "),s("ul",[s("li",[s("code",[a._v("apply")]),a._v("、"),s("code",[a._v("call")]),a._v(" 、"),s("code",[a._v("bind")]),a._v("三者都是用来改变函数的"),s("code",[a._v("this")]),a._v("对象的指向的;")]),a._v(" "),s("li",[s("code",[a._v("apply")]),a._v("、"),s("code",[a._v("call")]),a._v(" 、"),s("code",[a._v("bind")]),a._v("三者第一个参数都是 this 要指向的对象,也就是想指定的上下文;")]),a._v(" "),s("li",[s("code",[a._v("apply")]),a._v("、"),s("code",[a._v("call")]),a._v(" 、"),s("code",[a._v("bind")]),a._v("三者都可以利用后续参数传参;")]),a._v(" "),s("li",[s("code",[a._v("bind")]),a._v("是返回对应函数,便于稍后调用;"),s("code",[a._v("apply")]),a._v("、"),s("code",[a._v("call")]),a._v("则是立即调用.")])]),a._v(" "),s("h4",{attrs:{id:"学习资料"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#学习资料"}},[a._v("#")]),a._v(" 学习资料")]),a._v(" "),s("ul",[s("li",[s("a",{attrs:{href:"https://www.cnblogs.com/coco1s/p/4833199.html",target:"_blank",rel:"noopener noreferrer"}},[a._v("【优雅代码】深入浅出 妙用 Javascript 中 apply、call、bind"),s("OutboundLink")],1)]),a._v(" "),s("li",[s("a",{attrs:{href:"https://juejin.im/post/59bfe84351882531b730bac2",target:"_blank",rel:"noopener noreferrer"}},[a._v("this、apply、call、bind"),s("OutboundLink")],1)]),a._v(" "),s("li",[s("a",{attrs:{href:"https://juejin.im/post/5a9640335188257a7924d5ef",target:"_blank",rel:"noopener noreferrer"}},[a._v("让你弄懂 call、apply、bind 的应用和区别"),s("OutboundLink")],1)])])])}),[],!1,null,null,null);t.default=e.exports}}]);
|