Héritage JavaScript et chaîne de prototypes

Cette fois, je vous présente l'héritage JavaScript et la chaîne de prototypes. Quelles sont les précautions lors de l'utilisation de l'héritage JavaScript et de la chaîne de prototypes.Voici des cas pratiques.

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

L'objet JavaScript a une chaîne pointant vers un objet prototype Lorsqu'il tentera d'accéder aux propriétés d'un objet, il ne sera pas seulement sur cet objet. La recherche recherchera également le prototype de l'objet, ainsi que le prototype du prototype de l'objet, et recherchera couche par couche jusqu'à ce que vous trouviez un attribut avec un nom correspondant ou atteigniez la fin de la chaîne de prototypes

// 让我们假设我们有一个对象 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

Méthode héritée

Lorsqu'une fonction héritée est appelée,

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

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'

utilise différentes méthodes pour créer des objets et générer des chaînes de prototypes

structures syntaxiques pour les objets créés

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

Objet créé par le constructeur

En JavaScript, le constructeur est en fait une fonction ordinaire. Lorsque l'opérateur new est utilisé sur cette fonction, il peut être appelé un

constructeur (constructeur). Objets créés par

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.create

ECMAScript 5 introduit une nouvelle méthode :

. Cette méthode peut être appelée pour créer un nouvel objet. Le prototype du nouvel objet est le premier paramètre transmis lors de l'appel de la méthode 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

Objet créé par mot-clé class

ECMAScript6 introduit un nouvel ensemble de clés Mots sont utilisés pour implémenter des classes. Ces constructions seront familières aux développeurs utilisant des langages basés sur les classes, mais elles sont différentes. JavaScript est toujours basé sur des prototypes. Ces nouveaux mots-clés incluent

, class, constructor, static et extends. super

"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);

Performance

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

est le seul moyen en JavaScript de gérer les propriétés sans parcourir la chaîne de prototypes. hasOwnProperty

Donc, lorsque vous exécutez :

var o = new Foo();

JavaScript s'exécute réellement (ou quelque chose comme ceci) :

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

o.someProp;

il vérifie si

a l'attribut o. someProp

Sinon, il cherchera

, Object.getPrototypeOf(o).someProp

S'il n'est toujours pas trouvé, il continuera à chercher

. La méthode Object.getPrototypeOf(Object.getPrototypeOf(o)).someProp

ps:

renvoie le prototype de l'objet spécifié (la valeur de la propriété interne Object.getPrototypeOf()). [[Prototype]]

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

Si vous pensez que c'est bien, veuillez visiter MDN

Je crois que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres. articles connexes sur le site php chinois !

Lecture recommandée :

Quels sont les composants de définition de classe présents dans React

Notes d'étude Ajax

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!