当前位置: 首页 > Web前端 > JavaScript

原来class语法糖并没有那么难

时间:2023-03-27 00:47:46 JavaScript

ECMAScript6瀹炵幇浜哻lass锛屽叾瀹炲氨鏄竴涓娉曠硸锛屽彧鏄畠鐨勫嚭鐜板彲浠ヨJS缂栫爜鏇存竻鏅帮紝鏇存帴杩戦潰鍚戝璞$紪绋嬨€傚疄鐜板師鐞嗛鍏堟垜浠湅涓€涓婨S6涓璫lass鐨勫疄鐜板拰ES5鏋勯€犲嚱鏁扮殑瀹炵幇銆備笉闅剧湅鍑猴紝constructor鍏跺疄灏辨槸涓€涓瀯閫犳柟娉曪紝鎸囧悜ES5鐨勬瀯閫犲嚱鏁般€傜劧鍚庣被鏈韩鎸囧悜鏋勯€犲嚱鏁般€備篃灏辨槸璇达紝搴曞眰杩樻槸Constructor銆侲S6classPerson{constructor(name,age){this.name=name;杩欎釜銆傚勾榫?骞撮緞锛泒staticrun(){console.log("run");}say(){console.log("浣犲ソ锛?);}}ES5functionPerson(name,age){this.name=name;this.age=age;}Person.prototype.say=function(){console.log("hello!");};Person.run=function(){console.log("run");};babel缂栬瘧鍒嗘瀽閫氳繃babel缂栬瘧鍣ㄥ皢ES6浠g爜杞垚ES5浠g爜鍚庯紙浠g爜杞崲鍙互璇曡瘯babel瀹樻柟鍦ㄧ嚎宸ュ叿锛夛紝鍙互寰楀埌杩欎袱涓叧閿嚱鏁癬defineProperties鍜宊createClass锛屼笅闈㈡垜浠竴涓€鍒嗘瀽璁茶В銆?..varPerson=/*#__PURE__*/(function(){"usestrict";functionPerson(name,age){_classCallCheck(this,Person);this.name=name;this.age=age;}_createClass(Person,[{key:"say",value:functionsay(){console.log("hello!");},},],[{key:"run",value:functionrun(){console.log("run");},},]);returnPerson;})();\_createClass_createClass鍑芥暟涓昏鐢ㄤ簬鍦ㄦ瀯閫犲嚱鏁版垨鏋勯€犲嚱鏁板師鍨嬩笂閰嶇疆鍏叡鍑芥暟鍜岄潤鎬佹柟娉曪紝骞惰繑鍥炴瀯閫犲嚱鏁版湰韬€俧unction_createClass(Constructor,protoProps,staticProps){if(protoProps)_defineProperties(Constructor.prototype,protoProps);濡傛灉锛坰taticProps锛塤defineProperties锛堟瀯閫犲嚱鏁帮紝staticProps锛夛紱returnConstructor;}\_defineProperties_defineProperties鍑芥暟涓昏鐢ㄤ簬澹版槑鍏叡鍑芥暟鍜岄潤鎬佹柟娉曟弿杩扮锛屽苟闄勫姞鍒板綋鍓嶆瀯閫犲嚱鏁版垨鏋勯€犲嚱鏁板師鍨嬩笂銆傚畠鎺ユ敹涓や釜鍙傛暟target()鍜宲rops銆倀arget鎸囧悜褰撳墠鏋勯€犲嚱鏁版垨鏋勯€犲嚱鏁板師鍨媝rops鏁扮粍绫诲瀷锛屾寚鍚戝叕鍏卞嚱鏁板拰闈欐€佹柟娉曘€傞亶鍘嗘暟缁勫彲浠ョ湅鍒癳numerable榛樿涓篺alse锛屼篃灏辨槸璇寸被鐨勫唴閮ㄥ睘鎬ч粯璁ゆ槸涓嶅彲鏋氫妇鐨勩€侽bject.keys涓嶈兘鐢ㄤ簬閬嶅巻锛屽涓嬶細Object.keys(Person.prototype);//[]Object.keys(Person);//[]鍚屾椂鍦ㄩ亶鍘嗙殑鏃跺€欎篃浼氬垽鏂綋鍓嶆弿杩扮鏄惁鏈夊€硷紝濡傛灉瀛樺湪鍒欒缃畐ritable灞炴€т负true锛屽惁鍒欎娇鐢╣et鍜宻et灞炴€с€傞亶鍘嗙粨鏉燂紝閫氳繃Object.defineProperty涓哄綋鍓嶆瀯閫犲嚱鏁版垨鏋勯€犲嚱鏁板師鍨嬮厤缃弿杩扮锛岃嚦姝よ绫荤殑鍩烘湰瀹炵幇灏卞畬鎴愪簡銆俧unction_defineProperties(target,props){for(vari=0;i