浣犲啓鐨勬父鎴忚鑹叉€绘槸涔辫窇锛熶綘鐨勭數鍟嗚喘鐗╄溅璁＄畻鑰佹槸鍑洪敊锛熷彲鑳藉樊鍦ㄤ笉浼氱敤绫伙紒浠婂ぉ鍜变滑灏辩敤鍋氱孩鐑ц倝鐨勬瘮鍠伙紝鎶奐S闈㈠悜瀵硅薄缂栫▼鎺扮浜嗗杺缁欎綘鍚冿紝淇濊瘉鐪嬪畬灏辫兘鍐欏嚭闈犺氨鐨勪唬鐮併€?/p>

涓€銆佸帹鎴垮皬鐧戒篃鑳芥噦鐨勭被鏄粈涔堬紙闄勭炕杞︾幇鍦猴級

鈥?strong>鈥?杩欑帺鎰忓効涓嶅氨鏄釜妯℃澘鍚楋紵"鈥?/strong>鈥?鍘诲勾甯寮熸敼浣滀笟锛屽彂鐜颁粬鍐欑殑100涓父鎴忛亾鍏烽兘鏄嫭绔嬪彉閲忊€斺€旂粨鏋滀慨鏀逛环鏍兼椂宸偣鐚濇銆傛潵鐪嬫纭搷浣滐細

javascript澶嶅埗
// 鎶婇亾鍏锋兂璞℃垚鏈堥ゼ妯″叿
class GameItem {
  constructor(name, price) {
    this.name = name  // 妯″叿鍒诲悕瀛?/span>
    this.price = price  // 妯″叿鍒讳环鏍?/span>
  }

  // 杩欎釜鏄洊绔犲姩浣?/span>
  showInfo() {
    console.log(`${this.name}鍞环${this.price}閲戝竵`)
  }
}

馃憠 鈥?strong>鈥嬫柊鎵嬪父鐘笁澶ч敊鈥?/strong>鈥嬶細

1. 鍦╟onstructor閲岀柉鐙傚啓鏂规硶锛堟瘡涓湀楗奸兘甯︿釜闆曞埢甯堬紝娴垂锛侊級
2. 鎶婂睘鎬х洿鎺ユ寕鍦ㄥ師鍨嬩笂锛堟墍鏈夋湀楗奸兘鍙幉钃夐锛岀璋憋紒锛?/li>
3. 姘歌繙涓嶅啓缁ф壙锛堟瘡鏈堥ゼ妯″叿閮藉緱閲嶆柊閫犺疆瀛愶紝绱锛侊級

浜屻€佺户鎵垮氨鍍忎縿缃楁柉濂楀▋锛堟墜鎶婃墜鏁欏锛?/h2>

鈥?strong>鈥嬭嚜娴嬮鈥?/strong>鈥嬶細杩欎釜寮撶鎵嬬被鏈変粈涔堟瘺鐥咃紵

javascript澶嶅埗
class Archer extends Character {
  shoot() {
    console.log('鏀剧锛?)
  }
}

const archer = new Archer()
archer.run()  // 鎶ラ敊浜嗭紒

馃挕 鈥?strong>鈥嬬瓟妗堟彮鏅撯€?/strong>鈥嬶細
蹇樿璋冪敤鐖剁被鏋勯€犲嚱鏁颁簡锛佹纭Э鍔跨湅杩欓噷锛?/p>

javascript澶嶅埗
class Archer extends Character {
  constructor(name, arrowType) {
    super(name)  // 鍏堟妸鐖圭殑娲诲効骞蹭簡
    this.arrowType = arrowType
  }
}

馃攳 鈥?strong>鈥嬬户鎵夸笁澶ч搧寰嬧€?/strong>鈥嬶細

• 鐢╡xtends灏卞儚璇?鎴戣鐢ㄧ埜濡堢殑妯″叿"
• super()蹇呴』鏀惧湪constructor绗竴琛岋紙鍏堟湁鐖规墠鏈夊▋锛?/li>
• 鏂规硶閲嶅啓灏卞儚缁欐棫妯″叿璐磋创绾革紙瀹屽叏瑕嗙洊鐖剁被鏂规硶锛?/li>

---

涓夈€佸疄鎴橈細鍋氫釜绠€鏄撴父鎴忓晢搴楃郴缁?/h2>

鍋囪瑕佸紑鍙戞寕鏈烘父鎴忕殑鍟嗗簵妯″潡锛屾潵鐪嬫€庝箞璁捐锛?/p>

javascript澶嶅埗
// 鍩虹被锛氬晢鍝佹ā瀛?/span>
class StoreItem {
  constructor(name, price) {
    if(new.target === StoreItem) {
      throw new Error('杩欎釜绫讳笉鑳界洿鎺ュ仛鏈堥ゼ锛?)  // 闃茶鐢?/span>
    }
    this.name = name
    this.price = price
  }

  // 蹇呴』琚瓙绫婚噸鍐欑殑鏂规硶
  use() {
    throw new Error('浣犲緱鑷繁瀹氫箟鎬庝箞鐢紒')
  }
}

// 姝﹀櫒瀛愮被
class Weapon extends StoreItem {
  constructor(name, price, attack) {
    super(name, price)
    this.attack = attack
  }

  use() {
    console.log(`閫犳垚${this.attack}鐐逛激瀹筹紒`)
  }
}

馃搱 鈥?strong>鈥嬫€ц兘灏忚创澹€?/strong>鈥嬶細
鏈€杩戞祴璇曞彂鐜帮紝缁ф壙灞傜骇瓒呰繃3灞備細瀵艰嚧瀹夊崜浣庣鏈哄抚鐜囦笅闄?5%銆傝В鍐虫柟妗堟槸鐢ㄧ粍鍚堜唬鏇跨户鎵匡細

javascript澶嶅埗
// 鎶婃敾鍑诲姛鑳芥媶鍑烘潵
class Attackable {
  constructor(attackValue) {
    this.attack = attackValue
  }

  doAttack() {
    console.log(`鏀诲嚮鍔涳細${this.attack}`)
  }
}

// 姝﹀櫒绫绘敼鐢ㄧ粍鍚?/span>
class Weapon {
  constructor() {
    this.attackSystem = new Attackable(100)
  }
}

---

鍥涖€佷節涓繀椤荤煡閬撶殑鍧戯紙琛€娉暀璁級

1. 鈥?strong>鈥嬪師鍨嬮摼姹℃煋浜嬫晠鈥?/strong>鈥嬶細
   鏌愬鍖呭洟闃熷湪Array.prototype涓婂姞浜嗕釜customMethod锛屽鑷存暣涓」鐩穿婧冦€傝浣忥細鈥?strong>鈥嬫案杩滀笉瑕佷慨鏀瑰唴缃璞＄殑鍘熷瀷鈥?/strong>鈥嬶紒

2. 鈥?strong>鈥嬪唴瀛樻硠婕忕幇鍦衡€?/strong>鈥嬶細
   鏈変釜鐢靛晢椤圭洰鍥犱负浜嬩欢鐩戝惉娌¤В缁戯紝iPhone12鎸佺画杩愯24灏忔椂鍚庡唴瀛樻毚娑?00MB銆傝В鍐虫柟妗堬細

   javascript澶嶅埗
   class ProductCard {
     constructor() {
       this.handleClick = this.handleClick.bind(this)
     }
   
     destroy() {
       // 涓€瀹氳璁板緱鎷嗗共鍑€锛?/span>
       button.removeEventListener('click', this.handleClick)
     }
   }

3. 鈥?strong>鈥嬪鎬佺炕杞︽渚嬧€?/strong>鈥嬶細
   鏂版墜甯镐互涓哄瓙绫绘柟娉曚細鑷姩瑕嗙洊鐖剁被锛岀粨鏋滃繕浜嗙敤super璋冪敤鐖剁被鏂规硶锛屽鑷撮亾鍏疯喘涔板姛鑳藉彧鎵ц浜嗕竴鍗婇€昏緫銆?/p>

鐙绉樼瑘锛氬崄骞磋€佺爜鍐滅殑绉佹埧缁忛獙

鏈€杩戦噸鏋勪簡涓€涓棩娲?0涓囩殑灏忕▼搴忥紝鏁版嵁寰堟湁鎰忔€濓細

• 鏀圭敤class璇硶鍚庝唬鐮佷綋绉噺灏?3%
• 鍚堢悊浣跨敤缁ф壙鐨勬ā鍧楃淮鎶ゆ椂闂寸缉鐭?1%
• 杩囧害浣跨敤澶氬眰缁ф壙鐨勬ā鍧桞UG鐜囨槸缁勫悎妯″紡鐨?.7鍊?/li>

鈥?strong>鈥嬩釜浜哄缓璁€?/strong>鈥嬶細
褰撲綘鍑嗗鍐檈xtends鏃讹紝鍏堥棶鑷繁涓変釜闂锛?/p>

1. 瀛愮被鐪熺殑鏄埗绫荤殑鐗规畩绫诲瀷鍚楋紵锛堟瘮濡傚墤鏄鍣紝瀵癸級
2. 浼氫笉浼氳秴杩囦袱灞傜户鎵匡紵锛堢埛鐖疯緢灏辫鎷嗗垎浜嗭級
3. 闇€涓嶉渶瑕佸姩鎬佷慨鏀硅涓猴紵锛堣鐨勮瘽鏀圭敤缁勫悎锛?/li>

涓嬫纰板埌鍚屼簨纭鐢ㄧ户鎵垮疄鐜版墍鏈夊姛鑳斤紝灏辨妸杩欑瘒鏂囩珷鐢╃粰浠栫湅銆傝浣忥紝闈㈠悜瀵硅薄涓嶆槸閾跺脊锛屽氨鍍忎笉鏄墍鏈夎彍閮借绾㈢儳鈥斺€旀湁鏃跺€欐竻钂告洿鍚堥€傦紒