[기초] 자 바스 크 립 트 대상 (개인 학습 노트) 2

첫 번 째 편 에서 대상 에 대한 이 해 를 가지 게 되 었 습 니 다. 그 다음 에 공 부 를 하면 한 가지 유형 을 정의 하 는 것 도 한 대상 을 정의 하 는 것 이 쉬 워 집 니 다. 쓸데없는 말 이 이렇게 많아 서 계속 공 부 를 시작 합 니 다.우선 대상 을 정의 하 는 방식 으로 소개 한다.
1. 공장 방식
    '사람' 이라는 유형 을 정의 하려 면 이 사람 에 게 속성 을 설정 해 야 한다 고 간단하게 상상 할 수 있 습 니 다. 이름 과 성별.간단하게 코드 로 실현 할 수 있 습 니 다.

  var oPerson = new Object;
  oPerson.name = "yzl";
  oPerson.sex = "female";
  oPerson.sayInfo = function(){
    alert("name : " + this.name + " ，sex ：" + this.sex);
  };

    이것 은 단지 간단 한 대상 을 만 들 었 을 뿐, 여러 대상 을 만 들 려 면 지금 은 만족 하지 않 기 때문에 도입 되 었 다.
공장 함수, 개조 후의 코드:

  function createPerson(){
    var oPerson = new Object;
    oPerson.name = "yzl";
    oPerson.sex = "female";
    oPerson.sayInfo = function(){
      alert(" name : " + this.name + " ，sex ：" + this.sex);
    };
    return oPerson;
  };
  var p1 = createPerson();
  p1.sayInfo();
  p1.name = "gcm";
  p1.sex = "female";
  p1.sayInfo(); 

   여기 서 정말 한 사람 을 만 든 것 처럼 보이 지만 부족 한 것 을 볼 수 있 습 니 다. 모든 인 스 턴 스 의 속성 은 대상 이 만 든 후에 구체 적 인 수정 을 해 야 합 니 다. 대상 이 만 들 때 구체 적 인 상황 에 따라 대상 을 만 들 수 없습니다.그래서 우 리 는 코드 에 대해 관련 수정 을 했 는데 구체 적 으로 다음 과 같다.

function createPerson(sName,sSex){
	var oPerson = new Object;
  oPerson.name = sName;
  oPerson.sex = sSex;
  oPerson.sayInfo = function(){
		alert("name : " + this.name + " ，sex ：" + this.sex);
	};
	return oPerson;
};

var p1 = createPerson("yzl","male");
var p2 = createPerson("gcm","female");
p1.sayInfo();
p2.sayInfo(); 

    코드 수정 은 기본적으로 수 요 를 만족 시 켰 고 구체 적 인 상황 에 따라 다른 사람 을 만 들 수 있 습 니 다.그런데...(여기 서 저 는 갑자기 이렇게 많은 전환 이 봄 밤의 마술 의 부탁 과 같 습 니 다. 여러분 용서 하 세 요 ~) 하지만 메모 리 를 생각해 보면 매번 createPerson 이 sayInfon () 함 수 를 만 드 는 것 을 볼 수 있 을 것 입 니 다. 즉, 모든 사람 이 자신 에 게 대응 하 는 sayInfo 방법 을 가지 고 있 지만 방법의 내용 이 똑 같 기 때문에 더 좋 은 방법 을 선택해 야 합 니 다.EMCAScript 는 패 킷 을 닫 는 것 을 지원 하 는 것 을 고려 하여 함수 의 정 의 를 클래스 외 에 두 고 클래스 의 속성 이 이 방법 을 참조 하도록 할 수 있 습 니 다.

  function sayInfo(){
    alert("name : " + this.name + " ，sex ：" + this.sex);
  }

  function createPerson(sName,sSex){
    var oPerson = new Object;
    oPerson.name = sName;
    oPerson.sex = sSex;
    oPerson.sayInfo = sayInfo;
    return oPerson;
  }; 
  var p1 = createPerson("yzl","male");
  var p2 = createPerson("gcm","female");
  p1.sayInfo();
  p2.sayInfo(); 

   공장 모델 은 수 요 를 만족 시 켰 고 코드 를 계속 수정 하 는 과정 에서 공장 모델 에 존재 하 는 여러 가지 문제점 을 알 수 있 기 때문에 자바 코드 에 더욱 가 까 운 구조 함수 방식 이 생 겼 다.
2. 구조 함수 방식
    구조 함수 방식 은 공장 모델 과 매우 비슷 하 다. 클래스 를 정의 할 때 클래스 이름 을 직접 사 용 했 을 뿐 매개 변수의 할당 은 키 워드 를 사용 했다.
this, 값 을 되 돌려 줄 필요 도 없습니다.코드 직접 보기:

  function sayInfo(){
    alert("name : " + this.name + " ，sex ：" + this.sex);
  }
  function Person(sName,sSex){
    this.name = sName;
    this.sex = sSex;
    this.sayInfo = sayInfo; 
  }
  var p1 = new Person("yzl","male");
  p1.sayInfo();

    이런 방식 은 사실 공장 모델 과 비슷 해서 말 할 것 이 별로 없고 다음 정의 류 를 계속 하 는 방식 이다.
3. 원형 방식
    이 방식 은 대상 의
prototype 속성 은 새로운 대상 이 의존 하 는 원형 으로 볼 수 있 습 니 다.이런 방식 으로 종 류 를 정의 하 는 방법 은 일반적으로
먼저 빈 구조 함수 로 클래스 이름 을 설정 한 다음 에 모든 속성 과 방법 이 prototype 속성 을 직접 부여 합 니 다.다음 코드 참조:

  function Person(){
  }
  Person.prototype.name = "yzl";
  Person.prototype.sex = "male";
  Person.prototype.sayInfo = function(){
    alert("name : " + this.name + " ，sex ：" + this.sex);
  };
  var p1 = new Person();
  p1.sayInfo();
  p1.name = "gcm";
  p1.sex = "female";
  p1.sayInfo(); 

   프로 토 타 입 방식 으로 인 스 턴 스 를 만 들 때 프로 토 타 입 의 모든 속성 은 생 성 할 대상 에 게 즉시 부여 되 고 모든 속성 은 같은 대상 에 속 하 는 것 처럼 보 입 니 다. 그 중에서 sayInfo 방법 은 같은 인용 을 가리 키 고 있 습 니 다.이 방법 으로 클래스 를 정의 하면 인 스 턴 스 of 연산 자 를 사용 하여 인 스 턴 스 가 가리 키 는 종 류 를 검사 할 수 있 습 니 다.

  alert(p1 instanceof Person); //true

원형 방식 으로 앞에서 언급 한 약점 이 존재 합 니 다. 특정한 사례 의 속성 은 대상 이 만들어 진 후에 야 구체 적 인 상황 에 따라 수정 할 수 있 습 니 다. 이것 은 모두 받 아들 일 수 있 습 니 다.그러나 모든 속성 이 같은 인용 을 가리 키 기 때문에 심각 한 문제 가 존재 합 니 다. 코드 참조:

  function Person(){
  }
  Person.prototype.name = "yzl";
  Person.prototype.sex = "male";
  Person.prototype.friends = new Array("ymj","gcm");
  Person.prototype.sayInfo = function(){
    alert("name : " + this.name + " ，sex ：" + this.sex);
  };
  var p1 = new Person();
  var p2 = new Person();
  p1.friends.push("hl");
  alert(p2.friends); // ymj gcm hl

   코드 에서 분명히 p1 의 friends 속성 만 수정 하 였 으 나 p2 의 friends 속성 도 변화 가 생 겼 습 니 다. 이것 은 매우 심각 한 오류 입 니 다.개인 적 으로 이런 방식 과 는 라인 이 안전 하지 않 아서 여러 라인 에 접근 하면 오류 가 발생 할 수 있다 고 느낀다.이렇게 많은 수정 을 거 쳐 더욱 합 리 적 인 방식 을 제시 했다.
구조 함수 와 원형 방식 을 공동으로 사용 하 다.
4. 구조 함수 와 원형 방식 을 공동으로 사용한다.
이런 방식 은 사실 매우 간단 하 다. 기본 적 인 사고방식 은 바로
구조 함수 로 클래스 의 속성 을 정의 하고 원형 방식 으로 클래스 를 설명 하 는 방법 을 사용 합 니 다.이렇게 하면 모든 대상 이 자신의 속성 을 독립 적 으로 차지 하고 모든 방법 을 한 번 만 만 들 수 있 습 니 다. 코드 는 다음 과 같 습 니 다.

  function Person(sName,sSex){
    this.name = sName;
    this.sex = sSex;
    this.friends = new Array();
  }

  Person.prototype.makeFriend = function(newFriend){
    this.friends.push(newFriend);
  }

  Person.prototype.sayInfo = function(){
    alert("name : " + this.name + " ，sex ：" + this.sex + ", and has  friends :" + this.friends );
  };
  var p1 = new Person("yzl","male");
  var p2 = new Person("gcm","female");
  p1.makeFriend("zxt");
  p2.makeFriend("gr");
  p1.sayInfo();
  p2.sayInfo();

   위의 이런 방식 은 자바 에서 대상 을 만 드 는 것 과 같 습 니 다. 이것 도 ECMAScript 가 주로 사용 하 는 방식 입 니 다.다른 몇 가지 생 성 방식 이 있 지만 가장 유용 하 다 는 것 을 기억 하면 됩 니 다. 다른 방식 은 더 이상 소개 하지 않 고 마지막 으로 자바 script 재 부팅 을 실현 하 는 방법 을 보충 합 니 다.우선 Javascript 의 중요 한 속성 을 알 아 봐 야 합 니 다.
arguments, 함 수 를 호출 할 때 전달 하 는 매개 변 수 를 기록 할 수 있 습 니 다. 즉, 이 를 통 해 함수 의 재 부팅 을 실현 하 는 것 입 니 다. 코드 는 다음 과 같 습 니 다.

  function Person(sName,sSex){
    switch(arguments.length){
	case 0 :
	  this.name = "unKnown";
	  this.sex = "unKnown";
	  break;
	case 1 :
	  this.name = sName;
	  this.sex = "unKnown";
	  break;
	case 2 :
	  this.name = sName;
	  this.sex = sSex;
	  break;			
	};
  }

  Person.prototype.sayInfo = function(){
    alert("name : " + this.name + " ，sex ：" + this.sex);
  };

  var p1 = new Person("yzl","male");
  var p2 = new Person("gcm");
  var p3 = new Person();
  p1.sayInfo();
  p2.sayInfo();
  p3.sayInfo();