Home > Developer > JavaScript
We know that adding prototype to JavaScript classes is very easy. The following two methods are commonly used. Are there any differences between the two methods?
JScript Class:
Copy codeThe Code is as follows:
Function JSClass ()
{
}
Extends prototype method:
Copy codeThe Code is as follows:
JSClass. prototype. MethodA = function ()
{
};
Or
Copy codeThe Code is as follows:
Function = JSClass. prototype. MethodA ()
{
};
# Re: differences between the two implementations of the JS class definition Prototype Method
Let me first make a simple difference: the first method is an anonymous method, and the second method is named "JSClass. prototype. MethodA ".
| Birdshome
# Re: differences between the two implementations of the JS class definition Prototype Method
<BODY>
<Script>
Function JSClass ()
{
}
Function = JSClass. prototype. MethodA ()
{
};
</Script>
</BODY>
An error occurred.
| Success
# Re: differences between the two implementations of the JS class definition Prototype Method
Faint, I found that when FreeTextBox modifies a small amount of data (one or two characters), it sometimes does not work :(
I wrote "=" by mistake, but I remember I modified it.
| Birdshome
# Re: differences between the two implementations of the JS class definition Prototype Method
In fact, the two original definition methods can be simplified and discussed first. They are considered as two functions, as follows:
Foo1 ();
Function Foo1 ()
{
Alert ('this is Foo1 .');
}
And Foo2 ();
Var Foo2 = function ()
{
Alert ('this is Foo2 .');
}
Obviously there will be no errors when running the first one, but there will be problems when running the second one. At this time, the system will say: Microsoft JScript runtime error: Object expected. This means that function definition (Foo1) has the highest initialization priority in the script parser, which is easy to understand. If the function is not processed first, there is no way to deal with the function calls in the function. If we first define fn1 () and then define fn2 (), but call fn2 from fn1, the resolution will fail. Why can't Foo2 be initialized? Foo2 is not a function definition at all. It is a standard value assignment statement. Foo2 (Foo2 () can be used like a standard function ()), this is because it points to an instance of a function object.
| Birdshome
# Re: differences between the two implementations of the JS class definition Prototype Method
Let's take a look at the two import methods in the original method. Different execution priorities also determine their differences in use. See the following example:
<Script language = "javascript">
Function NormalClass ()
{
This. m_Property1 = 'p1 in Normal Class .';
This. m_Property2 = 'p2 in Normal Class .';
This. toString = function ()
{
Return '[class NormalClass]';
}
Return new InnerClass ();
Function InnerClass ()
{
This. m_Property1 = 'p1 in Inner Class .';
This. m_Property2 = 'p2 in Inner Class .';
This. toString = function ()
{
Return '[class InnerClass]';
}
}
InnerClass. prototype. Method1 = function ()
{
Alert (this. m_Property1 );
};
Function InnerClass. prototype. Method2 ()
{
Alert (this. m_Property2 );
};
}
</Script>
Run:
Var nc = new NormalClass ();
Nc. Method1 ();
Nc. Method2 ();
What is the effect? Why?
| Birdshome
# Re: differences between the two implementations of the JS class definition Prototype Method
The final result is that nc. Method1 () is not defined and nc. Method2 () runs normally.
It is not surprising that InnerClass. prototype. Method1 = function () depends on the execution of the value assignment statement, and function InnerClass. prototype. Method2 () is initialized by the script engine with the highest priority.
| Birdshome
# Re: differences between the two implementations of the JS class definition Prototype Method
I tested your code in Antechinus JavaScript Editor:
Function InnerClass. prototype. Method2 () error,
SyntaxError: missing (before formal parameters See:. prototype. Method2 (
| Error
# Re: differences between the two implementations of the JS class definition Prototype Method
@ Error
Have you tried IE?
| Birdshome
# Re: differences between the two implementations of the JS class definition Prototype Method
The same error is reported when I use FF: missing (before formal parameters See:. prototype. Method2 (
| Jzz
# Re: differences between the two implementations of the JS class definition Prototype Method
Return new InnerClass (); move this line
Function InnerClass. prototype. Method2 ()
{
Alert (this. m_Property2 );
};
The following error occurs when ie runs normally. FF: missing (before formal parameters See:. prototype. Method2 (
Ie is executed in security order, but NS series is not!
When FF executes the function InnerClass. prototype. Method2 (), it does not know this InnerClass class. Naturally, it cannot come to the prototype. xxx class for no reason.
| Doutu
# Re: differences between the two implementations of the JS class definition Prototype Method
@ Doutu
Put return new InnerClass (); after the function InnerClass. prototype. Method2 () method, it completely violates the original intention of writing this example. This example shows that IE has a higher resolution priority for function foo (), while foo = function () is just a normal value assignment statement. As for the situation in ff, I have not studied it. Since ff cannot find the InnerClass after return, it indicates that the sequential parsing function foo () is also defined.
| Birdshome
# Re: differences between the two implementations of the JS class definition Prototype Method
Alas. Poor people only use ie. Function x. y. z () {} is not a standard writing method at all. It is only supported by ie, and ff or opera in other js engines will report an error. Only x. y. z = function (){};
Of course, in terms of syntax, I really like this writing method and hope that the standard will be accepted in the future.
| Hax
# Re: differences between the two implementations of the JS class definition Prototype Method
Hax is right. Only Internet Explorer can tolerate all kinds of errors like a mother.
The standard syntax is only x. y. z = function (){};
In fact, ie also supports a more strange way of writing.
Look at this
Function window: onload (){
Alert ("go_rush ")
}
| Go_Rush
# Re: differences between the two implementations of the JS class definition Prototype Method
@ Hax
The standard is good, and it is also a service for people. arguing that this is a matter between the academic school and the Engineering School. we can achieve our own system well. Why should we fight too much in the fairy spirit.
// Your comment is actually quite good. Sigh, it's a pity that I am so pitiful because of IE ~~~
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
