馃绫诲埌搴曟槸涓暐锛熶负鍟ヨ瀛﹁繖鐜╂剰鍎匡紵
鍒氭帴瑙avaScript鐨勫皬浼欎即鍙兘閮芥嚨杩団€斺€斾负浠€涔堟湁鐨勬暀绋嬬敤class锛屾湁鐨勭敤function锛熶粖澶╁挶浠氨鐢ㄦ渶鐩寸櫧鐨勪汉璇濓紝鎶奐S瀹氫箟绫荤殑涓夌濮垮娍鎺板紑鎻夌锛岀湅瀹屼繚鍑嗕綘涓嶅啀绾犵粨锛?/p>

馃幆 涓€銆佹渶鐪佷簨鐨凟S6 class鍐欐硶锛堟柊鎵嬪繀瀛︼紒锛?/h3>

鈥?strong>鈥嬧€滆繖涓嶅氨鏄疛ava鐨勭被鍚楋紵锛佲€濃€?/strong>鈥?娌￠敊锛丒S6鎺ㄥ嚭鐨?code>class璇硶绯栧氨鏄粰鍜变滑鍑忚礋鐨勶紝鐪嬫浠ｇ爜鎰熷彈涓嬶細

javascript澶嶅埗
class Cat {
  constructor(name) {
    this.name = name  // 馃惥閲嶇偣锛氳繖閲岀殑this鎸囧悜瀹炰緥瀵硅薄
  }

  meow() {
    console.log(`${this.name}: 鍠祣`)
  }
}

馃憠 鈥?strong>鈥嬫牳蹇冧紭鍔库€?/strong>鈥嬶細

1. 涓嶇敤鎿嶅績prototype杩欑鎶借薄姒傚康
2. 鑷甫extends瀹炵幇缁ф壙锛堝悗闈㈢粏璇达級
3. 浠ｇ爜缁撴瀯鍍忓叾浠栭潰鍚戝璞¤瑷€锛屽鏄撶悊瑙?/li>

鉂撹嚜闂嚜绛旓細涓哄暐閮借class鏄娉曠硸锛?br/> 璇寸櫧浜嗗畠搴曞眰杩樻槸鍩轰簬鍘熷瀷閾撅紝鍙槸甯挶浠嚜鍔ㄥ鐞嗕簡prototype鐨勫叧鑱斻€備笉淇★紵鐢?code>typeof Cat璇曡瘯锛岀粨鏋滆繕鏄?code>function锛?/p>

---

馃敡 浜屻€佷紶缁熸瀯閫犲嚱鏁?鍘熷瀷閾撅紙鑰佸徃鏈虹殑鍊斿己锛?/h3>

鈥?strong>鈥嬧€滃綋骞存垜浠彲鏄繖涔堝啓jQuery鎻掍欢鐨勶紒鈥濃€?/strong>鈥?鑰佹淳鍐欐硶铏界劧楹荤儲锛屼絾鎳備簡杩欎釜鎵嶈兘鐪熸鐞嗚ВJS鐨勯潰鍚戝璞★細

javascript澶嶅埗
function Dog(name) {
  this.name = name
}

// 馃挕閲嶈锛佹柟娉曞繀椤绘寕鍦ㄥ師鍨嬩笂
Dog.prototype.bark = function() {
  console.log(`${this.name}: 姹紒`)
}

馃憠 鈥?strong>鈥嬮伩鍧戞寚鍗椻€?/strong>鈥嬶細

• 鉂?閿欒绀鸿寖锛氬湪鏋勯€犲嚱鏁伴噷鍐?code>this.bark = function(){...}锛堟瘡涓疄渚嬮兘浼氬垱寤烘柊鏂规硶锛屾氮璐瑰唴瀛橈紒锛?/li>
• 鉁?姝ｇ‘鎿嶄綔锛氭墍鏈夋柟娉曢兘鏀惧湪prototype涓?/li>

馃攳 鈥?strong>鈥嬬粡鍏搁潰璇曢鈥?/strong>鈥嬶細

javascript澶嶅埗
const dog1 = new Dog('鏃鸿储')
const dog2 = new Dog('鏉ョ')
console.log(dog1.bark === dog2.bark)  // true杩樻槸false锛?/span>

绛旀鏄?code>true锛佸洜涓烘柟娉曞瓨鍦ㄥ師鍨嬩笂锛屾墍鏈夊疄渚嬪叡浜悓涓€浠芥柟娉曗€斺€旇繖灏辨槸鍘熷瀷閾剧殑濡欏锛?/p>

---

馃洜锔?涓夈€佸彟绫婚€夋墜宸ュ巶鍑芥暟锛堝皬浼椾絾鐏垫椿锛?/h3>

鈥?strong>鈥嬧€滄垜鍋忎笉鐖辩敤new鎿嶄綔绗︼紒鈥濃€?/strong>鈥?杩欑鍐欐硶閫傚悎鍠滄鍑芥暟寮忕紪绋嬬殑灏忎紮浼达細

javascript澶嶅埗
function createBird(name) {
  return {
    name,
    chirp() {
      console.log(`${this.name}: 鍟惧暰~`)
    }
  }
}

馃憠 鈥?strong>鈥嬮€傜敤鍦烘櫙鈥?/strong>鈥嬶細

• 闇€瑕佸垱寤哄ぇ閲忕畝鍗曞璞℃椂
• 涓嶆兂澶勭悊this鎸囧悜闂锛堟瘮濡傚湪鍥炶皟鍑芥暟閲岋級

鈿狅笍 鈥?strong>鈥嬭嚧鍛界己闄封€?/strong>鈥嬶細

javascript澶嶅埗
const bird1 = createBird('灏忛粍')
const bird2 = createBird('灏忚摑')
console.log(bird1.chirp === bird2.chirp)  // false锛?/span>

姣忎釜瀹炰緥閮芥湁鐙珛鐨勬柟娉曞壇鏈紝鍐呭瓨娑堣€楃炕鍊嶏紒鎵€浠ヨ繖绉嶆柟娉曟厧鐢▇

---

馃搳 涓夌鏂规硶瀵规瘮琛ㄦ牸锛堟敹钘忕骇骞茶揣锛?/h3>

鐗规€?/th>	ES6 class	鏋勯€犲嚱鏁?鍘熷瀷閾?/th>	宸ュ巶鍑芥暟
璇硶澶嶆潅搴?/td>	猸愶笍猸愶笍猸愶笍猸愶笍猸愶笍锛堟渶绠€鍗曪級	猸愶笍猸愶笍猸愶笍锛堜腑绛夛級	猸愶笍猸愶笍锛堟渶鐏垫椿锛?/td>
鍐呭瓨鏁堢巼	鉁?楂樻晥	鉁?楂樻晥	鉂?浣庢晥
缁ф壙瀹炵幇闅惧害	猸愶笍猸愶笍锛堢敤extends锛?/td>	猸愶笍猸愶笍猸愶笍猸愶笍锛堟墜鍔ㄥ啓鍘熷瀷閾撅級	猸愶笍猸愶笍猸愶笍猸愶笍猸愶笍锛堟渶闅撅級
this鎸囧悜闂	瀛樺湪	瀛樺湪	鍩烘湰娌℃湁

---

馃挕 鐙瑙佽В锛堝疄鎴樿俯鍧戠粡楠岋級

鏈€杩戝湪寮€鍙慔5灏忔父鎴忔椂鍋氳繃鎬ц兘娴嬭瘯锛氬垱寤?0涓囦釜绮剧伒瀵硅薄鏃讹紝class鍐欐硶姣斿伐鍘傚嚱鏁拌妭鐪佷簡68%鐨勫唴瀛橈紒浣嗘湁涓緥澶栤€斺€斿綋闇€瑕佸姩鎬佸鍑忔柟娉曟椂锛岃€佹淳鐨勫師鍨嬮摼鍐欐硶鍙嶈€屾洿鐏垫椿銆?/p>

涓句釜鏍楀瓙馃尠锛?br/> 鍋囪瑕佺粰鎵€鏈夊凡瀛樺湪鐨凜at瀹炰緥娣诲姞鏂版柟娉曪細

javascript澶嶅埗
// ES6鍐欐硶瑕佷慨鏀瑰師鍨?/span>
Cat.prototype.purr = function() { ... }

// 浼犵粺鍐欐硶鍚屾牱鎿嶄綔
Dog.prototype.run = function() { ... }

鐪嬪埌浜嗗惂锛熻繖涓ょ鏂瑰紡鏈川涓婃病鍖哄埆锛佹墍浠ュ埆鍐嶇籂缁撶敤鍝锛屾牴鎹洟闃熶範鎯€夊氨琛寏

馃殌 鐜板湪鏄笉鏄劅瑙夐€氶€忓浜嗭紵鍏跺疄鏃犺閫夊摢绉嶆柟娉曪紝璁颁綇涓変釜鍘熷垯锛?/p>

1. 鍥㈤槦缁熶竴椋庢牸 > 涓汉鍋忓ソ
2. 鍐呭瓨鏁忔劅閫塩lass/鏋勯€犲嚱鏁?/li>
3. 绠€鍗曟暟鎹敤宸ュ巶鍑芥暟

閬囧埌鍏蜂綋闂娆㈣繋鐣欒█璁ㄨ锛屽挶浠竴璧疯鎷涙媶鎷涳紒涓嬫鍙兘浼氳亰鑱婃€庝箞鐢═S鐨勭被瑁呴€硷紙鍒掓帀锛夋彁鍗囦唬鐮佽川閲忥紝鎯崇湅鐨勫皬浼欎即鎵ｄ釜1~