때때로 우리는이 원칙이 무엇인지 모르는, 컴퓨터를 사용하지만, 그는 객체 지향 인 사용됩니다. 마찬가지로, 자바 스크립트는이 원리를 사용할 수 있습니다에, 다음 날 그것에 어떤 객체 지향 자바 스크립트의 내용을 함께 살펴 보자.
프로그래밍과 객체 지향 프로그래밍이 단계를 구현하는 단계 기능을 사용하여 다음 문제를 분석, 그리고 단계에 대한 절차에 대한 개요를 처리, 각 프로세스에 초점이 완료됩니다. 객체 지향 패키지 아이디어에 기초하고, 문제 분석 데이터는 대응하는 기능 개체의 동작에 의해 달성되며, 하나의 오브젝트에 캡슐화 구한다. 밤나무의 경우 : 쿡 프로세스 중심의 생각을 조리하는 것은 다음과 같은 단계로 분석 할 : 1. 재료 2. 그렇지 않을 경우, 졸리 화재 3. 4. 5. 요리 야채 충분히 완료 확인 1. 요리, 식품 검사, 2 조리 구매자 졸리 3 : 팬 플레이트 6. 객체 지향 분석 생각 (적절한 향료 등으로 재료의 순서로)이있다. baidunzi은, 야채, 야채는 위의 예에서 볼 수있는 객체 위의 전체 프로세스의 동작을 호출하는 방법에 의해 제조 된 요리의 요리를 완료하기 위해, 객체 지향 및 프로세스 중심의 가장 큰 차이점은 객체 지향 관심에 의해, 그입니다 어떤 목적, 각각의 기능을 가져야하고, 프로세스 지향 관심사는 각 단계의 구현 방법이다. 그것은 더 나은 결국이 두 가지 아이디어 그래서? 표면에서 보이는 같은 더 나은 객체 지향, 왜? 그렇게 수용의 측면에서, 우리의 사고 정상적인 방법에 맞춰 완벽하게이기 때문에, 객체 지향 사고는 확실히 낫다. 그러나, 거기 프로세스 중심 상대적으로 자원을 더 소비 될 것입니다 말하기, 유연하고 편리하게 자신의 장점을하지만, 조금 느린 객체 지향. 그래서,에 관해서는 어떤 종류의 우리가 특정 요구 볼 필요가 미래의 사용,의, 다른 필요에 따라 다른 선택을 할 수 있도록. 위의 분석을 통해 객체 지향 프로그래밍 개념, 우리는 결국 우리가 객체의 구조는 우리가 아래로 계속해서 배울 무엇을 얻을, 객체 지향 패키지 기능 분석과 사물에 초점을 맞추고 있음을 알고있다. 예를 들어, 사람들이 내 분석 얻을, 모두가 이름, 나이, 성별 등의 특성을 가지고 있지만, 또한 먹고 수면 및 기타 행위는, 다음 JS는 다음과 같은 패키지를 할 수있는 사용 : var에 P = {이름 : "아오 노래", 연령 10, 성별 : 1, 먹을 : 함수 () {CONSOLE.LOG ( "음식");} 슬립 : 함수 () {CONSOLE.LOG ( "슬립");}} CONSOLE.LOG (p.name)를; 오브젝트 속성 p.eat // ()에 대한 액세스, 객체 호출 방법 속성 이름 / 나이 / 성별 먹고, // 상기 방법에서, 상기 피 대상물이 물체를 나타내는 액세스하는 / 슬립 오브젝트라고 우리는 객체의 속성 또는 적절한 방법에 액세스함으로써 달성하고자. 우리는 그래서 리뷰의 구조에서 거친 모습하자, HTML 문서가 실제로는 나중에 사용 HTML로 과정을 필요로하는, 라벨의 무리에 의해 구성되어 찾은 HTML을 학습 DOM 작업에게 관련 지식을 검토 한 후.
H5-JS 객체 지향
나는 P1이었다
나는 P2했다
나는 P3했다
나는 1을 향하고 있었다
나는 2를 향하고 있었다
나는 3 향하고 있었다
세 가지 기능을 패키지 :
- setStype (ELES, BGCOLOR는) : 스타일 요소를 설정
- ELES : 소자
- BGCOLOR : 배경 색상
- getElementsByTagName (태그 이름)는 : 요소 이름에 기초하여, 지정된 요소를 가져
- 태그 이름 : 요소 이름
- getElementsByClassName (클래스 이름은) : 클래스의 속성 이름에 따라 지정된 요소를 가져옵니다
- 클래스 이름 : 클래스의 속성 이름
- 다음 단계는 첫 번째 방법에서 중복 코드를 많이 문제를 해결하기 위해, 위의 요구 사항을 완료하는 데 세 가지 방법을 호출하는 것입니다. 그러나이 방법은 문제가 남아있다. JS 재단 앞에서는 프로그램의 실행의 효율을 감소 전역 변수의 대량 사용을 피하도록해야한다는 것을 상기 프로그램은, 우리는 오 (함수를 포함)이 등장. 최적화를 계속하는 것이 필요하다. 작성 및 세 가지 기능은 객체 VAR로 포장됩니다 위의 설정 탭 위의 문제를 해결하기 위해 객체 지향 사고 (객체 지향)을 사용하여, 우리는 할 수 있습니다
.getElementsByTagName (이하 "P-")
.getElementsByClassName ( "테스트");
이 오브젝트 세트 스타일에서 getElementById하지 않은 요소의 id 속성에 따른 소자를 얻기 위하여 추가된다 : {창 함수 (eleId) [document.getElementById를 (eleId)]} 참고 그 스타일링 공정에서는 기본값은 수동이 반환 된 배열에 요소를 추가하는 얻을 것이다, 우리는 방법에서 getElementById, 그래서 여기에 배열 처리로 전달 된 요소입니다. 관찰함으로써,
GetElements = {{byTagName : 함수 (태그 이름) {창 document.getElementsByTagName (태그 이름)]} byClassName : 함수 (클래스 명) {document.getElementsByClassName (클래스 명)를 반환}, byId : 함수 (eleId) {창 [문서. 에서 getElementById (eleId)];}} setStype : 함수 (ELES, BGCOLOR)는 {위해은 (VAR 난 = 0; I <eles.length; I ++) {ELES [I] .style.backgroundColor = BGCOLOR; ELES [I]. style.border = "1 픽셀 고체 # 000"; ELES [I] .style.color = "화이트";}}} 다음 요소를 얻는 또 다른 방법이있는 경우 $ getElements로 소자 패키지를 획득하기위한 방법은, 속성 개체 , getElements 속성에 추가해야합니다, 캡슐화 방법의 다른 유형이 아이디어를 따라야합니다. 객체 지향 프로그래밍 객체 지향 기능의 세 가지 특성 : 포장의 역할 : 다중화 정보 은닉과 캡슐화, 추상 클래스로 패키지 목적 일이며, 클래스가 데이터 및 방법 만이 신뢰할 수있는 클래스 나 개체를 넣을 수 있습니다 신뢰할 수없는 정보의 숨어의 작동. 그것은 기존의 클래스 상속,이 기능은 원래 클래스의 경우 확장 재 작성하지 않고도 모든 기능을 사용할 수 있습니다. "하위 클래스"또는 불리는 상속하여 새로운 클래스를 만듭니다 "파생 클래스." 상속 클래스는 "기본 클래스", "부모"또는라고 "슈퍼 클래스." 일반에서 특정 프로세스에,이다 승계 과정. 다형성은 상속 가능하고 그 등가물 이상의 서브 클래스 객체의 하나로서 본 상위 클래스 개체로 존재하는 경우. 이와 같이, 다른 방식으로 할당 된 상위 클래스 오브젝트의 현재의 서브 - 객체의 특정 조건에 따라 작동 될 수있다. 리터럴 직접적인 비교 예를 사용하여 객체를 생성 할 리터럴 방법으로 작성된 오브젝트 키 데이터의 포맷을 정의 VAR의 BOOK1 = {상품명 : "자바 스크립트 확실한 가이드"가격 : 100, 저자 : "팀"은 showInfo : 함수 () {을 console.log (this.name, this.price, this.author);}}을 console.log (BOOK1) 책의 목적은 위의 정의 및 속성과 메소드를 추가, 우리가 직접 액세스 할 수 상기 속성들 및 방법. 이 방법의 단점은 여러 유사한 객체를 생성해야하는 경우, 그것은 매우 편리 아니라고, 중복 코드를 많이 나타납니다입니다. 즉,이 방식은 동일 또는 유사한 개체를 다수 생성에 적합하지 않다. 생성자에 내장 객체에게 새로운 키워드 +를 사용하여) (객체 var에 BOOK2 = 새 개체를 만들 수있는 간단한 공장을 만들 내장 생성자, book2.name = "JS"; book2.price = 10; book2.author = "저자"; BOOK2 .showInfo = 함수 () {CONSOLE.LOG (this.name, this.price, this.author)} book2.showInfo (), 이러한 방식으로 존재 및 개체 생성 리터럴 유사한 방식으로 문제를 다수 생성 개체 때 중복 코드를 많이있을 것입니다. 그런 다음, 패키지의 이데올로기 앞을 사용하여, 우리는 중복 된 코드가있을 때, 우리는 해결의 함수로 그려 이러한 코드를 반복 할 수 있음을 예상 할 수 있어야한다. 기능 createBook (이름, 가격, 저자) {var에 책 = 새 개체 (); book.name = 이름; book.price = 가격; book.author = 저자, book.showInfo = 함수 () {을 console.log (이. 이름, this.price, this.author); } 반환 책;} var에 book3 = createBook ( "bookName1", 10 "author1"); var에 book4 = createBook ( "bookName2", 10 "author2");을 console.log (book3)을 console.log (book4) 당신은 객체가 직접 함수를 호출 할 때 책을 만들 필요가있을 때 우리는, 책의 객체가 createBook 기능을 캡슐화하는 코드를 생성합니다, 함수는 과거에 매개 변수를 전달해야합니다. 음, 같은 생각, 우리가 다른 객체를 생성해야하는 경우, 당신은 래퍼 함수를 해결하기 위해 같은 방법을 사용할 수 있습니다, 이것은 아무런 문제가 없다. 기능 createPerson (이름, 나이) {var에 P = 새 개체 (); p.name = 이름; p.age = 나이; 반환 피;}을 console.log (createPerson ( "Neld", 10)) 위의 함수를 사용하여, 우리는 Person 객체를 만들 수 있지만 인쇄 대비를 통해, 우리는 객체 생성 밖으로에 의해 개체의 유형을 결정할 수는 없지만, 우리는 자기 아래로보고 계속 때문에 실제 개발에, 우리는 자주 수행해야하는 개체의 유형을 결정 객체를 생성하는 생성자를 정의합니다. this.age = 나이; 생성자는 사용자 지정 개체 생성자 함수와 일반적인 정의 정확히 같은 방식으로, 다음, 우리는 사람 기능 createPerson (이름, 나이, 성별)를 생성하는 생성자를 정의 {this.name = 이름을 작성; this.sex = 성]} var에 p = 새로운 createPerson ( "Neld"10, 1) = P2 VAR의 새로운 createPerson ( "노래", 12, 0); CONSOLE.LOG (p) CONSOLE.LOG (P2) ;
- 다음 단계는 첫 번째 방법에서 중복 코드를 많이 문제를 해결하기 위해, 위의 요구 사항을 완료하는 데 세 가지 방법을 호출하는 것입니다. 그러나이 방법은 문제가 남아있다. JS 재단 앞에서는 프로그램의 실행의 효율을 감소 전역 변수의 대량 사용을 피하도록해야한다는 것을 상기 프로그램은, 우리는 오 (함수를 포함)이 등장. 최적화를 계속하는 것이 필요하다. 작성 및 세 가지 기능은 객체 VAR로 포장됩니다 위의 설정 탭 위의 문제를 해결하기 위해 객체 지향 사고 (객체 지향)을 사용하여, 우리는 할 수 있습니다
- 생성자 자본 요구 사항의 이름의 첫 글자
- 새로운 키워드와 생성자를 사용할 필요는 함께 개체를 만듭니다
- 함수에서 캡슐화 수동 오브젝트를 작성해야하고, 캡슐화 된 데이터는 자동으로 생성되지
- 마지막 함수에서하지 않고 수동으로 오브젝트 좋은 수익을 만들기 위해 자동으로 여기에 반환, 우리는 반드시있을 것입니다 질문은, 결국 사용자 정의 생성자 및 패키지 개체를 만드는 방법?
- 함수 내부) (기본 빈 객체 var에 OBJ = 새로운 객체를 작성합니다;
- 기본 할당이에 좋은 개체를 만들려면이 = OBJ;
- 현재 프로토 타입 객체 생성자이 프로토 타입 객체의 기본 설정
- 이 추가 속성과 메소드에 의해
- 내부 기본을 만든 객체는이를 반환 돌려 주어, 위의 분석을 통해, 나는 우리가 기본적인 사용을 사용자 정의 생성자와의 기본 원리를 이해 할 수 있었다 생각합니다. 생성자는 객체를 반환 디폴트 값, 함수가 반환 새로 만든 좋은 객체의 내부 구조 (이) 이니셔티브의 반환을 생성합니다 :
- 반환 된 데이터의 유형의 값은 여전히 수정없이 생성 된 객체 (이)를 반환하는 경우
- 참조 데이터의 반환 형식이 지정된 데이터가 반환되면이를 반환하지. 당신이 사용 변수에 값을 할당 할 수 있습니다로 JS 세계에서 생성자 매개 변수로 함수, 함수, 매개 변수로 전달 될 수있다, 함수의 반환 값으로 사용할 수의 자신의 특정 살펴 보자, 대부분의 특권으로, 일류 시민에 속하는 그것은 사용합니다. 함수는 함수의 파라미터로서 F1 (이름, 나이, FN)을 사용하여 {(: 이름, 「연령 : ""이름 ", 나이) CONSOLE.LOG; FN을 ();} 함수 FN () {CONSOLE.LOG ("안녕하세요 H5를 ");} F1 ("Neld ", 10, FN)의 출력 이름 : Neld 연령 : 위의 코드에서 10여 H5, 함수 (FN)는 F1 함수에 파라미터로서 전달되고, 함수 F1 호출 인쇄물 수득 대응. {(:, 이름, "연령 :"연령 "이름"); 반환 FN; CONSOLE.LOG} 기능 FN () {을 console.log ( "안녕하세요 H5 기능 F1 (이름, 나이, FN)의 반환 값의 함수로 ");} VAR retFun = F1 ("Neld ", 10, FN) retFun () 상기 FN 함수 (F1)에 대한 호출을 수신 한 이후에 반환하는 반환 값으로서 돌려의 함수 F1 전달은 복귀 가치는 다음 호출 retFun GET 인쇄 결과. 이때, 상기 함수 F1은 즉, 하나 이상의 매개 변수의 함수, 및 리턴 값 함수이고, 고차이다. 이때, FN 함수 (F1)에 파라미터로서 전달 된 콜백 함수 FN은 내부적 F1했다. 함수 생성자 함수 createPerson (이름, 나이, 성별, 말)의 인수로 {this.name = 이름이 사용된다 this.age = 연령, 성별 this.sex =; this.say = 말; } 바르 p = 새로운 createPerson ( "Neld"10, 1, 함수 () {CONSOLE.LOG ( "안녕하세요 말하자면");}) VAR의 P2 = 새로운 createPerson ( "노래"12, 0, 함수 () { CONSOLE.LOG ( "작별 인사");}) p.say (); p2.say () 메소드의 실행은 호출자에 의해 결정되는 경우가있어서, 생성자에 캡슐화 될 수 있고, 이는 일 수 생성자 함수 객체를 수신하고 생성자 캡슐화. 상기 기능은 가령, 상기 전송 파라미터 p에 할당 객체를 생성 할 때, P2라고하고 생성자에서 현재 오브젝트에 할당. 우리는 우리가 사용 이미 할 수있는 객체를 생성하는 사용자 정의 생성자를 생성하기 위해 생성자를 사용하기로 결정했습니다, 그래서 속성 식물 생성자 함수 앞에 말하기, 객체가 더 편리 만들 수 있지만 개체의 유형 밖으로 만들 수없는 문제가있다합니다 다음, 그에 의해 객체 유형을 만드는 방법? 여기서 우리는 두 가지 방법을 제공합니다. 이것은 상기 방법의 구현은 호출자에 의해 결정되는 경우, 그 객체는 생성자 함수를 수신 할 수있다 다음 생성자 캡슐화 패키지의 생성자의 방법으로 수행 될 수있다. 상기 기능은 가령, 상기 전송 파라미터 p에 할당 객체를 생성 할 때, P2라고하고 생성자에서 현재 오브젝트에 할당. 우리는 우리가 사용 이미 할 수있는 객체를 생성하는 사용자 정의 생성자를 생성하기 위해 생성자를 사용하기로 결정했습니다, 그래서 속성 식물 생성자 함수 앞에 말하기, 객체가 더 편리 만들 수 있지만 개체의 유형 밖으로 만들 수없는 문제가있다합니다 다음, 그에 의해 객체 유형을 만드는 방법? 여기서 우리는 두 가지 방법을 제공합니다. 이것은 상기 방법의 구현은 호출자에 의해 결정되는 경우, 그 객체는 생성자 함수를 수신 할 수있다 다음 생성자 캡슐화 패키지의 생성자의 방법으로 수행 될 수있다. 상기 기능은 가령, 상기 전송 파라미터 p에 할당 객체를 생성 할 때, P2라고하고 생성자에서 현재 오브젝트에 할당. 우리는 우리가 사용 이미 할 수있는 객체를 생성하는 사용자 정의 생성자를 생성하기 위해 생성자를 사용하기로 결정했습니다, 그래서 속성 식물 생성자 함수 앞에 말하기, 객체가 더 편리 만들 수 있지만 개체의 유형 밖으로 만들 수없는 문제가있다합니다 다음, 그에 의해 객체 유형을 만드는 방법? 여기서 우리는 두 가지 방법을 제공합니다.
- constructor 속성
함수 인 (명) {this.name = 이름} 함수 개 (명) {this.name = 이름} var에 p = 새로운 사람 ( "P")] D = VAR의 새로운 개 ( "D"); 콘솔. 로그 (p.constructor); // 사람의 인쇄 기능 개체입니다 CONSOLE.LOG 수 (d.constructor를); // 얻을 개 인쇄 기능 객체 경우 (p.constructor == 사람) {을 console.log ( " Person 객체입니다") } (d.constructor == 개) 경우에 {CONSOLE.LOG ( " 개 개체는") 우리가 할 수 있도록} 속성은 타입 생성자를 결정함으로써, 사용하기위한 객체를 생성하는 3 생성자 함수 객체 생성자 도착 개체의 유형 4 생성 알고 있습니다.
- instanceof를 키워드
- 함수 인 (명) {this.name = 이름; } 함수 개 (명) {this.name = 이름; VAR} p를 새로운 사람 ( "P"는) =; CONSOLE.LOG (사람 instanceof를 P) VAR (D)이 새로운 개 ( "D"를) =; //trueconsole.log (사람 instanceof를 d); // 거짓
- 종류가 true를 반환 지정 및 false로 반대 그 경우 instanceof를 키워드 직접 개체의 유형을 판별 할 수 있습니다.
여기에 우리가 생성자을 기록해 다시하는, 아직 명확하지 생성자를 호출하고 생성자를 공부의 이름을 따서 명명, 일부 학생들은 일반 기능과 구별 할 수 있습니다. 1. 생성자 함수 일반 정의에는 차이가 없다 2. 함수 함수 이름 (매개 변수리스트) {코드 블록} 구문 (3)와 통상의 기능을 구별하기 위하여, 4, 우리는 상부 케이스 (5)의 생성자 이름 합의 6. 생성자를 직접 호출 할 수 있습니다처럼,이 윈도우의 실행 안에이 시간,이 방법은 함수 내에서 현재의 글로벌 변수를 수정하는 것이 가능하고, 안전하지 않습니다,하지 않는 것이 좋습니다,하지만 너무도하고있는 것은 개체 (7)를 만들 수 없습니다. 8. 당신은, 우리가 코드를 더 우아 할 수 있습니다, 우리는이 키워드에 많이 사용이 잘 활용이 컨텍스트와 JS 프로그래밍의 과정에서 발견 된 새로운 9 함수 포인터로 사용되는 생성자를 사용해야합니다, 객체를 생성 할 . 이 항상 객체 (참조 형식)를 수행하지만, 특정을 수행하는 사람들, 우리는 적절한 경우이를 사용해야합니다. 여기에 다음과 같은 상황으로 구분된다 :
- 외부 기능
- 스코프 기능 글로벌 범위 (창) 밖에 그래서 도메인을 가리키는 윈도우의 사용의 전체적인 효과
- 일반 내부 함수
- 함수 범위가 로컬 내부 임원이 현재 오브젝트 함수를 호출 할 수 있도록, 발신 객체에 속하는 현재 함수이고,
- 내부 생성자
- 생성자에서 새로운 객체의 직접 구현은 현재 밖으로 만들어
- 개발, 우리는 또한 전화를 사용하거나 우리가 후술 계속이의 실행을 수정하는 기능을 적용 할 수 있습니다. 많이와 개발의 불확실성의 공장 함수 객체 유형에 따라 발생하는 문제를 해결할 수있는 생성자 정의 생성자의 정의의 문제는 우리는 사용자 정의 그래서 지금, 생성자가 있고 문제가 있는지 때문에? 다음 개체 메모리 구조 분석에서 살펴 보자. 기능 사람 (이름, 나이, 말) {this.name = 이름; this.age = 나이; this.say = 함수 () {을 console.log ( "안녕하세요 말");}} var에 P = 새로운 사람 ( "ZS "10) 노니 CONSOLE.LOG (p)를 도면의 P 메모리 구조는 위에서 만든 제품 :
- 볼 수 있듯이, 우리는 메모리에 데이터를 저장하는 데 이러한 메모리를 할당하는 등의 0x22과 0x33을 같이 Person 객체,하지만 0x33을 함수에 저장되어있는 것을 관찰를 작성하지 않았고,이 기능은 각 개체에 같은
그래서 메모리 자원 할당 고려에서, 우리는 더 나은 동일한 복사본을 공유했다,이 기능을 작성하고 각 개체에 대한 새로운 함수 객체 (동일)를 할당 할 필요가 없습니다. 어떻게 여러 객체는 프로토 타입 점에 관한 지식의 사용을 필요로 동일한 데이터를 공유 달성했다.