> 웹 프론트엔드 > JS 튜토리얼 > JavaScript의 객체지향 디자인

JavaScript의 객체지향 디자인

高洛峰
풀어 주다: 2016-11-26 11:29:49
원래의
1057명이 탐색했습니다.

W3C School의 정의에 따르면 Javascript는 클래스는 없지만 정의만 있고 선언이 없으며 직접 사용할 수 있다고 이해하면 됩니다. . 각 개체는 키-값의 조합으로 이해될 수 있습니다.

첨부된 내용은 W3C School의 설명입니다.
개체 지향 언어에 대한 요구 사항
개체 지향 언어는 다음을 수행해야 합니다. 개발자에게 네 가지 기본 기능을 제공합니다.
캡슐화 - 관련 정보(데이터 또는 메소드)를 객체에 저장하는 기능
집계 - 한 객체를 다른 객체 내에 저장하는 기능
상속 - 다른 클래스에서 파생( 또는 클래스) 클래스 속성 및 메서드의 기능
다형성 - 여러 방식으로 실행될 수 있는 함수나 메서드를 작성하는 기능
ECMAScript는 이러한 요구 사항을 지원하므로 객체 지향으로 간주될 수 있습니다.


다음은 비교적 일반적인 객체 정의입니다(다음 예는 <> 참조).
var person = new Object();
person .name = "Horky";
person.age = 40;
person.job = "소프트웨어 엔지니어";

person.sayName = function(){
document.write(this .name);
}

호출 방법:
person.sayName();

document.write("

연령: "); > document.write(person.age);

document.write("

Job: ");
document.write(person["job"]);

그렇습니다. 모든 속성은 공개되며 속성에 액세스하는 방법에는 두 가지가 있습니다. (접근성에 대한 제한은 속성의 속성으로 설정할 수 있습니다.)

키-값을 정의하는 또 다른 방법입니다. 좀 더 캐주얼하고 요점이 있지만 이전 버전의 브라우저에서는 지원하지 않을 수 있습니다.

var person = (
이름: "Horky",
연령: 40,
직업: "Software Engineer" ,

sayName: function(){

document.write(this.name);
}
};

Javascript 변수의 특성은 느슨한 유형이므로, 직설적으로 말하면 무정부적인 유형이므로 처음에 완전한 정의를 내릴 필요는 없지만 다음과 같이 허용됩니다(데모용으로 필수, 절대 권장하지 않음).

var person = new Object ();

person.name = "Horky";

person.sayName = function()
{
document.write(this.name);
}

person.sayName();

person.age = 40;
document.write("

Age: ");
document.write( person.age);
person.job = "소프트웨어 엔지니어";
document.write("

Job: ");
document.write(person["job"]) ;

는 무제한이 아닙니다. 첫 번째 문장을 다음과 같이 변경하면 작동하지 않습니다.

var person; Or var person = "Undefine";
이유는 Javascript의 기본 데이터 유형이 꽤 많기 때문입니다.

앞에서 언급한 JavaScript의 객체 지향 기능을 검토해 보겠습니다. 말할 것도 없이 처음 두 가지 사항은 분명하고, 참조 유형은 나중에 더 명확해집니다. 다형성에 대해서는 사실 좀 무리가 있는 것 같습니다. 개인적으로 저는 이것이 C/C++의 가변 매개변수를 갖는 함수에 더 가깝다고 생각합니다. 왜냐하면 여기서 다형성은 함수의 매개변수가 될 수 있기 때문입니다. 매우 임의적이며 JavaScript는 이를 제한하기에는 너무 게으릅니다. 결과는 다형성입니다.

function Person(name, age, job)
{
this.name = "Mr 아무도!" ;
this.age = 0;
this.job = "말하기 어렵습니다!";

switch(arguments.length)

{
사례 3:
this .job = job;
사례 2:
this.age = age;
사례 1:
this.name = 이름;
break;
}
this.introduceSelf = function()

{

document.write("

내 이름은 "+this.name입니다. );

document.write("

"+ this.age+"세!");

document.write("

그리고, 내 직업은 : "+this.job);
}
}

var horky = new Person("Horky",40,"Software Engineer");

var arthas = new Person("Arthas",22);
var none = new Person();

이 함수 Person()은 Person 객체를 생성하고 이를 반환하는 생성자 함수입니다. 이는 다형성의 일종인 전달된 매개변수를 반영합니다.

좀 확장하면 객체가 전달된 경우 복사를 구현하는 방법은 무엇입니까? (<< 참조) ;JavaScript 고급 프로그래밍>> 6.3.4)

전역 함수 추가:
function object(o)
{
function F() {};
F.prototype = o ;
새로운 F() 반환;
}

그런 다음 다음 두 가지 새로운 개체를 시도해 보십시오.
var horky_alias = object(horky);
var arthas_alias = object(horky, {name:{value:"Arthas"}});
복사할 때 Horky, 두 번째 개체의 이름도 변경되었습니다.

이 작업의 핵심은 F.prototype에 있습니다. 이 모든 기능에는 프로토타입이 있습니다. 이는 객체에 대한 포인터이며 이 객체에는 플라이웨이트의 개념과 마찬가지로 모든 인스턴스에서 공유할 수 있는 속성과 메서드가 포함되어 있습니다.


다음은 상속에 대해 이야기해 보겠습니다. 간단히 말해서, JavaScript의 상속은 하위 개체가 상위 개체에 액세스할 수 있음을 의미합니다. 따라서 두 가지 핵심 사항이 있습니다. 즉, 하위 개체에는 프로토타입인 상위 개체의 인스턴스가 있어야 합니다. 따라서 일반적인 하위 개체 정의는 Out:function Boy(이름, 나이, 직업)
{
this.sex = "남자";
this.prototype = new Person(이름, 나이, 직업);
this.introduceSelf = function()

{

this.prototype.introduceSelf();

document.write("

저는 BOY입니다!" );
}
}

var boy = new Boy("A",3);

프로토타입을 사용하는 것이 너무 낮은 수준이고 약간 해킹 같다고 생각되면


"빌려오는 생성자"를 사용할 수도 있습니다.

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