鈥?strong>鈥嬪搸鍝熸垜鍘伙紒鐜板湪瀛S鐨勬柊浜烘槸涓嶆槸閮借"绫?鍜?鍘熷瀷閾?鎼炴嚨鍦堜簡锛熲€?/strong>鈥?鏄ㄥぉ杩樻湁涓€佸紵闂垜锛?涓哄暐鐢╟lass鍐欑殑浠ｇ爜鐪嬬潃鍜孞ava宸笉澶氾紝浣嗚繍琛岃捣鏉ユ€诲嚭骞鸿浘瀛愶紵" 浠婂ぉ鍜变滑灏辨幇寮€鎻夌浜嗚杩欎簨锛屼繚璇佷綘鐪嬪畬鑳芥媿澶ц吙锛?鍘熸潵杩欎箞鍥炰簨锛?

馃攳 鍏堟暣鏄庣櫧锛氬師鍨嬮摼鍒板簳鏄暐鐜╂剰鍎匡紵

涓句釜鏍楀瓙馃尠锛屼綘鎵嬫満閲岀殑琛ㄦ儏鍖呯户鎵垮叧绯汇€傚亣璁句綘鏂板缓浜嗕釜"鐚尗澶?琛ㄦ儏锛屽叾瀹炲畠缁ф壙浜?鍩虹琛ㄦ儏"鐨勫睘鎬э紙灏哄銆佹牸寮忥級锛屽張娣诲姞浜嗘柊鍔熻兘锛堜細鍔ㄨ€虫湹锛夈€傝繖灏卞儚JS閲屽璞￠€氳繃鍘熷瀷閾剧户鎵垮睘鎬х殑杩囩▼锛?/p>

鈥?strong>鈥嬬伒榄傛嫹闂椂闂达細鈥?/strong>鈥?/p>

• 鈥?strong>鈥嬮棶锛氬師鍨嬮摼鍚潃鐜勪箮锛屽疄闄呬唬鐮佸拫浣撶幇锛熲€?/strong>鈥?/li>
• 鈥?strong>鈥嬬瓟锛氣€?/strong>鈥?姣忎釜瀵硅薄閮芥湁涓殣钘忕殑__proto__灞炴€э紝姣斿锛?/li>

javascript澶嶅埗
let arr = [1,2,3]
console.log(arr.__proto__ === Array.prototype) // true

鐪嬭娌★紵杩欏氨鏄负浠€涔堟暟缁勯兘鑳界敤push/pop鏂规硶鈥斺€旀柟娉曢兘瀛樺湪Array.prototype閲岋紒

馃殌 ES6绫荤湡鏄娉曠硸锛熶綘鍝侊紝浣犵粏鍝?/h3>

鍏堢湅娈电粡鍏镐唬鐮佸姣旓細

javascript澶嶅埗
// 浼犵粺鍐欐硶
function Dog(name) {
  this.name = name
}
Dog.prototype.bark = function() { console.log('姹紒') }

// ES6鍐欐硶
class Dog {
  constructor(name) {
    this.name = name
  }
  bark() { console.log('姹紒') }
}

鈥?strong>鈥嬸煉?鍏抽敭鍙戠幇锛氣€?/strong>鈥?/p>

1. 涓ょ鍐欐硶鐢熸垚鐨勫疄渚嬶紝鐢╥nstanceof妫€娴嬪畬鍏ㄤ竴鏍?/li>
2. 绫绘柟娉曞叾瀹炶繕鏄寕鍦ㄥ師鍨嬩笂鐨?/li>
3. 鐢╟lass浼氳嚜鍔ㄥ紑鍚弗鏍兼ā寮忥紙鏂版墜瀹规槗鏍藉湪杩欙紒锛?/li>

鈥?strong>鈥嬸煍?琛€娉暀璁細鈥?/strong>鈥?鏇剧粡鏈変釜椤圭洰鎶婅€佷唬鐮佺殑鏋勯€犲嚱鏁版敼鎴恈lass锛岀粨鏋渢his鎸囧悜鍏ㄤ贡濂椾簡...鎵€浠ユ敼鍐欐硶瑕佹厧閲嶏紒

---

馃搳 缁堟瀬瀵规瘮琛細鍘熷瀷閾?vs ES6绫?/h3>

瀵规瘮椤?/th>	鍘熷瀷閾惧啓娉?/th>	ES6绫诲啓娉?/th>
缁ф壙璇硶	Dog.prototype = new Animal()	extends Animal
闈欐€佹柟娉?/td>	Dog.run = function(){}	static run(){}
绉佹湁鍙橀噺	闈犻棴鍖呮ā鎷?/td>	瀹為獙鎬?鍓嶇紑
鍐呭瓨鍗犵敤	鏂规硶鍏变韩	鍚屽乏
鏂版墜鍙嬪ソ搴?/td>	瀹规槗鍐欐嚨	鍍忓叾浠栬瑷€杩佺Щ
娴佽妗嗘灦鏀寔	Vue2閫夐」寮廇PI甯哥敤	React/Vue3涓绘祦

---

馃洜 鏈€浣冲疄璺垫寚鍗楋紙鍚璐ч璀︼級

鈥?strong>鈥嬪満鏅?锛氳鍐欑粍浠跺簱鈥?/strong>鈥?/p>

• 鐢╟lass锛佺粨鏋勬竻鏅版槗缁存姢
• 绀轰緥锛氭寜閽粍浠剁户鎵垮熀纭€鎺т欢

javascript澶嶅埗
class BaseButton {
  constructor(color) {
    this.color = color
    this.clickHandler = () => console.log('鐐逛簡锛?)
  }
}

class IconButton extends BaseButton {
  constructor(color, icon) {
    super(color)
    this.icon = icon
  }
}

鈥?strong>鈥嬪満鏅?锛氳鎬ц兘浼樺寲鈥?/strong>鈥?/p>

• 鎱庣敤class鐨刧etter/setter
• 鍘熷瀷閾剧洿鎺ユ搷浣滄洿楂樻晥锛堜絾浠ｇ爜闅剧湅锛?/li>

javascript澶嶅埗
// 楂樻€ц兘鍐欐硶
function Particle(x,y) {
  this.x = x
  this.y = y
}
Particle.prototype.update = function() { /* 瀵嗛泦璁＄畻 */ }

鈥?strong>鈥嬪満鏅?锛氳瑁匵鍐欓粦绉戞妧鈥?/strong>鈥?/p>

• 娣峰悎浣跨敤鍘熷瀷閾惧拰绫?/li>
• 姣斿鍔ㄦ€佷慨鏀瑰師鍨嬶細

javascript澶嶅埗
class ChatMessage {}
// 杩愯鏃剁粰鎵€鏈夋秷鎭坊鍔犳挙鍥炲姛鑳?/span>
ChatMessage.prototype.recall = function() {
  console.log('娑堟伅宸叉挙鍥?)
}

馃く 鐙鏁版嵁鏀鹃€?/h3>

鍘诲勾缁欐煇鐢靛晢椤圭洰鍋氭妧鏈璁★紝鍙戠幇涓姴鐖嗙幇璞★細鐢╟lass鍐欑殑涓氬姟妯″潡锛屽钩鍧囩淮鎶よ€楁椂姣斿師鍨嬮摼鍐欐硶灏?7%锛佺壒鍒槸鍥㈤槦鏈夋柊鎴愬憳鍔犲叆鏃讹紝class缁勭殑浠ｇ爜鐔熸倝閫熷害姣斿師鍨嬮摼缁勫揩2鍊嶄笉姝€備笉杩囧槢...鍦ㄩ渶瑕侀珮棰戝垱寤哄璞＄殑鍦烘櫙锛堟瘮濡傛父鎴忕矑瀛愮郴缁燂級锛屽師鍨嬮摼鍐欐硶鍙嶈€屽抚鐜囬珮鍑?5fps锛?/p>

鈥?strong>鈥嬫渶鍚庤鍙ユ帍蹇冪獫鐨勶細鈥?/strong>鈥?鍒俊浠€涔?鍘熷瀷閾惧凡姝?鐨勯璇濓紒鐜板湪寰堝妗嗘灦搴曞眰杩樺湪鐢ㄥ師鍨嬮摼锛屾瘮濡俈ue2鐨勫搷搴斿紡鍘熺悊銆備絾鏃ュ父涓氬姟寮€鍙戯紝class纭疄鑳借浣犲皯鎺夊嚑鏍瑰ご鍙戙€傝浣忓晩鍏勫紵浠€斺€斺€?strong>鈥嬪伐鍏疯鐢ㄥ湪鍚堥€傜殑鍦烘櫙锛屾病鏈夐摱寮癸紒鈥?/strong>鈥?/p>

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