JavaScript-Prototyp und Vererbung sind ein Muss für Interviews

In der Kolumne „Javascript“ werden Prototypen und Vererbung vorgestellt, die in Interviews erlernt werden müssen objektorientiert

1 Möglichkeit zum Erstellen von Objekten

2 Tipps zum Erinnern an die Prototypenkette

3Instanz der Simulationsimplementierung

4Neue Keyword-Simulationsimplementierung
5Vererbungsimplementierung (Schritt-für-Schritt-Implementierung)
0 Wie man objektorientiert versteht
• Eigentlich weiß ich nicht, wie ich diese Frage beantworten soll. Ich weiß nur, dass der Interviewer eine Reihe von Vererbungsfragen stellen würde. Das Folgende ist ein Zitat von Lehrer Zhou.
„Objektorientiert ist eine Programmieridee, die der Prozessorientierung entspricht. Allgemeine Sprachen sind objektorientiert. JS selbst ist ebenfalls objektorientiert aufgebaut. Beispielsweise verfügt js selbst über viele integrierte Klassen , wie Promise. Sie können ein neues Promise verwenden, um die asynchrone Programmierung zu verwalten. Und vue erstellt auch Instanzen von vue

• var o1 = {name: 'o1'}
  var o2 = new Object({name: 'o2'})

  3.Object.create

  var M = function(name){
      this.name = name
  }
  var o3 = new M('o3')

2 Tipps zum Merken der Prototypenkette
• Das Gedächtnis ist immer regelmäßig. Wenn Sie in der High School trigonometrische Funktionen lernen, müssen Sie sich viele Formeln merken Man kann leicht verwirrt werden, wenn man sich alle Formeln gewaltsam einprägt. Wenn Sie sich jedoch die Kernpunkte merken, ist für die restlichen Formeln nur eine kleine Herleitung erforderlich. Das Gleiche gilt für die Prototypenkette. Wenn Sie sich zu Beginn ein paar Punkte merken, werden Sie später nicht verwirrt sein. Schlüsselkonzepte in der Prototypenkette:
Konstruktor
• , Instanz,
Konstruktor

,

__Proto__

,

Prototyp

, erinnern Sie sich zunächst an ihre Beziehung

Instanzen (Objekte) sind

Proto

, Instanzen ( Objekt) hat keinen Prototyp

Der Konstruktor hat einen Prototyp, und der Prototyp ist ein Objekt, dann erfüllt der Prototyp zusätzlich zum

Proto

auch den Konstruktor

Der Konstruktor des Der Prototyp des Konstruktors zeigt auf den Konstruktor selbst, d dazu

Tatsächlich, constructor, instance, constructor Die Beziehung zwischen , __ proto__,

prototype

wurde im obigen Beispiel und an 3 Einführungspunkten eingeführt. Sehen wir uns das noch einmal an: Der Konstruktor ist eine gewöhnliche Funktion, außer dass davor das Schlüsselwort new steht.

• Nehmen Sie die oben generierte o3-Instanz als Beispiel

var o4 = Object.create(p)

Die o3-Instanz selbst hat keinen Konstruktor, wird aber mithilfe der Prototypenkette nach oben durchsucht, d

Nachdem die Beziehung zwischen diesen Schlüsselwörtern geklärt ist, wird die Prototypenkette viel klarer sein

3 Instanz der Simulationsimplementierung

Was ist das Prinzip der Instanz von? Schauen wir uns zunächst die Verwendung von

 o3.__proto__ === M.prototype  //true

 o3.prototype   //undefined

 o3.__proto__ === M.prototype //true

an, d Folgendes Beispiel

 o3.constructor === M.prototype.constructor  // true

 o3.constructor === M //true

Dann implementieren Sie es basierend auf dieser Ideeninstanz, Sie werden auf jeden Fall mehr beeindruckt sein

[] instanceof Array  // true

4 neue Simulationsimplementierung (Kurzfassung)Was ist im Prozess des Neuen passiert?

Erzeugen Sie ein leeres Objekt

1. 5 Vererbung Die Implementierung von (Schritt-für-Schritt-Implementierung)

Schritt für Schritt, von einfach bis komplex, können Sie die Prinzipien und Mängel der Vererbung intuitiver entdecken

2. Kern der Konstruktionsmethode Parent1.call(this)

   [].__proto__ === Array.prototype //true
   Array.prototype.__proto__ === Object.prototype //true
   Object.prototype__proto__ //null

3. Nachteile: Nur das übergeordnete Objekt kann vererbt werden. Die internen Attribute des Klassenkonstruktors können die Attribute des Prototypobjekts des übergeordneten Klassenkonstruktors nicht erben.

4. Denken: Warum implementiert der Aufruf die Vererbung? ?

Verlassen Sie sich nur auf den Prototyp-Vererbungskern Child2.prototype = new Parent2()

function myInstanceof2(left, right){
    if(left === null || left === undefined){
        return false
    }
    if(right.prototype === left.__proto__) {
        return true
    }

    left = left.__proto__
    return myInstanceof2(left, right)
}

console.log(myInstanceof2([], Array))

Nachteile: c21.arr und c22.arr entsprechen derselben Referenz

Denken: Warum sind sie so geschrieben? das? Ein Zitat?

Kombinierte Vererbung 1

Kombinieren Sie die Vorteile der beiden oben genannten Vererbungsmethoden und verwerfen Sie alle Nachteile

 // 构造函数
 function M(name){
    this.name = name
 }
 // 原生new
 var obj = new M('123')

 // 模拟实现
 function create() {
   // 生成空对象
   let obj = {}
   // 拿到传进来参数的第一项，并改变参数类数组
   let Con = [].shift.call(arguments)
   // 对空对象的原型指向赋值
   obj.__proto__ = Con.prototype
   // 绑定this 
   //（对应下面使用来说明：Con是参数第一项M，
   // arguments是参数['123'],
   // 就是 M方法执行，参数是'123'，执行这个函数的this是obj）
   let result = Con.apply(obj, arguments)
   return result instanceof Object ? result : obj
 }

 var testObj = create(M, '123')
 console.log('testObj', testObj)

1. Denken Sie: Ist es kein Problem, so zu schreiben?

   答 ： 生成一个实例要执行 Parent3.call(this) ， new Child3()，也就是Parent3执行了两遍。

   4. 组合继承2

   改变上例子 的

     Child3.prototype = new Parent3()

   为

     Child3.prototype = Parent3.prototype

   缺点 ： 很明显，无法定义子类构造函数原型私有的方法

   5. 组合继承优化3 再次改变上例子 的

      Child3.prototype = Parent3.prototype

   为

      Child3.prototype = Object.create(Parent3.prototype)

   问题就都解决了。 因为Object.create的原理是：生成一个对象，这个对象的proto, 指向所传的参数。

   思考 ：是否还有疏漏？一时想不起来的话，可以看下这几个结果

   console.log(c31 instanceof Child3) // true
   console.log(c31 instanceof Parent3) // true
   console.log(c31.constructor === Child3) // false
   console.log(c31.constructor === Parent3) // true

   所以回想起文章开头所说的那几个需要牢记的点，就需要重新赋值一下子类构造函数的constructor： Child3.prototype.constructor = Child3，完整版如下

   function Parent3(){
       this.name = 'Parent3'
       this.arr = [1,2]
   }
   Parent3.prototype.say = function () {
       alert('say')
   }
   function Child3(){
       Parent3.call(this)
       this.type = 'type'
   }
   
   Child3.prototype = Object.create(Parent3.prototype)
   Child3.prototype.constructor = Child3
   
   var c31 = new Child3()
   var c32 = new Child3()
   
   c31.say()
   c31.arr.push('9')
   console.log('c31.arr : ', c31.arr)
   console.log('c31.arr : ', c32.arr)
   
   console.log('c31 instanceof Child3 : ', c31 instanceof Child3)
   console.log('c31 instanceof Parent3 : ', c31 instanceof Parent3)
   console.log('c31.constructor === Child3 : ', c31.constructor === Child3)
   console.log('c31.constructor === Parent3 : ', c31.constructor === Parent3)

   5 es6的继承

   class Parent{
     constructor(name) {
       this.name = name
     }
     getName(){
       return this.name
     }
   }
   
   class Child{
     constructor(age) {
       this.age = age
     }
     getAge(){
       return this.age
     }
   }

   es6继承记住几个注意事项吧

   • 1 构造函数不能当普通函数一样执行 Parent() 是会报错的
   • 2 不允许重定向原型 Child.prototype = Object.create(Parent.prototype) 无用
   • 3 继承写法如下，上面的Child类想继承父类，改成如下写法就好

   

   
   

   注意写了extends关键字，constructor中就必须写super(),打印结果如下：

   

Das obige ist der detaillierte Inhalt vonJavaScript-Prototyp und Vererbung sind ein Muss für Interviews. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!