javascript 대상 생 성 모드 자세히 알 아 보기
9852 단어 JavaScript대상생 성 모드
javascript 에 서 는 주로 다음 과 같은 몇 가지 생 성 모드 가 있 습 니 다.
공장 모드
구조 함수 모드
원형 모드
조합 모드
동적 원형 모드
기생 구조 함수 모드
온당 한 구조 패턴
공장 모드
공장 모델 은 소프트웨어 공학 분야 에서 널리 알려 진 디자인 모델 이다.javascript 구현 방식:
function createPerson(name, obj, job) {
var o = new Object();
o.name = name;
o.obj = obj;
o.job = job;
o.sayName = function() {
alert(this.name);
}
return o;
}
var person1 = createPerson("Nicholas", 29, "software Enginner");
var person2 = createPerson("Greg", 27, "Doctor");
공장 모델 은 비슷 한 대상 을 여러 개 만 드 는 문 제 를 해 결 했 지만 대상 인식 문 제 는 해결 되 지 않 았 다.구조 함수 모드
function Person(name, age, job) {
this.name = name;
this.age = name;
this.job = name;
this.sayName = function () {
alert(this.name);
}
}
var person1 = new Person("Nicholas", 29, "Software Engineer");
var person2 = new Person("Greg", 27, "Doctor");
person1 instanceof Person; // true
person1 instanceof Object; // true
person2 instanceof Person; // true
person2 instanceof Object; // true
new 연산 자 실현 원리공장 모델 과 달리 구조 함수 모델
생 성 대상 보이 지 않 음
this 대상 에 게 속성 과 방법 을 직접 할당 하 였 습 니 다.
return 문장 없 음
대상 인식 문 제 를 해결 했다.
그러나 구조 함수 모델 에 도 문제 가 존재 한다.즉,모든 방법 은 모든 사례 에서 다시 한 번 설명 해 야 한 다 는 것 이다.person 1 과 person 2 는 모두 sayName()이라는 방법 이 있 지만 그 두 가지 방법 은 같은 Function 인 스 턴 스 가 아 닙 니 다.javascript 에서 함 수 는 실질 적 으로 대상 이기 때문에 하나의 함 수 를 정의 할 때마다 하나의 대상 을 예화 합 니 다.)
함수 정 의 를 통 해 구조 함수 외부 로 이동 하면 이 문 제 를 해결 할 수 있 습 니 다.
function Person(name, age, job) {
this.name = name;
this.age = age;
this.job = job;
this.sayName = sayName;
}
function sayName() {
alert(this.name);
}
var person1 = new Person("Nicholas", 29, "Software Engineer");
var person2 = new Person("Greg", 27, "Doctor");
그러나 이런 방식 은 또 하나의 새로운 문 제 를 가 져 왔 다.우 리 는 전체 국면 에서 전체 함 수 를 만 들 었 다.주의해 야 할 것 은 관례 에 따라 구조 함 수 는 항상 대문자 로 시작 해 야 하 며 구조 함수 가 아니 라 소문 자로 시작 해 야 한 다 는 것 이다.이것 은 주로 구조 함수 와 비구 조 함 수 를 구별 하 는 데 쓰 인 다.왜냐하면 구조 함수 자체 도 함수 이기 때문이다.
원형 모드
우리 가 만 든 모든 함수 에는 prototype(원형)속성 이 있 습 니 다.이 속성 은 하나의 지침 으로 대상 을 가리 키 며,이 대상 의 용 도 는 특정한 유형의 모든 인 스 턴 스 가 공유 할 수 있 는 속성 과 방법 입 니 다.
함수 원형 대상 부록 보기
프로 토 타 입 모드 를 통 해 대상 을 만 듭 니 다.우 리 는 구조 함수 에서 대상 의 인 스 턴 스 정 보 를 정의 할 필요 가 없습니다.또한 여러 대상 을 예화 할 필요 가 없습니다.모든 대상 은 새로운 함 수 를 설명 하지 않 습 니 다.
person1.sayName 과 person2.sayName 이 같은 함 수 를 가리 키 는 것 을 볼 수 있 습 니 다.
하지만 원형 모델 의 단점 도 분명 하 다.
먼저 원형 모드 는 구조 함수 모드 전달 매개 변수 라 는 부분 을 생략 한 결과 모든 인 스 턴 스 의 초기 값 은 기본 적 인 상황 에서 같은 속성 값 입 니 다.
더 중요 한 것 은 속성 과 방법 을 원형 대상 에 두 고 실질 적 으로 원형 상의 속성 은 모든 인 스 턴 스 에 의 해 공유 되 기 때문이다.기본 값 을 포함 하 는 속성 은 정상 적 이 고 속성 값 을 바 꾸 며 인 스 턴 스 에 같은 이름 의 속성 만 추가 합 니 다.그러나 형식 값 을 참조 하 는 속성 에 있어 서 는 재앙 일 수 있 습 니 다.
function Person() {}
Person.prototype = {
constructor: Person,
name: "Nicholas",
age: 29,
job: "Software Engineer",
friends: ["shelby", "Court"],
sayName: function() {
alert(this.name);
}
};
var person1 = new Person();
var person2 = new Person();
person1.friends.push("Van");
person1.friends; // ["shelby", "Court", "Van"]
person2.friends; // ["shelby", "Court", "Van"]
조합 모드사용자 정의 형식 을 만 드 는 가장 흔 한 방법 은 구조 함수 모드 와 원형 모드 를 조합 하 는 것 입 니 다.구조 모드 는 실례 속성 을 정의 하 는 데 사용 되 고 원형 모드 는 방법 과 공유 속성 을 정의 하 는 데 사용 된다.
이렇게 하면 모든 인 스 턴 스 는 자신의 인 스 턴 스 속성 사본 이 있 지만 동시에 방법의 인용 도 공유 합 니 다.
function Person(name, age, job) {
this.name = name;
this.age = age;
this.job = job;
this.friends = ["Shelby", "Court"];
}
Person.prototype.sayName = function() {
alert(this.name);
}
var person1 = new Person("Nicholas", 29, "Software Enginner");
var person2 = new Person("Greg", 27, "Doctor");
person1.friends.push("Van");
person1.firends; // ["Shelby", "Court", "Van"];
person2.firends; // ["Shelby", "Court"]
person1.firends === person2.firends; // false
person1.sayName === person2.sayName; // true
동적 원형 모드
function Person(name, age, job) {
this.name = name;
this.age = age;
this.job = job;
if (typeof this.sayName != "function") {
Person.prototype.sayName = function() {
alert(this.name);
}
}
}
기생 구조 함수 모드기생 모드 의 기본 개념 은 함 수 를 만 드 는 것 입 니 다.이 함수 의 역할 은 만 든 대상 의 코드 를 봉인 한 다음 에 새로 만 든 대상 으로 돌아 가 는 것 입 니 다.
function Person(name, age, job) {
var o = new Object();
o.name = name;
o.age = age;
o.job = job.
o.sayName = function() {
alert(this.name);
}
}
var person1 = new Person("Nicholas", 29, "Software Engineer");
person1.sayName(); // "Nicholas"
보아하니 new 조작 부 호 를 사용 하 는 것 을 제외 하고 이 모델 은 공장 모델 과 사실은 똑같다.이 모드 는 특수 한 상황 에서 대상 으로 구조 함 수 를 만 드 는 데 사용 할 수 있다.
만약 우리 가 추가 적 인 방법 을 가 진 특수 배열 유형 이 필요 하 다 고 가정 한다.Array 구조 함 수 를 직접 수정 할 수 없 기 때문에 이 모드 를 사용 할 수 있 습 니 다.
function SpecialArray() {
var values = [];
values.push.push(values, arguments);
values.toPipedString = function() {
return this.join("|");
}
return values;
}
var colors = new SpecialArray("red", "blue", "green");
colors.toPipedString(); // "red|blue|green"
이 모델 의 주요 단점:되 돌아 오 는 대상 은 구조 함수 나 구조 함수 의 원형 속성 과 관계 가 없 으 며,인 스 턴 스 of 에 의존 하여 대상 유형 을 정할 수 있 습 니 다.
다른 모델 이 사용 할 수 있 는 상황 에서 가능 한 한 이런 모델 을 사용 하지 마 세 요.
온당 구조 함수 모드
function Person(name, age, job) {
var o = new Object();
var name = name;
var age = age;
var job = jbo;
o.sayName = function() {
alert(name);
}
}
var person1 = Person("Nicholas", 29, "Software Enginner");
firend.sayName(); // "Nicholas"
부록new 연산 자
new 연산 자 는 실제로 4 단 계 를 거 칩 니 다.
function new(func) {
var o = {};
o.__proto__ = func.prototype;
var result = func.apply(o, arguments);
return typeof result === "object" ? object : o;
}
함수 원형 개체원형 대상 이해
언제든지 새 함 수 를 만 들 면 특정한 규칙 에 따라 이 함수 에 prototype 속성 을 만 듭 니 다.이 속성 은 함수 의 원형 대상 을 가리 키 고 있 습 니 다.기본 적 인 상황 에서 모든 원형 대상 은 자동 으로 constructor(구조 함수)속성 을 얻 습 니 다.이 속성 은 prototype 속성 이 있 는 함 수 를 가리 키 는 지침 을 포함 합 니 다.
사용자 정의 구조 함 수 를 만 든 후에 원형 대상 은 construtoe 속성 만 얻 을 수 있 고 다른 속성 은 Object 에서 계승 합 니 다.구조 함 수 를 호출 하여 새로운 인 스 턴 스 를 만 들 때 이 인 스 턴 스 의 내 부 는 포인터(내부 속성)를 포함 하고 구조 함수 의 원형 대상 을 가리 키 며 이 지침 은[Prototype]이 라 고 합 니 다.대부분의 브 라 우 저 에서 대상 마다 속성 을 지원 합 니 다.proto__[Prototype]을 호출 합 니 다.
모든 구현 이[Prototype]에 직접 접근 할 수 는 없 지만,isPrototype 방법 을 통 해 대상 간 의 관계 여 부 를 확인 할 수 있 습 니 다.
우 리 는 person 1 과 person 2 를 테스트 하여 모두 true 로 돌 아 왔 다.내부 에 Person.prototype 을 가리 키 는 지침 이 있 기 때문이다.
Object.getPrototype()은 대상 의 원형 대상 을 되 돌려 줄 수 있 습 니 다.
코드 가 대상 의 속성 을 읽 을 때마다 검색 을 실행 합 니 다.목 표 는 주어진 이름 의 속성 을 가지 고 있 습 니 다.검색 은 우선 대상 자체 부터 시작 합 니 다.인 스 턴 스 에서 해당 하 는 속성 을 찾 으 면 이 속성의 값 을 되 돌려 줍 니 다.찾 지 못 하면 포인터 가 가리 키 는 원형 대상 을 계속 검색 합 니 다.이것 도 우리 가 person 1 과 person 2 두 개의 실례 에서 sayName 이라는 속성 을 정의 하지 않 았 지만 정상적으로 사용 할 수 있 는 이유 입 니 다.
person 1.sayName()을 호출 하고 있 습 니 다.예,두 번 의 검색 을 수행 할 것 입 니 다.우선,해석 기 는"실례 person 1 에 sayName 속성 이 있 습 니까?"라 고 물 어 봅 니 다.답:"없습니다."그리고 나 서 그 는 계속 검색 하고"person 1 의 원형 에 sayName 속성 이 있 습 니까?"라 고 물 었 다.있다그래서 원형 에 저 장 된 함 수 를 읽 습 니 다.
비록 우 리 는 실례 를 통 해 원형의 속성 을 방문 할 수 있 지만,원형의 속성 을 다시 찾 을 수 는 없다.
만약 에 우리 가 인 스 턴 스 에 속성 명 을 추가 하면 이 속성 명 은 원형 중의 속성 명 과 같 습 니 다.즉,우 리 는 인 스 턴 스 에서 속성 을 다시 쓰 고 싶 습 니 다.
function Person() {}
Person.prototype.name = 'Nicholas';
var person1 = new Person();
var person2 = new Person();
person1.name === person2.name; // true
person1.name = 'Greg';
person1.name === person2.name; // false
person1.name; // 'Greg'
person2.name; // 'Nicholas'
person1.__proto__.name; // 'Nicholas'
사실,우리 가 원형 속성 을 다시 쓸 때,단지 실례 에 새로운 속성 을 추 가 했 을 뿐이다.우리 가 인 스 턴 스 의 속성 을 삭제 하면 원형 속성 이 드 러 납 니 다.
delete person1.name;
person1.name; // 'Nicholas'
hasOwnProperty()함 수 를 사용 하면 속성 이 인 스 턴 스 에 있 는 지 여 부 를 판단 할 수 있 습 니 다.
person1.hasOwnProperty('name'); // false
person1.name = 'Greg';
person1.hasOwnProperty('name'); // true
이상 은 자바 script 대상 생 성 모델 에 대한 상세 한 내용 입 니 다.자바 생 성 모델 에 관 한 자 료 는 다른 관련 글 을 주목 하 십시오!
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
기초 정리 - 1문자 (String) 숫자 (Number) 불린 (Boolean) null undefined 심볼 (Symbol) 큰정수 (BigInt) 따옴표로 묶어 있어야 함 Not-A-Number - 숫자 데이터 / 숫자로 표...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.