Prototype Problem Analysis (blog triggered by a piece of bad code)

Source: Internet
Author: User
Tags dot net
Email: longsu2010atyeahdotnet someone sent me the following code a long time ago and asked me some questions. I simply wrote a blog to share it with you. I stated in advance that this blog only analyzes the problem and does not provide a solution (I do not know the person who wrote this code... SyntaxHighlighter. all ();

Email: longsu2010 at yeah dot net
Some people sent me the following code a long time ago and asked me some questions. I simply wrote a blog to share it with you. I stated in advance that this blog only analyzes the problem and does not provide a solution (I do not know the true intention of the person who wrote the code ).

It is a headache to read the code at first glance. I will not write the code at all. The Code is as follows:


Function aaa (sColor ){
This. color = sColor;
If (typeof aaa. _ is _ = "undefined "){
Aaa. prototype. sayColor = function (){
Alert (this. color );
};
}
Aaa. _ is _ = true;
}

Function bbb (sColor, name ){
This. name = name;
If (typeof bbb. _ iss _ = "undefined "){
Bbb. prototype = new aaa ();
Bbb. prototype. sayName = function (){
Alert (this. name );
};
}
Bbb. _ iss _ = true;
} After reading the code, I found that these are two constructors. First, add a method for operating the color attribute to the prototype when you use this function to create the first instance or directly call this function (which will pollute the global object. There is no problem with code correctness. Use the following code for testing:
Var a1 = new aaa ("red ");
Var a2 = new aaa ("green ");
Console. dir (a1 );
Console. dir (a2 );
Console. log (a1. _ proto _ = a2. _ proto _); // Output true

Now let's talk about the second constructor. When using this function to create the first instance or directly call this function (it will pollute the Global Object) the prototype of the function will be assigned a new value and an operation method will be added to the new original type, which has the meaning of inheritance. However, the problem is that the prototype is changed only when the first instance is created and the if statement is executed. It is too late to use the default prototype for the first instance. The test code is as follows:
Var bbb_proto = bbb. prototype; // first record the bbb prototype
Var b1 = new bbb ("red", "liuchen1 ");
Var b2 = new bbb ("green", "liuchen2 ");
Console. dir (b1 );
Console. dir (b2 );
Console. log (b1. _ proto _ = b2. _ proto _); // outputs false

Bbb. prototype = bbb_proto;
Var b3 = new bbb ("green", "liuchen3 ");
Console. log (b1. _ proto _ = b3. _ proto _); // Output true

The problem is analyzed here. Let's summarize it.
Conclusion: It is important to change the prototype of the constructor. Be cautious when changing the prototype dynamically, especially after you have created some instances. The created object does not use the new original object.

 

 

 


Let's say a few more words, as shown in the next interesting experiment (the experiment is carried out in chrome). Please read the code carefully.

 

Function (){}
Function B (){}
// Object. prototype. xxx = '-- 00 --'; // write in IE
New a (). _ proto _. _ proto _. xxx = "-- 00 --"; // write like this for non-IE
Console. log (new (). _ proto _ = new B (). _ proto _); // false // IE prints true because undefined = undefined
Console. log (new (). _ proto __. _ proto _ = new B (). _ proto __. _ proto _); // true // an error is returned for IE. Delete the test.
Console. log (Object. prototype = new a (). _ proto _. _ proto _); // true // IE reports an error. Delete the test.
Console. log (a. prototype instanceof Object); // true
Console. log (new a (). _ proto _ instanceof Object); // true // also pay attention to IE
Console. log (new a () instanceof Object) // true
Console. log (Object. prototype instanceof Object) // false
Console. log (a. prototype = B. prototype); // false
Console. log (new a (). _ proto _ = a. prototype); // true
Console. log (typeof (a. prototype); // object
Console. log (typeof (Object. prototype); // object
Console. log (new a (). xxx); // -- 00 --
Console. log (new B (). xxx); // -- 00 --
Console. log (Object. xxx); // -- 00 --
Console. log (new Object (). xxx); // -- 00 --
Console. log (window. xxx); // -- 00 --
Console. log (document. xxx); // -- 00 --
Console. log (document. head. xxx); // -- 00 --
Console. log (document. getElementById ("div"). xxx); // -- 00 -- // make sure that the dom node already exists.
Console. log ("global", xxx); // global -- 00 --
Yyy= "0000 ";
Delete window. yyy;
Console. log (window. yyy); // undefined writes some messy code, which is described below:
1. The end of all js Object prototype chains is the same Object, that is, the prototype attribute of the Object. This is why -- 00 -- is output.
2. By default, the constructor prototype is an instance of an Object. All instances created by this function share the same Object.
3. Modify the prototype function of an Object with severe consequences.
4. The output of global -- 00 is because xxx is found in the prototype chain of window when searching for variables. For details, study the js Variable Search rules.
5. Each function has the prototype attribute, and the function is also an object, so it also has a prototype chain. If a function is used as an object, the property search is performed on the prototype chain. If a function is used as a constructor (in the form of new function name (), a new object is created, and the object uses the prototype of the function as the prototype chain.
6. If chrome 25 is used in the above experiments, the IE browser will be somewhat different, especially the cute IE6, 7, and 8. The good news is that win xp is about to exit the stage of history. IE6, 7, and 8 should also come together.

Longsu2010 at yeah dot net my mailbox. Don't send me any emails ,:).
There is still a lot to write about the prototype, but the relationship with this article is not that big, you can no longer write.

 


 

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.