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

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

高洛峰
풀어 주다: 2016-10-15 17:38:36
원래의
851명이 탐색했습니다.

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
로그인 후 복사


원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿