집 > 기사 > 웹 프론트엔드 > js 객체지향 작성법_자바스크립트 실력

js 객체지향 작성법_자바스크립트 실력

WBOY원래의: 2016-05-16 15:14:501494검색

이 글은 객체지향 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;

일반적으로 사용되는 방법은 첫 번째와 세 번째 방법이며, 세 번째 방법의 확장 예

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 객체에는 , crtnewFriendListLen, crtNewFriendList, crtFindedUserID
세 가지 속성이 있습니다. 및 네 가지 메소드 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를 가져올 수 없습니다. 값이 경고에 표시되는 초기 값은 $.getJSON()의 콜백 메서드에 있습니다. 이때 이는 ContactModel의 인스턴스를 참조하는 것이 아니라 메서드 본문을 참조하므로 해결 방법은 다음과 같습니다. 방법은 이 콜백 메서드에서 ContactModel의 인스턴스를 가져온 다음 이 인스턴스의 crtFindedUserID 속성에 값을 할당하는 것입니다.
객체 내부의 뷰 구성 요소의 수신 콜백 메서드에서 이는 객체 자체를 가리키는 것이 아니라 콜백되는 메서드의 본문도 가리킵니다. 이때 객체 자체의 속성에 액세스하려면 이 개체를 사용하는 대신 이 개체의 인스턴스를 가져와야 합니다.
다음은 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 프로그래밍을 배우는 모든 사람에게 도움이 되기를 바랍니다.

성명：

이전 기사：jQuery+PHP+MySQL은 무한 계단식 드롭다운 상자를 구현합니다. effect_jquery다음 기사：jQuery+PHP+MySQL은 무한 계단식 드롭다운 상자를 구현합니다. effect_jquery

js 객체지향 작성법_자바스크립트 실력

관련 기사