JavaScript 코드 재사용 패턴 분석 example_javascript 기술

모든 프로그래밍은 코드 재사용을 제안합니다. 그렇지 않으면 새 프로그램을 개발하거나 새 함수를 작성할 때마다 새 프로그램을 작성해야 한다면 쓸모가 없을 것입니다. 그러나 코드 재사용에도 좋은 면과 나쁜 면이 있습니다. 두 번째 기사에서는 코드 재사용에 대해 논의할 것입니다. 기사를 피하세요. 두 번째 기사는 모든 사람에게 권장되는 모드입니다. 사용하는데 일반적으로 문제가 없습니다.

모드 1: 기본 모드
일반적으로 사용되는 기본 모드의 코드 재사용은 종종 문제가 됩니다. 이 모드는 Parent()의 생성자를 사용하여 객체를 생성하고 이 객체에 할당됩니다. Child()의 프로토타입에 적용됩니다. 코드를 살펴보겠습니다.

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

함수 상속(C, P) { C.prototype = new P();}
// 상위 생성자 함수 Parent(name) { this.name = name || 'Adam';}
// say 함수 추가 프로토타입 Parent.prototype .say = function () { return this.name;}
// 하위 생성자는 비어 있음 function Child(name) {}
// 상속 실행 상속(Child, Parent); var kid = new Child ();console.log(kid.say())
// "Adam"var kiddo = new Child();kiddo.name = "Patrick";console.log(kiddo.say ());// "Patrick"// 단점: 매개변수를 Child 생성자에 전달할 수 없습니다. var s = new Child('Seth'); console.log(s.say()); / "Adam" 이 모드의 단점은 Child가 매개변수를 전달할 수 없기 때문에 기본적으로 쓸모가 없다는 것입니다.

모드 2: 생성자 차용
이 모드는 Child가 Apply를 위해 Parent의 생성자를 차용한 다음, Child의 this와 매개변수를 Apply에 전달하는 모드입니다. 메소드 :

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

// 상위 생성자 함수 Parent (name) { this.name = name || 'Adam';}

// 프로토타입에 say 함수 추가 Parent.prototype.say = function () { return this.name;}// 하위 생성자 함수 Child( 이름) { Parent.apply(this, 인수);}var kid = new Child("Patrick");console.log(kid.name)
// "Patrick"// 단점: 생성자 없음 say 메소드 상속 console.log(typeof kid.say)
// "정의되지 않음"의 단점도 상속되지 않기 때문에 사용할 수 없다는 점입니다.

모드 3: 생성자를 빌려 프로토타입 설정

위의 두 모드에는 각각의 단점이 있는데 어떻게 하면 둘 다 단점을 제거할 수 있을까요? 시도해 보세요: // 부모 생성자 function Parent(name) { this.name = name || 프로토타입에 say 함수를 추가하세요. Parent.prototype.say = function () { return this . name;};//자식 생성자 함수 Child(name) { Parent.apply(this, 인수);}Child.prototype = new Parent();var kid = new Child("Patrick");console.log( kid. name); // "패트릭"console.log(typeof kid.say); // functionconsole.log(kid.say()) // Patrickconsole.dir(kid);delete kid.name;console.log .say()); // "Adam"이 실행되고 모든 것이 정상이지만 Parent 생성자가 두 번 실행되어 프로그램을 사용할 수는 있지만 효율성이 매우 낮다는 것을 알고 계셨습니까?

모드 4: 공유 프로토타입

공유 프로토타입은 하위와 상위가 동일한 프로토타입을 사용한다는 의미입니다. 코드는 다음과 같습니다.

코드 복사 코드는 다음과 같습니다. function 상속(C, P) { C.prototype = P.prototype;}

// 부모 생성자 function Parent (name) { this.name = name 'Adam';}

// 프로토타입에 say 함수 추가 Parent.prototype.say = function () { return this.name;} ;
// 하위 생성 함수 Child(name) {}inherit(Child, Parent);var kid = new Child('Patrick');console.log(kid.name)// undefoundconsole. log(typeof kid.say);
// functionkid.name = 'Patrick'; console.log(kid.say())
// Patrickconsole.dir(kid); Child의 매개변수가 올바르게 수신되지 않았습니다.




모드 5: 임시 생성자

먼저 생성자를 빌린 다음 Child의 프로토타입을 빌린 생성자의 인스턴스로 설정하고 마지막으로 Child 프로토타입 ' 생성자. 코드는 다음과 같습니다.


코드 복사

코드는 다음과 같습니다

/* 클로저*/var 상속 = (함수 () { var F = 함수 () { }; 반환 함수 (C, P) { F.prototype = P.prototype; C.prototype = new F (); C.uber = P.prototype; CC.prototype.constructor = C; }} ());function Parent(name) { this.name = name || Function Parent.prototype.say = function () { return this.name;};// 하위 생성자 function Child(name) {}inherit(Child, Parent);var kid = new Child();console.log(kid . name); // 정의되지 않음console.log(typeof kid.say); // functionkid.name = 'Patrick';console.log(kid.say()) // Patrickvar kid2 = new Child("Tom"); .log(kid.say()); console.log(kid.constructor.name); // Childconsole.log(kid.constructor === Parent); // false 문제는 동일합니다. Child는 정상적으로 매개변수를 받을 수 없습니다. .

모드 6: klass
이 모드의 경우 다음 코드부터 시작해 보겠습니다.
var klass = function (Parent, props) { var Child, F, i / /
1. // 새 생성자 Child = function () { if (Child.uber && Child.uber.hasOwnProperty("__construct")) { Child.uber.__construct.apply(this, 인수) } if ( Child .prototype.hasOwnProperty("__construct")) { Child.prototype.__construct.apply(this, 인수) } }; //
2. // Inherit ParentParent || { }; F.prototype = Parent.prototype = new F(); Child.uber = ChildChild.prototype.constructor = Child; in props) { if (props.hasOwnProperty(i)) { Child.prototype[i] = props[i]; } }
// "클래스" 반환 return Child;};var Man = klass(null, { __construct: function (what) { console.log("Man's constructor"); this.name = what; }, getName: function () { return this.name }});var first = new Man('Adam' ) ;
// "Man's constructor"을 기록합니다. first.getName();
// "Adam" var SuperMan = klass(Man, { __construct: function (what) { console.log("SuperMan's constructor") ; }, getName: function () { var name = SuperMan.uber.getName.call(this); return "나는 " 이름입니다. }});var clark = new SuperMan('Clark Kent');clark.getName( ) ;
// "나는 Clark Kent입니다"console.log(clark instanceof Man); 조금 어지러운 느낌이 듭니다. 좋게 말하면 이 패턴의 구문과 사양은 다른 언어의 패턴과 동일합니다.


요약

위의 6가지 모드는 특정 상황에서 특정 기능을 수행하지만 모두 단점이 있으므로 일반적으로 모든 사람이 사용을 피해야 합니다.