The syntax for creating objects in JavaScript is the invocation of a function after the new operator. Such as
Copy Code code as follows:
var obj = new Object ();
var date = new Date ();
Operator new first creates a new object that has no attributes, and then calls the function to pass the new object as the value of the This keyword.
Copy Code code as follows:
The implementation of the pseudo code of the var date = new Date () is
var obj = {};
var date = Date.call (obj);
The function of a constructor is to initialize a newly created object and set the properties of the object before using the object. If you define your own constructor, you just need to write a function that adds a property to this. The following code defines a constructor:
Copy Code code as follows:
function Rectangle (W, h)
{
This.width = W;
This.height = h;
}
You can then call this function using the new operator to create an instance of the object
Copy Code code as follows:
var rect = new Rectange (4,8);
The return value of the constructor
Constructors in JavaScript typically do not return a value. However, the function is allowed to have a return value. If a constructor has a return value, the returned object becomes the value of the new expression. In this case, the object as this will be discarded.
Using the constructor definition method
Grammar
Copy Code code as follows:
var object=new objectname ();
var--Declaring an object variable
Object--Names of objects
New--Keywords for new (JavaScript keywords)
ObjectName--constructor name
Example
Copy Code code as follows:
Defining constructors
function Site (URL, name)
{
This.url = "Www.jb51.net";
THIS.name = "Dream Capital";
}
To create an instance of a JavaScript object using a constructor
var mysite = new Site ();
alert (Mysite.url);
Constructors can typically initialize some of the content in an object, and some of the objects provided within JavaScript usually need to be generated using the constructor's method. The contents of the JavaScript function are described in the next chapter.
Create a JavaScript object by direct definition
Copy Code code as follows:
Defining object Syntax
var object={};
property syntax within an object (property) and property value (value) are in pairs.
Object.property=value;
The function syntax within an object (function name (func) and the content of functions appear in pairs)
Object.func=function () {...;};
var--Declaring an object variable
Object--Names of objects
Property--object's attribute name
Func--The object's method name
Description: An object can contain properties (functions can be thought of as special attributes with parentheses), and each property has a name and a value. The name can be any string or even empty. The value can be any JavaScript type, but it cannot be undefined.
Example of an object defined using the definition method
Copy Code code as follows:
var site = {};
Site. URL = "Www.jb51.net";
Site.name = "cloud-dwelling community";
Site.englishname = "jb51";
Site.author = "Script";
Site.summary = "Free web design Tutorial";
Site.pagescount = 100;
Site.isok = true;
Site.startdate = new Date (2005, 12);
Site.say = function () {alert (this.englishname+ "Say:hello world!")};
Site.age = function () {var theage= (new Date (). getFullYear ())-site.startdate.getfullyear (); alert (this.name+ "already" + Theage+ "Old!")}
To create a JavaScript object sample using a constructor--you can try editing
To create a JavaScript object by using a constructor
The above method defines a site object and defines seven properties for it, with two methods.
The Say method prints a string of jb51 Say:hello world!
The age method calculates how old the dream site is.
Monkey tip: Note that each property and function are preceded by the name of the object, otherwise JavaScript cannot tell if it belongs to that object.
The following course will explain the extension of the direct definition method, the JSON definition method.
<! DOCTYPE HTML PUBLIC "-//w3c//dtd XHTML 1.1//en" "Http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd" > <ptml> < head> <meta http-equiv= "Content-type" content= "text/html"; charset=gb2312 "/> <title> creating JavaScript objects using constructors--JavaScript tutorials </title> </pead> <body> <p> constructor creation JavaScript Object </p> <script type= "Text/javascript" > Defines the constructor function Site (URL, name) {This.url = "www.jb51.net"; THIS.name = "cloud-dwelling community"; ///Use constructors to generate an instance of a JavaScript object var mysite = new Site (); alert (Mysite.url); </script> <p> Direct method to create JavaScript objects </p> <script type= "Text/javascript" > var site = {}; Site. URL = "Www.jb51.net"; Site.name = "cloud-dwelling community"; Site.englishname = "jb51"; Site.author = "Script"; Site.summary = "Free web DesignTutorial "; Site.pagescount = 100; Site.isok = true; Site.startdate = new Date (2005, 12); Site.say = function () {alert (this.englishname+ "Say:hello world!")}; Site.age = function () {var theage= (new Date (). getFullYear ())-site.startdate.getfullyear (); alert (this.name+ "already" + Theage+ "Old!")} Site.age (); </script> <div ><form method= "POST" action= "#" ><input type= "button" Name= "Dreamduinput" id= " Dreamduinput "value="----the above content corresponds to the following code, modify the code, and point me, check the effect!----"onclick=" RunCode (dreamdutest) "> <textarea Name= "Dreamdutest" id= "Dreamdutest" rows= "The Cols=" "><!" DOCTYPE HTML PUBLIC "-//w3c//dtd XHTML 1.1//en" "Http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd" > <ptml> < head> <meta http-equiv= "Content-type" content= "text/html"; charset=gb2312 "/> <title> using constructors to create JavaScript objects </title> </pead> <body> ; <script Type= "TexT/javascript ">//define constructor function Site (URL, name) {This.url =" www.jb51.net "; THIS.name = "Dream Capital"; ///Use constructors to generate an instance of a JavaScript object var mysite = new Site (); alert (Mysite.url); </script> <p> Direct method to create JavaScript objects </p> <script type= "Text/javascript" > var site = {}; Site. URL = "Www.jb51.net"; Site.name = "Dream Capital"; Site.englishname = "Dreamdu"; Site.author = "cute monkey"; Site.summary = "Free web design Tutorial"; Site.pagescount = 100; Site.isok = true; Site.startdate = new Date (2005, 12); Site.say = function () {alert (this.englishname+ "Say:hello world!")}; Site.age = function () {var theage= (new Date (). getFullYear ())-site.startdate.getfullyear (); alert (this.name+ "already" + Theage+ "Old!")} Site.age (); </script> </body> </ptml></textarea></form></div> </body> </ptml>
[Ctrl + A All SELECT Note: If the need to introduce external JS need to refresh to perform]
