JavaScript-Vererbung und Prototypenkette

Dieses Mal präsentiere ich Ihnen die JavaScript-Vererbung und die Prototypenkette. Vorsichtsmaßnahmen bei der Verwendung von JavaScript Werfen wir einen Blick darauf.

最近一直在看微信小程序,下午换换胃口看看js的原型链继承,补补js的基础

JavaScript-Objekt

hat eine Kette, die auf ein Prototypobjekt verweist. Wenn er versucht, auf die Eigenschaften eines Objekts zuzugreifen, befindet er sich nicht nur auf diesem Objekt Die Suche sucht auch nach dem Prototyp des Objekts sowie nach dem Prototyp des Objektprototyps und durchsucht Schicht für Schicht, bis Sie ein Attribut mit einem passenden Namen finden oder das Ende der Prototypenkette erreichen

Geerbte Methode

// 让我们假设我们有一个对象 o, 其有自己的属性 a 和 b：// {a: 1, b: 2}// o 的 [[Prototype]] 有属性 b 和 c：// {b: 3, c: 4}// 最后, o.[[Prototype]].[[Prototype]] 是 null.// 这就是原型链的末尾，即 null，// 根据定义，null 没有[[Prototype]].// 综上，整个原型链如下: // {a:1, b:2} ---> {b:3, c:4} ---> nullconsole.log(o.a); // 1// a是o的自身属性吗？是的，该属性的值为1console.log(o.b); // 2// b是o的自身属性吗？是的，该属性的值为2// 原型上也有一个'b'属性,但是它不会被访问到.这种情况称为"属性遮蔽 (property shadowing)"console.log(o.c); // 4// c是o的自身属性吗？不是，那看看原型上有没有// c是o.[[Prototype]]的属性吗？是的，该属性的值为4console.log(o.d); // undefined// d是o的自身属性吗？不是,那看看原型上有没有// d是o.[[Prototype]]的属性吗？不是，那看看它的原型上有没有// o.[[Prototype]].[[Prototype]] 为 null，停止搜索// 没有d属性，返回undefined

Wenn eine geerbte Funktion aufgerufen wird,

this指向的是当前继承的对象，而不是继承的函数所在的原型对象。

verwendet verschiedene Methoden, um Objekte zu erstellen und Prototypketten zu generieren

var o = {
  a: 2,
  m: function(){
    return this.a + 1;
  }};console.log(o.m()); // 3// 当调用 o.m 时,'this'指向了o.var p = Object.create(o);// p是一个继承自 o 的对象p.a = 4; // 创建 p 的自身属性 aconsole.log(p.m()); // 5// 调用 p.m 时, 'this'指向 p. // 又因为 p 继承 o 的 m 函数// 此时的'this.a' 即 p.a，即 p 的自身属性 'a'

Syntaxstrukturen für erstellte Objekte

Vom Konstruktor erstelltes Objekt

var o = {a: 1};// o 这个对象继承了Object.prototype上面的所有属性// o 自身没有名为 hasOwnProperty 的属性// hasOwnProperty 是 Object.prototype 的属性// 因此 o 继承了 Object.prototype 的 hasOwnProperty// Object.prototype 的原型为 null// 原型链如下:// o ---> Object.prototype ---> nullvar a = ["yo", "whadup", "?"];// 数组都继承于 Array.prototype // (Array.prototype 中包含 indexOf, forEach等方法)// 原型链如下:// a ---> Array.prototype ---> Object.prototype ---> nullfunction f(){
  return 2;}// 函数都继承于Function.prototype// (Function.prototype 中包含 call, bind等方法)// 原型链如下:// f ---> Function.prototype ---> Object.prototype ---> null

In JavaScript ist der Konstruktor eigentlich eine gewöhnliche Funktion. Wenn der neue Operator für diese Funktion verwendet wird, kann er als

Konstruktor

(Konstruktor) bezeichnet werden. Objekte erstellt von

function Graph() {
  this.vertices = [];
  this.edges = [];
}
Graph.prototype = {
  addVertex: function(v){
    this.vertices.push(v);
  }
};
var g = new Graph();
// g是生成的对象,他的自身属性有'vertices'和'edges'.
// 在g被实例化时,g.[[Prototype]]指向了Graph.prototype.

Object.createECMAScript 5 führt eine neue Methode ein:

. Diese Methode kann aufgerufen werden, um ein neues Objekt zu erstellen. Der Prototyp des neuen Objekts ist der erste Parameter, der beim Aufruf der

-Methode übergeben wird: Object.create()create

var a = {a: 1}; // a ---> Object.prototype ---> nullvar b = Object.create(a);// b ---> a ---> Object.prototype ---> nullconsole.log(b.a); // 1 (继承而来)var c = Object.create(b);// c ---> b ---> a ---> Object.prototype ---> nullvar d = Object.create(null);// d ---> nullconsole.log(d.hasOwnProperty); // undefined, 因为d没有继承Object.prototype

Objekt erstellt durch Schlüsselwort

classECMAScript6 führt einen neuen Satz von Schlüsselwörtern ein werden zur Implementierung von Klassen verwendet. Diese Konstrukte werden Entwicklern, die klassenbasierte Sprachen verwenden, vertraut sein, sie unterscheiden sich jedoch. JavaScript basiert immer noch auf Prototypen. Zu diesen neuen Schlüsselwörtern gehören

,

, class, constructor und static. extendssuper

Leistung

"use strict";class Polygon {
  constructor(height, width) {
    this.height = height;
    this.width = width;
    console.log(height)    //2
  }}class Square extends Polygon {
  constructor(sideLength) {
    super(sideLength, sideLength);
  }
  get area() {
    return this.height * this.width;
  }
  set sideLength(newLength) {
    this.height = newLength;
    this.width = newLength;
  }}var square = new Square(2);

function Graph() {
  this.vertices = [];
  this.edges = [];}Graph.prototype = {
  addVertex: function(v){
    this.vertices.push(v);
  }};var g = new Graph();console.log(g.hasOwnProperty('vertices'));// trueconsole.log(g.hasOwnProperty('nope'));// falseconsole.log(g.hasOwnProperty('addVertex'));// falseconsole.log(g.proto.hasOwnProperty('addVertex'));// true

ist die einzige Möglichkeit in JavaScript, Eigenschaften zu verarbeiten, ohne die Prototypenkette zu durchlaufen.

hasOwnPropertyWenn Sie also Folgendes ausführen:

JavaScript wird tatsächlich ausgeführt (oder so ähnlich):

var o = new Foo();

var o = new Object();
o._proto_ = Foo.prototype;
Foo.call(0)

o.someProp;

es prüft, ob

hat das Attribut

. osomePropWenn nicht, wird nach

gesucht.

Object.getPrototypeOf(o).somePropWenn es immer noch nicht gefunden wird, wird weiter nach

gesucht. Die

Object.getPrototypeOf(Object.getPrototypeOf(o)).someProp

ps:

-Methode gibt den Prototyp des angegebenen Objekts zurück (den Wert der internen

-Eigenschaft). Object.getPrototypeOf()[[Prototype]]

Wenn Sie denken, dass es gut ist, besuchen Sie bitte MDN

var proto = {};
var obj = Object.create(proto);
var a= Object.getPrototypeOf(obj)
console.log(a); {}

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie unter Anderem Verwandte Artikel auf der chinesischen PHP-Website!

Empfohlene Lektüre:

Welche Klassendefinitionskomponenten gibt es in React?

Ajax-Studiennotizen

Das obige ist der detaillierte Inhalt vonJavaScript-Vererbung und Prototypenkette. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!