소개하다
이 기사에 소개 된 4 가지 코드 재사용 모드는 모범 사례이며 프로그래밍 프로세스 중에 모든 사람에게 권장됩니다.
패턴 1 : 프로토 타입 상속
프로토 타입 상속은 상속의 목적을 달성하기 위해 부모 객체가 자식 대상의 프로토 타입이되도록하는 것입니다.
코드 사본은 다음과 같습니다.
기능 객체 (O) {
함수 f () {
}
F. 프로토 타입 = O;
새로운 f ()를 반환합니다.
}
// 상속 대상 객체
var 부모 = {
이름 : "Papa"
};
// 새로운 객체
var child = 객체 (부모);
// 시험
Console.log (child.name); // "아빠"
// 상위 생성자
기능인 () {
// "자신의"속성
this.name = "Adam";
}
// 프로토 타입에 새 속성을 추가합니다
person.prototype.getName = function () {
이 this.name;
};
// 새로운 사람을 만듭니다
var papa = 새로운 사람 ();
// 상속
var kid = Object (Papa);
console.log (kid.getName ()); // "아담"
// 상위 생성자
기능인 () {
// "자신의"속성
this.name = "Adam";
}
// 프로토 타입에 새 속성을 추가합니다
person.prototype.getName = function () {
이 this.name;
};
// 상속
var kid = 객체 (person.prototype);
console.log (typeof kid.getName); // "function"은 프로토 타입에 정의되어 있기 때문입니다
Console.log (kid.name 타입); // 프로토 타입 만 상속되기 때문에 "정의되지 않은"
동시에, ECMAScript5는 Object.NEBOR라는 유사한 메소드를 제공하며 개체를 상속하기 위해 생성을 제공하며 사용법은 다음과 같습니다.
코드 사본은 다음과 같습니다.
/* ECMAScript 5의 새 버전을 사용하여 기능을 제공합니다*/
var child = object.create (부모);
var child = object.create (부모, {
나이 : {value : 2} // ecma5 설명자
});
Console.log (child.hasownproperty ( "Age")); // 진실
또한, 속성은 두 번째 매개 변수에서보다 세밀한 방식으로 정의 될 수 있습니다.
코드 사본은 다음과 같습니다.
// 먼저 새 개체 맨을 정의하십시오
var man = object.create (null);
// 다음으로 특성이 포함 된 구성 설정을 만듭니다
// 속성은 쓰기 가능하고 열거 가능하며 구성 가능하도록 설정됩니다.
var config = {
쓰기 가능 : 사실,
열거 가능 : 사실,
구성 가능 : true
};
// 일반적으로 Object.DefineProperty ()를 사용하여 새 속성을 추가합니다 (ECMASCRIPT5 지원)
// 이제 편의를 위해 캡슐화 기능을 사용자 정의합니다
var defineProp = function (obj, key, value) {
config.value = value;
Object.DefineProperty (OBJ, 키, 구성);
}
DefineProp (Man, 'Car', 'Delorean');
DefineProp (Man, 'Dob', '1981');
DefineProp (Man, 'Beard', False);
따라서 상속을 수행 할 수 있습니다.
코드 사본은 다음과 같습니다.
var driver = object.create (man);
DefineProp (드라이버, 'TopSpeed', '100mph');
드라이버 .topspeed // 100mph
그러나 주목할만한 것이 있습니다. 즉, Object에 의해 생성 된 객체의 프로토 타입이 있습니다. Create (null)는 정의되지 않았으며, 즉, 테스트 링과 가치가 없으므로 알림 (man); 그러나 Alert (man.car)에 오류가 발생합니다. 괜찮습니다.
모드 2 : 상속에 대한 모든 속성을 복사하십시오
이런 식으로 상속은 부모 객체의 모든 속성을 자식 객체에 복사하는 것입니다. 일반적으로 Child Object는 부모 객체의 데이터를 사용할 수 있습니다.
먼저 얕은 사본 예를 살펴 보겠습니다.
코드 사본은 다음과 같습니다.
/* 얕은 사본*/
함수 확장 (부모, 자녀) {
var i;
자녀 = 자녀 || {};
(부모님) {
if (parent.hasownproperty (i)) {
아동 [i] = 부모 [i];
}
}
귀환 아이;
}
var dad = {이름 : "Adam"};
var kid = Extend (아빠);
Console.log (kid.name); // "아담"
var dad = {
수 : [1, 2, 3],
읽기 : {종이 : true}
};
var kid = Extend (아빠);
kid.counts.push (4);
console.log (dad.counts.toString ()); // "1,2,3,4"
console.log (dad.reads === kid.reads); // 진실
코드의 마지막 줄에서 아빠와 아이의 읽기가 동일하다는 것을 알 수 있습니다. 즉, 동일한 참조를 사용하는데, 이는 얕은 사본으로 인한 문제입니다.
딥 카피를 살펴 보겠습니다.
코드 사본은 다음과 같습니다.
/* 딥 카피*/
함수 ExtendDeep (부모, 자식) {
var i,
tostr = object.prototype.tostring,
ast = "[객체 배열]";
자녀 = 자녀 || {};
(부모님) {
if (parent.hasownproperty (i)) {
if (parent typeof parent [i] === 'object') {
child [i] = (tostr.call (부모 [i]) === ast)? [] : {};
ExtendDeep (부모 [I], Child [I]);
} 또 다른 {
아동 [i] = 부모 [i];
}
}
}
귀환 아이;
}
var dad = {
수 : [1, 2, 3],
읽기 : {종이 : true}
};
var kid = ExtendDeep (아빠);
kid.counts.push (4);
console.log (kid.counts.toString ()); // "1,2,3,4"
console.log (dad.counts.toString ()); // "1,2,3"
console.log (dad.reads === kid.reads); // 거짓
kid.reads.paper = false;
깊은 복사 후, 두 값은 더 이상 같지 않습니다. Bingo!
모드 3 : 믹스 인
혼합 된 것은 객체의 하나 이상의 특성 (또는 메소드)을 다른 객체에 복사하는 것입니다. 예를 들어 봅시다 :
코드 사본은 다음과 같습니다.
함수 믹스 () {
var arg, prop, child = {};
for (arg = 0; arg <arguments.length; arg += 1) {
for (인수의 소품 [arg]) {
if (인수 [arg] .HasOwnProperty (prop)) {
child [prop] = 인수 [arg] [prop];
}
}
}
귀환 아이;
}
var cake = mix (
{계란 : 2, 큰 : true},
{버터 : 1, Salted : True},
{밀가루 : '3 컵'},
{설탕 : '물론!' }
);
Console.dir (케이크);
믹스 함수는 새 객체를 생성하기 위해 Child Object에 전달 된 모든 매개 변수의 자식 속성을 복사합니다.
그렇다면 우리는 어떻게 일부 속성을 혼합하고 싶습니까? 어떻게해야합니까? 실제로, 우리는 추가 매개 변수를 사용하여 혼합 (child, parent, method1, method2)과 같이 혼합 해야하는 특성을 정의하여 부모의 방법 1과 method2 만 자식으로 혼합 할 수 있습니다. 코드 :
코드 사본은 다음과 같습니다.
// 자동차
var car = function (설정) {
this.model = settings.model || '제공된 모델 없음';
this.colour = settings.colour || '색상 없음';
};
// mixin
var mixin = function () {};
mixin.prototype = {
Vureforward : function () {
Console.log ( '드라이브 포워드');
},
Dupbackward : function () {
Console.log ( '뒤로 드라이브');
}
};
// 정의 된 두 매개 변수는 객체를 혼합 (리보이어)하고 객체가 혼합 된 (주는)입니다.
함수 증강 (requebj, gowobj) {
// 지정된 메소드 이름이 제공되면 3 개의 추가 매개 변수가 있습니다.
if (인수 [2]) {
for (var i = 2, len = arguments.length; i <len; i ++) {
receivingObj.prototype [arguments [i]] = GiveObj.prototype [arguments [i]];
}
}
// 세 번째 매개 변수 또는 더 많은 매개 변수를 지정하지 않으면 모든 메소드가 혼합됩니다.
또 다른 {
for (gowobj.prototype의 var methodname) {
// 수신 객체에 혼합 할 이름이 포함되어 있지 않은지 확인하므로 포함 된 경우 혼합되지 않습니다.
if (! receivingObj.prototype [methodName]) {
receivingObj.prototype [methodName] = getingobj.prototype [methodName];
}
}
}
}
// 자동차 속성을 혼합하지만 값은 'Duveforward'및 'Dupbackward'*/와 혼합됩니다.
증강 (자동차, 믹스 인, 'Duveforward', 'Dupbackward');
// 새 객체 차량을 만듭니다
var Vehicle = New Car ({Model : 'Ford Escort', Color : 'Blue'});
// 믹싱이 성공적으로 얻은 지 테스트하는 방법
Vehicle.driveForward ();
Vehicle.drivebackward ();
이 방법은 사용하기에 더 유연합니다.
패턴 4 : 차용 방법
한 객체는 다른 객체의 하나 또는 두 가지 방법을 빌리며이 두 객체 사이에는 직접 연결이 없습니다. 더 설명 할 필요가 없습니다. 코드를 사용하여 다음과 같이 설명하십시오.
코드 사본은 다음과 같습니다.
var one = {
이름 : 'Object',
말 : 기능 (인사) {
return greet + ',' + this.name;
}
};
// 시험
Console.log (One.Say ( 'Hi')); // "안녕하세요, 객체"
var two = {
이름 : '다른 대상'
};
Console.log (One.say.Apply (2, [ 'hello'])); // "안녕하세요, 다른 물건"
// 변수에 말하기 할당하면, 이것은 글로벌 변수를 가리 킵니다.
var says = one.say;
Console.log (예 : ( 'hoho')); // "hoho, undefined"
// 콜백 함수 콜백을 전달합니다
var setanother = {
이름 : '또 다른 대상',
방법 : 함수 (콜백) {
리턴 콜백 ( 'hola');
}
};
console.log (antanother.method (one.say)); // "holla, undefined"
함수 바인드 (O, M) {
return function () {
return m.apply (o, [] .slice.call (arguments));
};
}
var twosay = bind (2, one.say);
Console.log (Twosay ( 'yo')); // "Yo, 다른 대상"
// ecmascript 5는 bind () 메소드를 function.prototype에 추가하여 apply () 및 call ()를 쉽게 사용할 수 있도록합니다.
if (typeof function.prototype.bind === 'undefined') {
function.prototype.bind = function (thisarg) {
var fn = 이것,
slice = array.prototype.slice,
args = slice.call (인수, 1);
return function () {
fn.apply를 반환합니다 (thisarg, args.concat (slice.call (arguments)));
};
};
}
var twosay2 = one.say.bind (2);
console.log (twosay2 ( 'bonjour')); // "Bonjour, 다른 개체"
var twosay3 = one.say.bind (2, 'enchante');
console.log (twosay3 ()); // "Enchante, 다른 개체"
요약
요약 할 필요가 없습니다.