Home > Developer > JavaScript
Js object-oriented writing and js object-oriented writing
This article summarizes several common js object-oriented methods and shares them with you for your reference. The specific content is as follows:
1. Factory method
var Circle = function() { var obj = new Object(); obj.PI = 3.14159; obj.area = function( r ) { return this.PI * r * r; } return obj;}var c = new Circle();alert( c.area( 1.0 ) );
2. More formal writing
function Circle(r) { this.r = r;}Circle.PI = 3.14159;Circle.prototype.area = function() { return Circle.PI * this.r * this.r;}var c = new Circle(1.0); alert(c.area());
3. json writing
var Circle={ "PI":3.14159, "area":function(r){ return this.PI * r * r; }};alert( Circle.area(1.0) );
4. A little changed, but the essence is the same as the first one.
var Circle=function(r){ this.r=r;}Circle.PI = 3.14159; Circle.prototype={ area:function(){ return this.r*this.r*Circle.PI; }}var obj=new Circle(1.0);alert(obj.area()
Circle. PI = 3.14159; this. PI = 3.14159 can be written into attributes;
It is commonly used as an extended small instance in the first, third, and third formats.
var show={ btn:$('.div1'), init:function(){ var that=this; alert(this); this.btn.click(function(){ that.change(); alert(this); }) }, change:function(){ this.btn.css({'background':'green'}); } } show.init();
Note that this points to the problem. below isA little introduction to thisTo help you.
At the beginning, we used the dynamic prototype method to create custom objects in js. this is also very smooth.
In this method, the creation and use of variables inside the object start with "this.
For example, the object ContactModel hasThree attributes, CrtnewFriendListLen, crtNewFriendList, crtFindedUserID
AndFour MethodsRequestContactList (), requestNewfriendList (), requestFindUser (), requestAddContact ()
If you want to access your own attributes in this variable, you must include "this ."
var contactModel;...contactModel = new ContactModel();
function ContactModel(){ // this.contactList; this.crtnewFriendListLen; this.crtNewFriendList; this.crtFindedUserID = "-1"; if(typeof ContactModel._initialized == "undefined") { ContactModel.prototype.requestContactList = function() { } ContactModel.prototype.requestNewfriendList = function() { } ContactModel.prototype.requestFindUser = function(userID) { $.getJSON(mainUrl + "User/getuserinfo",{"uid":userID},function(resultObj) { // this.crtFindedUserID = userID contactModel.crtFindedUserID = userID; uiManager.contectAddPage.receiveFindUserResult(resultObj); }); } ContactModel.prototype.requestAddContact = function(remark) { alert(this.crtFindedUserID); } ContactModel._initialized = true; };}
However, the problem occurs. In requestFindUser (), if this. crtFindedUserID is used to store the value sent from the server. After this object is called the requestAddContact () method, the value of crtFindedUserID cannot be obtained, alert still displays the initial value-1, and the problem lies in $. in the callback method of getJSON (), this is not the ContactModel instance, but the method body. Therefore, the solution here is to get the ContectModel instance in the callback method, assign a value to the crtFindedUserID attribute of the instance.
In the listener callback method of the view component inside the object, this is not the object itself, but also the method body to be called back. To access the attributes of the object, instead of using this.
Below is a sectionJS object-oriented standard writing:
<Head> <meta http-equiv = "Content-Type" content = "text/html; charset = gb2312"> <title> Create web page 1 </title> <mce: script type = text/javascript> <! -- Var person = function (name, age) {// defines the object constructor this. name = name; this. age = age;} person. prototype = {// encapsulation method getName: function () {alert (this. name) ;}, getAge: function () {alert (this. age) ;}} function test () {// declare to call var man = new person ('jack', 12); man. getName () man. getAge ()} var test2 = {// call similar to a static method directly: test2.te (); then te: function () {alert () ;}, te1: function () {alert () ;}}// --> </mce: script>
I hope this article will help you learn about javascript programming.
Articles you may be interested in:
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
