객체 지향이란 무엇입니까? 객체 지향은 일종의 생각입니다! (무의미한 말).
객체 지향은 프로그램의 모든 주요 모듈을 객체로 처리 할 수 있으며 모듈에는 속성과 방법이 있습니다. 이런 식으로, 우리가 일부 속성과 방법을 캡슐화하면 미래에 사용하는 것이 매우 편리하며 지루하고 반복적 인 작업을 피할 수도 있습니다. 다음으로 JS의 객체 지향 구현을 설명합니다.
공장 모델
공장 패턴은 소프트웨어 엔지니어링 분야에서 잘 알려진 설계 패턴이며 ECMAScript에서 클래스를 만들 수 없으므로 객체는 기능 캡슐화로 작성됩니다. 구현 방법은 매우 간단합니다. 즉, 함수의 객체를 작성하고 객체에 속성 및 메소드를 할당 한 다음 객체를 반환합니다.
함수 createBlog (이름, url) {var o = new Object (); o.name = 이름; o.url = URL; O.sayurl = function () {alert (this.url); } return o;} var blog1 = createBlog ( 'wuyuchang', '//www.vevb.com/');공장 패턴의 구현 방법은 매우 간단하여 여러 유사한 객체를 만드는 문제를 해결하지만 공장 패턴은 날짜, 배열 등과 달리 모든 객체이기 때문에 객체의 유형을 식별 할 수 없으므로 생성자 패턴이 나타납니다.
생성자 모드
ECMAScript의 생성자는 배열 및 날짜와 같은 기본 JS 객체와 유사한 특정 유형의 객체를 만들 수 있습니다. 구현 방법은 다음과 같습니다.
함수 블로그 (이름, URL) {this.name = 이름; this.url = url; this.alerturl = function () {alert (this.url); }} var blog = 새 블로그 ( 'wuyuchang', '//www.vevb.com/');console.log(Blog instanceof blog); // true, 블로그가 블로그 인스턴스인지, 즉 공장 모드가 될 수없는 문제를 해결합니다.이 예제는 기능 이름을 제외하고 공장 모델과 다릅니다. 신중한 어린이 신발은 많은 차이점을 찾아야합니다.
함수 이름의 첫 번째 문자는 대문자입니다 (표준은 첫 번째 문자가 대문자로 규정되어 있지는 않지만, 컨벤션에 따르면, 생성자의 첫 글자는 대문자입니다.
객체가 표시되지 않습니다
이 객체에 직접 속성과 메소드를 할당하십시오
반환 명세서가 없습니다
새로 사용하여 객체를 만듭니다
객체를 인식 할 수 있어야합니다 (이것은 생성자 패턴이 공장 패턴을 능가하는 곳입니다).
생성자는 사용하기 쉽지만 단점이 없습니다. 생성자를 사용하는 데있어 가장 큰 문제는 인스턴스를 생성 할 때마다 메소드를 재현해야한다는 것입니다 (이론적으로 객체의 속성은 객체를 만들 때마다 다르고 객체의 메소드가 동일합니다). 그러나 정확히 동일한 방법을 두 번 만들 필요는 없으므로 기능을 물체 밖으로 이동할 수 있습니다 (아마도 일부 어린이 신발이 단점을 보았을 수도 있습니다. Shhhh!).
함수 블로그 (이름, URL) {this.name = 이름; this.url = url; this.alerturl = alerturl;} function alerturl () {alert (this.url);} var blog = new Blog ( 'scjb51', 'http://sc.vevb.com/'), blog2 = 새 블로그 ( 'JB51', '//www.vevb.com/'); // http://sc.vevb.com/blog2.alerturl (); // //www.vevb.com/우리는 Alerturl을 글로벌 기능으로 설정하여 블로그와 블로그 2가 동일한 기능에 액세스 할 수 있지만 문제가 다시 발생합니다. 실제로 블로그를 사용하기를 원하는 기능은 글로벌 범위에 정의되어 있으며, 이는 글로벌 범위가 이름에 다소 가치가 있음을 보여줍니다. 더 용납 할 수없는 것은 많은 방법이 특정 객체에서만 사용되는 전역 범위에서 정의된다는 것입니다. 공간이 낭비 될뿐만 아니라 객체 지향 캡슐화를 분명히 잃어 버리 므로이 문제는 프로토 타입을 통해 해결할 수 있습니다.
프로토 타입 모드
우리가 만든 각 함수에는 객체에 대한 포인터 인 프로토 타입 속성이 있으며이 개체의 목적은 특정 유형의 모든 인스턴스에서 공유 할 수있는 속성과 메소드를 포함하는 것입니다. 프로토 타입 객체를 사용하는 장점은 모든 객체 인스턴스가 포함 된 속성과 메소드를 공유 할 수 있다는 것입니다.
함수 블로그 () {} blog.prototype.name = 'wuyuchang'; blog.prototyp.url = 'http://tools.vevb.vevb.com/';blog.prototype.friendf = ['fr1 ','fr2 ','f4 ']; blog.prototype.alertinfo = function (this. this. );} // 다음은 테스트 코드 var blog = new Blog (), blog2 = new Blog (); blog.alertinfo ()입니다. // wuyuchanghttp : //tools.vevb.com/fr1,fr2,fr3,fr4blog2.alertinfo (); // wuyuchanghttp : //tools.vevb.com/fr1,fr2,fr3,fr4blog.name = 'wyc1'; blog.url = 'http : //***.com'; blognfriend.pop (); blog2.name = 'wyc2'; blogc2 '; http : //++.com'; // wyc1http : //***.comfr1,fr2,fr3blog2.alertinfo (); // wyc2http : //++.comfr1,fr2,fr3프로토 타입 패턴은 단점이 없습니다. 우선, 그것은 초기화 매개 변수를 전달하는 생성자의 링크를 생략합니다. 결과적으로 모든 인스턴스는 기본적으로 동일한 속성 값을 얻습니다. 이는 매우 불편하지만 이것이 프로토 타입의 가장 큰 문제는 아닙니다. 프로토 타입 패턴의 가장 큰 문제는 공유의 특성으로 인해 발생합니다. 공유로 인해 한 인스턴스는 참조를 수정하고 다른 인스턴스는 참조를 변경합니다. 따라서 우리는 일반적으로 프로토 타입 만 사용하지 않지만 프로토 타입 패턴을 생성자 패턴과 결합합니다.
혼합 모드 (프로토 타입 모드 + 생성자 모드)
함수 블로그 (이름, URL, 친구) {this.name = 이름; this.url = url; this.friend = friend;} blog.prototype.alertinfo = function () {alert (this.name + this.url + this.friend);} var blog = new Blog ( 'wuyuchang', 'http://tools.vevb.vevb.vevb.com/', [ 'f1', 'fr2', ''f3 '), blog2 = 새로운 블로그 ('wyc ', 'http : //**.com', [ 'a', 'b']); blog.friend.pop (); blog.alertinfo (); // wuyuchanghttp : //tools.vevb.com/fr1,fr2blog2.alertinfo (); // wychttp : //**.coma,b하이브리드 모드에서 생성자 모드는 인스턴스 속성을 정의하는 데 사용되는 반면 프로토 타입 모드는 메소드 및 공유 속성을 정의하는 데 사용됩니다. 각 인스턴스에는 고유 한 인스턴스 속성이 있지만 동시에 메소드를 공유하여 메모리를 최대까지 저장합니다. 또한이 모드는 초기 매개 변수 전달을 지원합니다. 많은 장점. 이 패턴은 ECMAScript에서 사용자 정의 객체를 생성하는 가장 널리 사용되고 가장 잘 알려진 방법입니다.
동적 프로토 타입 모드
동적 프로토 타입 모드는 생성자의 모든 정보를 캡슐화하고 생성자의 프로토 타입을 초기화함으로써 (첫 번째 객체가 인스턴스화 될 때 프로토 타입 만 초기화됩니다),이를 통해 방법이 유효한 지 판단하여 프로토 타입을 초기화 해야하는지 여부를 선택할 수 있습니다.
함수 블로그 (이름, URL) {this.name = 이름; this.url = url; if (type this.alertinfo! = 'function') {//이 코드는 ALERT ( 'exe time')에만 실행됩니다. blog.prototype.alertinfo = function () {alert (thia.name + this.url); }}} var blog = 새 블로그 ( 'wuyuchang', 'http://tools.vevb.com'), blog2 = 새 블로그 ( 'wyc', 'http : ***. com');위의 예에서 창이 한 번 팝업된다는 것을 알 수 있습니다. 'exe time', 즉 블로그가 초기화되면 Blog2가 프로토 타입을 초기화 할 필요가 없습니다. 이 패턴을 사용하여 객체를 만들려면 완벽하게 간주 될 수 있습니다.
이 블로그 게시물은 "JavaScript Advanced Programming"의 세 번째 판을 말하지만 언어는 단순화되었으며 예제가 다시 작성되었습니다. 궁금한 점이 있으면 메시지와 답장을 남겨 주시면 저자가 블로그를 업데이트합니다.