鍝庯紝鍚勪綅鏈夋病鏈夐亣鍒拌繃杩欑鎯呭喌锛熷ソ涓嶅鏄撳啓浜嗕釜鐗涢€肩殑琛ㄥ崟鍩虹被锛岀粨鏋滃瓙绫讳竴閲嶅啓楠岃瘉鏂规硶锛屾暣涓〃鍗曠獊鐒惰繛鏈€鍩虹鐨勫繀濉」閮戒笉妫€鏌ヤ簡锛佷粖澶╁挶浠氨鐢ㄨ繖涓湡瀹炲紑鍙戝満鏅紝鎵嬫妸鎵嬫暀浣犱繚浣忕埗绫绘牳蹇冮€昏緫鐨勪笁澶х粷鎷涖€?/p>

鍦烘櫙涓€锛氭敞鍐岃〃鍗曞繕璁板繀濉牎楠?/h3>

鎯宠薄浣犳鍦ㄥ紑鍙戠敤鎴锋敞鍐屾ā鍧楋紝鍩虹被宸茬粡瀹炵幇浜嗗繀濉」鏍￠獙锛?/p>

javascript澶嶅埗
class FormValidator {
  validate() {
    // 鍩虹蹇呭～鏍￠獙
    if (!this.username) {
      throw '鐢ㄦ埛鍚嶄笉鑳戒负绌猴紒'
    }
    console.log('鉁?鍩虹鏍￠獙閫氳繃')
  }
}

class RegisterForm extends FormValidator {
  validate() {
    // 鉂?鑿滈笩甯歌閿欒锛氱洿鎺ヨ鐩栫埗绫绘柟娉?/span>
    if (this.password.length < 6) {
      throw '瀵嗙爜澶煭鍟︼紒'
    }
  }
}

// 娴嬭瘯鐢ㄤ緥
const form = new RegisterForm()
form.username = '' // 鏁呮剰鐣欑┖
form.validate() // 灞呯劧涓嶆姤閿欙紒瀹夊叏闅愭偅锛?/span>

鈥?strong>鈥嬬炕杞﹀師鍥犫€?/strong>鈥嬶細灏卞儚瑁呬慨鎴垮瓙鏃舵妸鎵块噸澧欑牳浜嗭紝瀛愮被瀹屽叏鎶涘純浜嗙埗绫荤殑瀹夊叏鏍￠獙銆傝繖鏃跺€欏氨闇€瑕佽鍑烘垜浠殑鏁戞槦鈥斺€?b>super澶ф硶锛?/p>

javascript澶嶅埗
class CorrectRegisterForm extends FormValidator {
  validate() {
    super.validate() // 鉁?鍏堟墽琛岀埗绫绘牎楠?/span>
    if (this.password.length < 6) {
      throw '瀵嗙爜澶煭鍟︼紒'
    }
    console.log('馃啎 鎵╁睍鏍￠獙閫氳繃')
  }
}

鈥?strong>鈥嬫暡榛戞澘鈥?/strong>鈥嬶細鍦ㄥ瓙绫绘柟娉曞紑澶磋皟鐢?code>super.method()锛屽氨鍍忓悆鐏攨鍏堜笅搴曟枡锛屼繚璇佸熀纭€鍛抽亾涓嶄細涓€?/p>

---

鍦烘櫙浜岋細闇€瑕佷慨鏀规墽琛岄『搴?/h3>

鏈夋椂鍊欐垜浠渶瑕佸湪鐖剁被閫昏緫鍓嶅悗鎻掑叆鏂伴€昏緫銆傛瘮濡傜數鍟嗗钩鍙扮殑淇冮攢琛ㄥ崟锛岃鍦ㄥ熀纭€鏍￠獙鍚庤拷鍔犱紭鎯犵爜鏍￠獙锛?/p>

javascript澶嶅埗
class PromotionForm extends FormValidator {
  validate() {
    // 鉂?閿欒椤哄簭瀵艰嚧浼樻儬鐮佹牎楠屽け鏁?/span>
    if (!this.couponCode) {
      throw '璇峰～鍐欎紭鎯犵爜'
    }
    super.validate()
  }
}

// 鉁?姝ｇ‘濮垮娍锛氬儚涓夋槑娌讳竴鏍峰寘瑁圭埗绫婚€昏緫
class CorrectPromotionForm extends FormValidator {
  validate() {
    console.log('馃攳 寮€濮嬪墠缃鏌?..')
    super.validate()
    if (!this.couponCode) {
      throw '璇峰～鍐欎紭鎯犵爜'
    }
    console.log('馃挵 浼樻儬鐮佹牎楠岄€氳繃')
  }
}

鈥?strong>鈥嬮伩鍧戞寚鍗椻€?/strong>鈥嬶細璁颁綇杩欎釜鍙ｈ瘈鈥斺€?b>鍓嶇疆閫昏緫鏀句笂澶达紝鐖剁被璋冪敤鍦ㄤ腑闂达紝鍚庣疆鎿嶄綔鏀句笅杈?/b>銆傚氨鍍忓彂蹇€掕鍏堝～鍗曞啀鎵撳寘鏈€鍚庤创鏉＄爜锛岄『搴忛敊浜嗗彲瑕佸嚭涔卞瓙銆?/p>

---

鍦烘櫙涓夛細澶氬眰缁ф壙杩炵幆濂?/h3>

褰撻亣鍒扮埛鐖风被鈫掔埗绫烩啋瀛愮被鐨勫鏉傜户鎵块摼鏃讹紝寰堝鏂版墜鐩存帴鎳甸€笺€傛瘮濡傚紑鍙戜笁绾ф潈闄愮郴缁燂細

javascript澶嶅埗
class BaseAuth {
  check() {
    console.log('馃攼 妫€鏌ュ熀纭€鏉冮檺')
  }
}

class AdminAuth extends BaseAuth {
  check() {
    super.check()
    console.log('馃憯 妫€鏌ョ鐞嗗憳鏉冮檺')
  }
}

class SuperAdminAuth extends AdminAuth {
  check() {
    // 鉂?鍙皟鐢ㄤ簡鐩存帴鐖剁被
    super.check()
    console.log('馃憫 妫€鏌ヨ秴绾х鐞嗗憳鏉冮檺')
  }
}

/* 
鉁?杈撳嚭椤哄簭锛?
馃攼 妫€鏌ュ熀纭€鏉冮檺 
馃憯 妫€鏌ョ鐞嗗憳鏉冮檺
馃憫 妫€鏌ヨ秴绾х鐞嗗憳鏉冮檺
*/

鈥?strong>鈥嬪喎鐭ヨ瘑鈥?/strong>鈥嬶細杩欓噷鐨?code>super.check()灏卞儚鎺ュ姏璧涗紶妫掞紝浼氳嚜鍔ㄨЕ鍙戞暣涓户鎵块摼鐨勮皟鐢ㄣ€傚畬鍏ㄤ笉闇€瑕佹墜鍔ㄩ€愮骇璋冪敤锛岃繖鍙兘鏄緢澶氭柊鎵嬩笉鐭ラ亾鐨勯殣钘忕壒鎬э紒

---

鐗规畩鍦烘櫙锛氬紓姝ユ柟娉曞鐞?/h3>

鐜颁唬鍓嶇寮€鍙戝厤涓嶄簡寮傛鎿嶄綔锛岃繖閲屾湁涓潙瑕佹敞鎰忋€傛瘮濡傜粰琛ㄥ崟澧炲姞鍥剧墖楠岃瘉鐮佹牎楠岋細

javascript澶嶅埗
class AsyncForm extends FormValidator {
  async validate() {
    super.validate() // 鉂?鎶ラ敊锛?/span>
    const isHuman = await checkCaptcha()
    if (!isHuman) throw '楠岃瘉鐮侀敊璇?
  }
}

鈥?strong>鈥嬮棶棰樻牴婧愨€?/strong>鈥嬶細濡傛灉鐖剁被鏂规硶鏄悓姝ョ殑鑰屽瓙绫绘敼鐢╝sync/await锛岀洿鎺ヨ皟鐢╯uper浼氬鑷碢romise閾炬柇瑁傘€傝繖鏃跺€欓渶瑕?b>杩傚洖鎴樻湳锛?/p>

javascript澶嶅埗
class CorrectAsyncForm extends FormValidator {
  async validate() {
    // 鉁?淇濆瓨鐖剁被鏂规硶寮曠敤
    const originalValidate = super.validate
    await new Promise(resolve => originalValidate.call(this, resolve))
    const isHuman = await checkCaptcha()
    if (!isHuman) throw '楠岃瘉鐮侀敊璇?
  }
}

鈥?strong>鈥嬪紑鍙戝績寰椻€?/strong>鈥嬶細閬囧埌寮傛鍦烘櫙鏃讹紝璁颁綇鐖剁被鏂规硶灏辨槸鏅€氬嚱鏁?/b>锛屽彲浠ョ敤call/apply鎵嬪姩鎺у埗鎵ц涓婁笅鏂囷紝鐏垫椿搴︽瘮鎯宠薄涓珮寰楀銆?/p>

---

涓汉韪╁潙鏃ヨ

鍒氬叆琛岄偅浼氬効锛屾垜鎬昏寰楃户鎵垮氨鏄?澶嶅埗绮樿创"鐖剁被浠ｇ爜銆傜洿鍒版湁娆＄嚎涓婁簨鏁呪€斺€斿洜涓哄瓙绫昏鐩栨柟娉曟椂婕忎簡鏉冮檺鏍￠獙锛屽鑷存櫘閫氱敤鎴疯兘鐪嬪埌绠＄悊鍛樺悗鍙般€傝繖鎵嶆槑鐧界埗绫绘柟娉曞氨鍍忎繚闄╀笣锛岄噸鍐欐椂淇濈暀super璋冪敤灏辨槸鍦ㄧ粰浠ｇ爜涓婁繚闄┿€?/p>

鏈変釜鍚屼簨鐨勬渚嬬壒鍒吀鍨嬶細浠栧湪瀛愮被鏂规硶閲屽啓浜?code>super.super.method()璇曞浘璺ㄧ骇璋冪敤鐖风埛绫伙紝缁撴灉褰撶劧鏄姤閿欍€傚叾瀹濲S鐨勭户鎵挎満鍒跺氨鍍忚嚜鍔ㄦ壎姊紝浣犲彧闇€瑕佸叧蹇冪洿鎺ヤ笂绾э紝绯荤粺浼氳嚜鍔ㄥ府浣犱紶閫掕皟鐢ㄣ€?/p>

鏈€鍚庤鍙ュ疄鍦ㄨ瘽锛?b>涓嶈涓轰簡缁ф壙鑰岀户鎵?/b>銆傚鏋滃彂鐜拌嚜宸卞湪澶氬眰缁ф壙涓绻佹搷浣渟uper锛屽彲鑳借鎯虫兂鏄笉鏄粍鍚堟ā寮忔洿鍚堥€傘€傛瘯绔燂紝浠ｇ爜涓嶆槸绁栧畻鐗屼綅锛屾病蹇呰渚涚潃涓嶈兘鏀瑰槢锛?/p>

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