JavaScript 개체 토론

저자：Eve Cole 업데이트 시간：2009-12-12 13:57:32

JavaScript의 유연성으로 인해 누구나 자신의 습관에 따라 코드를 작성할 수 있습니다. 함수형 프로그래밍 방법도 있고, 객체지향의 등장으로 인해 오늘날 널리 사용되는 객체 리터럴도 있습니다. 시작은 또한 점차적으로 클래스 프로그래밍으로 발전했습니다. 이제 몇 가지 친숙한 프로그래밍 습관에 대해 간략하게 설명하겠습니다.

1. 객체 리터럴:

인용된 내용은 다음과 같습니다.

var 사람 = {
이름:null,
setName:함수(이름){
this.name = 이름;
this.name을 반환합니다.
},
getName:함수(){
경고(this.name);
}
}

JavaScript 특성을 지닌 프로그래밍 메소드입니다. 클래스 단위로 속성 이름, 메소드 setName 및 getName을 포함합니다. 이 시점부터 person.setname('R') 메소드를 호출하는 것은 비교적 간단합니다. 개인의 속성과 메소드는 모두 비공개가 아니며 호출할 수 있습니다.

2.프로토타입 생성자 호출 모드

인용된 내용은 다음과 같습니다.

var 사람 = 함수(){
this.name = null;
}
Person.prototype.setName = 함수(이름){
this.name = 이름;
}
Person.prototype.getName = 함수(){
경고(this.name);
}

Person 클래스를 생성한 다음 프로토타입을 사용하여 클래스를 확장하고 메서드를 추가하는 것도 매우 일반적인 프로그래밍 방법입니다. 객체 리터럴과 가장 큰 차이점은 이 클래스의 메서드를 호출할 때 먼저 new를 사용해야 한다는 것입니다(Java와 유사). var p = new Person();p.getName(); new를 사용하지 않고 직접 생성하면 오류가 발생하며 이 오류는 오류의 원인을 찾기가 어렵습니다. 이는 Person.prototypel을 가리키며 Person에는 setName 메소드가 없습니다.

3. 함수형 프로그래밍에 익명 함수를 사용하세요

인용된 내용은 다음과 같습니다.

(기능(){
변수 이름;

var setName = 함수(n){
이름 = n;
}
창['사람']['setName'] = setName;

var getName = 함수(){
경고(이름);
}
window['person']['getName'] = getName;
})()

클래스 출현의 가장 큰 이점 중 하나는 전역 변수의 발생을 줄이는 것입니다. 그러나 여전히 함수형 프로그래밍에 익숙하다면 익명 함수를 만들고 클로저를 수행하는 한 문제가 되지 않습니다. 위에서 볼 수 있듯이 var 이름은 외부 변수를 사용하여 내부 함수나 변수를 호출할 수 있습니다. 개인 변수와 개인 메서드를 만듭니다.

4. 수업 프로그래밍 (무엇이라고 불러야 할지 모르겠습니다)

인용된 내용은 다음과 같습니다.

var 사람 = 함수(){
변수 이름 = null;
반품{
setName:함수(n){
이름 = n;
},
getName:함수(){
경고(이름);
}
}
}

이를 제외하고 메서드와 속성을 비공개로 설정할 수 있다는 점을 제외하면 개체 리터럴과 매우 유사합니다. 메서드 호출은 기본적으로 개체 리터럴과 동일합니다.

5.메소드 체인

인용된 내용은 다음과 같습니다.

var 사람 = 함수(){
this.name = null;
}
Person.prototype = {
setName:함수(이름){
this.name = 이름;
이거 돌려줘;
},
getName:함수(){
경고(this.name);
이거 돌려줘;
}
}

jQuery는 가장 고전적인 메소드 체이닝 라이브러리입니다. 아직도 메소드 체이닝이 무엇인지 이해하지 못한다면 다음 예제를 살펴보세요.

인용된 내용은 다음과 같습니다.

var p = 새로운 사람();
p.setName('Tom').getName().setName('Ray').getName();

각 메소드는 return this로 끝나기 때문에 메소드 체인 클래스가 생성됩니다.

이것이 나에게 더 친숙한 방법들이다.

1. 이 포인터에 대하여

이는 여러 카테고리를 생성할 때 사용되는데, 실제로 이는 재사용과 상속에 큰 역할을 합니다. 먼저 상속의 예를 살펴보겠습니다.
먼저 Person 클래스를 만듭니다.

인용된 내용은 다음과 같습니다.

var 사람 = 함수(){
this.name = null;
}
Person.prototype.setName = 함수(이름){
this.name = 이름;
}
Person.prototype.getName = 함수(){
경고(this.name);
}
Person.prototype.getAge = 함수(){
var age = this.age '';
경고(나이);
}

그런 다음 Children 클래스를 만들고 Person의 모든 메서드와 속성을 통합합니다.

인용된 내용은 다음과 같습니다.

var 어린이 = 기능(나이){
this.name = null;
this.나이 = 나이;
}
Children.prototype = new Person(); //Person의 속성과 메소드를 상속받습니다.
Children.prototype.ageJudge = function(){ //Children을 위한 새로운 메소드도 추가합니다.
if(이 나이 > 18){
Alert('어른~');
} 또 다른 {
Alert('18세 미만~');
}
}
Children.prototype.getName = function(){ //getName 메소드 재정의
var about = this.name + ' ' + this.age;
경고(정보);
}
var tom = new Children(12);
var age = tom.getAge(); //12
var Judge = tom.ageJudge(); //18세 미만~
var setN = tom.setName('톰');
var get = tom.getName(); //톰 12

이것이 상속이고 간단한 함수 재사용을 살펴보겠습니다.

인용된 내용은 다음과 같습니다.

var SetColor = 함수(){
this.style.BackgroundColor = '#000'; //이것은 창을 가리킵니다.
}
document.body.onclick = SetColor; //이때 본문을 가리킵니다.
documnet.getElementById('color').onmouseout = SetColor; //이것은 documnet.getElementById('color')를 가리킵니다.

이것의 기능을 본 후에 나는 이것에 대해 새로운 이해를 갖게 되었습니다. 이제 이것이 사용되어야 하는지에 대한 질문이 있습니다. 간단한 예를 살펴보겠습니다.

단 하나의 수업에서 이것은 때때로 사람들을 혼란스럽게 만드는 두 가지 장소를 가리킵니다. 방금 배우는 사람들은 이것으로 인해 혼란스러워질 것입니다. 그리고 코드 작성 방식을 약간 변경합니다.

인용된 내용은 다음과 같습니다.

이렇게 하면 코드가 더 명확해질 수 있으므로 코드를 작성할 때 향후 사용 여부와 재사용 가능 여부를 고려해야 합니다. 가능한 한 이것을 사용하지 마십시오. 또 다른 일반적인 문제는 다음과 같습니다.

인용된 내용은 다음과 같습니다.

var 사람 = 함수(){
this.name = null;
}
Person.prototype.setName = 함수(이름){
this.name = 이름;
}
Person.setName('tom'); //잘못된 방법입니다. setName 메소드의 이 항목은 Person.prototypel을 가리킵니다. Person에는 setName 메소드가 없습니다.

앞에서 언급한 것처럼 이 클래스에서 var p = new Person();p.setName('tom');으로 작성되지 않으면 이 오류는 컴파일 또는 런타임 중에 발생하지 않습니다. 오류가 보고되는 경우가 가끔 있으므로 코드를 작성할 때 항상 신중하게 선택합니다.

2. 클래스 캡슐화

Java에서는 외부 호출을 방지하기 위해 클래스의 메서드나 속성을 비공개로 설정할 수 있지만 JavaScript에는 이러한 설정이 없습니다. 다음 코드를 살펴보세요.

인용된 내용은 다음과 같습니다.

var 사람 = {
이름:null,
초기화:함수(이름){
this.setName(이름);
},
setName:함수(이름){
this.name = 이름;
this.name을 반환합니다.
}
}
person.init('톰'); //톰

이 클래스에는 init와 setName이라는 총 2개의 메소드가 있으며, init에서만 setName을 실행하거나 향후 추가될 다양한 메소드는 표시하지 않으려고 합니다.

person.setName('톰'); //톰

setName 메소드를 직접 호출하십시오. 정확하게 말하면 setName 메소드를 비공개로 하고 name 속성을 비공개로 설정하면 다른 프로그래머가 클래스를 사용할 때 호출하고 싶지 않은 메소드를 호출하는 것을 방지할 수 있습니다.
그렇다면 클래스를 어떻게 캡슐화해야 할까요? 다른 프로그래밍 방법을 시도해보고 수정된 버전이 어떻게 진행되는지 살펴보세요.

인용된 내용은 다음과 같습니다.

var 사람 = 함수(){
변수 이름 = null;
var setName = 함수(n){
이름 = n;
이름 반환;
}
반품{
초기화:함수(n){
setName(n);
}
}
}

이런 방식으로 원래 사유화하려고 했던 메서드와 속성은 외부에서 직접 호출할 수 없으며 클로저를 사용하여도 달성할 수 있습니다. 그러나 이 프로그래밍 방법은 특히 초보자에게는 읽기 쉽지 않습니다. 이런 종류의 코드를 보는 것은 매우 어려울 것이며, 일반 코드보다 더 많은 메모리를 차지할 것입니다.
좋아요, 지금은 그게 다입니다. 다음에 시간이 나면 클로저와 범위에 대해 이야기하겠습니다.