JavaScript 디자인 패턴 및 프로토타입 패턴 소개(Object.create 및 프로토타입)_javascript 기술

프로토타입 모드 설명

설명: 프로토타입 인스턴스를 사용하여 새 객체에 대해 사용자 정의 가능한 새 객체를 복사하고 생성합니다. 원본 객체를 생성하는 특정 프로세스를 알 필요가 없습니다.

프로세스: 프로토타입 => 새 ProtoExam => 새 개체로 복제;

관련 코드 사용:

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

함수 프로토타입() {
This.name = '';
이.나이 = '';
This.sex = '';
}
Prototype.prototype.userInfo = function() {

'개인정보, 이름: 'this.name', 나이: 'this.age', 성별: 'this.sex'
';
을 반환합니다. }

2개 이상의 개인정보 항목이 필요합니다:

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

var proto = 새로운 프로토타입();
var person1 = Object.create(proto);
person1.name = '샤오밍';
person1.sex = '남성';
person1.나이 = 35;
사람1.사용자정보()
//
var person2 = Object.create(proto);
person2.name = '샤오화';
person2.sex = '여성';
person2.age = 33;
person2.userInfo();

출력 반환:

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

개인정보, 이름: Xiao Ming, 나이: 35, 성별: 남
개인정보, 이름: Xiaohua, 나이: 33, 성별: 여

프로토타입 모드는 일반적으로 추상 구조가 복잡하지만 내용 구성이 유사하고 추상 내용을 사용자 정의할 수 있으며 새로 생성된 객체를 요구 사항에 맞게 약간만 수정하면 되는 경우에 사용됩니다.

Object.create 지침

1>. 정의: 프로토타입 객체를 지정할 수 있고 선택적 사용자 정의 속성을 포함할 수 있는 객체를 생성합니다. 2> Object.create(proto [, Properties]) 선택사항, 새 객체의 속성을 구성하는 데 사용됩니다.

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

1. proto: 새 객체의 프로토타입을 생성하려면 필수이며 null일 수 있습니다. 이 proto는 이미 생성되었거나 [new] 또는 object.prototype인 경우에만 가치가 있습니다. 2. 속성: 선택 사항, 구조:

{
​​ propField: {
              값: 'val'|{}|function(){},
쓰기 가능: true|false,
열거 가능: true|false,
구성 가능: true|false,
              get:function(){return 10},
             설정:함수(값){}
}
}
맞춤 속성에는 다음과 같은 네 가지 기본 속성이 있습니다.
값: 사용자 정의 속성 값;
쓰기 가능: 이 항목의 값을 편집할 수 있는지 여부, 기본값은 false입니다. true인 경우 obj.prodField에 값을 할당할 수 있습니다. 그렇지 않으면 읽기 전용입니다. 열거 가능: 열거 가능
구성 가능: 구성 가능;

set, get 접근자 메서드도 포함할 수 있습니다.

그 중 [set, get]과 value 및 writable은 동시에 나타날 수 없습니다.

1. 프로토타입 객체 클래스 생성:

코드 복사

코드는 다음과 같습니다. 함수 ProtoClass(){ This.a = 'ProtoClass';

This.c = {};

This.b = 함수() {
}
}



프로토타입 생성 방법:

코드 복사

코드는 다음과 같습니다. ProtoClass.prototype.aMethod = function() { //this.a;

//this.b();

이거 돌려주세요.a;
}

사용방법

1. ProtoClass.prototype을 사용하여 객체를 생성합니다.

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

var obj1 = Object.create(ProtoClass.prototype, {
foo:{값: 'obj1', 쓰기 가능: true}
})

obj1에는 ProtoClass 프로토타입 메소드 aMethod가 있습니다.

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

obj1.a메소드();
//정의되지 않은 결과가 출력되고 메서드에 액세스할 수 있으며 ProtoClass 멤버에 액세스할 수 없습니다

그러나 이 메소드는 ProtoClass:에서 a, b, c의 멤버 속성을 구현할 수 없습니다.

2. 인스턴스화된 ProtoClass를 프로토타입으로 사용:

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

var proto = new ProtoClass();

var obj2 = Object.create(proto, {
foo:{값:'obj2'}
});

이런 방식으로 생성된 obj2는 ProtoClass의 모든 멤버 속성 a, b, c 및 aMethod 프로토타입 메서드를 가지며 foo 읽기 전용 데이터 속성을 추가합니다.

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

obj2.a; //프로토클래스
obj2.c: //[객체]
obj2.b(); //
obj2.aMethod() //ProtoClass

obj2.foo; //obj2

3. 하위 클래스 상속:

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

함수 SubClass() {
 
}
SubClass.prototype = Object.create(ProtoClass.prototype ,{
foo:{값: '하위 클래스'}
});
SubClass.prototype.subMethod = function() {

this.a 반환 || this.foo;
}

이 메소드는 ProtoClass의 aMethod 메소드에 상속되어 실행될 수 있습니다.

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

var func = new SubClass();
func.aMethod() ;//정의되지 않음, ProtoClass, a, b, c의 멤버 속성을 읽을 수 없습니다
func.subMethod();//하위클래스

SubClass가 ProtoClass의 구성원 속성을 읽을 수 있도록 하려면 SubClass를 변경해야 합니다.

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

함수 SubClass()
{
ProtoClass.call(this);
}
//기타 코드;

이 메서드는 ProtoClass의 멤버 속성과 프로토타입 메서드를 얻을 수 있습니다.:

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

var func = new SubClass();
func.aMethod() ;//ProtoClass
func.subMethod();//ProtoClass

또 다른 방법은 인스턴스화된 ProtoClass 객체를 SubClass의 프로토타입으로 사용하는 것입니다.

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

var proto = new ProtoClass();
함수 SubClass() {

}

SubClass.prototype = Object.create(프로토, {

foo:{값: '하위 클래스'}
});

이런 방식으로 SubClass가 인스턴스화되면 ProtoClass의 모든 속성과 프로토타입 메서드를 얻을 수 있고 읽기 전용 데이터 속성인 foo를 생성할 수 있습니다.

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

var func = new SubClass();
func.foo; //하위클래스
func.a; //프로토클래스
func.b(); //
func.c; //[객체]
func.aMethod(); //프로토클래스

4. 또 다른 생성 상속 방법은 인스턴스화된 ProtoClass를 프로토타입으로 사용하는 Object.create와 동일한 효과를 갖습니다.

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

함수 SubClass() {
​this.foo = 'subclass'; //여기서 읽고 쓸 수 있습니다
}

SubClass.prototype = 새로운 ProtoClass();

Object.create 관련 지침

Object.create는 새 객체를 생성하는 데 사용됩니다. Object인 경우 프로토타입은 null이고 함수는 new Object() 또는 {}와 동일합니다.

함수인 경우 new FunctionName과 동일한 효과를 갖습니다.

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

//1 객체
var o = {}
//
과 동일 var o2 = Object.create({});
//두 생성자는 동일합니다.

//---------------
함수 func() {
This.a = 'func';
}
func.prototype.method = function() {
이거 돌려주세요.a;
}

var newfunc = 새로운 func();
//[같은 효과]와 동일
var newfunc2 = Object.create(Object.prototype/*Function.prototype||function(){}*/, {
a: {값:'func', 쓰기 가능:true},
메서드: {value: function() {return this.a;} }
});

그러나 newfunc과 newfunc2는 이를 생성하는 개체에서 서로 다른 함수 참조를 갖습니다.

newfunc는 함수 func() {...}이고, newfunc2는 함수 {Native}입니다.

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

Object.create(proto[, PropertiesField]):

proto 설명에서 이 값은 필수이며 null일 수 있습니다. 설정하지 않으면 예외가 발생합니다.

proto가 null이 아닌 경우 인스턴스화된 값, 즉 새로운 값입니다. JavaScript의 대부분 객체에는 이 객체가 인스턴스화되는 함수를 나타내는 생성자 속성이 있습니다.

propertiesField는 선택 사항이며 새로 생성된 객체에 필요할 수 있는 멤버 속성이나 메서드를 설정합니다.