ECMAScript ¼Ì³Ð»úÖÆÊµÏÖ
¼Ì³Ð»úÖÆµÄʵÏÖ
ÒªÓà ECMAScript ʵÏּ̳лúÖÆ£¬Äú¿ÉÒÔ´ÓÒª¼Ì³ÐµÄ»ùÀàÈëÊÖ¡£ËùÓпª·¢Õß¶¨ÒåµÄÀà¶¼¿É×÷Ϊ»ùÀà¡£³öÓÚ°²È«ÔÒò£¬±¾µØÀàºÍËÞÖ÷À಻ÄÜ×÷Ϊ»ùÀ࣬ÕâÑù¿ÉÒÔ·ÀÖ¹¹«Ó÷ÃÎʱàÒë¹ýµÄä¯ÀÀÆ÷¼¶µÄ´úÂ룬ÒòΪÕâЩ´úÂë¿ÉÒÔ±»ÓÃÓÚ¶ñÒâ¹¥»÷¡£
Ñ¡¶¨»ùÀàºó£¬¾Í¿ÉÒÔ´´½¨ËüµÄ×ÓÀàÁË¡£ÊÇ·ñʹÓûùÀàÍêÈ«ÓÉÄã¾ö¶¨¡£ÓÐʱ£¬Äã¿ÉÄÜÏë´´½¨Ò»¸ö²»ÄÜÖ±½ÓʹÓõĻùÀ࣬ËüÖ»ÊÇÓÃÓÚ¸ø×ÓÀàÌṩͨÓõĺ¯Êý¡£ÔÚÕâÖÖÇé¿öÏ£¬»ùÀà±»¿´×÷³éÏóÀà¡£
¾¡¹Ü ECMAScript ²¢Ã»ÓÐÏñÆäËûÓïÑÔÄÇÑùÑϸñµØ¶¨Òå³éÏóÀ࣬µ«ÓÐʱËüµÄÈ·»á´´½¨Ò»Ð©²»ÔÊÐíʹÓõÄÀࡣͨ³££¬ÎÒÃdzÆÕâÖÖÀàΪ³éÏóÀà¡£
´´½¨µÄ×ÓÀཫ¼Ì³Ð³¬ÀàµÄËùÓÐÊôÐԺͷ½·¨£¬°üÀ¨¹¹Ô캯Êý¼°·½·¨µÄʵÏÖ¡£¼Çס£¬ËùÓÐÊôÐԺͷ½·¨¶¼Êǹ«Óõģ¬Òò´Ë×ÓÀà¿ÉÖ±½Ó·ÃÎÊÕâЩ·½·¨¡£×ÓÀ໹¿ÉÌí¼Ó³¬ÀàÖÐûÓеÄÐÂÊôÐԺͷ½·¨£¬Ò²¿ÉÒÔ¸²¸Ç³¬ÀàµÄÊôÐԺͷ½·¨¡£
¼Ì³ÐµÄ·½Ê½
ºÍÆäËû¹¦ÄÜÒ»Ñù£¬ECMAScript ʵÏּ̳еķ½Ê½²»Ö¹Ò»ÖÖ¡£ÕâÊÇÒòΪ JavaScript Öеļ̳лúÖÆ²¢²»ÊÇÃ÷È·¹æ¶¨µÄ£¬¶øÊÇͨ¹ýÄ£·ÂʵÏֵġ£ÕâÒâζ×ÅËùÓеļ̳Ðϸ½Ú²¢·ÇÍêÈ«ÓɽâÊͳÌÐò´¦Àí¡£×÷Ϊ¿ª·¢Õߣ¬ÄãÓÐȨ¾ö¶¨×îÊÊÓõļ̳з½Ê½¡£
ÏÂÃæÎªÄú½éÉܼ¸ÖÖ¾ßÌåµÄ¼Ì³Ð·½Ê½¡£
¶ÔÏóð³ä
¹¹ÏëÔʼµÄ ECMAScript ʱ£¬¸ù±¾Ã»´òËãÉè¼Æ¶ÔÏóð³ä£¨object masquerading£©¡£ËüÊÇÔÚ¿ª·¢Õß¿ªÊ¼Àí½âº¯ÊýµÄ¹¤×÷·½Ê½£¬ÓÈÆäÊÇÈçºÎÔÚº¯Êý»·¾³ÖÐʹÓà this ¹Ø¼ü×Öºó²Å·¢Õ¹³öÀ´¡£
ÆäÔÀíÈçÏ£º¹¹Ô캯ÊýʹÓà this ¹Ø¼ü×Ö¸øËùÓÐÊôÐԺͷ½·¨¸³Öµ£¨¼´²ÉÓÃÀàÉùÃ÷µÄ¹¹Ô캯Êý·½Ê½£©¡£ÒòΪ¹¹Ô캯ÊýÖ»ÊÇÒ»¸öº¯Êý£¬ËùÒÔ¿Éʹ ClassA ¹¹Ô캯Êý³ÉΪ ClassB µÄ·½·¨£¬È»ºóµ÷ÓÃËü¡£ClassB ¾Í»áÊÕµ½ ClassA µÄ¹¹Ô캯ÊýÖж¨ÒåµÄÊôÐԺͷ½·¨¡£ÀýÈ磬ÓÃÏÂÃæµÄ·½Ê½¶¨Òå ClassA ºÍ ClassB£º
function ClassA(sColor) { this.color = sColor; this.sayColor = function () { alert(this.color); }; } function ClassB(sColor) { }
»¹¼ÇµÃÂ𣿹ؼü×Ö this ÒýÓõÄÊǹ¹Ô캯Êýµ±Ç°´´½¨µÄ¶ÔÏó¡£²»¹ýÔÚÕâ¸ö·½·¨ÖУ¬this Ö¸ÏòµÄËùÊôµÄ¶ÔÏó¡£Õâ¸öÔÀíÊÇ°Ñ ClassA ×÷Ϊ³£¹æº¯ÊýÀ´½¨Á¢¼Ì³Ð»úÖÆ£¬¶ø²»ÊÇ×÷Ϊ¹¹Ô캯Êý¡£ÈçÏÂʹÓù¹Ô캯Êý ClassB ¿ÉÒÔʵÏּ̳лúÖÆ£º
function ClassB(sColor) { this.newMethod = ClassA; this.newMethod(sColor); delete this.newMethod; }
ÔÚÕâ¶Î´úÂëÖУ¬Îª ClassA ¸³ÓèÁË·½·¨ newMethod£¨Çë¼Çס£¬º¯ÊýÃûÖ»ÊÇÖ¸ÏòËüµÄÖ¸Õ룩¡£È»ºóµ÷Óø÷½·¨£¬´«µÝ¸øËüµÄÊÇ ClassB ¹¹Ô캯ÊýµÄ²ÎÊý sColor¡£×îºóÒ»ÐдúÂëɾ³ýÁË¶Ô ClassA µÄÒýÓã¬ÕâÑùÒÔºó¾Í²»ÄÜÔÙµ÷ÓÃËü¡£
ËùÓÐÐÂÊôÐÔºÍз½·¨¶¼±ØÐëÔÚɾ³ýÁËз½·¨µÄ´úÂëÐкó¶¨Òå¡£·ñÔò£¬¿ÉÄܻḲ¸Ç³¬ÀàµÄÏà¹ØÊôÐԺͷ½·¨£º
function ClassB(sColor, sName) { this.newMethod = ClassA; this.newMethod(sColor); delete this.newMethod; this.name = sName; this.sayName = function () { alert(this.name); }; }
Ϊ֤Ã÷Ç°ÃæµÄ´úÂëÓÐЧ£¬¿ÉÒÔÔËÐÐÏÂÃæµÄÀý×Ó£º
var objA = new ClassA("blue"); var objB = new ClassB("red", "John"); objA.sayColor(); //Êä³ö "blue" objB.sayColor(); //Êä³ö "red" objB.sayName(); //Êä³ö "John"
¶ÔÏóð³ä¿ÉÒÔʵÏÖ¶àÖØ¼Ì³Ð
ÓÐȤµÄÊÇ£¬¶ÔÏóð³ä¿ÉÒÔÖ§³Ö¶àÖØ¼Ì³Ð¡£Ò²¾ÍÊÇ˵£¬Ò»¸öÀà¿ÉÒԼ̳жà¸ö³¬Àà¡£Óà UML ±íʾµÄ¶àÖØ¼Ì³Ð»úÖÆÈçÏÂͼËùʾ£º

ÀýÈ磬Èç¹û´æÔÚÁ½¸öÀà ClassX ºÍ ClassY£¬ClassZ Ïë¼Ì³ÐÕâÁ½¸öÀ࣬¿ÉÒÔʹÓÃÏÂÃæµÄ´úÂ룺
function ClassZ() { this.newMethod = ClassX; this.newMethod(); delete this.newMethod; this.newMethod = ClassY; this.newMethod(); delete this.newMethod; }
ÕâÀï´æÔÚÒ»¸ö±×¶Ë£¬Èç¹û´æÔÚÁ½¸öÀà ClassX ºÍ ClassY ¾ßÓÐͬÃûµÄÊôÐÔ»ò·½·¨£¬ClassY ¾ßÓиßÓÅÏȼ¶¡£ÒòΪËü´ÓºóÃæµÄÀà¼Ì³Ð¡£³ýÕâµãСÎÊÌâÖ®Í⣬ÓöÔÏóð³äʵÏÖ¶àÖØ¼Ì³Ð»úÖÆÇá¶øÒ×¾Ù¡£
ÓÉÓÚÕâÖּ̳з½·¨µÄÁ÷ÐУ¬ECMAScript µÄµÚÈý°æÎª Function ¶ÔÏó¼ÓÈëÁËÁ½¸ö·½·¨£¬¼´ call() ºÍ apply()¡£
call() ·½·¨
call() ·½·¨ÊÇÓë¾µäµÄ¶ÔÏóð³ä·½·¨×îÏàËÆµÄ·½·¨¡£ËüµÄµÚÒ»¸ö²ÎÊýÓÃ×÷ this µÄ¶ÔÏ󡣯äËû²ÎÊý¶¼Ö±½Ó´«µÝ¸øº¯Êý×ÔÉí¡£ÀýÈ磺
function sayColor(sPrefix,sSuffix) { alert(sPrefix + this.color + sSuffix); }; var obj = new Object(); obj.color = "blue"; sayColor.call(obj, "The color is ", "a very nice color indeed.");
ÔÚÕâ¸öÀý×ÓÖУ¬º¯Êý sayColor() ÔÚ¶ÔÏóÍⶨÒ壬¼´Ê¹Ëü²»ÊôÓÚÈκζÔÏó£¬Ò²¿ÉÒÔÒýÓùؼü×Ö this¡£¶ÔÏó obj µÄ color ÊôÐÔµÈÓÚ blue¡£µ÷Óà call() ·½·¨Ê±£¬µÚÒ»¸ö²ÎÊýÊÇ obj£¬ËµÃ÷Ó¦¸Ã¸³Óè sayColor() º¯ÊýÖÐµÄ this ¹Ø¼ü×ÖÖµÊÇ obj¡£µÚ¶þ¸öºÍµÚÈý¸ö²ÎÊýÊÇ×Ö·û´®¡£ËüÃÇÓë sayColor() º¯ÊýÖеIJÎÊý sPrefix ºÍ sSuffix Æ¥Å䣬×îºóÉú³ÉµÄÏûÏ¢ "The color is blue, a very nice color indeed." ½«±»ÏÔʾ³öÀ´¡£
ÒªÓë¼Ì³Ð»úÖÆµÄ¶ÔÏóð³ä·½·¨Ò»ÆðʹÓø÷½·¨£¬Ö»Ð轫ǰÈýÐеĸ³Öµ¡¢µ÷ÓúÍɾ³ý´úÂëÌæ»»¼´¿É£º
function ClassB(sColor, sName) { //this.newMethod = ClassA; //this.newMethod(color); //delete this.newMethod; ClassA.call(this, sColor); this.name = sName; this.sayName = function () { alert(this.name); }; }
ÕâÀÎÒÃÇÐèÒªÈà ClassA ÖеĹؼü×Ö this µÈÓÚд´½¨µÄ ClassB ¶ÔÏó£¬Òò´Ë this ÊǵÚÒ»¸ö²ÎÊý¡£µÚ¶þ¸ö²ÎÊý sColor ¶ÔÁ½¸öÀàÀ´Ëµ¶¼ÊÇΨһµÄ²ÎÊý¡£
apply() ·½·¨
apply() ·½·¨ÓÐÁ½¸ö²ÎÊý£¬ÓÃ×÷ this µÄ¶ÔÏóºÍÒª´«µÝ¸øº¯ÊýµÄ²ÎÊýµÄÊý×é¡£ÀýÈ磺
function sayColor(sPrefix,sSuffix) { alert(sPrefix + this.color + sSuffix); }; var obj = new Object(); obj.color = "blue"; sayColor.apply(obj, new Array("The color is ", "a very nice color indeed."));
Õâ¸öÀý×ÓÓëÇ°ÃæµÄÀý×ÓÏàͬ£¬Ö»ÊÇÏÖÔÚµ÷ÓõÄÊÇ apply() ·½·¨¡£µ÷Óà apply() ·½·¨Ê±£¬µÚÒ»¸ö²ÎÊýÈÔÊÇ obj£¬ËµÃ÷Ó¦¸Ã¸³Óè sayColor() º¯ÊýÖÐµÄ this ¹Ø¼ü×ÖÖµÊÇ obj¡£µÚ¶þ¸ö²ÎÊýÊÇÓÉÁ½¸ö×Ö·û´®¹¹³ÉµÄÊý×飬Óë sayColor() º¯ÊýÖеIJÎÊý sPrefix ºÍ sSuffix Æ¥Å䣬×îºóÉú³ÉµÄÏûÏ¢ÈÔÊÇ "The color is blue, a very nice color indeed."£¬½«±»ÏÔʾ³öÀ´¡£
¸Ã·½·¨Ò²ÓÃÓÚÌæ»»Ç°ÈýÐеĸ³Öµ¡¢µ÷ÓúÍɾ³ýз½·¨µÄ´úÂ룺
function ClassB(sColor, sName) { //this.newMethod = ClassA; //this.newMethod(color); //delete this.newMethod; ClassA.apply(this, new Array(sColor)); this.name = sName; this.sayName = function () { alert(this.name); }; }
ͬÑùµÄ£¬µÚÒ»¸ö²ÎÊýÈÔÊÇ this£¬µÚ¶þ¸ö²ÎÊýÊÇÖ»ÓÐÒ»¸öÖµ color µÄÊý×é¡£¿ÉÒÔ°Ñ ClassB µÄÕû¸ö arguments ¶ÔÏó×÷ΪµÚ¶þ¸ö²ÎÊý´«µÝ¸ø apply() ·½·¨£º
function ClassB(sColor, sName) { //this.newMethod = ClassA; //this.newMethod(color); //delete this.newMethod; ClassA.apply(this, arguments); this.name = sName; this.sayName = function () { alert(this.name); }; }
µ±È»£¬Ö»Óг¬ÀàÖеIJÎÊý˳ÐòÓë×ÓÀàÖеIJÎÊý˳ÐòÍêȫһÖÂʱ²Å¿ÉÒÔ´«µÝ²ÎÊý¶ÔÏó¡£Èç¹û²»ÊÇ£¬¾Í±ØÐë´´½¨Ò»¸öµ¥¶ÀµÄÊý×飬°´ÕÕÕýÈ·µÄ˳Ðò·ÅÖòÎÊý¡£´ËÍ⣬»¹¿ÉʹÓà call() ·½·¨¡£
ÔÐÍÁ´£¨prototype chaining£©
¼Ì³ÐÕâÖÖÐÎʽÔÚ ECMAScript ÖÐÔ±¾ÊÇÓÃÓÚÔÐÍÁ´µÄ¡£ÉÏÒ»Õ½éÉÜÁ˶¨ÒåÀàµÄÔÐÍ·½Ê½¡£ÔÐÍÁ´À©Õ¹ÁËÕâÖÖ·½Ê½£¬ÒÔÒ»ÖÖÓÐȤµÄ·½Ê½ÊµÏּ̳лúÖÆ¡£
ÔÚÉÏÒ»ÕÂѧ¹ý£¬prototype ¶ÔÏóÊǸöÄ£°å£¬ÒªÊµÀý»¯µÄ¶ÔÏó¶¼ÒÔÕâ¸öÄ£°åΪ»ù´¡¡£×ܶøÑÔÖ®£¬prototype ¶ÔÏóµÄÈκÎÊôÐԺͷ½·¨¶¼±»´«µÝ¸øÄǸöÀàµÄËùÓÐʵÀý¡£ÔÐÍÁ´ÀûÓÃÕâÖÖ¹¦ÄÜÀ´ÊµÏּ̳лúÖÆ¡£
Èç¹ûÓÃÔÐÍ·½Ê½Öض¨ÒåÇ°ÃæÀý×ÓÖеÄÀ࣬ËüÃǽ«±äΪÏÂÁÐÐÎʽ£º
function ClassA() {
}
ClassA.prototype.color = "blue";
ClassA.prototype.sayColor = function () {
alert(this.color);
};
function ClassB() {
}
ClassB.prototype = new ClassA();
ÔÐÍ·½Ê½µÄÉñÆæÖ®´¦ÔÚÓÚÍ»³öÏÔʾµÄÀ¶É«´úÂëÐС£ÕâÀ°Ñ ClassB µÄ prototype ÊôÐÔÉèÖÃ³É ClassA µÄʵÀý¡£ÕâºÜÓÐÒâ˼£¬ÒòΪÏëÒª ClassA µÄËùÓÐÊôÐԺͷ½·¨£¬µ«ÓÖ²»ÏëÖð¸ö½«ËüÃÇ ClassB µÄ prototype ÊôÐÔ¡£»¹ÓÐ±È°Ñ ClassA µÄʵÀý¸³Óè prototype ÊôÐÔ¸üºÃµÄ·½·¨Âð£¿
×¢Ò⣺µ÷Óà ClassA µÄ¹¹Ô캯Êý£¬Ã»ÓиøËü´«µÝ²ÎÊý¡£ÕâÔÚÔÐÍÁ´ÖÐÊDZê×¼×ö·¨¡£ÒªÈ·±£¹¹Ô캯ÊýûÓÐÈκβÎÊý¡£
Óë¶ÔÏóð³äÏàËÆ£¬×ÓÀàµÄËùÓÐÊôÐԺͷ½·¨¶¼±ØÐë³öÏÖÔÚ prototype ÊôÐÔ±»¸³Öµºó£¬ÒòΪÔÚËü֮ǰ¸³ÖµµÄËùÓз½·¨¶¼»á±»É¾³ý¡£ÎªÊ²Ã´£¿ÒòΪ prototype ÊôÐÔ±»Ìæ»»³ÉÁËжÔÏó£¬Ìí¼ÓÁËз½·¨µÄÔʼ¶ÔÏ󽫱»Ïú»Ù¡£ËùÒÔ£¬Îª ClassB ÀàÌí¼Ó name ÊôÐÔºÍ sayName() ·½·¨µÄ´úÂëÈçÏ£º
function ClassB() { } ClassB.prototype = new ClassA(); ClassB.prototype.name = ""; ClassB.prototype.sayName = function () { alert(this.name); };
¿Éͨ¹ýÔËÐÐÏÂÃæµÄÀý×Ó²âÊÔÕâ¶Î´úÂ룺
var objA = new ClassA(); var objB = new ClassB(); objA.color = "blue"; objB.color = "red"; objB.name = "John"; objA.sayColor(); objB.sayColor(); objB.sayName();
´ËÍ⣬ÔÚÔÐÍÁ´ÖУ¬instanceof ÔËËã·ûµÄÔËÐз½Ê½Ò²ºÜ¶ÀÌØ¡£¶Ô ClassB µÄËùÓÐʵÀý£¬instanceof Ϊ ClassA ºÍ ClassB ¶¼·µ»Ø true¡£ÀýÈ磺
var objB = new ClassB(); alert(objB instanceof ClassA); //Êä³ö "true" alert(objB instanceof ClassB); //Êä³ö "true"
ÔÚ ECMAScript µÄÈõÀàÐÍÊÀ½çÖУ¬ÕâÊǼ«ÆäÓÐÓõŤ¾ß£¬²»¹ýʹÓöÔÏóð³äʱ²»ÄÜʹÓÃËü¡£
ÔÐÍÁ´µÄ±×¶ËÊDz»Ö§³Ö¶àÖØ¼Ì³Ð¡£¼Çס£¬ÔÐÍÁ´»áÓÃÁíÒ»ÀàÐ͵ĶÔÏóÖØÐ´ÀàµÄ prototype ÊôÐÔ¡£
»ìºÏ·½Ê½
ÕâÖּ̳з½Ê½Ê¹Óù¹Ô캯Êý¶¨ÒåÀ࣬²¢·ÇʹÓÃÈκÎÔÐÍ¡£¶ÔÏóð³äµÄÖ÷ÒªÎÊÌâÊDZØÐëʹÓù¹Ô캯Êý·½Ê½£¬Õâ²»ÊÇ×îºÃµÄÑ¡Ôñ¡£²»¹ýÈç¹ûʹÓÃÔÐÍÁ´£¬¾ÍÎÞ·¨Ê¹Óôø²ÎÊýµÄ¹¹Ô캯ÊýÁË¡£¿ª·¢ÕßÈçºÎÑ¡ÔñÄØ£¿´ð°¸ºÜ¼òµ¥£¬Á½Õß¶¼Óá£
ÔÚǰһÕ£¬ÎÒÃÇÔø¾½²½â¹ý´´½¨ÀàµÄ×îºÃ·½Ê½ÊÇÓù¹Ô캯Êý¶¨ÒåÊôÐÔ£¬ÓÃÔÐͶ¨Òå·½·¨¡£ÕâÖÖ·½Ê½Í¬ÑùÊÊÓÃÓڼ̳лúÖÆ£¬ÓöÔÏóð³ä¼Ì³Ð¹¹Ô캯ÊýµÄÊôÐÔ£¬ÓÃÔÐÍÁ´¼Ì³Ð prototype ¶ÔÏóµÄ·½·¨¡£ÓÃÕâÁ½ÖÖ·½Ê½ÖØÐ´Ç°ÃæµÄÀý×Ó£¬´úÂëÈçÏ£º
function ClassA(sColor) { this.color = sColor; } ClassA.prototype.sayColor = function () { alert(this.color); }; function ClassB(sColor, sName) {ClassA.call(this, sColor);
this.name = sName; }ClassB.prototype = new ClassA();
ClassB.prototype.sayName = function () { alert(this.name); };
ÔÚ´ËÀý×ÓÖУ¬¼Ì³Ð»úÖÆÓÉÁ½ÐÐÍ»³öÏÔʾµÄÀ¶É«´úÂëʵÏÖ¡£ÔÚµÚÒ»ÐÐÍ»³öÏÔʾµÄ´úÂëÖУ¬ÔÚ ClassB ¹¹Ô캯ÊýÖУ¬ÓöÔÏóð³ä¼Ì³Ð ClassA ÀàµÄ sColor ÊôÐÔ¡£ÔÚµÚ¶þÐÐÍ»³öÏÔʾµÄ´úÂëÖУ¬ÓÃÔÐÍÁ´¼Ì³Ð ClassA ÀàµÄ·½·¨¡£ÓÉÓÚÕâÖÖ»ìºÏ·½Ê½Ê¹ÓÃÁËÔÐÍÁ´£¬ËùÒÔ instanceof ÔËËã·ûÈÔÄÜÕýÈ·ÔËÐС£
ÏÂÃæµÄÀý×Ó²âÊÔÁËÕâ¶Î´úÂ룺
var objA = new ClassA("blue"); var objB = new ClassB("red", "John"); objA.sayColor(); //Êä³ö "blue" objB.sayColor(); //Êä³ö "red" objB.sayName(); //Êä³ö "John"