원생 JS 봉인new 함수 new 키워드 기능 구현

2731 단어 jsnew함수.
머리말
알다 시 피 대상 이 없 으 면 어떻게 합 니까?그럼 뉴 하나!
그렇다면 JS 에 서 는 우리 가 새로운 대상 이 되 었 을 때 이 new 키워드 내 부 는 무엇 을 했 을 까?
이제 네 이 티 브 JS 에서 뉴 키워드 내부 의 작업 원 리 를 분석 해 보 겠 습 니 다.
원시 적 new
우선,우 리 는 먼저 새로운 대상 을 살 펴 보 자.

 //  Person    ,   name,age
 function Person(name,age){
   this.name = name;
   this.age = age;
  }
 //       
 xm = new Person('xiaoming',18);
 //            
 console.log(xm);
인쇄 결과:


인쇄 결과 에서 볼 수 있 습 니 다:
new 키워드 로 대상 을 예화 할 때 먼저 빈 대상 xm 를 만 들 었 습 니 다.그리고 이 빈 대상 은 두 개의 속성 name 과 age 를 포함 하여 구조 함수 중의 두 가지 속성 에 대응 합 니 다.그 다음 에 우 리 는 예화 된 이 대상 xm 가 Person.prototype 을 계승 하 는 것 임 을 알 수 있 습 니 다.그러면 지금 우 리 는 new 키워드 가 예화 대상 에서 내부 에서 무엇 을 했 는 지 정리 할 수 있 습 니 다.사실 new 키워드 내부 에서 다음 과 같은 세 가지 일 을 했 습 니 다(이미 알 고 있 는 구조 함 수 는 Func 입 니 다).
1.빈 대상 을 만 들 고 이 빈 대상 을 Func.prototype 에 계승 합 니 다.
2.구조 함 수 를 실행 하고 this 를 새로 만 든 대상 에 게 가리 키 기;
3.새로운 대상 으로 돌아 가기;
3.봉인새로운 함수
우리 가 new 키워드 의 내부 원 리 를 알 게 되면 우 리 는 하 나 를 포장 할 수 있다.new 함수,new 키워드 와 같은 기능 에 사용 합 니 다.
_new 함 수 는 다음 과 같은 몇 가지 인 자 를 입력 해 야 합 니 다:
첫 번 째 매개 변수:구조 함수 이름 Func;
두 번 째 매개 변수 및 뒤의 매개 변수:구조 함수 의 매개 변수

 function _new(){
  //1.              ,      Func
   var Func = [].shift.call(arguments);
   //2.       obj,     Func.prototype
   var obj = Object.create(Func.prototype);
   //3.      ,  this        obj
   Func.apply(obj,arguments)
   //4.       obj
   return obj
 }
4.테스트새로운 함수
봉 인 된 후 봉 인 된new 함수,네 이 티 브 new 키워드 와 같은 기능 을 실 현 했 는 지 확인 하 세 요.

 //  Person    ,   name,age
 function Person(name,age){
   this.name = name;
   this.age = age;
 } 
 function _new(){
   //1.              ,      Func
   var Func = [].shift.call(arguments);
   //2.       obj,     Func.prototype
   var obj = Object.create(Func.prototype);
   //3.      ,  this        obj
   Func.apply(obj,arguments)
   //4.       obj
   return obj
 }
 xm = _new(Person,'xiaoming',18);
 console.log(xm);
테스트 결과:


테스트 결과 에서 보 니,new 함수 의 기능 은 new 키워드 와 완전히 일치 합 니 다.
총결산
위 와 같이 소 편 이 소개 해 드 린 원생 JS 패키지new 함수 가 new 키워드 의 기능 을 실현 합 니 다.여러분 에 게 도움 이 되 기 를 바 랍 니 다.궁금 한 점 이 있 으 시 면 저 에 게 메 시 지 를 남 겨 주세요.작은 편 지 는 제때에 답 해 드 리 겠 습 니 다!

좋은 웹페이지 즐겨찾기