Cascading Style Sheets Tutorial

JavaScript object-oriented support (6)

  ================================================== ==================== 
  Qomolangma OpenProject v0.9 


  Category: Rich Web Client 
  Key words: JS OOP, JS Framwork, Rich Web Client, RIA, Web Component, 
  DOM, DTHML, CSS, JavaScript, JScript 

  Project launched: aimingoo (aim@263.net) 
  Project Team: aimingoo, leon (pfzhou@gmail.com) 
  There are contributors: JingYu (zjy@cnpack.org) 
  ================================================== ==================== 

  8, the support of object-oriented JavaScript 
~~~~~~~~~~~~~~~~~~
  (Continued) 

  4. Examples cited examples and 
——–
  In. NET Framework on the CTS (Common Type System) agreement "are all targets," and divided into "value types" and "invoke type" two.    The "value types" into the object of the "type used" data in the process, and the need for a "packing" and "entitlements" process. 

  In JavaScript also have the same problem.    We see typeof keywords, to return to the six following data types: 
  "Number", "string", "boolean" and "object" and "function" and "undefined." 

  We also found that JavaScript's object system, String, Number, Function, four Boolean object constructor.    Well, our question is: If there is a number of A, typeof (A) results in the end is the 'number' it, or at a constructor function Number () object? 

  //———————————————— ———– 
  / / On the type of test JavaScript code 
  //———————————————— ———– 
  Function getTypeInfo (V) ( 
  Return (typeof V == 'object'? 'Object, construct by' V.constructor 
  : 'Value, type of' typeof V); 
  ) 

  Var A1 = 100; 
  Var A2 = new Number (100); 

  Document.writeln ( 'A1 is', getTypeInfo (A1),' <BR> '); 
  Document.writeln ( 'A2 is', getTypeInfo (A2),' <BR> '); 
  Document.writeln ([A1.constructor === A2.constructor, A2.constructor === Number]); 

  Test results of the implementation of the code as follows: 
———–
  A1 is Value, type of number 
  A2 is Object, construct by function Number () () [native code] 
  True, true 
———–

  We note that the A1 and A2 are at the Number constructor.    This means that through the constructor attribute to identify targets, (sometimes) than typeof more effective.    Because "value type data" A1 viewed as a target, and A2 have the same characteristics. 

  — In addition to the examples cited the problem. 

  JScript reference manual, we have the basis for other types and constructor doing the same inspection, we find that: 
  — Based on the undefined type, number, boolean and the string is "value type" variable 
  — Based on the array type, function and the object is to "invoke type" variable 
  — The use of new () method is constructed, that is, "invoked type" variable 

  The following code that "value types" and "invoke types" of the distinction between: 
  //———————————————— ———– 
  / / JavaScript type system on the value / problems cited 
  //———————————————— ———– 
  Var str1 = 'abcdefgh', str2 = 'abcdefgh'; 
  Var obj1 = new String ( 'abcdefgh'), obj2 = new String ( 'abcdefgh'); 

  Document.writeln ([str1 == str2, str1 === str2], '<br>'); 
  Document.writeln ([obj1 == obj2, obj1 === obj2]); 

  Test results of the implementation of the code as follows: 
———–
  True, true 
  False, false 
———–

  We can see that, whether or equivalent computing (==), computing (===), congruent to the "target" and "value" are not understanding the same. 

  Further understanding of this phenomenon, we know: 
  — Operational results for the value types, or types of variables, the equivalent (or congruent) to compare the results can be expected 
  — (Even contain the same data) between different instances is not equivalent (or congruent) 
  — With an object between the different quote is equivalent (==) and the congruent (===) 

  But for String type, it added: JScript description of the two string comparison, as long as there is a value type, according comparison.    This means that in the above example, the code "str1 == obj1" The results will be true.    Operational needs and congruent (===) type of a variable consistency, "str1 === obj1" return false results. 

  JavaScript function parameters in the value of imported always Senate invoked type (example) is a pointer value imported.    Therefore function can be arbitrarily rewriting entrance variables, and not worry about external variables been modified.    However, the need to pay attention to imported types of variables used, because its method calls and read and write attributes that may affect their own examples.    — But also can be used to传出parameter types of data. 

  Finally add elaborate, value types-by-byte comparison is an example of the data in the object, but high accuracy and low efficiency, and cited examples of types of indicators and the only data types, high efficiency and low accuracy.    If you need to use two types of testing really contain the same data, you may need to try to convert it into a "string value" and then compared. 


  6. Function in the context of the environment 
——–
  As long as the written code, you should know that variable is a "global variable" and "local variables" points.    The vast majority of 
  JavaScript programmers are aware of these concepts below: 
  //———————————————— ———– 
  / / Global variables in JavaScript and local variables 
  //———————————————— ———– 
  Var v1 = 'global variable 1'; 
  V2 = 'global variable-2'; 

  Function foo () ( 
  V3 = 'global variable-3'; 

  Var v4 = 'function only in the internal and use var definition, is the local variables'; 
  ) 

  As a general rule, the understanding of the language, different code call functions, will have a separate set of local variables. 
  So, the following code is very easy to understand this: 
  //———————————————— ———– 
  / / The local variables JavaScript 
  //———————————————— ———– 
  Function MyObject () ( 
  Var o = new Object; 

  This.getValue = function () ( 
  Return o; 
  ) 
  ) 

  Var obj1 = new MyObject (); 
  Var obj2 = new MyObject (); 
  Document.writeln (obj1.getValue () == obj2.getValue ()); 

  The results showed that false that the different (the instance method) call to return to the local variables "obj1/obj2" is not the same. 

  Local variables, and the overall situation of OOP package of the "private (private)," "open (public)" is the same category.    Thus the vast majority of information is always to the following JavaScript way to illustrate the object-oriented system of "Packaging privilege level" issues: 
  //———————————————— ———– 
  / / JavaScript in the package of OOP 
  //———————————————— ———– 
  Function MyObject () ( 
  / / 1. Private members and methods 
  Var private_prop = 0; 
  Var private_method_1 = function () ( 
  / / … 
  Return 1 
  ) 
  Function private_method_2 () ( 
  / / … 
  Return 1 
  ) 

  / / 2. Privileges method 
  This.privileged_method = function () ( 
  Private_prop; 
  Return private_prop private_method_1 () private_method_2 (); 
  ) 

  / / 3. Public members and methods 
  This.public_prop_1 =''; 
  This.public_method_1 = function () ( 
  / / … 
  ) 
  ) 

  / / 4. Public members and methods (2) 
  MyObject.prototype.public_prop_1 =''; 
  MyObject.prototype.public_method_1 = function () ( 
  / / … 
  ) 

  Var obj1 = new MyObject (); 
  Var obj2 = new MyObject (); 

  Document.writeln (obj1.privileged_method (), '<br>'); 
  Document.writeln (obj2.privileged_method ()); 

  Here, the "private (private)" only in that (structure) function within the visit, and "privileges (privileged)" is a specific access to a "private domain" of the "open (public)" approach.    "Open (public)" shows that in the (structure) function can be called, and access. 

  Apart from the above package authority, a number of other documents also introduced two related concepts: 
  — Prototype attributes: Classname.prototype.propertyName = someValue 
  — () Static properties: Classname.propertyName = someValue 

  However, from the perspective of object-oriented terms, these concepts above it is very difficult to justify: JavaScript is why, as well as how to divide these packages authority and the concept come from? 

  — Because we must note that this example of the problems arising from: 
  //———————————————— ———– 
  / / JavaScript in the local variables 
  //———————————————— ———– 
  Function MyFoo () ( 
  Var i; 

  MyFoo.setValue = function (v) ( 
  I = v; 
  ) 
  MyFoo.getValue = function () ( 
  Return i; 
  ) 
  ) 
  MyFoo (); 

  Var obj1 = new Object (); 
  Var obj2 = new Object (); 

  / / Test 1 
  MyFoo.setValue.call (obj1, 'obj1'); 
  Document.writeln (MyFoo.getValue.call (obj1), '<BR>'); 

  / / Second Test 
  MyFoo.setValue.call (obj2, 'obj2'); 
  Document.writeln (MyFoo.getValue.call (obj2)); 
  Document.writeln (MyFoo.getValue.call (obj1)); 
  Document.writeln (MyFoo.getValue ()); 

  In this test code, obj1/obj2 are Object () example.    We use function.call () method to call setValue / getValue, makes MyFoo () call in the process of replacement for obj1/obj2 examples of this. 

  However, we found that "the test" is complete, obj2, obj1 and function MyFoo () held by local variables are returned to the "obj2."    — This shows that the three functions to use the same local variables. 

  Thus, JavaScript in dealing with local variables, the "ordinary function" and "constructor" is a treat.    This strategy JavaScript in some of the relevant information be interpreted as "object-oriented in the private domain".    In fact, I am even more pleased to learn from one source to tell you the truth: This is the object in the context of environmental issues.    — Only on the surface around, "contextual environment" issues were transferred to the object on the package of issues. 

  (Read the text before) produced a conceptual statement: 
  — In the general function, contextual environment held by the window object - "and the object constructor method," the context of the environment held by the object instance 

  In the realization of JavaScript code, each object will be created, the interpreter will create a context object environment chain, used to store objects in the entry "and the object constructor method," the function () internal data a backup.    JavaScript object in the future to assure the re-entry "and the object constructor method" internal, always hold the context of the environment, and a related this object.    The object may have several methods, and each method may also exist multi-nested function, it is in fact constitute a contextual tree linked list structure.    In the constructor and Object, JavaScript does not provide any visits (and the object constructor method) contextual approach. 

  In short: 
  — Context-sensitive environment and object instance Calling "and the object constructor method," related with the (general) function unrelated 
  — Context-sensitive environmental records an object in the "structure and function object" internal private data 
  — Context chain structure used to record multi-nested function in the context of 

  Since contextual structure and function only within the nested function and the re-reading the previous code: 
  //———————————————— ———– 
  / / JavaScript in the local variables 
  //———————————————— ———– 
  Function MyFoo () ( 
  Var i; 

  MyFoo.setValue = function (v) ( 
  I = v; 
  ) 
  MyFoo.getValue = function () ( 
  Return i; 
  ) 
  ) 
  MyFoo (); 

  Var obj1 = new Object (); 
  MyFoo.setValue.call (obj1, 'obj1'); 

  We found setValue () can indeed access to the MyFoo () function within the "local variables i," but because setValue () method is the bailiffs have MyFoo object (Remember that functions are objects), it has MyFoo MyFoo Object () the only function of a "contextual environment." 

  Next MyFoo.setValue.call () call, although setValue () introduction of this new target, but in fact possess a "contextual" is still MyFoo object.    Therefore, we see that no matter how many obj1/obj2 creation, and ultimately the operation of private variables are the same i. 

  Global function / variable "contextual" holder for the window, the following code demonstrates that "why global variables can be the object of arbitrary function and visit": 
  //———————————————— ———– 
  / / Function in the context of the overall situation 
  //———————————————— ———– 
  / * 
  Function Window () ( 
  * / 
  Var global_i = 0; 
  Var global_j = 1; 

  Function foo_0 () ( 
  ) 

  Function foo_1 () ( 
  ) 
  / * 
  ) 

  Window = new Window (); 
  * / 

  Therefore, we can see that foo_0 () and foo_1 () can also visit global_i and global_j.    Next corollary of this is that context determines the environment variable "overall" and "Private."    Conversely variables rather than through private to discuss with the overall context of environmental issues. 

  Further corollary of this is: JavaScript in the global variables and function, in essence, is the window object's private variables and methods.    This contextual block at all (within the window object) in the context of the environment object instance Listless the top, it may be to visit. 

  "Contextual" theory, you can successfully explain this section, the variable "global / local" scope of the problem, and the Object question of the competence of the package.    In fact, the realization of JavaScript C source code, the "contextual" was called "JSContext", and as a function / methods of the introduction of a parameter.    — If you are interested, you can be confirmed from the source code described in this section theory. 

  In addition, the "JavaScript authoritative guides" this book section 4.7 also addressed this issue, but it has been called "variable scope."    But importantly, this book to the issue of anti-.    — The author tried to use "the overall situation, partial scope" to arise in the interpretation of this phenomenon the "contextual".    Therefore, this section is messy and difficult to justify. 

  However, in section 4.6.3, the author also referred to the environment (execution context), which we have here and that the "contextual" is the same.    But even more troubling is that the author will readers with the wrong method, function in the context of trying to use the environment to explain the DOM and ScriptEngine-related problems. 

  But this book in the "contextual linked list" of enquiries about the way that it is a correct and reasonable.    This is only a "scope" was somewhat wrong or inappropriate. 

Share and Enjoy: These icons link to social bookmarking sites where readers can share and discover new web pages.
  • Digg
  • del.icio.us
  • Facebook
  • Google
  • DotNetKicks
  • DZone

Tags: css javascript

Releated Posts

  • Css + javascript drop-down menu
  • JavaScript build with the CSS + page tab
  • How to use Javascript dropdown menu with CSS Generation
  • CSS + javascript dialog box of colors
  • Css learning and web-javascript biographical notes on the production of a

This entry was posted on Wednesday, August 1st, 2007 at 12:00 am and is filed under CSS Tutorial. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

« Regular expressions are learning
Forms are also creating web pages brainstorms of the increase rolling »

Leave a Reply

  • Categories

    • CSS Properties (491)
    • CSS Tutorial (1154)
    • CSS Tutorial By Examples (1201)
    • Css+Div Web Design (3274)
    • Xhtml and Web Design (1797)
  • Archives

    • February 2008
    • January 2008
    • December 2007
    • November 2007
    • October 2007
    • September 2007
    • August 2007
    • July 2007
    • June 2007
    • May 2007
    • April 2007
    • March 2007
    • February 2007
    • January 2007
  • Pages

    • About us

Cascading Style Sheets Tutorial