ホームページ > 記事 > ウェブフロントエンド > jsオブジェクト指向の書き方_javascriptスキル

jsオブジェクト指向の書き方_javascriptスキル

WBOYオリジナル: 2016-05-16 15:14:501496ブラウズ

この記事では、オブジェクト指向 js の一般的な記述方法をいくつかまとめて皆さんに共有します。具体的な内容は次のとおりです。
1.ファクトリーメソッド

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. よりフォーマルな文章

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の書き方

var Circle={
 "PI":3.14159,
 "area":function(r){
   return this.PI * r * r;
  }
};
alert( Circle.area(1.0) );

4. いくつかの変更がありますが、本質は最初のものと同じです

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;

と記述することができます。

一般的に使用されるのは 1 番目と 3 番目の方法、および 3 番目の書き方の拡張例です

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();

注目すべき点は、この問題点です。これについて少し紹介します。
当初はjsでカスタムオブジェクトを作成するのにダイナミックプロトタイプという方法を使っていましたが、これも非常にスムーズに使えました。
このメソッドでは、オブジェクト内の変数の作成と使用は「this.」から始まります。
例: オブジェクト ContactModel には 3 つの属性、crtnewFriendListLen、crtNewFriendList、crtFindedUserID
があります。 4 つのメソッド requestContactList()、requestNewfriendList()、requestFindUser()、requestAddContact()
この変数内の独自のプロパティにアクセスしたい場合は、「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;
 };
}

しかし、この時点で問題が発生します。 requestFindUser() で、サーバーから送信された値を格納するために this.crtFindedUserID が使用されている場合、このオブジェクトに対して requestAddContact() メソッドが呼び出された後、crtFindedUserID を取得できません。値を指定しても、アラートに表示される初期値は -1 のままです。問題は $.getJSON() のコールバックメソッドにあります。現時点では、これは ContactModel のインスタンスではなく、メソッド本体を参照しています。方法は、このコールバックメソッドで ContactModel のインスタンスを取得し、このインスタンスの属性 crtFindedUserID に値を割り当てることです。
オブジェクト内のビューコンポーネントのリスニングコールバックメソッドでは、これはオブジェクト自体を指すのではなく、コールバックされるメソッドの本体も指します。このとき、オブジェクト自体のプロパティにアクセスしたい場合は、次のようにします。 this.
を使用する代わりに、アクセスするにはこのオブジェクトのインスタンスを取得する必要があります。以下は、JS オブジェクト指向 の標準的な記述方法です。

<head> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312"> 
<title>新建网页 1</title> 
<mce:script type=text/javascript><!-- 
 var person=function(name,age){//定义对象构造方法 
  this.name=name; 
  this.age=age; 
 } 
 person.prototype={ //封装方法 
  getName:function(){ 
   alert(this.name); 
  }, 
  getAge:function(){ 
   alert(this.age); 
  } 
 } 
 
 function test(){//声明调用 
  var man=new person('jack',12); 
  man.getName() 
  man.getAge() 
 } 
  
 var test2 ={ //类似静态方法 调用直接：test2.te();即可 
  te:function(){ 
   alert(); 
  }, 
  te1:function(){ 
   alert(); 
  } 
 } 
// --></mce:script> 
</head> 
<body> 
 <input type=button onclick="test()"/> 
</body> 
</html>

この記事が、JavaScript プログラミングを学習する皆さんのお役に立てれば幸いです。

声明：

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

前の記事：jQuery+PHP+MySQL は無限のカスケードドロップダウンボックスを実現します。次の記事：jQuery+PHP+MySQL は無限のカスケードドロップダウンボックスを実現します。

続きを見る

jsオブジェクト指向の書き方_javascriptスキル

関連記事