Zusammenfassung der Lernerfahrungen zur Javascript-Vererbung_Grundkenntnisse

Nachdem ich viel über die JS-Vererbung gelesen habe, ist es Zeit für eine Zusammenfassung.
Lassen Sie mich zunächst ein allgemeines Verständnis vermitteln. Bitte korrigieren Sie mich, wenn ich falsch liege, damit ich meine drei Ansichten korrigieren kann. Darüber hinaus handelt es sich bei den folgenden Beispielen nicht um Originale, sondern lediglich um geänderte Variablennamen, und einige werden sogar direkt verwendet.

Wofür wird die js-Vererbung verwendet:

Erstens hat js nicht das gleiche Vererbungskonzept wie andere objektorientierte Sprachen. Die in js erwähnte Vererbung bezieht sich auf simulierte Vererbung.
Was genau macht js-Vererbung? Als ich anfing, am Front-End zu arbeiten, habe ich es für Interviews verwendet (ich habe es im Grunde nicht verwendet, als ich zum ersten Mal einige kleine Effekte geschrieben habe. Warum muss ich es lesen? Weil Interviewer es lieben um diese Frage zu stellen), also habe ich es nur für Interviews verwendet. Schauen Sie es sich grob an, und wenn Sie während des Interviews einen groben Überblick geben können, gelten Sie als guter Interviewer zu diesem Thema. Später begann ich nach und nach, es zu verwenden, obwohl das Konzept nicht ganz klar war.
Wofür wird es wirklich verwendet? Es wird hauptsächlich zur Wiederverwendung des Codes verwendet, den wir zuvor geschrieben haben. Wenn wir beispielsweise eine Funktion oder ein Objekt geschrieben oder etwas verwendet haben, das von jemand anderem geschrieben wurde, und wir selbst etwas hinzufügen möchten, können wir die Dinge von jemand anderem nicht ändern. Wir können es einfach erben und verwenden echte Nutzung des Erbes.

So implementieren Sie die JS-Vererbung:
Ich werde nicht zuerst auf den Code eingehen, lassen Sie uns zuerst über meine Gedanken sprechen. Tatsächlich besteht die Vererbung darin, Wege zu finden, die Eigenschaften oder Methoden anderer Objekte (alles in js ist ein Objekt) auf unser eigenes Objekt zu übertragen, damit unser eigenes Objekt verwendet werden kann. Dadurch wird auch der Zweck der Wiederverwendung erreicht.
Nachdem der Zweck nun klar ist, finden Sie hier die Mittel, um ihn zu erreichen.
Gemäß den Merkmalen von js besteht die Implementierung lediglich aus einer oder einer Kombination der folgenden Methoden.

1. Konstruktor, js scheint keine strenge Definition des Konstruktors zu haben, aber Sie können new verwenden, um neue Objekte zu erstellen. Es wird gesagt, dass der Konstruktor auch eine Methode zum Implementieren der Vererbung in einer streng objektorientierten Sprache ist, daher kann js ihn natürlich simulieren, sodass Leute, die die Oop-Sprache gelernt haben, zuerst darüber nachdenken werden.

2. Verwenden Sie Funktionsprototypen und Prototypketten, um zwei Objekte zu verknüpfen. Da die js-Prototypkette relativ einzigartig ist, ist dies leicht vorstellbar.
Es gibt verschiedene Arten von Prototypen, die als Prototyp des geerbten Objekts, als Prototyp des geerbten Objekts oder als Instanz des geerbten Objekts oder als direkter Erbe verwendet werden. Die Vererbungseffekte, die diese Prototypen als Vererbungsobjekte erzielen, sind unterschiedlich.

3. Kopieren und klonen Sie einfach alle Attribute oder Methoden des geerbten Objekts und wandeln Sie sie in die Attribute und Methoden unserer eigenen Objekte um. Dies kann natürlich in zwei Situationen unterteilt werden: flaches Kopieren und tiefes Kopieren.

4. Verwenden Sie die beiden Methoden „Call“ und „Apply“. Diese beiden Methoden können den Kontext der Funktionsausführung ändern (dies). Objekt.

Im Allgemeinen werden die Methoden zur Vererbung in js alle auf der Grundlage dieser Methoden kombiniert und aktualisiert. Natürlich liegt dies an der Wirkung der Verwendung eine einzelne Methode. Nicht ideal. Natürlich können Sie die zu verwendende Methode basierend auf den tatsächlichen Anforderungen Ihres Projekts auswählen, solange diese Ihren eigenen Anforderungen entspricht und nicht vorgibt, welche Methode verwendet werden muss, um dies zu erreichen. Genauso wie zu sagen, dass der schnellste Weg von Peking nach Shijiazhuang das Flugzeug ist. Aber wenn es weit vom Flughafen entfernt ist, einschließlich der Anfahrt zum Flughafen und der Fahrt vom Flughafen in die Stadt, ist es insgesamt nicht so schnell wie mit der Hochgeschwindigkeitsbahn, dann können Sie die Hochgeschwindigkeitsbahn nehmen. Wenn Sie beispielsweise ein Auto haben und fahren können, sich aber selbst herausfordern möchten, können Sie Fahrrad fahren. Dies können Sie je nach Ihrer tatsächlichen Situation wählen.

Lassen Sie uns über die oben genannten Implementierungsmethoden basierend auf dem Code sprechen. Einige davon stammen von anderen Stellen und fügen einige Kommentare hinzu.

Nachdem ich viel über die JS-Vererbung gelesen habe, ist es Zeit für eine Zusammenfassung.
Lassen Sie mich zunächst ein allgemeines Verständnis vermitteln. Bitte korrigieren Sie mich, wenn ich falsch liege, damit ich meine drei Ansichten korrigieren kann. Darüber hinaus handelt es sich bei den folgenden Beispielen nicht um Originale, sondern lediglich um geänderte Variablennamen, und einige werden sogar direkt verwendet.

Wofür wird die js-Vererbung verwendet:

Erstens hat js nicht das gleiche Vererbungskonzept wie andere objektorientierte Sprachen. Die in js erwähnte Vererbung bezieht sich auf simulierte Vererbung.
Was genau macht js-Vererbung? Als ich anfing, am Front-End zu arbeiten, habe ich es für Interviews verwendet (ich habe es im Grunde nicht verwendet, als ich zum ersten Mal einige kleine Effekte geschrieben habe. Warum muss ich es lesen? Weil Interviewer es lieben um diese Frage zu stellen), also habe ich es nur für Interviews verwendet. Schauen Sie es sich grob an, und wenn Sie während des Interviews einen groben Überblick geben können, gelten Sie als guter Interviewer zu diesem Thema. Später begann ich nach und nach, es zu verwenden, obwohl das Konzept nicht ganz klar war.
Wofür wird es wirklich verwendet? Es wird hauptsächlich zur Wiederverwendung des Codes verwendet, den wir zuvor geschrieben haben. Wenn wir beispielsweise eine Funktion oder ein Objekt geschrieben oder etwas verwendet haben, das von jemand anderem geschrieben wurde, und wir selbst etwas hinzufügen möchten, können wir die Dinge von jemand anderem nicht ändern. Wir können es einfach erben und verwenden echte Nutzung des Erbes.

So implementieren Sie die js-Vererbung:
Reden wir nicht zuerst über den Code, sondern zuerst über die Idee. Tatsächlich besteht die Vererbung darin, Wege zu finden, die Eigenschaften oder Methoden anderer Objekte (alles in js ist ein Objekt) auf unser eigenes Objekt zu übertragen, damit unser eigenes Objekt verwendet werden kann. Dadurch wird auch der Zweck der Wiederverwendung erreicht.
Nachdem der Zweck nun klar ist, finden Sie hier die Mittel, um ihn zu erreichen.
Gemäß den Merkmalen von js besteht die Implementierung lediglich aus einer oder einer Kombination der folgenden Methoden.

1. Konstruktor, js scheint keine strenge Definition des Konstruktors zu haben, aber Sie können new verwenden, um neue Objekte zu erstellen. Es wird gesagt, dass der Konstruktor auch eine Methode zum Implementieren der Vererbung in einer streng objektorientierten Sprache ist, daher kann js ihn natürlich simulieren, sodass Leute, die die Oop-Sprache gelernt haben, zuerst darüber nachdenken werden.

2. Verwenden Sie Funktionsprototypen und Prototypketten, um zwei Objekte zu verknüpfen. Da die js-Prototypkette relativ einzigartig ist, ist dies leicht vorstellbar.
Es gibt verschiedene Arten von Prototypen, die als Prototyp des geerbten Objekts, als Prototyp des geerbten Objekts oder als Instanz des geerbten Objekts oder als direkter Erbe verwendet werden. Die Vererbungseffekte, die diese Prototypen als Vererbungsobjekte erzielen, sind unterschiedlich.

3. Kopieren und klonen Sie einfach alle Attribute oder Methoden des geerbten Objekts und wandeln Sie sie in die Attribute und Methoden unserer eigenen Objekte um. Dies kann natürlich in zwei Situationen unterteilt werden: flaches Kopieren und tiefes Kopieren.

4. Verwenden Sie die beiden Methoden „Call“ und „Apply“. Diese beiden Methoden können den Kontext der Funktionsausführung ändern (dies). Objekt.

Im Allgemeinen werden die Methoden zur Vererbung in js alle auf der Grundlage dieser Methoden kombiniert und aktualisiert. Natürlich liegt dies an der Wirkung der Verwendung eine einzelne Methode. Nicht ideal. Natürlich können Sie die zu verwendende Methode basierend auf den tatsächlichen Anforderungen Ihres Projekts auswählen, solange diese Ihren eigenen Anforderungen entspricht und nicht vorgibt, welche Methode verwendet werden muss, um dies zu erreichen. Genauso wie zu sagen, dass der schnellste Weg von Peking nach Shijiazhuang das Flugzeug ist. Aber wenn es weit vom Flughafen entfernt ist, einschließlich der Anfahrt zum Flughafen und der Fahrt vom Flughafen in die Stadt, ist es insgesamt nicht so schnell wie mit der Hochgeschwindigkeitsbahn, dann können Sie die Hochgeschwindigkeitsbahn nehmen. Wenn Sie beispielsweise ein Auto haben und fahren können, sich aber selbst herausfordern möchten, können Sie Fahrrad fahren. Dies können Sie je nach Ihrer tatsächlichen Situation wählen.

Lassen Sie uns über die oben genannten Implementierungsmethoden basierend auf dem Code sprechen. Einige davon stammen von anderen Stellen und fügen einige Kommentare hinzu.

1. Konstruktorimplementierung (Leihkonstruktor):

function Super(arg){
      this.arr1 = "I'm super "+arg;
      this.show = function(){
        alert(this.arr1);
      }
    }

    Super.prototype.say = function(){
      alert(this.arr1);
    }

    function suber(arg){
      Super.apply(this, arguments); //在suber的上下文中运行super
    }

    var sub =new suber("suber");
    var sub2 = new suber("suber1");

    console.log(sub.arr1); //I'm super suber
    console.log(sub.show); //function (){ alert(this.arr1);}
    console.log(sub.say); //undefined
    console.log(sub.show === sub2.show); //false

Ups, ich habe festgestellt, dass sub.say undefiniert ist, was bedeutet, dass es nicht geerbt wurde. Die Darstellung der beiden Objekte sub und sub2 unten ist nicht gleich, was bedeutet, dass die beiden Funktionen auf zwei verschiedene Objekte verweisen, was bedeutet es sind zwei Exemplare herausgekommen.

Wenn diese Methode also die Vererbung implementiert, werden die Eigenschaften und Methoden des Prototypobjekts nicht vererbt. Die Eigenschaften und Methoden von Super werden für jedes neue Objekt separat kopiert.
Daher ist es nicht sinnvoll, diese Methode allein zur Implementierung der Vererbung zu verwenden, da keine der Methoden im Prototyp vererbt wurde. So kamen die Meister auf die Idee einer prototypischen Vererbung

2. Prototypische Vererbung:

function Super(arg){
      this.arr1 = "I'm super "+arg;
      this.show = function(){
        alert(this.arr1);
      }
    }

    Super.prototype.say = function(){
      alert(this.arr1);
    }

    function suber(arg){}

    suber.prototype = new Super();

    var sub = new suber("suber1");
    var sub2 = new suber("suber2");

    console.log(sub.arr1); //I'm super undefined
    console.log(sub.show); //function (){ alert(this.arr1);}
    console.log(sub.say); //function (){ alert(this.arr1);}
    console.log(sub.show === sub2.show);  //true;
    console.log(sub.say === sub2.say);  //true;

Dieses Mal wurde arr1 geerbt, aber die Parameter wurden nicht hinzugefügt und waren undefiniert. Daher konnten bei der Deklaration der Unterklasse dieser Methode der übergebene Parameter und die von der Unterklasse geerbten Eigenschaften nicht empfangen werden. Alles andere ist ziemlich normal. Zeigen und sagen werden beide vererbt. Zu beachten ist jedoch, dass say über das Prototypobjekt von super geerbt wird und show ein Attribut der Instanz ist, wenn eine neue Superobjektinstanz erstellt wird.

Wie implementiert man also die Parameterübertragung und erbt das Zeug im Prototyp? Natürlich kombinieren Sie einfach die beiden oben genannten Methoden, also haben die Senioren die folgende Methode erfunden

3. Kombinierte Vererbung (Konstruktor ausleihen und Prototyp festlegen):

function Super(arg){
      this.arr1 = "I'm super "+arg;
      this.show = function(){
        alert(this.arr1);
      }
    }

    Super.prototype.say = function(){
      alert(this.arr1);
    }

    function suber(arg){
      Super.apply(this, arguments);
    }

    suber.prototype = new Super();


    var sub = new suber("suber1");
    var sub2 = new suber("suber2");

    console.log(sub.arr1); //I'm super suber1
    console.log(sub.show); //function (){ alert(this.arr1);}
    console.log(sub.say); //function (){ alert(this.arr1);}
    console.log(sub.show === sub2.show);  //false;
    console.log(sub.say === sub2.say);  //true;

Diesmal ist es fast perfekt, aber Sie können feststellen, dass sub.show und sub2.show nicht gleich sind. Warum ist das so? Weil der Ort von „show“ zum eigenen Attribut von suber wird, fügen Sie es dann einfach in den suber-Prototyp ein Die Show (Supers Show wird als Instanzobjekt des Suber-Prototypobjekts verwendet) wird überschrieben, sodass sie einzeln kopiert wird. Natürlich gibt es keine Möglichkeit, dies zu vermeiden. Um diesen unnötigen Overhead zu vermeiden, können mehr dieser gemeinsam nutzbaren Funktionen in Prototypobjekten platziert werden.
Da die Aufrufe beim Erstellen von Suber und die Aufrufe beim Zuweisen von Werten zum Suber-Prototypobjekt dazu führen, dass Super zweimal aufgerufen wird, wird Super jedes Mal zweimal aufgerufen, wenn ein neues Suber-Objekt erstellt wird, und es werden zwei Instanzobjekte generiert Überschüssige Ressourcen müssen verbraucht werden.

Also öffneten sich die Senioren, um dieses Problem zu lösen, und entwickelten die folgende Methode.

4. Parasitäre Kombinationsvererbung:
Der Hauptunterschied zwischen dieser Methode und Methode 3 besteht darin, dass der Prototyp der übergeordneten Klasse dem Prototyp der untergeordneten Klasse und nicht dem Beispiel der übergeordneten Klasse zugewiesen wird

function Super(arg){
  this.arr1 = "I'm super "+arg;
  
}

Super.prototype.show = function(){ //这个方法放到了原型对象上。
    alert(this.arr1);
  }
Super.prototype.say = function(){
  alert(this.arr1);
}

function suber(arg){
  Super.apply(this, arguments);
}

/*inherit函数的作用，使用一个新的空函数，来切断父类对象的原型对象与子类原型对象的直接联系，而是通过这个空构造的实例对象实现继承，这样可以避免更改子类原型的属性或者方法而影响了父类原型对象的属性或者方法。*/

function inherit(obj){ 
  function F(){}
  F.prototype = obj;
  return new F();  
}

suber.prototype = inherit(Super.prototype);


var sub = new suber("suber1");
var sub2 = new suber("suber2");

console.log(sub.arr1); //I'm super suber1
console.log(sub.show); //function (){ alert(this.arr1);}
console.log(sub.say); //function (){ alert(this.arr1);}
console.log(sub.show === sub2.show);  //true;
console.log(sub.say === sub2.say);  //true;

好了，这样就把三方法的弊端干掉了，这个可以完美的使用了吧。

五、复制属性实现

拷贝我们可以写一个拷贝函数来实现。

function extend(Super,suber){
　　suber = suber || {};
　　for(var i in Super){
　　　　if(Super.hasOwnProperty(i)){
　　　　　　suber[i] = Super[i];
　　　　}
　　　}
　　return suber;
}


var parent = {
  name:"dad",
  num:[1,2,3],
  say:function(){alert("dad");}
}

var child = {
  age:5,
  sex:"boy"
};

child = extend(parent, child);

//以下测试
console.log(child); /*{
             age:5,
             sex:"boy",
             name:"dad",
             num:[1,2,3],
             say:function(){alert("dad");}
            }*/
console.log(child.say === parent.say); //true
console.log(child.num === parent.num); //true

复制成功，那么child成功继承了parent的一些属性，但是后面两个测试发现他们是相等的，就表明了他们在公用同一个数组，同一个函数，函数这个可以，但是数组这个就有问题了，如果一个chiild改变了数组，几个被继承对象的数组也跟着变了，这就不给力了啊。
为什么会发生这种情况呢，js里边对象存储的是指针，然后这个指针指向这个值，我们在这复制的实际是指向该对象的指针的值，所以继承对象和被继承对象都指向了同一个对象，接下来看看如何使用深度复制来解决这个问题。

深度复制对象属性：

function extenddeep(Super, suber){
      var tostr = Object.prototype.toString, astr = "[object Array]";
      suber = suber || {};

      for(var i in Super){
        if(Super.hasOwnProperty(i)){
          if(typeof Super[i] === "object"){
            suber[i] = (tostr.call(Super[i]) == astr) ? [] : {};
            extenddeep(Super[i],suber[i]);
          }else {
            suber[i] = Super[i];
          }
        }
      }

      return suber;
    }


    var parent = {
      name:"papa",
      num:[1,2,3],
      say:function(){alert("I'm father of my son!");}
    }

    var child = {
      name:"jone",
      sex:"boy",
    }

    var kid = extenddeep(parent, child);

    console.log(kid);  // {name: "papa"
                num: Array[3]
                say: ()
                sex: "boy"
              // }

    console.log(kid.say === parent.say); //true
    console.log(kid.num === parent.num);  //false
    console.log(kid.name); //papa

好了，深度复制完毕，但似有木有发现问题，name是parent的，也就是说如果继承对象有和被继承对象一样的属性名的属性如果不做处理就会被替换掉。那么我们可以做一下处理，先声明一个属性，保存parent里的东西，剩下的的当然就是child自己的东西了，最后再把属性给child对象就可以了。

六、利用call和apply这两个方法（借用方法）。
这个就是通过call和apply来复用其他对象的方法，达到复用的目的。

var one = {
      name:"object",
      say: function(greet){
        return greet + ', ' + this.name;
      }
    }

    var tow = {
      name:"two"
    }

    one.say.call(tow, "hi");  //hi, two

这个就是借用了，好了，下课。

好吧，好吧，其实这里边还有其他东西要看。可以借用并不“带表”可以随便把某个方法赋值给谁然后跟没发生什么似的继续用。所以我们平时使用借用时要注意一下上下文，下面看下那些容易出错的地方。

//赋值给一个变量时候上下文会变化
    var say = one.say;
    console.log(say('hoho')); // "hoho, undefined"

    //作为回调函数时也会发生变化
    var yetother = {
      name:"yetother obj",
      method:function(callback){
        return callback("Hola");
      }
    }

    console.log(yetother.method(one.say)); //"Hola, "

神马意思呢，就是this.name是undefined,当one.say赋值给say是，实际上是say存储了指向函数对象的指针，say这个变量明显又是全局变量的一个属性，那么它运行的时候实际的上下文就变成了windows了，当然这个时候name就变成undefined了。回调这个也是一样，return 的是函数运行的结果。如果我们事先设置 windows.name="windows" 那么得到的结果就变成了 "hoho, windows" 和"Hola, windows" 了。

function bind(o, m){
      return function(){
        return m.apply(o, [].slice.call(arguments));
      }
    }

    var othersay = bind(yetother, one.say);

    othersay("Hola"); //"Hola, yetother obj"

通过apply可以改变方法执行的上下文，那么我们构建一个函数来实现这样一个功能，通过使用方法调用实现上下文的改变，这样就不会出现上下文不是我们期望的上下文的情况了。

//这段是直接复制过来的。
    // ECMAScript 5给Function.prototype添加了一个bind()方法，以便很容易使用apply()和call()。

      if (typeof Function.prototype.bind === 'undefined') {
        Function.prototype.bind = function (thisArg) {
          var fn = this,
      slice = Array.prototype.slice,
      args = slice.call(arguments, 1);
          return function () {
            return fn.apply(thisArg, args.concat(slice.call(arguments)));
          };
        };
      }

      var twosay2 = one.say.bind(two);
      console.log(twosay2('Bonjour')); // "Bonjour, another object"

      var twosay3 = one.say.bind(two, 'Enchanté');
      console.log(twosay3()); // "Enchanté, another object"

介绍完了，该说说自己的疑惑了，当复制属性方法遇到的被继承对象里边存在方法，如何单独复制出来呢，现在的是直接共用了，因为毕竟方法一般不会经常改动。求解答？

下面是转载过来的jQuery的extend方法，好像也没有特殊处理函数这块，继承完了两个函数也是共用的。

$.extend源码

jQuery.extend = jQuery.fn.extend = function() {
          var options, name, src, copy, copyIsArray, clone,
             target = arguments[0] || {},
             i = 1,
             length = arguments.length,
             deep = false ;

          // Handle a deep copy situation
          //如果第一个参数是boolean类型
          //修正参数,将第二个参数作为target
          if ( typeof target === "boolean" ) {
             deep = target;

              // skip the boolean and the target
             target = arguments[ i ] || {};
              //i++是为了后续 i === length的判断
             i++;
          }

          // Handle case when target is a string or something (possible in deep copy)
          //如果目标既不是对象也不是方法(例如给基本类型扩展属性方法和属性不会报错但是是无用的)，修正target为 js对象
          if ( typeof target !== "object" && !jQuery.isFunction(target) ) {
             target = {};
          }

          // extend jQuery itself if only one argument is passed
          //如果只有一个参数，修正对象为JQuery函数或JQuery对象
          if ( i === length ) {
             target = this ;
              //修正target所在位置,后面的都是要添加给target的对象
             i--;
          }

          for ( ; i < length; i++ ) {
              // Only deal with non-null/undefined values
              if ( (options = arguments[ i ]) != null ) {
                 // Extend the base object
                 for ( name in options ) {
                    src = target[ name ];
                    copy = options[ name ];

                    // Prevent never-ending loop
                    //如果target和copy是同一个对象，略过，防止自己的属性引用了本身对象导致的循环引用,以致GC无法回收
                    if ( target === copy ) {
                        continue ;
                    }

                    // Recurse if we're merging plain objects or arrays
                    //如果是deep为true，并且要添加给target的copy为对象获数组
                    if ( deep && copy && ( jQuery.isPlainObject(copy) || (copyIsArray = jQuery.isArray(copy)) ) ) {
                        if ( copyIsArray ) {
                           copyIsArray = false ;
                           clone = src && jQuery.isArray(src) &#63; src : [];

                       } else {
                           clone = src && jQuery.isPlainObject(src) &#63; src : {};
                       }
                 
                        // Never move original objects, clone them
                        //很巧妙 ,用一个递归,实现引用对象的深克隆,递归的返回条件是属性石基本类型,基本类型都是深克隆
                       target[ name ] = jQuery.extend( deep, clone, copy );

                    // Don't bring in undefined values
                    } else if ( copy !== undefined ) {
                        //浅克隆
                       target[ name ] = copy;
                    }
                 }
             }
          }

          // Return the modified object
          return target;
      };

以上这篇javascript 继承学习心得总结就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。