Analyse complète du prototype en JavaScript_Basic knowledge-js tutoriel-php.cn

Analyse complète du prototype en JavaScript_Basic knowledge

WBOY

Libérer： 2016-05-16 15:00:51

original

1273 Les gens l'ont consulté

Pour comprendre le prototype en JS, vous devez d'abord comprendre les concepts suivants
1. Tout en JS est un objet

2. Tout dans JS est dérivé d'Object, c'est-à-dire que le point final de la chaîne de prototypes de tout pointe vers Object.prototype

  // ["constructor", "toString", "toLocaleString", "valueOf", "hasOwnProperty", "isPrototypeOf", 
   // "propertyIsEnumerable", "__defineGetter__", "__lookupGetter__", "__defineSetter__",
   // "__lookupSetter__"]
   console.log(Object.getOwnPropertyNames(Object.prototype));

Copier après la connexion

3. La relation subtile entre les constructeurs et les instances (objets) en JS
Le constructeur définit le prototype pour se mettre d'accord sur les spécifications de son instance, puis utilise new pour construire l'instance. Son rôle est de produire l'objet.
Le constructeur (méthode) lui-même est une instance de la méthode (Fonction), donc son __proto__ (chaîne de prototypes) peut également être trouvé

Objet / fonction F() {} Il s'agit du constructeur, l'un est fourni par l'API native JS et l'autre est personnalisé
new Object() / new F() Ceci est une instance
L'instance "ne peut" vérifier que __proto__ pour savoir sur quel prototype elle est basée,
Et "ne peut pas" redéfinir le prototype de l'instance pour créer une instance de l'instance.

La pratique apporte une vraie connaissance, ce n'est qu'en observant/pensant soi-même que l'on peut vraiment comprendre :

  // 先来看看构造函数到底是什么
  // function Empty() {}  function Empty() {}
  console.log(Function.prototype, Function.__proto__);
  // Object {}          function Empty() {}
  console.log(Object.prototype, Object.__proto__);
  function F() {}
  // F {}              function Empty() {}
  console.log(F.prototype, F.__proto__);

Copier après la connexion

Vous vous êtes peut-être évanoui, décomposons-le.

prototype
Le format de sortie du prototype est : nom du constructeur prototype
Tout d’abord, jetons un coup d’œil à ce que génère Object.prototype ?
Object {} -> L'Object précédent est le nom du constructeur, et ce dernier représente le prototype. Voici un {}, qui est une instance d'un objet Object (objet vide)
. Nous comprendrons ensuite ce que signifie F {}. F est le nom du constructeur, et le prototype est aussi un objet vide

  // 再来看看由构造函数构造出来的实例
  var o = new Object(); // var o = {};
  // undefined       Object {}
  console.log(o.prototype, o.__proto__);
  function F() {}
  var i = new F();
  // undefined       F {}
  console.log(i.prototype, i.__proto__);

Copier après la connexion

Allons un peu plus loin et définissons le prototype de F pour voir ce qui se passe ?

  function F() {}
  F.prototype.a = function() {};
  var i = new F();
  // undefined       F {a: function}
  console.log(i.prototype, i.__proto__);

Copier après la connexion

De cette façon, nous pouvons clairement voir que i est construit à partir de F et que le prototype est {a: function}, ce qui signifie que le prototype d'objet vide d'origine a une nouvelle méthode a

Changeons une autre situation, que se passera-t-il si nous couvrons complètement le prototype de F ?

function F() {}
  F.prototype = {
    a: function() {}
  };
  var i = new F();
  // undefined       Object {a: function}
  console.log(i.prototype, i.__proto__);

Copier après la connexion

Hé ~ Pourquoi cela montre-t-il que i est construit à partir d'un objet ? Ce n'est pas vrai ! Parce que nous écrasons complètement le prototype de F, nous spécifions en fait le prototype comme l'objet {a : fonction}, mais cela entraînera la perte des informations du constructeur d'origine et deviendra le constructeur spécifié par l'objet {a : fonction}.
Alors quel est le constructeur de l'objet {a: function} ?
Parce que l'objet {a: function} est en fait relatif à

  var o = {a: function() {}} // new了一个Object

Copier après la connexion

Alors bien sûr le constructeur de o est Object

Corrigeons cette erreur

  function F() {}
  F.prototype = {
    a: function() {}
  }
  // 重新指定正确的构造函数
  F.prototype.constructor = F;
  var i = new F();
  // undefined       F {a: function, constructor: function}
  console.log(i.prototype, i.__proto__);

Copier après la connexion

Vous pouvez désormais obtenir à nouveau les informations correctes sur le prototype ~

Chaîne prototype

Alors regardons ce qu'est un prototype de chaîne ?

En termes simples, c'est la même chose que la relation d'héritage (chaîne) en POO Vous montez couche par couche jusqu'à atteindre l'Object.prototype final
.

2016510172352211.jpg (560×248)

La chose la plus importante est de déterminer quelles choses dans JS sont des objets (d'instance). C'est simple, tout dans JS est un objet ! Une autre chose à comprendre est que chaque objet a un prototype !

Alors prouvons-le :

  Object // 这是一个函数, 函数是 Function 的实例对象, 那么就是由 Function 构造出来的
  Object.__proto__ == Function.prototype // 那么Object的原型, true
  // 这个是一个普通对象了, 因此属于 Object 的实例
  Function.prototype.__proto__ == Object.prototype // true
  // 这已经是原型链的最顶层了, 因此最终的指向 null
  Object.prototype.__proto__ == null // true

  Function // 这也是一个函数, 没错吧!
  Function.__proto__ == Function.prototype // true
  
  function A() {} // 这是一个自定义的函数, 终归还是一个函数, 没错吧! 
  A.__proto__ == Function.prototype // 任何函数都是 Function 的实例, 因此A的原型是&#63;
  var a = new A()
  a.__proto__ == A.prototype // 实例a是由A构造函数构造出来的, 因此a的原型是由A的prototype属性定义的
  A.prototype.__proto__ == Object.prototype // 普通对象都是 Object 的示例

Copier après la connexion

Prototype et __proto__

Chaque objet contient un __proto__, qui pointe vers le "prototype" de cet objet.
Une chose similaire est que chaque fonction contient un prototype. Que fait cet objet prototype ?
Jetons un coup d'œil au code suivant, en utilisant le constructeur pour créer un objet (ce qui précède consiste à créer un objet sous la forme d'un littéral).

function Foo(){};
var foo = new Foo();
console.log(foo.__proto__);

Copier après la connexion

Pensez-y, à quoi pointe le __proto__ de cet objet foo ?

2016510172448163.png (163×68) Un objet contenant une propriété constructeur ? Peu importe si vous ne le comprenez pas bien. Imprimez simplement l'attribut prototype de la fonction Foo et comparez-le.

function Foo(){};
var foo = new Foo();
console.log(foo.__proto__);
console.log(Foo.prototype);
console.log(foo.__proto__ === Foo.prototype);

Copier après la connexion

2016510172512274.png (183×69) Il s'avère que le __proto__ du nouvel objet foo ne pointe que vers le prototype de la fonction Foo.

JS这么设计有何意义了？回忆下上面说的，在JS的世界中，对象不是根据类（模具）创建出来的，而是从原型（另一个对象）衍生出来的。

当我们执行new操作创建一个新的对象时，先不深入new操作的具体实现，但有一点我们是肯定的——就是为新对象的__proto__指向一个原型对象。

就刚才这段代码

function Foo(){};
var foo = new Foo();

Copier après la connexion

foo.__proto__到底要指向谁了？你怎么不能指向Foo这个函数本身吧，虽然函数也是对象，这个有机会会详细讲。但如何foo.__proto__指向Foo固然不合适，因为Foo是一个函数，有很多逻辑代码，foo作为一个对象，继承逻辑处理没有任何意义，它要继承的是“原型对象”的属性。

所以，每个函数会自动生成一个prototype对象，由这个函数new出来的对象的__proto__就指向这个函数的prototype。

foo.__proto__ --> Foo.prototype

Copier après la connexion

总结
说了这么多，感觉还是没完全说清楚，不如上一张图。我曾经参考过其他网友的图，但总觉得哪里没说清楚，所以我自己画了一张图，如果觉得我的不错，请点个赞！（老子可是费了牛劲才画出来）。

2016510172555695.png (800×600)

咱们就着这张图，记住如下几个事实：

1. 每个对象中都有一个_proto_属性。

JS世界中没有类（模具）的概念，对象是从另一个对象（原型）衍生出来的，所以每个对象中会有一个_proto_属性指向它的原型对象。（参考左上角的那个用字面量形式定义的对象obj，它在内存中开辟了一个空间存放对象自身的属性，同时生成一个_proto_指向它的原型——顶层原型对象。）

2. 每个函数都有一个prototype属性。

“构造函数”为何叫构造函数，因为它要构造对象。那么根据上面第一条事实，构造出来的新对象的_proto_属性指向谁了？总不能指向构造函数自身，虽然它也是个对象，但你不希望新对象继承函数的属性与方法吧。所以，在每个构造函数都会有一个prototype属性，指向一个对象作为这个构造函数构造出来的新对象的原型。

3. 函数也是对象。

每个函数都有一些通用的属性和方法，比如apply()/call()等。但这些通用的方法是如何继承的呢？函数又是怎么创建出来的呢？试想想，一切皆对象，包括函数也是对象，而且是通过构造函数构造出来的对象。那么根据上面第二条事实，每个函数也会有_proto_指向它的构造函数的prototype。而这个构造函数的函数就是Function，JS中的所有函数都是由Function构造出来的。函数的通用属性与方法就存放在Function.prototype这个原型对象上。