> 웹 프론트엔드 > JS 튜토리얼 > JavaScript 객체 정의 방법은 간단하고 배우기 쉽습니다_js 객체 지향

JavaScript 객체 정의 방법은 간단하고 배우기 쉽습니다_js 객체 지향

WBOY
풀어 주다: 2016-05-16 18:55:01
원래의
909명이 탐색했습니다.

팩토리 패턴:
주니어 개발자는 다음과 같이 객체를 정의할 수 있습니다.
var obj = new Object();
obj.name = "hero"
obj.showName=function (){alert( this .name);}
여기서 문제는 obj 객체를 여러 곳에서 사용하려는 경우 프로그램에서 유사한 코드를 여러 번 작성해야 할 수 있으므로 팩토리 메소드
function createObj()
{
var obj = new Object();
obj.name="hero";
obj.showName=function (){alert(this.name);}
return obj;
}
var obj1 = createObj();
var obj2 = createObj()
및 또 다른 메소드 생성자 메소드
function obj (name)
{
this.name =name;
this.showName= function (){alert(this.name);}
}
새 코드가 중복되는 것을 방지하기 위해 객체를 생성하는 코드를 캡슐화할 수도 있습니다. 개선 사항은 obj에 기본 고정 값을 할당하는 대신 createObj에 일부 매개변수를 전달하는 것입니다.
function createObj(name)
{
var obj = new Object()
obj.name=name;
obj.showName=function (){alert(this.name);}
return obj;
}
var obj1 = createObj("hero")
var o'b' j2=createObj("dby");
그러나 문제가 있습니다. 즉, createObj 함수를 호출할 때마다 새로운 함수 showName이 생성된다는 것입니다. 즉, 각 객체는 자체적인 showName 버전을 갖게 됩니다. 이 문제를 방지하려면
function showName()
{
alert(this.name)
}
function createObj(name)
{
var을 개선해야 합니다. obj = new Object();
obj.name=name;
obj.showName=showName;
return obj;
}
이렇게 하면 함수를 반복적으로 생성하는 문제가 해결됩니다.
프로토타입 방법:
주로 객체의 프로토타입 속성을 사용합니다.
function obj()
{}
obj.prototype.name="hero"; obj.prototype.showName=function()
{
alert(this.name);
}
지금은 공장보다 더 완벽해 보이지만 이 기능에는 문제가 있습니다. 생성자가 없고 프로토타입을 통해 속성이 지정됩니다. 이는 실제 응용 프로그램에서 모든 인스턴스의 속성이 동일하다는 것은 실제로 허용되지 않습니다. 예를 들어, 다음과 같은 단락을 추가하는 경우
obj.prototype.nameArray("hero","dby")
Then
obj1 = new obj(); >obj2 = new obj();
obj1.nameArray.push("lxw" );
두 객체의 nameArray가 동일한 참조를 가리키기 때문에 obj2의 nameArray에서도 이 속성을 볼 수 있습니다.
그래서 이 방법은 이상적이지 않습니다.
개선 필요
생성자를 결합하고 생성자에서 속성을 정의하고 프로토타입 정의 방법을 사용합니다.
예를 들어
fuction obj(name)
{
this.name = 이름
this.nameArray = new Array(" Hero","dby")
}
obj.prototype.showName = function(){alert(this.name) )}
모든 비함수 속성은 생성자에서 생성되고 함수 속성은 프로토타입 모드에서 Created를 사용하여 생성됩니다. obj1에서 nameArray 값을 변경해도 obj2 객체의 nameArray 값에는 영향을 미치지 않으며 showName은 하나만 있습니다. 기능이 있어서 메모리 낭비가 없습니다.
기본적으로 완벽하고, 나머지는 기본적으로 다른 것입니다. 관심이 있으시면 직접 변경하여 가지고 놀 수 있습니다.
저자가 여기에 싱글톤을 추가했습니다. :
함수 obj(이름)
{
this.name = name;
this.nameArray=new Array("hero","dby")
if(typeof obj._initialized =='정의되지 않음')
{
obj.prototype.showName=function(){ 경고(this.name);}
obj._initialized="true"
}
}
실제로는 싱글톤이 아닙니다. 단지 객체를 구성할 때 속성이 정의되어 있는지 먼저 확인하고 속성이 정의되어 있으면 프로토타입 메서드를 사용하여 객체를 계속 정의하는 것입니다. 정의가 완료되면 함수는 다시 정의되지 않습니다. 프로토타입 메서드는 한 번만 생성되고 할당됩니다.
다시 거의 완벽해졌고
이것은 제 개인적인 이해입니다. 모든 사람에게 도움이 되기를 바랍니다. 불완전한 부분이 있으면 QQ에 연락하여 제때에 수정해 주세요.
완전한 예는 다음과 같습니다.
function Rectangle(name,color,width,heigth){
this.name=name;
this.color=color
this.width= width; ;
this.heigth=heigth;
}
Rectangle.prototype.area=function(){
return this.width*this.heigth
}
Rectangle.prototype. =function(){
document.write(this.name " " this.color " " this.width " " this.heigth "
")
document.write(this.area() ) ;
}
var obj1= new Rectangle("직사각형","red",15,20)
obj1.show();

관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿