鍘熷垱鏂囩珷鍙戣〃鍦ㄦ垜鐨勫叕浼楀彿锛岀涓€鏃堕棿璁㈤槄鏌ョ湅鎴戠殑鏈€鏂版枃绔狅紒澶у濂斤紝鎴戞槸蹇靛康锛佸鏋滀綘鐢ㄨ繃react鍜寁ue锛屼綘搴旇鍙戠幇涓€涓棶棰橈細vue鍛婅瘔鎴戜滑涓嶅簲璇ヤ娇鐢ㄧ澶村嚱鏁版潵瀹氫箟鏂规硶鍜岀敓鍛藉懆鏈燂紱浣嗘槸鍦╮eact绫荤粍浠朵腑锛屽皢鏂规硶鍐欐垚绠ご鍑芥暟鐨勫舰寮忔洿鏂逛究銆傝闂负浠€涔堬紝澶у鏁颁汉鍙槸鎶婁粬褰撴垚鐞嗘墍褰撶劧銆備絾鏄妸杩欓亾棰樻媶寮€鏉ュ叾瀹炲彲浠ュ緢濂界殑鎶婂噯澶囬潰璇曠殑鏃跺€欓€犵殑鐏鐢ㄥ埌鎷ц灪涓濈殑鏃跺€欑敤銆傛湰鏂囧厑璁告偍鍦ㄨ繖涓疄闄呭満鏅腑浣跨敤杩欎釜鎸囬拡銆佷綔鐢ㄥ煙閾惧拰鍘熷瀷銆傝繖涓偣涓㈠け涓嶇鏄痸ue杩樻槸react锛屽畼鏂规枃妗ｉ兘寮鸿皟闇€瑕佹敞鎰弔his鐨勪涪澶便€備絾鏄湁鎰忔€濈殑鏄负浜嗚揪鍒板悓鏍风殑鐩殑锛屼竴涓笉鑳戒娇鐢ㄧ澶村嚱鏁帮紝涓€涓槸浣跨敤绠ご鍑芥暟鏉ヨВ鍐仇煈噐eact馃憞vueReact涓璽his鐨勪涪澶遍鍏堟垜浠潵鐪嬩竴涓媟eact锛屽畠鏄竴绉嶅緢甯歌鐨勫啓绫荤粍浠剁殑鏂瑰紡锛歝lassDemoextendsReact.Component{state={someState:'state'}//鉁呮帹鑽恆rrowFunMethod=()=>{console.log('THISinarrowfunction:',this)this.setState({someState:'arrowstate'})}//鉂岄渶瑕佸鐞唗his缁戝畾ordinaryFunMethod(){console.log('THISordinaryfunction:',this)this.setState({someState:'ordinarystate'})}render(){return(
{this.state.someState}
璋冪敤绠ご鍑芥暟callordinaryfunction)}}ReactDOM.render(
,document.getElementById('root'))鎴戝湪缁勪欢涓畾涔変簡涓や釜鏂规硶锛氫竴涓槸鐢ㄧ澶村嚱鏁板疄鐜扮殑锛屽彟涓€涓槸鐢ㄦ櫘閫氬嚱鏁板疄鐜扮殑銆傝皟鐢ㄦ椂鍗曠嫭鎵撳嵃this锛岀粨鏋滃涓嬶細this鍦ㄧ澶村嚱鏁颁腑姝ｇ‘鎸囧悜缁勪欢瀹炰緥锛屼絾鍦ㄦ櫘閫氬嚱鏁颁腑鍗存寚鍚憉ndefined锛屼负浠€涔堬紵鍏跺疄杩欐槸涓€涓笌react鏃犲叧鐨刯s鐗规€э紝鍓ョreact甯︽潵鐨勭簿绁炶礋鎷呫€傛湰璐ㄤ笂锛屼笂闈㈢殑浠ｇ爜鍙槸涓€涓€滅被鈥濄€傜畝鍖栦竴涓嬪氨鍙樻垚杩欐牱馃憞:classReactDemo{//鉁匯ecommendedarrowFunMethod=()=>{console.log('THISinarrowfunction:',this)}//鉂宼his鎸囧悜缂哄け鐨刼rdinaryFunMethod(){console.log('THISinoridinaryfunction:',this)}}constreactIns=newReactDemo()letarrowFunWithoutCaller=reactIns.arrowFunMethodletordinaryFunWithoutCaller=reactIns.ordinaryFunMethodarrowFunWithoutCaller()ordinaryFunWithoutCaller()杩愯涓婇潰鐨勪唬鐮侊紝浣犱細鍙戠幇缁撴灉濡傞鏈燂細鏅€氬嚱鏁颁腑this鐨勬寚閽堜篃涓㈠け浜嗐€傛垜浠巖eact浠ｇ爜杩愯鐨勮搴︽潵瑙ｉ噴涓€涓嬶細棣栧厛锛屽綋浜嬩欢琚Е鍙戞椂锛屽洖璋冨嚱鏁扮殑鎵ц銆傚洖璋冨嚱鏁颁笉鏄儚杩欐牱鐩存帴琚疄渚嬭皟鐢ㄧ殑锛歳eactIns.ordinaryFunMethod()锛岃€屾槸鍍忎笂闈㈢殑浠ｇ爜涓€鏍凤紝鍋氫簡涓€娆♀€滀唬鐞嗏€濓紝鏈€鍚庤皟鐢ㄧ殑鏃跺€欙紝鎵句笉鍒拌皟鐢ㄥ璞★細ordinaryFunWithoutCaller().杩欐椂鍊欏氨浼氬嚭鐜皌his鎸囧悜undefined鐨勬儏鍐点€備絾鏄负浠€涔堜娇鐢ㄧ澶村嚱鏁帮紝this鍙互姝ｇ‘鎸囧悜缁勪欢瀹炰緥鍛紵鍏堝涔犱竴涓畝鍗曠殑鐭ヨ瘑鐐癸細绫绘槸涓€涓娉曠硸锛屽叾瀹炶川鍙槸涓€涓瀯閫犲嚱鏁般€備互鏈€鍘熷鐨勫舰寮忕紪鍐欎笂闈㈢殑浠ｇ爜锛?usestrict'functionReactDemo(){//鉁卹ecommendthis.arrowFunMethod=()=>{console.log('THISinarrowfunction:',this)}}//鉂宼his鎸囧悜缂哄けReactDemo.prototype.ordinaryFunMethod=functionordinaryFunMethod(){console.log('THISinordinaryfunction:',this)}constreactIns=newReactDemo()鍙互鐪嬪埌锛氬啓鎴愭櫘閫氬嚱鏁扮殑鏂规硶鏄畨瑁呭湪鍘熷瀷閾句笂锛涜€屼娇鐢ㄧ澶村嚱鏁板畾涔夌殑鏂规硶鐩存帴璧嬪€肩粰瀹炰緥骞舵垚涓哄疄渚嬬殑涓€涓睘鎬э紝鏈€閲嶈鐨勬槸锛氬畠鏄湪鈥滄瀯閫犲嚱鏁扮殑鑼冨洿鈥濅腑瀹氫箟鐨勩€傛垜浠煡閬撶澶村嚱鏁版槸娌℃湁鑷繁鐨則his鐨勶紝浣跨敤鐨勬椂鍊欏彧鑳芥牴鎹綔鐢ㄥ煙閾炬壘鍒版渶杩戠殑銆傛斁鍦ㄨ繖閲岋紝涔熷氨鏄痶his鍦ㄦ瀯閫犲嚱鏁扮殑鑼冨洿鍐呪€斺€旂粍浠跺疄渚嬨€傝繖鍙互瑙ｉ噴涓轰粈涔堝湪react缁勪欢涓紝绠ご鍑芥暟鐨則his鍙互姝ｇ‘鎸囧悜缁勪欢瀹炰緥銆倂ue涓璽his鐨勪涪澶辩敤vue鍐欎笂闈㈢殑缁勪欢锛?)=>{console.log('THISinarrowfunction:',this)this.someState='arrowstate'},//鉁呮帹鑽恛rdinaryFunMethod(){console.log('THISinoridinaryfunction:',this)this.someState='鏅€氱姸鎬?}},template:`{{this.someState}}
璋冪敤绠ご鍑芥暟璋冪敤鏅€氬嚱鏁?/button>`})Demo.mount('#root')杩愯浠ｇ爜锛屼綘浼氬彂鐜扮粨鏋滄槸鐩稿弽鐨勶細浣跨敤绠ご鍑芥暟鍙嶈€屽鑷磘his鎸囧悜Lost锛歵his鎸囧悜window瀵硅薄銆傝繖閮ㄥ垎瑙ｉ噴璧锋潵绋嶅井澶嶆潅涓€浜涳紝涓嶈繃鍙秹鍙婁竴灏忔Vue婧愮爜銆備富瑕佹搷浣滄槸vue瀵圭粍浠舵柟娉曠殑澶勭悊銆傛牳蹇冨彧鏈変笁琛屻€傛湁鍏磋叮鐨勫彲浠ユ煡鐪嬪畬鏁翠唬鐮侊細vue-githubfunctioninitMethods(vm:Component,methods:Object){for(constkeyinmethods){vm[key]=bind(methods[key],vm)}}vue浼氬湪鏂规硶閬嶅巻涓紶閫掔粰鎴戜滑锛岀劧鍚庡皢瀹冧滑涓€涓€璧嬪€肩粰鏋勫缓瀹炰緥銆傚湪杩欎釜杩囩▼涓紝澶勭悊this鐨勭粦瀹?bind(methods[key],vm))锛氬皢姣忎釜鏂规硶涓殑this缁戝畾鍒扮粍浠跺疄渚嬩笂銆傛櫘閫氬嚱鏁伴兘鏈夎嚜宸辩殑this锛屾墍浠ョ粦瀹氬悗璋冪敤鏃跺彲浠ユ纭寚鍚戠粍浠跺疄渚嬨€備絾鏄澶村嚱鏁版病鏈夎嚜宸辩殑this锛屾墍浠ヤ笉鑳戒慨鏀广€傚畠鍙兘鍦ㄧ埗鑼冨洿鍐呮壘鍒板畠銆傝繖涓埗浣滅敤鍩熸槸璋侊紵瀹冩槸涓€涓粍浠跺疄渚嬪悧锛熸垜浠煡閬撲綔鐢ㄥ煙鍙湁涓ょ锛氬叏灞€浣滅敤鍩熷拰鍑芥暟浣滅敤鍩熴€傚洖鍒版垜浠啓鐨剉ue浠ｇ爜锛屽畠鏈川涓婃槸涓€涓璞★紙鍏蜂綋鏉ヨ锛屽畠鏄竴涓粍浠剁殑閰嶇疆瀵硅薄锛岄噷闈㈡湁鏁版嵁銆佹寕杞姐€佹柟娉曠瓑灞炴€э級銆備篃灏辨槸璇达紝鎴戜滑鍦ㄥ璞′腑瀹氫箟鏂规硶锛屽洜涓哄璞′笉鏋勬垚浣滅敤鍩燂紝鎵€浠ヨ繖浜涙柟娉曠殑鐖朵綔鐢ㄥ煙鏄叏灞€浣滅敤鍩熴€傚鏋滅澶村嚱鏁拌鎵総his锛屽彧鑳藉湪鍏ㄥ眬鑼冨洿鍐呮壘this-window瀵硅薄銆備笂闈㈣浜嗚繖涔堝锛屾€荤粨涓€涓嬶細Vue澶勭悊浼犲叆鐨刴ethods瀵硅薄锛屽湪鍑芥暟璋冪敤鍓嶇粦瀹歵his鐐广€傚彧鏈夊甫鏈塼his鐨勬櫘閫氬嚱鏁版墠鑳芥纭粦瀹氬埌缁勪欢瀹炰緥銆傜澶村嚱鏁颁細瀵艰嚧this鐨勬寚鍚戜涪澶便€傜粨璁衡€滀负浠€涔堝湪react涓娇鐢ㄧ澶村嚱鏁拌€屽湪vue涓娇鐢ㄦ櫘閫氬嚱鏁帮紵鈥濊繖鏄竴涓潪甯告湁瓒ｇ殑闂銆傜畝鍗曟潵璇达紝杩欑宸紓鏄洜涓簉eact鏄被鑰寁ue鏄璞￠€犳垚鐨勩€傚彧鏈夌被涓畾涔夌殑绠ご鍑芥暟鎵嶈兘鏍规嵁浣滅敤鍩熼摼鎵惧埌缁勪欢瀹炰緥锛涘璞′腑鍙湁鑷甫this鐨勬櫘閫氬嚱鏁版墠鍙互淇敼涓烘寚鍚憈his锛岀粡杩嘨ue澶勭悊鍚庣粦瀹氬埌缁勪欢瀹炰緥涓娿€傚鏋滄偍瑙夊緱杩欑瘒鏂囩珷瀵规偍鏈夊府鍔╋紝鍒繕浜嗙粰鎴戠偣涓禐锛屾偍鐨勬敮鎸佹槸鎴戞渶澶х殑鍔ㄥ姏lookbetter
