객체지향 Javascript 중 하나(Javascript 최초 소개)_js 객체지향

1. 자바스크립트의 가장 큰 특징은 유연성이다. 프런트 엔드 개발자는 함수형 프로그래밍 스타일이나 보다 복잡한 객체 지향 프로그래밍 스타일을 사용할 수 있습니다. 어떤 스타일을 채택하더라도 매우 유용한 작업을 수행할 수 있습니다. 따라서 Javascript는 프로세스 지향 언어이자 객체 지향 언어로, 객체 지향 언어의 프로그래밍 패턴과 관용어를 모방할 수 있습니다. 예를 들어 애니메이션 시작 및 중지를 살펴보겠습니다.

함수형 프로그래밍 스타일에 익숙하다면 코드는 다음과 같습니다.

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

function startAnimation() {
//애니메이션 활성화
}
function stopAnimation() {
//애니메이션 중지
}

이 방법은 간단하지만 상태를 저장하고 내부 상태에서만 작동하는 애니메이션 개체를 만들 수 없습니다. 아래에서는 클래스를 정의합니다.

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

var Animation = function() {
//애니메이션 클래스
};
Animation.prototype.start = function() {
//애니메이션 활성화
}; function() {
//애니메이션 중지
};
/*사용법은 다음과 같습니다*/
var anim = new Animation()
anim.start(); .stop() ;


클래스 정의를 선언으로 캡슐화하려는 경우 코드는 다음과 같습니다.

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

var Animation = function() {

//Animation class
}
Animation.prototype = {
start: function() {
//애니메이션 활성화
},
stop: function(){
//애니메이션 중지
}
}; 🎜>
이렇게 하면 객체의 프로그래머가 더 친숙해 보이고 더 복잡한 작성 방법을 시도할 수 있습니다.

코드 복사

코드는 다음과 같습니다. Function.prototype.method = function(name, fn){ this.prototype[name] =

}

var Animation = function() {
//애니메이션 클래스
};
Animation.method("start", function(){
//애니메이션 활성화
}); Animation.method("stop", function( ){
//애니메이션 중지
});


Function 클래스에 대한 메서드 메서드를 확장하여 새로운 메서드를 추가했습니다. name은 함수 이름을 나타내고 fn은 함수의 특정 구현을 나타냅니다. 이 작성 방법을 기반으로 함수 지원 체인 호출을 만들 수 있습니다.

코드 복사

코드는 다음과 같습니다. Function.prototype.method = function(name, fn){ this.prototype[name] = fn; return this;

}

var Animation = function( ) {
//애니메이션 클래스
};
Animation.method("start", function(){
//애니메이션 활성화
}).method("stop", function( ) {
//애니메이션 중지
});


지금까지 코드 양, 코딩 효율성 및 실행 성능이 다른 5가지 프로그래밍 스타일을 살펴보았습니다. 현재 프로젝트에 가장 적합한 프로그래밍 스타일로 작업할 수 있습니다.

2. 자바스크립트는 약한 유형의 언어입니다. 변수를 선언할 때 유형을 지정할 필요는 없지만 그렇다고 유형이 없다는 의미는 아닙니다. Javascript에는 부울, 숫자 및 문자열 유형, 객체 유형 및 함수 유형, 마지막으로 빈 유형 및 정의되지 않은 유형의 세 가지 기본 유형이 있습니다. 기본 유형은 값으로 전달되고 다른 유형은 참조로 전달됩니다. 변수 할당에 따라 타입이 변경될 수 있으며, 기본 타입끼리 서로 변환이 가능합니다. toString()은 숫자 또는 부울 값을 문자열로 변환할 수 있고,parseInt() 및 parseFloat()는 문자열을 숫자 값으로 변환할 수 있으며, 이중 "not" 연산은 문자열 또는 숫자 값을 부울 값으로 변환할 수 있습니다.

3. 자바스크립트 함수는 "일류" 객체입니다. 함수는 변수에 저장되거나, 다른 함수에 인수로 전달되거나, 다른 함수의 반환 값으로 전달되거나, 런타임에 생성될 수 있습니다. 함수를 다룰 때 객체 지향 구축의 기반이 되는 뛰어난 유연성과 강력한 표현 능력을 제공합니다. 익명 함수는 function() {...}을 통해 생성할 수 있습니다(함수 이름 없이 변수에 할당할 수도 있음). 다음은 예시입니다.




코드 복사

코드는 다음과 같습니다. (function( ){ var a = 10; var b = 5;

alert(a * b);//Return 50

})();//함수 정의가 즉시 실행됩니다. 🎜>

즉시 실행이 가능한 이유는 함수 선언 뒤의 괄호 한 쌍 때문입니다. 그러나 우리는 괄호 안에 아무것도 없다는 것이 전적으로 사실이 아니라는 것을 발견합니다.

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

(function(a, b){
alert (a * b);//Return 50
})(10, 5);//이전 함수와 동일

이 익명 함수는 이전 함수와 동일합니다. 변수가 함수에 없다는 점만 제외합니다. 내부에서 선언되었지만 외부에서 직접 전달됩니다. 실제로 이 익명 함수는 반환 값을 갖고 이를 변수에 할당할 수도 있습니다.

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

var c = (function(a, b) ){
return a * b;//Return 50
})(10, 5);//이전
alert(c);//50

익명 기능 가장 큰 용도는 클로저를 만드는 것입니다. 소위 클로저(Closure)는 내장된 함수에 의해 생성된 보호된 가변 공간입니다. Javascript에는 함수 수준 범위가 있으므로 함수 내부에 정의된 변수는 함수 외부에서 액세스할 수 없습니다. 함수는 호출 범위가 아닌 정의된 범위에서만 실행됩니다. 이러한 방식으로 변수를 익명 함수로 래핑하여 변수를 보호할 수 있습니다. 예를 들어 다음과 같이 개인 변수를 생성할 수 있습니다.

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

var c;
(function(){
var a = 10;
var b = 5;
c = function(){
return a * b; //return 50
}
})();
c();//c는 익명 함수 외부에서 실행되더라도 a, b에 액세스할 수 있습니다

4. 개체는 "변수"입니다. 모든 것은 객체이며(3가지 기본 유형 제외) 모든 객체는 변경 가능합니다. 이는 다른 언어에는 존재하지 않는 몇 가지 기술을 사용할 수 있음을 의미합니다. 예를 들어, 함수에 속성을 동적으로 추가합니다.

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

function displayError(error){
displayError.numTimesExecuted ;
alert(error);
}
displayError.numTimesExecuted = 0;//미리 정의된 클래스와 객체를 수정할 수 있음을 의미합니다.

클래스의 인스턴스가 생성된 후 동적으로 추가되면 정의된 객체에 대해 여전히 유효합니다. 예:

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

함수 사람(이름, 나이) ) {
this.name = 이름;
this.age = age;
}
Person.prototype = {
getName: function() {
return this.name; 🎜>},
getAge: function() {
return this.age;
}
}
//먼저 두 개의 변수를 정의합니다.
var 기적 = new Person("Miracle ", 28 );
var mike = new Person("Mike", 32);
//동적으로 메소드 추가
Person.prototype.getGreeting = function() {
return "Hello " this.getName () "!";
};
//displayGreeting()은 Miracle
miracle.displayGreeting = function() {
alert(this.getGreeting());
}


객체의 변경 가능성과 관련된 리플렉션("내성 검사"라고도 함)은 런타임에 객체의 속성과 메서드를 확인하고 이 정보를 사용하여 개발 중에도 클래스를 인스턴스화하고 메서드를 실행합니다. 이름을 알 필요가 없습니다. 객체의 이러한 두 가지 특성 덕분에 객체 지향 언어의 고급 기능을 완전히 모방할 수 있지만 Javascript의 모든 객체는 런타임에 수정될 수 있다는 점을 기억하세요.

5. 자바스크립트는 "상속"을 구현하는 재능이 있습니다. 다음은 간략한 설명입니다. Javascript 상속에는 "클래스" 상속과 객체 기반 프로토타입 상속이 포함됩니다. 이 주제는 다음 기사에서 자세히 설명하겠습니다.

마지막으로, Javascript와 같이 겉보기에 절차적인 언어를 처리하기 위해 객체 지향 및 디자인 패턴 아이디어를 사용하면 어떤 이점이 있습니까? 참고로 다음 사항을 요약했습니다.

(1) 유지 관리성. 모듈 간의 결합을 줄이는 데 도움이 되며 프로젝트의 코드를 모듈 및 기능적 책임에 따라 나눌 수 있습니다.

(2) 의사소통이 쉽습니다. 대규모 팀의 경우 매우 간단한 용어로 디자인 패턴을 사용하여 다른 팀 구성원의 세부 사항에 너무 집중하지 않고도 구현을 담당하는 기능 모듈에 대한 높은 수준의 요약을 제공할 수 있습니다.

(3) 성능을 향상합니다. 패턴을 활용하면 클라이언트로 전송되는 코드의 양을 줄이고 프로그램 실행 속도를 높일 수 있습니다.

물론 장점도 있고 단점도 있습니다. 단점은 다음과 같습니다.

(1) 복잡성이 상대적으로 높습니다. 유지 관리성을 확보하는 데 드는 비용은 높은 수준의 코드 재구성 및 모듈식 분할이므로 일부 초보자가 한 번에 적응하기 어렵습니다.

(2). 일부 모드는 실제로 성능을 저하시킵니다. 그러나 프로젝트 요구 사항에 따라 이러한 끌림은 사소하거나 허용되지 않을 수 있습니다.

따라서 모든 사람이 디자인 패턴의 적용 시나리오를 이해하는 방법을 배우는 것이 좋습니다. 올바른 시나리오를 사용하는 것이 디자인 패턴의 진정한 적용입니다. 맹목적으로 적용하거나 잘못된 상황에서 사용하는 것은 오용이므로 사용하지 않는 것이 좋습니다.