Javascript 객체 지향 프로그래밍_js 객체 지향

자바스크립트의 중요성
사용률
1. 웹 애플리케이션에서는 프론트엔드 인터페이스 프로그래밍에 있어 기본적으로 자바스크립트 언어가 사용됩니다.
2. Ajax는 JavaScript 언어를 홍보했습니다.
3. 많은 수의 C/S 애플리케이션이 B/S로 전환되고 풍부한 클라이언트 기술이 지속적으로 홍보됨에 따라 자바스크립트 언어의 적용 범위는 계속해서 늘어날 것입니다.
자바스크립트의 특성
간단함
동적
객체 기반(객체 지향)

Javascript 객체 지향 개요
Javascript는 객체 지향(기반) 동적 스크립팅 언어입니다. 보안 기능을 갖춘 이벤트 중심(EventDriven) 스크립팅 언어입니다. 캡슐화, 상속, 다형성 등 객체지향 언어 특유의 다양한 기능을 갖고 있습니다. 그러나 대부분의 사람들은 JavaScript를 기능적 언어로만 사용하고 간단한 프런트 엔드 데이터 입력 확인과 간단한 페이지 동적 효과를 얻기 위해 동적 언어의 다양한 측면을 완전히 파악하지 못했습니다.
ExtJS, JQuery 등 우수한 Ajax 프레임워크에서는 javascript의 객체지향 기능이 널리 사용되고 있습니다. ext 기술을 잘 활용하기 위해서는 javascript의 고급 기능과 객체지향 언어 기능이 필요합니다. 우리가 완전히 파악해야 할 것.

Javascript 관련 지식
Javascript 개발 역사
Javascript의 세 가지 주요 구성 요소
ECMAScript
구문 데이터 유형 명령문 키워드 예약어 연산자 객체
DOM(Document Object Model)
BOM(Browser Object Model)

자바스크립트의 유연성에 대한 논의
1. 동적 언어의 영적 시험
Javascript는 매우 유연한 기능을 갖춘 동적 언어이므로 사용 과정에서 동적 특성을 유연하게 익히고 적용해야 쉽게 사용할 수 있습니다.
다음 출력을 고려하세요

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

함수 동물(이름) {
this.name=name;
this.age=0
}
var a1=Animal;//Output:
var a2=Animal(); //출력:
var a3=new Animal();//출력:
var a4=new Animal;//출력:

데이터 유형 Javascript
기본 데이터 유형
숫자(Numbers)
문자열(Strings)
부울
특수 값 ​​(null, 정의되지 않음, NaN).
객체 유형 객체
객체는 복합 데이터 유형입니다. 객체는 기본 유형, 객체, 함수 등을 포함할 수 있습니다. 배열은 객체 유형입니다. JavaScript의 경우 클래스를 포함한 모든 것이 객체라고 할 수 있습니다! .
var c=new Object();
1. 숫자 유형
숫자 유형은 모든 언어에 존재하는 기본 데이터 유형으로 주로 정수가 포함됩니다. 두 가지 유형: Int)과 부동 소수점(Float)이지만 실제로는 두 유형 모두 부동 소수점 형태로 메모리에 저장됩니다. JavaScript의 숫자 유형은 일반적으로 숫자 상수 형태로 프로그램에 나타납니다. 일반적으로 110, 150 등과 같이 0부터 9까지의 10개의 숫자로 구성된 10진수 데이터를 기반으로 하며 0x 16진수로 시작할 수도 있습니다. 데이터(0-9 및 a에서 f까지의 16개 문자로 구성됨), 예를 들어 10진수로 변환된 0xff는 255입니다(예: 15*16 15 = 255). 일부 JavaScript 구현은 8진수 데이터도 지원합니다. 즉, 0으로 시작하는 데이터입니다. (0부터 7까지 8개의 숫자로 구성) 예를 들어 8진수 데이터 0377을 10진수로 변환하면 255, 즉 (3*64 7*8 7 = 255)가 됩니다.
2. 문자 유형
문자열은 다양한 문자, 숫자 및 특수 문자열로 구성됩니다. 작은따옴표나 큰따옴표를 프로그램에서 직접 사용하여 문자열 상수를 생성할 수 있습니다. 문자열에 캐리지 리턴 문자가 있을 수 없습니다. 문자열에 캐리지 리턴 문자를 포함하려면 이스케이프 문자를 사용해야 합니다. . 다음은 몇 가지 간단한 문자열 상수입니다.
"" // 빈 문자열: 문자가 없습니다.
'testing'
"3.14"
'name="myform"'
" wouldn' O'Reilly의 책을 선호하시나요?"
"이 문자열은 두 줄로 구성되어 있습니다."
"π는 원주와 지름의 비율입니다."

3、Boolean
Boolean 타입은 true 또는 false를 나타내는 데 사용됩니다. JavaScript에서는 Boolean 연산에 사용되는 경우 0 이외의 데이터, null 문자, null, 정의되지 않음, NaN 등이 모두 true를 나타냅니다.
if(0||""||false||null||undefine||NaN)alert("true를 반환하는 조건이 있습니다.")
유일한 부울 상수는 false 및 true, False 및 True는 상수가 아닙니다.

4. 객체 유형
Javascript는 객체 기반 언어이며 객체가 핵심입니다.

프로그램 흐름 제어
순차 구조
if 조건 선택 문
switch 선택 문
while 루프 문
do while 문
for 루프 문
break 및 continue 문

for...in 루프 문
for(컬렉션 또는 객체의 변수)
{
실행 문 블록
}

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

'};
for(var x in as)
{
output = x "=" as[x]
alert(출력)


논리 연산자
&&

논리 AND는 왼쪽과 오른쪽 피연산자가 모두 true이면 반환 값이 true이고, 그렇지 않으면 false를 반환합니다.

논리적 OR는 왼쪽과 오른쪽 피연산자가 모두 거짓일 때 거짓도 거짓도 아닌 첫 번째 값을 반환합니다.
!
논리적 부정, 피연산자가 true이면 반환 값은 false이고, 그렇지 않으면 true를 반환합니다.
참고:
논리 연산에서 0, "", false, null, 정의되지 않음 및 NaN은 모두 false를 나타냅니다.

함수 정의 및 호출
함수 정의 형식은 다음과 같습니다.
함수 함수명(매개변수 목록)
{
프로그램 코드
반환식
}

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

정의되지 않음
alert("sum=" square(2,3))


함수를 호출하는 여러 가지 방법:

함수 이름( 함수의 매개변수 1에 전달되고, 매개변수 2가 함수에 전달되고,….)
변수 = 함수 이름(함수에 전달되는 매개변수 1, 함수에 전달되는 매개변수 2,….)
다음을 사용한 함수 호출의 경우 반환 값을 사용하는 경우 반환된 결과를 프로그램에서 직접 사용할 수도 있습니다. 예를 들면 다음과 같습니다. Alert("sum=" square(2,3))
함수 값을 지정하지 않은 함수는 정의되지 않은 값을 반환합니다.
함수의 매개변수 가변성(인수)



코드 복사


코드는 다음과 같습니다.

숫자 클래스

숫자 클래스는 일부 정적 멤버 및 수치 처리 방법을 포함하는 데이터 클래스를 나타냅니다.
정적 속성:
MAX_VALUE, MIN_VALUE, NEGATIVE_INFINITY, POSITIVE_INFINITY, NaN
기본 메소드:
toFixed(n) - 소수 자릿수를 취하고 자동으로 반올림
toPrecision(n) - 여부 클래스 프로토타입
propertyIsEnumerable(property) - 속성을 열거할 수 있는지 여부
toString() - 객체에 해당하는 문자열을 반환합니다.
valueOf() - 객체에 해당하는 원래 유형 값을 반환합니다. 🎜>

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

문자열 클래스 length 속성
anchor, big,bold,fontcolor,link 및 기타 메소드
charAt 메소드
참고: 문자열은 0입니다.
charCodeAt 메소드
참고: 반환된 결과는 문자의 유니코드 인코딩입니다.
concat 메서드, 연결 문자열
indexOf 메서드 및 lastIndexOf 메서드
match, 검색 메서드
replace, 분할 메서드

slice 메서드
설명: str1.slice( 0) 및 str1.slice(0,-1)은 모두 전체 문자열을 반환합니다. substr, substring 메소드
substring 메소드에서 반환된 내용에는 끝 위치의 문자가 포함되지 않습니다.
toLowerCase, toUpperCase 메소드


Math 클래스 속성:
E는 수학 상수 e를 나타내며 이는 대략 2.718과 같습니다.
LN10은 10의 자연 로그를 나타내며 이는 대략 2.302와 같습니다.
LN2는 2의 자연 로그를 나타내며 대략 0.693과 같습니다.
PI는 수학 상수 ∏의 값을 나타내며 대략 3.14159와 같습니다.
SQRT1-2는 2의 제곱근의 1/4을 나타내며 대략 0.707과 같습니다.
SQRT2는 2의 제곱근을 나타내며 대략 1.414와 같습니다.

메서드:
abs 메서드, 숫자의 절대값을 반환합니다.
sin 및 cos 메소드는 각각 숫자의 사인 값과 코사인 값을 반환합니다.
asin 및 acos 메소드는 각각 숫자의 아크사인 및 아크코사인 값을 반환합니다.
임의 메서드는 0과 1 사이의 의사 난수를 반환합니다.
Math 개체는 정적 클래스입니다. new 키워드는 개체 인스턴스를 만드는 데 사용할 수 없습니다. "object 형식을 사용하여 직접 액세스해야 합니다. name.member" 해당 속성 또는 메서드(예: var num = Math.random();


Date 클래스
toGMTString 메서드는 다음과 같이 표시되는 날짜의 문자열 형식을 반환합니다. 문자열이 그리니치 표준시(GMT) 형식인 날짜 객체 인스턴스입니다(예: "05 Jan 1996 00:00:00 GMT"). getYear, getMonth, getDate, getDay 메소드
getHours, getMinutes, getSeconds, getMilliseconds 메소드
getTime 메소드는 1970년 1월 1일 0:00:00부터 날짜를 Date 객체 인스턴스 대표자에게 반환합니다. 시간까지 밀리초.

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

구성 방법: Date(), Date(dateVal), Date(년, 월, 날짜[, 시간[, 분[, 초[,ms ]]] ])
parse 메서드는 날짜와 시간을 나타내는 문자열을 분석하고 그것이 나타내는 시간 값을 반환합니다. 이 값은 1970년 1월 1일 0:00:00 이후 밀리초로 표시됩니다. 구문 분석 방법은 정적 방법입니다.


toString 메소드 toString 메소드는 JavaScript의 모든 내부 객체의 멤버 메소드이며, 주요 기능은 객체의 데이터를 특정 형식의 문자열로 변환하는 것입니다. , 구체적인 변환 방법은 개체 유형에 따라 다릅니다.

예:

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

< ;스크립트 언어 ="javascript">
var x = 328;
alert("hex=" x.toString(16) " bin=" x.toString(2)); script>


배열 클래스

세 가지 구성 방법:
Array()
Array(4)
Array(3.5,"abc",3)

배열 정렬 예:

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

Array 클래스의 속성 및 메서드
배열의 길이를 가져옵니다.
배열을 연결하고
조인하여 배열을 문자열로 변환합니다.
요소를 팝합니다. ;
push - 요소 넣기;
reverse - 데이터의 요소 순서 바꾸기
slice - 배열 가로채기; array;
unshift - 요소를 앞에 추가합니다.

객체 형태로 배열을 구현합니다

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

삭제 및 무효 연산자 삭제 연산자는 객체의 지정된 멤버를 삭제하는 데 사용됩니다.

var d=new Object();

d.p1="이것은 p1입니다.";
alert(d.p1)
delete d.p1; );
삭제는 사용자가 정의한 멤버만 삭제할 수 있습니다.
delete d.toString;
alert(d.toString())
void는 임의의 숫자를 정의되지 않은 숫자로 변환하는 데 사용됩니다.
var d=new Object();

alert(void(d))
애플리케이션 시나리오:
Click Me

클래스 수정
1. 프로토타입 상세 설명
2. 기존 클래스에 새로운 메소드 추가
3. , 슈퍼 포스트 바인딩

프로토타입은 Function 객체의 속성입니다. 객체의 멤버에 액세스할 때 먼저 객체 내부를 살펴보고 찾을 수 없으면 의 프로토타입 객체에서 찾습니다. 객체가 위치한 클래스입니다.

Encapsulation
Encapsulation: Encapsulation, 즉 객관적인 것을 추상 클래스로 캡슐화하는 것으로, 클래스는 자신의 데이터와 메소드를 신뢰할 수 있는 클래스나 객체에서만 작동하도록 허용하고, 신뢰할 수 없는 클래스나 객체에는 정보를 제공할 수 있습니다. . 숨다.
JavaScript에서는 클로저를 통해 캡슐화를 달성할 수 있습니다. 코드 예제를 참조하세요.
자바스크립트 공개 멤버 정의, 비공개 멤버 정의, 권한 있는 메서드 정의의 간단한 예를 다룹니다!




코드 복사


코드는 다음과 같습니다.

<script> <br>//자바스크립트 클래스 정의<br>function JsClass(privateParam/* */,publicParam){//Constructor<br>var priMember = privateParam; 🎜>this.pubMember = publicParam; //공용 변수<br>//비공개 메소드 정의 <br>function priMethod(){ <br>return "priMethod()";//권한 정의 메소드 <br>//권한 있는 메서드는 모든 멤버에 액세스할 수 있습니다<br>this.privilegedMethod = function(){ <br>var str = "이것은 권한 있는 메서드입니다. 제가 호출했습니다. "; <br>str = " 전용 변수: " priMember "n"; <br>str = " 전용 메서드: " priMethod() "n"; <br>str = " 공용 변수: " this.pubMember "n" ; <br>str = "공개 메소드:" this.pubMethod(); <br><br>return str; <br>} <br>} <br>//공개 메소드 추가 <br>//프라이빗을 호출할 수 없습니다. 변수 및 메소드 <br>JsClass.prototype.pubMethod = function(){ <br>return "pubMethod()"; <br>} <br><br>//JsClass 인스턴스 사용 <br>JsObject = new JsClass ( "priMember","pubMember"); <br><br>//alert(JsObject.pubMember);//pubMember 정보 팝업<br>//alert(JsObject.priMember);//정의되지 않은 정보 팝업<br>/ /alert(JsObject.pubMethod());//pubMethod 정보 팝업<br>//alert(JsObject.priMethod());//"객체가 이 속성 또는 메서드를 지원하지 않습니다." 오류 팝업 표시 <br>alert(JsObject.privilegedMethod()); <br></script>

Javascript 공개 멤버 정의 및 권한 있는 멤버 정의의 간단한 예를 다룹니다. 🎜>


코드 복사

코드는 다음과 같습니다. <script>//Define 자바스크립트 클래스</a> function JsClass(privateParam/* */,publicParam){//Constructor</span>var priMember = privateParam; //개인 변수</div>this.pubMember = publicParam>/ /비공개 메서드 정의<div class="codebody" id="code19821">function priMethod(){ <br>return "priMethod()"; <br>} <br>//권한 있는 메서드 정의<br>//권한 있는 메서드는 모든 멤버에 액세스할 수 있습니다<br>. 특권 메서드 = function() { <br>var str = "이것은 특권 메서드입니다. "; <br>str = " 전용 변수: " priMember "n"; <br>str = " 전용 메서드: " priMethod() "n"; <br>str = " 공용 변수: " this.pubMember "n" ; <br>str = "공개 메소드:" this.pubMethod(); <br><br>return str; <br>} <br>} <br>//공개 메소드 추가 <br>//프라이빗을 호출할 수 없습니다. 변수 및 메소드 <br>JsClass.prototype.pubMethod = function(){ <br>return "pubMethod()"; <br>} <br><br>//JsClass 인스턴스 사용 <br>JsObject = new JsClass ( "priMember","pubMember"); <br><br>//alert(JsObject.pubMember);//pubMember 정보 팝업<br>//alert(JsObject.priMember);//정의되지 않은 정보 팝업<br>/ /alert(JsObject.pubMethod());//pubMethod 정보 팝업<br>//alert(JsObject.priMethod());//"객체가 이 속성 또는 메서드를 지원하지 않습니다." 오류 팝업 표시 <br>alert(JsObject.privilegedMethod()); <br></script>



상속
객체 지향 프로그래밍(OOP) 언어의 주요 기능은 " 상속". 능력: 기존 클래스의 모든 기능을 사용하고 원래 클래스를 다시 작성하지 않고도 이러한 기능을 확장할 수 있습니다
1. 객체 가장
2. 호출 및 적용
3. 프로토타입 체인

4. 혼합 방식

상속-객체 가장




코드 복사


코드는 다음과 같습니다.

function classA(이름) { this.name=name; this.showName=function(){alert(this.name);} } function classB(이름) {

this.newMethod = classA;

this.newMethod(이름);
}
obj = new classA("hero")
objB = new classB("dby "); 🎜>obj.showName(); // print Hero
objB.showName(); // print dby는 classB가 classA의 메서드를 상속함을 나타냅니다.
객체 가장은
함수와 같이 다중 상속을 달성할 수 있습니다. classz(){
this.newMethod = classX;
this.newMethod();
delete this.newMethod;
}


그러나 classX와 classY에 For가 있는 경우 동일한 속성이나 메서드인 경우 classY의 우선순위가 높습니다.

상속 호출 메서드
호출 메서드는 고전적인 개체 가장 메서드와 유사한 메서드이며 첫 번째 매개 변수가 this의 개체로 사용됩니다. 다른 매개변수는

코드 복사


코드는 다음과 같습니다.

function sayName (perfix) { alert(perfix this.name); } obj= new Object(); obj.name="hero"; obj," hello," ); function classA(name) {

this.name=name;

this.showName=function(){alert(this.name);};
function classB(name) {
classA.call(this,name);
}
objB = new classB("bing")
objB.showName();/// /설명 classB classA의 showName 메소드 상속


상속된 적용 메서드
apply() 메서드에는 2개의 매개변수가 있으며, 하나는 이 객체로 사용되고 다른 하나는 함수에 전달되는 매개변수 배열입니다.
코드 복사

코드는 다음과 같습니다. function sayName(perfix) { alert(perfix this.name)

}

obj= new Object ();
obj.name="hero";
sayName.aplly(obj,new Array("hello,") )


상속 -프로토타입 체인
prototype 객체의 모든 속성과 메서드는 해당 클래스의 모든 인스턴스에 전달됩니다. 이것이 프로토타입 체인이 상속을 표시하는 방식입니다. name="hero";
classA.prototype.showName=function(){alert(this.name)}

function classB(){}
classB.prototype=new classA()
objb = new classB()
objb.showName();//print Hero는 b가 a의 메서드를 상속한다는 것을 나타냅니다.
여기서 classA의 생성자를 호출할 때 매개 변수가 전달되지 않는다는 점에 유의해야 합니다. 이는 함수가 생성되도록 보장하는 프로토타입 체인의 표준 관행입니다. 함수에는 매개변수가 없습니다.
그리고 서브클래스의 모든 속성과 메소드는 프로토타입 속성이 할당된 후에 나타나야 합니다. 객체의 프로토타입 속성이 새로운 객체로 대체되므로, 새로운 메소드가 추가된 원본 객체는 소멸됩니다.

상속 혼합 방식
을 사용하는 것입니다.




코드 복사

코드는 다음과 같습니다. 함수 classA(이름) { this.name=name; } classA.prototype.showName=function(){alert(this.name)}

함수 classB( name) {

classA.call(this,name);
}
classB.prototype = new classA()
classB.prototype.showName1=function(){alert(this.name " *****");};
obj = new classB("hero");
obj .showName();
obj.showName1();


classB의 생성자에서 call 메소드를 호출하여 classA의 name 속성을 상속하고, 프로토타입 체인을 사용하여 classA의 showName 메소드를 상속합니다.

JavaScript의 메소드 오버로딩에 대한 논의
메소드 오버로딩 및 오버라이딩
Javascript의 메소드 자체에는 가변 매개변수가 있으며 오버로딩 작업을 지원하지 않습니다. 하지만 메소드 본문에서 메소드의 매개변수를 자유롭게 감지하여 오버로딩 효과를 얻을 수 있습니다. (오버로딩을 시뮬레이션하기 위해 가변 매개변수 또는 인수를 사용하는 예)

덮어쓰기라고도 불리는 덮어쓰기는 하위 클래스에 정의된 메서드가 상위 클래스의 메서드를 대체하는 것을 의미합니다.

JavaScript의 다형성(polymorphisn)에 대한 논의
다형성(polymorphisn): 예 상위 개체를 하나 이상의 하위 개체와 동일하게 설정할 수 있습니다. 할당 후 상위 개체는 현재 할당된 하위 개체의 속성에 따라 다른 방식으로 동작할 수 있습니다. 간단히 말하면 한 문장입니다. 하위 클래스 유형의 포인터를 상위 클래스 유형의 포인터에 할당할 수 있습니다. 다형성은 또 다른 목적, 즉 인터페이스 재사용을 달성하는 것입니다. 다형성의 역할은 클래스가 상속되고 파생될 때 "가계도"에 있는 모든 클래스 인스턴스의 특정 속성을 사용할 때 올바른 호출을 보장하는 것입니다.
var a=[a1,a2,a3];