Comprendre les prototypes d'objets et les chaînes de prototypes en JavaScript-js tutoriel-php.cn

Cet article vous présentera le prototype d'objet et la chaîne de prototypes en JavaScript. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer. J'espère qu'il sera utile à tout le monde.

Comprendre les prototypes d'objets et les chaînes de prototypes en JavaScript

Prototype d'objet

Je crois que tout le monde l'a utilisé comme ça map :

let arr = [0, 1, 2]
let doubleArr = arr.map(c => c * 2)
console.log(doubleArr) // 0, 2, 4

Copier après la connexion

Je ne Je ne sais pas si c'est le cas, je n'y ai jamais pensé, arr lui-même ne définit pas l'attribut map, alors pourquoi puis-je utiliser la fonction map ?

Imprimez-le et voyez :

console.log(arr)
// 0: 0
// 1: 1
// 2: 2
// length: 3
// __proto__: Array(0)

Copier après la connexion

Un objet nommé __proto__ apparaît si vous le développez à nouveau, vous verrez bien sûr toutes les fonctions qui peuvent être utilisées par l'objet Array ; On peut également y retrouver la fonction map, et c'est exactement la fonction arr.map appelée dans l'exemple :

console.log(arr.map === arr.__proto__.map) // true

Copier après la connexion

L'objet __proto__ qui apparaît ici est ce qu'on appelle Objet prototype (Prototype).

Différent de Java, C# et d'autres langages orientés objet basés sur les classes, les propriétés et les méthodes sont transférées en définissant des classes, en créant des instances, en spécifiant l'héritage, etc. est un Basé sur un langage prototype (Prototype) , via l'objet prototype pré-établi, lorsqu'un nouvel objet est créé, précisez à quel objet prototype le prototype de l'objet doit faire référence.

Lorsque nous appelons une propriété ou une méthode d'un objet, si l'objet lui-même ne possède pas cette propriété ou cette méthode, JavaScript recherchera automatiquement la méthode dans son prototype, c'est pourquoi nous pouvons appeler arr.map directement sans erreur.

Prototype Chain

Vous avez peut-être remarqué que dans l'exemple précédent, l'objet __proto__ possède toujours l'attribut __proto__ :

console.log(arr.__proto__) // Array 的 Prototype
console.log(arr.__proto__.__proto__) // Object 的 Prototype
console.log(arr.__proto__.__proto__.__proto__) // null

Copier après la connexion

dans Dans le mécanisme ci-dessus, un prototype est lié à chaque fois qu'un objet est créé. Puisque les objets ont des prototypes, le prototype de l'objet lui-même est également un objet, et naturellement il ne fait pas exception à partir de cet exemple :

arr est une instance de tableau, le prototype est Array
arr.__proto__ est le prototype de tableau, le prototype est Objet
arr.__proto__.__proto__ est le prototype d'objet, le prototype est null
arr.__proto__.__proto__.__proto__ est nul et n'a aucun attribut

Puisque chaque objet a un prototype, cela forme une relation de dépendance qui est liée les uns aux autres et dépend les uns sur les autres couche par couche. Nous les appelons Chaîne de prototypes ; Grâce à ce mécanisme, les objets peuvent utiliser les propriétés et les méthodes du prototype, et du fait que la chaîne de prototypes est héritée couche par couche dans l'ordre, L'objet peut avoir les fonctions de tous les prototypes de la chaîne de prototypes, c'est le mécanisme de travail derrière les objets JavaScript.

Supplément : en JavaScript, la fin de presque chaque chaîne de prototypes sera Object, et pointe enfin vers null.

Utiliser des prototypes

Cela dit, il est temps d'entrer dans le code. Ensuite, pratiquons la création, la configuration et la modification de prototypes.

Créez d'abord un nouveau constructeur d'objet :

function Person(name) {
  this.name = name
}Person.prototype.hello = function () {
  console.log(`Hello ${this.name}.`)
}let gary = new Person('Gary')
gary.hello() // Hello Gary.Object.getPrototypeOf(gary) // {hello: ƒ, constructor: ƒ}

Copier après la connexion

L'exemple ci-dessus crée un constructeur d'objet simple Person() et définit les propriétés de l'objet dans le constructeur. Dans la méthode de l'objet, puisque la méthode n'a pas besoin d'avoir sa propre copie pour chaque objet pour éviter une consommation de mémoire redondante, la méthode de l'objet doit être définie sur l'objet prototype comme l'exemple Array.prototype.map précédent (Person.prototype ), afin que tous les objets créés par ce constructeur puissent partager ces méthodes. Enfin, créez un nouvel objet Person et obtenez le prototype de l'objet nouvellement généré via getPrototypeOf(obj).

Q : Pourquoi ne pas utiliser __proto__ pour obtenir directement l'objet prototype ?
R : Parce que bien que __proto__ soit pris en charge par presque tous les navigateurs, il s'agit d'un attribut non standard ; obtenir le prototype de l'objet via getPrototypeOf est la bonne manière.
Rappel : Person.prototype n'est pas le prototype de Person, mais le prototype du nouvel objet créé après l'exécution du constructeur ; n'utilisez jamais l'attribut prototype du constructeur avec Le prototype de l'objet est mélangé !

Héritage prototypique

Créez ensuite un nouveau prototype d'objet et héritez-en Person :

function Engineer(name, skill) {
  Person.call(this, name)
  this.skill = skill
}
Engineer.prototype = Object.create(Person.prototype)
Engineer.prototype.constructor = Engineerlet alice = new Engineer('Alice', 'JavaScript')
alice.hello() // Hello Alice.
console.log(alice.skill) // JavaScriptObject.getPrototypeOf(alice) 
// Person {constructor: ƒ}

Copier après la connexion

Un nouvel objet est créé ici Engineer 🎜>, et en spécifiant Engineer.prototype, laissez son prototype hériter de Person.prototype, et enfin réinitialisez Engineer.prototype.constructor pour laisser le constructeur pointer vers lui-même ; complétant ainsi l'héritage prototypique le plus basique.

Q：为什么需要重新设定 constructor？
A：这边功过 Object.create 复制了 Person.prototype 的全部属性，连同 constructor 属性都会被覆盖掉，如果 constructor 属性错误，在做 instanceof 判断时会产生错误的结果；因此这边设定继承时需要再次将 constructor 重新指定回构造函数本身。

修改原型

原型的引用、继承是直接参照到原型对象上，并非是在每个对象都复制一份原型；因此可以利用这个特性，在原型上增加自定义的属性和方法，让所有该类型的对象都能得到新方法；许多针对旧版浏览器的 Polyfill 就是这样实现的。

例如我们在写 Vue 项目的时候，可能都有做过类似的操作，把共用性高的属性方法放到 Vue.prototype 中：

Object.defineProperty(Vue.prototype, '$date', { value: dateTimeFormat })
// 之后就可以这样用
vm.$date(dateObj)

Copier après la connexion

这样的确很方便，但也要提醒开大家，当我们在做原型修改的时候要特别小心。接着刚才的例子，如果尝试对 Person 原型中的方法做个修改：

Person.prototype.hello = function () {
  console.log(`Bye ${this.name}.`)
}gary.hello() // Bye Gary.
alice.hello() // Bye Alice.

Copier après la connexion

如结果所示，当对象原型做修改时，所有原型链上有这个原型的对象，通通都会受到影响，不管对象是在修改前还是修改后创建的。

建议大家除非是 Polyfill，否则应该要极力避免对原生对象的原型进行修改，防止造成可能的意外结果。

ES6 的 Class

看完前面这一大段，是不是觉得心很累？别担心，从 ES6 开始添加了 Class 语法糖，使开发者体验提升了很多。下面把前面的例子用 Class 重构一下：

class Person {
  constructor (name){
    this.name = name
  }
  // 方法会自动放到 Person.prototype
  hello() {
    console.log(`Hello ${this.name}.`)
  }
}class Engineer extends Person {
  constructor (name, skill){
    super(name) // 调用 Person 的构造函数
    this.skill = skill
  }
}let alice = new Engineer('Alice', 'JavaScript')
alice.hello() // Hello Alice.Object.getPrototypeOf(alice) 
// Person {constructor: ƒ}

Copier après la connexion

很方便，同样的功能，代码的可读性却提高了不少，繁琐的设定也都能交给语法自动帮你完成。不过方便的语法背后，底层仍然是对象原型及原型链。