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 ±íʾµÄ¶àÖØ¼Ì³Ð»úÖÆÈçÏÂͼËùʾ£º

¼Ì³Ð»úÖÆ UML ͼʾʵÀý

ÀýÈ磬Èç¹û´æÔÚÁ½¸öÀà ClassX ºÍ ClassY£¬ClassZ Ïë¼Ì³ÐÕâÁ½¸öÀ࣬¿ÉÒÔʹÓÃÏÂÃæµÄ´úÂ룺

function ClassZ() {
    this.newMethod = ClassX;
    this.newMethod();
    delete this.newMethod;

    this.newMethod = ClassY;
    this.newMethod();
    delete this.newMethod;
}

TIY

ÕâÀï´æÔÚÒ»¸ö±×¶Ë£¬Èç¹û´æÔÚÁ½¸öÀà 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);
    };
}

TIY

ÕâÀÎÒÃÇÐèÒªÈà 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);
    };
}

TIY

µ±È»£¬Ö»Óг¬ÀàÖе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();

TIY

´ËÍ⣬ÔÚÔ­ÐÍÁ´ÖУ¬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"

TIY

VUE