웹 프론트엔드 JS 튜토리얼 JAVASCRIPT 객체 생성 및 6가지 상속 모드 이해 및 상상

JAVASCRIPT 객체 생성 및 6가지 상속 모드 이해 및 상상

Oct 15, 2016 pm 05:38 PM

JS에는 프로토타입 체인, 차용 생성자, 결합 상속, 프로토타입 상속, 기생 상속, 기생 결합 상속 등 총 6가지 상속 패턴이 있습니다. 이해와 기억을 돕기 위해 과정을 상상하고 6가지 모드에 대해 간략하게 설명하였습니다.

이야기가 너무 길어서 누와가 인간을 창조한다고 부르자.

객체 만들기

누와는 사람(생성된 객체)을 하나씩 꼬집는데 속도가 너무 느려서 원하는 것을 볼 수 있도록 기계(기능)를 설계했습니다. 만들고 이 사람이 어떤 특성과 기능을 가지고 있는지 알려주면 기계가 그것을 만들 수 있습니다. 이것이 팩토리 패턴입니다(동일한 인터페이스를 사용하여 객체를 생성하면 많은 반복 코드가 생성되어 함수(몰드)가 발명됩니다).

하지만 기계로 사람을 만드는 것도 번거롭기 때문에(흙을 파고, 진흙을 반죽하고, 눈을 꼬집고, 코를 꼬집고...) 그래서 미리 코와 눈을 꼬집는 아이디어가 나왔어요. 백업을 위해 기계를 수정하고, 만들고 싶은 사람이 어떤 눈과 코를 가지고 있는지 알려주는 기계가 바로 시공자입니다.

여기에는 여전히 문제가 있습니다. 꼬집는 사람이 모두 달릴 수 있도록 하려면 기계가 모두를 위해 '실행' 기능을 설치해야 합니다. 이 프로세스는 너무 느리고 오류가 발생할 수 있습니다. party(함수 메서드는 생성자 외부 및 전역 범위에서 정의됩니다.) 제 3자는 내가 꼬집는 모든 사람에게 실행 기능을 설치하는 책임을 맡고 있으며, 그것을 가져다가 기계에 올려 놓고 사용하므로 매번 처리할 필요가 없습니다. 좋아, 사람들은 달릴 수 있어 매우 편리하지만 문제가 다시 발생합니다. 건설된 사람들에게는 여전히 "점프"와 "걷기"의 N개의 기능이 필요합니다. 그런 다음 이와 같은 기계를 구축할 수 없습니다. 말이 안 돼요. 그래서 누와(개발자)가 초기에 프로토타입 모드를 만들었는데... 마이와가 대단하네요.

프로토타입 모드의 각 함수에는 프로토타입 객체를 가리키는 포인터인 프로토타입 속성이 있습니다. 프로토타입 개체에는 모든 인스턴스에서 공유할 수 있는 속성과 메서드가 포함되어 있습니다. 이 프로토타입 개체에는 프로토타입 특성이 있는 함수에 대한 포인터가 포함된 생성자 특성이 있습니다.

조금 혼란스러워 보이지만 누와(Nuwa)의 관점에서 보면 쉽게 이해할 수 있습니다. 제작자 누와(Nuwa)는 다양한 금형(프로토타입 개체)도 발명했으며 이제 곧 제작을 시작합니다. 1 Create 일종의 인간 -->그런 사람을 만드는 데 사용되는 틀을 사용하는 것이다. 결국, 당신은 그것을 창조하는 데 어떤 틀을 사용하든 모든 것을 창조할 수 있습니다. 인간이 만드는 모든 기계(기능)에는 고유한 금형(프로토타입 개체)이 있으며, 기계에는 금형을 가리키는 [시제품]이라는 라벨이 있습니다. 이 금형에는 생산 마크로 라벨을 붙일 수 있는 [제작자] 속성이 있습니다. 이 기계를 가리키면 이 기계는 금형 제작에 사용됩니다. 그러므로 어떤 유형의 사람을 만들고 싶다면 틀만 바꾸면 된다. 이것이 편리하고 빠른 프로토타입 객체의 장점입니다.

제작 과정은 다음과 같습니다. 1 머신 A 빌드: function jqA(){}; //몰드(프로토타입 객체)를 가리키는 프로토타입 속성이 있습니다.

2 머신 A를 빌드합니다. Mold: jqA.prototype={

생성자: jqA, // 라벨링과 동일, 기계 A에서 생성,

이름: 'lily',

skin: 'white ',

     run: function(){

 alert(this.name+'run');    이 곰팡이가 리리라는 이름을 만들어주고 피부가 하얗게 되는 그런 사람들 실행할 수 있습니다.

3 이 유형의 사람 생성 var person1=new jqA();

이 유형의 사람 생성 var person2=new jaA();

person1 및 person2 [[prototype]] 속성이 있는데, 이는 템플릿 A로 처리되어 템플릿 A를 가리킨다는 뜻입니다

완벽하지만 또 문제가 발생합니다. 이렇게 생산된 사람들은 다 똑같습니다. .. 똑같은 백인 다섯 명이 당신을 향해 다가오고 있습니다. 거기에는 날씬한 피부를 가진 아름다운 여자가 있고, 그 뒤에는 똑같이 생긴 키가 작고 못생긴 여자가 다섯 명 있습니다. 따라서 기계 A가 템플릿을 사용하는 동안 여성 지시에 따라 이 사람은 파란 눈을 가지고 있고 저 사람은 더 뚱뚱하다는 등 다양한 특징을 가진 사람을 만들 수도 있습니다. . 이 추가 기능은 생성자를 통해 구현됩니다 ---> 생성자와 프로토타입 패턴을 조합하여 사용

제작 과정은 다음과 같습니다. 템플릿이므로 템플릿이 기계에 직접 설치됩니다. 에서 프로토타입 객체를 초기화합니다. 생성자 ---" 동적 프로토타입 모드가 더 편리합니다

  제작 과정은 다음과 같습니다.

그리고 질문은? 좋아, 기생 생성자 모드를 제공하십시오. 내부 기계를 기계에 추가하십시오. 이 내부 기계는 생산을 담당하고 생산된 사람을 외부 기계에 제공하고 외부 기계는 그러한 사람을 외부에 제공합니다. (보통은 안쓰는데...)
        //组合使用构造函数模式和原型模式
            function  Person(name,skill,country) {
                this.name=name;
                this.age=skill;
                this.country=country;
                this.member=["刘封","刘婵"];
            } //机器可以听命令
 
            Person.prototype={
                constructor:Person,
                sayName:function () {
                    alert(this.name);
                }
            }  //还可以用模板
             var person1=new Person('马超','铁骑','蜀国');
             var person2=new Person('刘备','仁德','蜀国');
로그인 후 복사

상속(내 이해—_—)

  问题:女娲要造另一批人B,这批人的模板B造好了,但是想让这批人有之前造过的那批人的特点,怎么办?先让这些人过滤一下先前的模板A,在放到B中造就ok,这样类‘B人'就继承了‘A’类人的特点。如何过滤:父实例=子原型 建B的模板,造一个a出来,这个a肯定要过滤A模板,所以让B的模板等于a就ok,问题解决。 

 //父函数,机器A,A类人。它的实例a中有[[Prototype]]属性和自定义的property属性

    function SuperType(){
    this.property=true;
    }
    //在SuperType原型对象(模具A)中添加getSuperValue方法
    SuperType.prototype.getSuperValue=function(){
    return this.property 
      }
 
    //子函数,机器B,B类人。构造函数SubType,它的实例中有[[Prototype]]属性和自定义的subproperty属性
    function SubType(){
    this.subproperty=false;
      }
    //继承了SuperType (原型链)
    SubType.prototype=new SuperType();  //机器B=a
    //在SubType原型对象(模具B)中添加getSubValue方法
    SubType.prototype.getSubValue=function(){
return tis.subproperty;
    };  
    var insatance=new SubType();
    alert(insatance.getSuperValue()); //true
로그인 후 복사

问题:引用类型值会改变,因为实例共享属性,和原型模式中的问题相同

解决方案:经典继承 (借用构造函数):其实就是把模具A设计到机器B中,但是它已经不是模板了,机器B会给生产的b们添加这些A中的属性和方法,但是可以人为控制,女娲又命令机器B根据传递不同的命令生产不同的b。

  

在子类构造函数的内部调用超类构造函数

     相当于把父类的属性实例化到子类中?Java中的super() 存在疑问

 

   function SuperType(){
  this.colors=['red','blue','green'];
    }
    function SubType(){
    //继承了SuperTYpe
    SuperType.call(this);
     }
    var insatance1=new SubType();
    insatance1.colors.push('black');
    alert(insatance1.colors);// 'red,blue,green,black'
 
    var insatance2=new SubType();
    alert(insatance2.colors);//'red,blue,green'
로그인 후 복사

1传递参数:

      借用构造参数可以在子类型构造参数中向超类型构造参数传递参数

 

     function SuperType(name){
   this.name=name;
      }
      function SubType(){
    //继承了SuperTYpe,同时还传递了参数
    SuperType.call(this,'赵云');
 
    //实例属性
    this.age=29;
    }
로그인 후 복사

    var insatance=new SubType();

    alert(insatance.name); //赵云

    alert(insatance.age); //29

为了确保SuperType构造函数不会重写子类型的属性,可以在调用超类型构造函数之后,再添加应该在子类型中定义的属性。

问题:浪费劳动力,在机器中创建A具有的功能和属性,那么A模板就没用了,相当于回到工厂模式,都有打火机了,还要钻木取火吗....

  解决方案:组合继承

    在公司加班没事做,现在赶着下班,故事编不下去了,后面的继承模式搬之前的记录吧..   

  原型链和构造函数技术组合到一起,使用原型链实现对原型属性和方法的继承,借用构造函数来实现对实例属性的继承。这样通过在原型上定义方法实现了函数的复用,有能够保证每个实例都有它自己的属性

    原型继承:方法可以,实例属性无法继承; 借用构造函数:实例属性可以,方法不行。 一起用,完美。

     

  function SuperType(name){
   this.name=name;
   thi.colors=['red','blue','green'];
     }
    SuperType.prototype.sayName=function(){
   alert(this.name);
    };
 
    function SubType(name,age){
  //继承属性
  SuperType.call(this,name);
  this.age=age;
    }
     //继承方法
   SubType.prototype=new SuperType();
 
   SubType.prototype.sayAge=function(){
    alert(this.age);
   }
 
  var instance1=new SubType('zhaoyun',29);
  instance1.colors.push('black');
  alert(instance1.colors); //'red,blue,green,black'
  instance1.sayName();//zhaoyun
  instance1.sayAge();//29
 
  var insatance2=new SubType('诸葛瑾',25);
  alert(instance2.colrs);'red,blue,green'
  instance22.sayName();//诸葛瑾
  instance2.sayAge();//25
로그인 후 복사


본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.

핫 AI 도구

Undresser.AI Undress

Undresser.AI Undress

사실적인 누드 사진을 만들기 위한 AI 기반 앱

AI Clothes Remover

AI Clothes Remover

사진에서 옷을 제거하는 온라인 AI 도구입니다.

Undress AI Tool

Undress AI Tool

무료로 이미지를 벗다

Clothoff.io

Clothoff.io

AI 옷 제거제

AI Hentai Generator

AI Hentai Generator

AI Hentai를 무료로 생성하십시오.

인기 기사

R.E.P.O. 에너지 결정과 그들이하는 일 (노란색 크리스탈)
3 몇 주 전 By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. 최고의 그래픽 설정
3 몇 주 전 By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. 아무도들을 수없는 경우 오디오를 수정하는 방법
3 몇 주 전 By 尊渡假赌尊渡假赌尊渡假赌
WWE 2K25 : Myrise에서 모든 것을 잠금 해제하는 방법
4 몇 주 전 By 尊渡假赌尊渡假赌尊渡假赌

뜨거운 도구

메모장++7.3.1

메모장++7.3.1

사용하기 쉬운 무료 코드 편집기

SublimeText3 중국어 버전

SublimeText3 중국어 버전

중국어 버전, 사용하기 매우 쉽습니다.

스튜디오 13.0.1 보내기

스튜디오 13.0.1 보내기

강력한 PHP 통합 개발 환경

드림위버 CS6

드림위버 CS6

시각적 웹 개발 도구

SublimeText3 Mac 버전

SublimeText3 Mac 버전

신 수준의 코드 편집 소프트웨어(SublimeText3)

내 자신의 JavaScript 라이브러리를 어떻게 작성하고 게시합니까? 내 자신의 JavaScript 라이브러리를 어떻게 작성하고 게시합니까? Mar 18, 2025 pm 03:12 PM

기사는 JavaScript 라이브러리 작성, 게시 및 유지 관리, 계획, 개발, 테스트, 문서 및 홍보 전략에 중점을 둡니다.

브라우저에서 성능을 위해 JavaScript 코드를 최적화하려면 어떻게해야합니까? 브라우저에서 성능을 위해 JavaScript 코드를 최적화하려면 어떻게해야합니까? Mar 18, 2025 pm 03:14 PM

이 기사는 브라우저에서 JavaScript 성능을 최적화하기위한 전략에 대해 설명하고 실행 시간을 줄이고 페이지로드 속도에 미치는 영향을 최소화하는 데 중점을 둡니다.

프론트 엔드 열 용지 영수증에 대한 차량 코드 인쇄를 만나면 어떻게해야합니까? 프론트 엔드 열 용지 영수증에 대한 차량 코드 인쇄를 만나면 어떻게해야합니까? Apr 04, 2025 pm 02:42 PM

프론트 엔드 개발시 프론트 엔드 열지대 티켓 인쇄를위한 자주 묻는 질문과 솔루션, 티켓 인쇄는 일반적인 요구 사항입니다. 그러나 많은 개발자들이 구현하고 있습니다 ...

브라우저 개발자 도구를 사용하여 JavaScript 코드를 효과적으로 디버그하려면 어떻게해야합니까? 브라우저 개발자 도구를 사용하여 JavaScript 코드를 효과적으로 디버그하려면 어떻게해야합니까? Mar 18, 2025 pm 03:16 PM

이 기사는 브라우저 개발자 도구를 사용하여 효과적인 JavaScript 디버깅, 중단 점 설정, 콘솔 사용 및 성능 분석에 중점을 둡니다.

Java의 컬렉션 프레임 워크를 효과적으로 사용하려면 어떻게해야합니까? Java의 컬렉션 프레임 워크를 효과적으로 사용하려면 어떻게해야합니까? Mar 13, 2025 pm 12:28 PM

이 기사는 Java의 컬렉션 프레임 워크의 효과적인 사용을 탐구합니다. 데이터 구조, 성능 요구 및 스레드 안전을 기반으로 적절한 컬렉션 (목록, 세트, ​​맵, 큐)을 선택하는 것을 강조합니다. 효율적인 수집 사용을 최적화합니다

소스 맵을 사용하여 조정 된 JavaScript 코드를 디버그하는 방법은 무엇입니까? 소스 맵을 사용하여 조정 된 JavaScript 코드를 디버그하는 방법은 무엇입니까? Mar 18, 2025 pm 03:17 PM

이 기사는 소스 맵을 사용하여 원래 코드에 다시 매핑하여 미니어링 된 JavaScript를 디버그하는 방법을 설명합니다. 소스 맵 활성화, 브레이크 포인트 설정 및 Chrome Devtools 및 Webpack과 같은 도구 사용에 대해 설명합니다.

Chart.js : Pie, Donut 및 Bubble Charts를 시작합니다 Chart.js : Pie, Donut 및 Bubble Charts를 시작합니다 Mar 15, 2025 am 09:19 AM

이 튜토리얼은 Chart.js를 사용하여 파이, 링 및 버블 차트를 만드는 방법을 설명합니다. 이전에는 차트 유형의 차트 유형을 배웠습니다. JS : 라인 차트 및 막대 차트 (자습서 2)와 레이더 차트 및 극지 지역 차트 (자습서 3)를 배웠습니다. 파이 및 링 차트를 만듭니다 파이 차트와 링 차트는 다른 부분으로 나뉘어 진 전체의 비율을 보여주는 데 이상적입니다. 예를 들어, 파이 차트는 사파리에서 남성 사자, 여성 사자 및 젊은 사자의 비율 또는 선거에서 다른 후보자가받는 투표율을 보여주는 데 사용될 수 있습니다. 파이 차트는 단일 매개 변수 또는 데이터 세트를 비교하는 데만 적합합니다. 파이 차트의 팬 각도는 데이터 포인트의 숫자 크기에 의존하기 때문에 원형 차트는 값이 0 인 엔티티를 그릴 수 없습니다. 이것은 비율이 0 인 모든 엔티티를 의미합니다

초보자를위한 타이프 스크립트, 2 부 : 기본 데이터 유형 초보자를위한 타이프 스크립트, 2 부 : 기본 데이터 유형 Mar 19, 2025 am 09:10 AM

엔트리 레벨 타입 스크립트 자습서를 마스터 한 후에는 TypeScript를 지원하고 JavaScript로 컴파일하는 IDE에서 자신의 코드를 작성할 수 있어야합니다. 이 튜토리얼은 TypeScript의 다양한 데이터 유형으로 뛰어납니다. JavaScript에는 NULL, UNDEFINED, BOOLEAN, 번호, 문자열, 기호 (ES6에 의해 소개 됨) 및 객체의 7 가지 데이터 유형이 있습니다. TypeScript는이 기반으로 더 많은 유형을 정의 하며이 튜토리얼은이 모든 튜토리얼을 자세히 다룹니다. 널 데이터 유형 JavaScript와 마찬가지로 Null in TypeScript

See all articles