JavaScript Part _js 객체지향에 객체지향 프로그래밍 아이디어 적용

실제로 객체지향적 사고는 프로그래밍 언어와 무관합니다. 예를 들어 C#에서는 정적 클래스의 정적 메서드에서 절차적 개발에 따라 일련의 정적 함수가 호출됩니다. 오히려 jquery나 extjs와 같은 우수한 JavaScript 라이브러리는 객체지향 디자인 아이디어를 어디서나 구현하는 것과 같습니다. 이 글은 자바스크립트가 객체지향 프로그래밍 언어로 간주될 수 있는지에 대해 논의하려는 것이 아니며, 이 문제는 중국어 스타일 시험을 중요하게 생각하는 사람들이 주의해야 할 문제이며, 객체지향 프로그래밍 아이디어를 사용하는 방법에 대해 간략하게 설명하겠습니다. 자바스크립트에서.
객체 지향에는 먼저 객체가 있어야 합니다. javascript에서 객체를 생성하는 것은 매우 간단합니다.

코드 복사 코드는 다음과 같습니다.

var o= {};

이렇게 하면 객체가 생성되고 이 객체에 속성과 메서드를 쉽게 추가할 수 있습니다.

코드 복사 코드는 다음과 같습니다:

o.name="object name";
o.showName=function(){
alert(o. name);
}

그러나 대부분의 사람들은 여전히 ​​객체를 정의하는 {} 쌍 안에 객체의 속성과 메서드를 넣는 데 익숙합니다.

코드 복사 코드는 다음과 같습니다.

var o = {
name: "object name",
showName: function() {
Alert(o.name);
}
}

속성과 메서드에 액세스하는 방법에는 두 가지가 있습니다. 첫 번째는

코드 복사 코드는 다음과 같습니다.

alert(o.name); .showName();

이러한 작성 방법은 매우 일반적이며 C#에서 개체의 속성 및 메서드를 호출하는 방법과 동일합니다. JavaScript에는 속성이나 메소드의 이름을 액세스할 인덱스로 사용하는 특수한 기능도 있습니다.

코드 복사 코드는 다음과 같습니다.

alert(o["name"])
o["showName"]()

Kong Yiji의 "회향"과 약간 비슷합니다. "회향"이라는 단어를 쓰는 방법은 여러 가지가 있습니다. 실제로 개체의 속성이나 메서드를 호출하기 위해 색인을 사용하는 사람은 거의 없습니다.
객체에는 사용자 정의 속성 및 메서드 외에도 생성자 속성, toString() 및 기타 메서드가 있습니다. 이러한 속성과 메서드는 Object 내장 개체에서 나오며 모든 개체에는 이러한 속성과 메서드가 있습니다. constructor 속성은 객체를 생성한 생성자를 가리킵니다. 우리는 객체를 생성하기 위해 생성자를 사용하지 않았습니다. 실제로 js 인터프리터는 객체 생성자를 사용합니다. 생성자를 직접 정의하면 생성자를 통해 객체를 생성할 수 있기 때문에 생성된 객체는 동일한 속성과 메서드를 갖게 되므로 약간 객체 지향적인 느낌이 들기 시작합니다. 자, 생성자를 생성하는 방법을 알아보기 위해 간단한 예제부터 시작하겠습니다.

코드 복사 코드는 다음과 같습니다.

기능 사람(이름, 성별, 나이) {
this.name = 이름;
this.sex = 성별; showInfo = function() {
alert("이름: " this.name " 성별: " this.sex " 나이: " this.age)


us Person이라는 생성자가 정의됩니다. 생성자에는 세 개의 속성과 하나의 메서드가 있습니다. 객체를 생성하고 생성자를 통해 메서드를 호출하는 것은 매우 간단합니다.

복사 코드

코드는 다음과 같습니다. var zhangsan = new Person("장산", "남성", 18) zhangsan.showInfo( );

실행 후에는 Zhang San이라는 사람의 정보를 보여주는 대화 상자 팝업이 표시됩니다.


생성자 속성도 볼 수 있습니다. zhangsan의 생성자가 우리가 정의한 Person인지 확인하세요.

코드를 복사하세요.

코드는 다음과 같습니다. 🎜> alert(zhangsan.constructor)
결과는 그림과 같습니다.

보시다시피 Person 생성자입니다.
그러나 여기에는 여전히 문제가 있습니다. 객체를 생성할 때마다 속성과 메서드에 대한 메모리 공간이 할당됩니다. 실제로 모든 객체는 동일한 방법을 사용할 수 있으며 여러 개를 가질 필요가 없습니다. 메소드 복사는 메모리 공간 낭비입니다. 이제 이 문제를 알았으니 해결 방법을 생각해 봅시다. 자연스러운 아이디어는 메서드에 메모리 공간을 한 번만 할당하기 때문에 메서드의 메모리 공간이 할당되었는지 식별하는 값을 설정할 수 있다는 것입니다. 이 아이디어에 따라 생성자를 다음과 같이 수정합니다.

코드 복사 코드는 다음과 같습니다.

함수 인물(이름, 성별, 나이) {
this.name = 이름;
this.sex = sex;
this.age = age
if (typeof Person._initialized == "undefine") {
this.showInfo = function() {
alert("이름: " this.name " 성별: " this.sex " 나이: " this.age)
Person._initialized = true;
}


여기서는 _initialized 멤버를 사용하여 메소드에 메모리 공간이 할당되었는지 여부를 나타냅니다. 첫 번째 객체가 생성되면 _initialized가 정의되지 않았으므로 우리의 판단 내용은 true입니다. 이때 메서드가 정의되고 메모리 공간이 할당되며, 그 후 _initialized 값이 true로 설정되어 메모리 공간을 나타냅니다. 할당되었습니다. 두 번째 객체가 생성되면 아무런 판단도 입력되지 않으므로 메모리 공간이 다시 할당되지 않습니다. 문제가 없는 것 같습니다. 실행해 보면 여전히 Zhang San의 정보가 정상적으로 표시되는 것을 확인할 수 있습니다. 힘든 일은 아니지만 작은 문제 하나 해결했으니 축하하자 두 번 구운 돼지고기 한 접시를 즐겨보자. 식사가 시작되기 전에 Li Si라는 소녀도 자신의 개인 정보가 컴퓨터에 표시되기를 원했습니다. 아주 간단합니다. 객체를 생성하고 showInfo 메소드를 호출하세요.

코드를 복사하세요. 코드는 다음과 같습니다. 🎜> var lisi = new Person("lee思", "女", 28);

lisi.showInfo()

MM, 저도 이 문단을 장산 앞에 놓았습니다. MM의 정보는 올바르게 표시되지만 Zhang San의 정보가 누락되었습니다. 이번에는 Zhang San이 MM에 뒤처져도 괜찮았지만 여전히 이름이 있어야 했습니다. 프로그래머로서 너무 힘든 일이네요. 두 번 익힌 돼지고기를 못 먹는 것 같으니 먼저 버그를 고쳐보겠습니다. Firebug를 열고 표시된 MM 정보를 본 후 오류가 발생합니다. zhangsan.showInfo는 함수가 아닙니다. 중단점을 설정하고 zhangsi 개체를 생성한 후 showInfo 메서드가 없음을 확인했습니다. showInfo 메서드는 하나만 있지만 첫 번째 개체에 존재하며 두 번째 개체에서는 액세스할 수 없는 것으로 나타났습니다. 그렇다면 동일한 생성자에 의해 생성된 객체가 동일한 기능을 공유하도록 하려면 어떻게 해야 할까요? 자바스크립트의 프로토타입은 이 기능을 제공합니다. JavaScript 사양에 따르면 각 생성자에는 상속 및 속성 공유를 위한 프로토타입 속성이 있습니다. showInfo 메소드는 함수에 대한 참조를 가리키는 속성으로 볼 수도 있습니다. 이제 프로토타입을 사용하여 메소드를 공유 가능하게 만듭니다. this.showInfo를 Person.prototype.showInfo로 변경하면 됩니다.

코드 복사 코드는 다음과 같습니다. function Person(이름, 성별, 나이) {

this.name = 이름; >this .sex = sex;

this.age = age;
if (typeof Person._initialized == "undefine") {
Person.prototype.showInfo = function() {
alert( "이름: " this.name " 성별: " this.sex " 나이: " this.age)
}
Person._initialized = true;
이 생성자를 사용하여 두 개의 개체를 생성합니다.




코드 복사

코드는 다음과 같습니다.

var lisi = new Person("이시", "여성", 28); lisi.showInfo(); var zhangsan = new Person("장산", "남성", 18); zhangsan .showInfo();

실행 후 John Si의 정보가 먼저 표시된 다음 Zhang San의 정보가 표시됩니다. 이제 우리 둘 다 만족하지만 아쉽게도 두 번 구운 돼지고기는 이미 식어있습니다.