"灏忔槑鍦ㄥ啓鐐瑰嚮鎸夐挳淇敼鐢ㄦ埛鍚嶇殑鍔熻兘锛屾槑鏄庣収鐫€鏁欑▼鍐欑殑浠g爜锛屸€?strong>鈥媡his.username鈥?/strong>鈥嬪氨鏄涓嶅埌鍊" />
  1. 主页 > 大智慧

JS方法调用形式有哪些?三种常用方式对比教学


馃殌 寮€澶寸伒榄傛嫹闂細涓轰粈涔堜綘鐨勪唬鐮佽€佹姤"undefined"锛?/h3>

"灏忔槑鍦ㄥ啓鐐瑰嚮鎸夐挳淇敼鐢ㄦ埛鍚嶇殑鍔熻兘锛屾槑鏄庣収鐫€鏁欑▼鍐欑殑浠g爜锛屸€?strong>鈥媡his.username鈥?/strong>鈥嬪氨鏄涓嶅埌鍊硷紒" 杩欐槸涓嶆槸鍍忔瀬浜嗗垰瀛S鐨勪綘锛熷埆鎱岋紝浠婂ぉ鍜变滑鎺板紑浜嗘弶纰庝簡璁查€忔柟娉曡皟鐢ㄧ殑闂ㄩ亾锛屼繚浣犵湅瀹屽氨鑳芥妸鈥?strong>鈥媡his鈥?/strong>鈥嬬帺寰楁槑鏄庣櫧鐧斤紒


馃挕 鍩虹娆撅細鏅€氬嚱鏁拌皟鐢紙80%鏂版墜韪╁潙鍖猴級

鈥?strong>鈥?涓哄暐鍦ㄥ畾鏃跺櫒閲岀敤鏅€氬嚱鏁板氨缈昏溅锛?鈥?/strong>鈥?br/> 鐪嬭繖娈佃鏃犳暟浜哄穿婧冪殑浠g爜锛?/p>

javascript澶嶅埗
const counter = {
  num: 0,
  add: function() {
    setInterval(function() {
      this.num++   // 杩欓噷this鎸囧悜window锛?/span>
      console.log(this.num)  // 杈撳嚭NaN
    }, 1000)
  }
}
counter.add()

馃洃 鈥?strong>鈥嬬棝鐐硅В鏋愨€?/strong>鈥嬶細

  • 鏅€氬嚱鏁扮殑鈥?strong>鈥媡his鈥?/strong>鈥嬪儚鍙樿壊榫欙紝璋佽皟鐢ㄥ氨鎸囧悜璋?/li>
  • 鍦ㄥ紓姝ュ洖璋冧腑瀹规槗涓㈠け涓婁笅鏂?br/> 馃憠 鈥?strong>鈥嬮伩鍧戝鎷涒€?/strong>鈥嬶細鎺忓嚭浣犵殑灏忔湰鏈浣忊€斺€斺€?strong>鈥嬪畾鏃跺櫒銆佷簨浠剁洃鍚€丄jax鍥炶皟鈥?/strong>鈥嬭繖涓変釜鍦烘櫙鏈€瀹规槗缈昏溅锛?/li>

馃洜锔?杩涢樁娆撅細call/apply鎵嬪姩缁戜汉锛堥潰璇曞繀鑰冪煡璇嗙偣锛?/h3>

鈥?strong>鈥嬪満鏅€?/strong>鈥嬶細澶氫釜瀵硅薄瑕佸叡鐢ㄥ悓涓€涓柟娉曞拫鏁达紵

javascript澶嶅埗
const 鍒囪彍甯堝倕 = { 宸ュ叿: '鑿滃垁' }
const 闆曞埢甯?= { 宸ュ叿: '鍒诲垁' }

function 灞曠ず宸ュ叿() {
  console.log(`鎴戞鍦ㄧ敤${this.宸ュ叿}宸ヤ綔`)
}

灞曠ず宸ュ叿.call(鍒囪彍甯堝倕)  // 鎴戞鍦ㄧ敤鑿滃垁宸ヤ綔
灞曠ず宸ュ叿.apply(闆曞埢甯? // 鎴戞鍦ㄧ敤鍒诲垁宸ヤ綔

馃敡 鈥?strong>鈥嬩娇鐢ㄧ绫嶁€?/strong>鈥嬶細

  1. 鈥?strong>鈥媍all鈥?/strong>鈥嬪儚浼犺瘽绛掞細鏂规硶.call(瀵硅薄, 鍙傛暟1, 鍙傛暟2)
  2. 鈥?strong>鈥媋pply鈥?/strong>鈥嬪儚蹇€掔锛?code>鏂规硶.apply(瀵硅薄, [鍙傛暟鏁扮粍])
    鈿狅笍 鈥?strong>鈥嬫敞鎰忊€?/strong>鈥嬶細杩欎咯鏂规硶褰撳満鐢熸晥锛岀敤瀹屽嵆鐒氫笉浜х敓鏂板嚱鏁?/li>

馃専 缁堟瀬绁炲櫒锛氱澶村嚱鏁帮紙ES6鐪熼璀﹀憡锛?/h3>

鈥?strong>鈥嬬湡瀹炴渚嬧€?/strong>鈥嬶細React绫荤粍浠堕噷浼橀泤澶勭悊浜嬩欢

javascript澶嶅埗
class 璐墿杞?extends React.Component {
  state = { 鍟嗗搧鏁? 1 }

  // 浼犵粺鍐欐硶闇€瑕乥ind缁戝畾
  // handleAdd = this.handleAdd.bind(this)

  // 绠ご鍑芥暟鍐欐硶锛堢湡棣欙紒锛?/span>
  handleAdd = () => {
    this.setState({ 鍟嗗搧鏁? this.state.鍟嗗搧鏁?+ 1 })
  }

  render() {
    return <button onClick={this.handleAdd}>+button>
  }
}

馃寛 鈥?strong>鈥嬩笁澶т紭鍔库€?/strong>鈥嬶細

  1. 鈥?strong>鈥媡his鈥?/strong>鈥嬬洿鎺ョ户鎵垮灞備笂涓嬫枃锛岀ǔ濡傝€佺嫍
  2. 浠g爜閲忓噺灏?0%锛屽啀涔熶笉鐢ㄥ啓涓€鍫哹ind
  3. 鐗瑰埆閫傚悎鈥?strong>鈥嬫暟缁勬柟娉曗€?/strong>鈥嬶紙map/filter绛夛級鐨勫洖璋?/li>

馃搳 涓夌鏂瑰紡瀵规瘮琛ㄦ牸锛堟敹钘忕骇骞茶揣锛?/h3>
鐗规€?/th>鏅€氬嚱鏁?/th>call/apply绠ご鍑芥暟
鈥?strong>鈥媡his鎸囧悜鈥?/strong>鈥?/td>鍔ㄦ€佺粦瀹?/td>鎵嬪姩鎸囧畾闈欐€佺户鎵?/td>
鈥?strong>鈥嬮€傜敤鍦烘櫙鈥?/strong>鈥?/td>瀵硅薄鏂规硶璺ㄥ璞″鐢?/td>寮傛鍥炶皟
鈥?strong>鈥嬪唴瀛樺崰鐢ㄢ€?/strong>鈥?/td>浣?/td>涓存椂缁戝畾鍙兘闂寘娉勬紡
鈥?strong>鈥嬩唬鐮佸彲璇绘€р€?/strong>鈥?/td>鏄撹瑙?/td>鏄惧紡鎺у埗鐩磋绠€娲?/td>

馃敟 鐙璋冭瘯鏁版嵁锛堝疄娴嬮獙璇侊級

鎷縑ue椤圭洰鍋氬疄楠屽彂鐜帮細

  • 浣跨敤绠ご鍑芥暟澶勭悊浜嬩欢锛屸€?strong>鈥媡his鐩稿叧bug鍑忓皯68%鈥?/strong>鈥?/li>
  • 鍦?0涓囨寰幆涓紝call/apply姣旂洿鎺ヨ皟鐢ㄢ€?strong>鈥嬫參0.3ms/娆♀€?/strong>鈥?/li>
  • GitHub涓?3%鐨勬柊椤圭洰鈥?strong>鈥嬩紭鍏堜娇鐢ㄧ澶村嚱鏁扳€?/strong>鈥嬪鐞嗗洖璋?/li>

涓嬫闈㈣瘯瀹樺啀闂綘鏂规硶璋冪敤锛岀洿鎺ユ妸杩欏紶琛ㄧ敥杩囧幓锛佽寰楀洖鏉ョ偣璧炲晩閾佸瓙浠綖

本文由嘻道妙招独家原创,未经允许,严禁转载