Maison > Article > interface Web > Comprendre les prototypes d'objets et les chaînes de prototypes en JavaScript
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.
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
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)
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
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.
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
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 Arrayarr.__proto__
est le prototype de tableau, le prototype est Objetarr.__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
.
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: ƒ}
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 viagetPrototypeOf
est la bonne manière.Rappel :
Person.prototype
n'est pas le prototype dePerson
, mais le prototype du nouvel objet créé après l'exécution du constructeur ; n'utilisez jamais l'attributprototype
du constructeur avec Le prototype de l'objet est mélangé !
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: ƒ}
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)
这样的确很方便,但也要提醒开大家,当我们在做原型修改的时候要特别小心。接着刚才的例子,如果尝试对 Person
原型中的方法做个修改:
Person.prototype.hello = function () { console.log(`Bye ${this.name}.`) }gary.hello() // Bye Gary. alice.hello() // Bye Alice.
如结果所示,当对象原型做修改时,所有原型链上有这个原型的对象,通通都会受到影响,不管对象是在修改前还是修改后创建的。
建议大家除非是 Polyfill,否则应该要极力避免对原生对象的原型进行修改,防止造成可能的意外结果。
看完前面这一大段,是不是觉得心很累?别担心,从 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: ƒ}
很方便,同样的功能,代码的可读性却提高了不少,繁琐的设定也都能交给语法自动帮你完成。不过方便的语法背后,底层仍然是对象原型及原型链。
以上是 JavaScript 中关于对象原型的说明,希望能帮你理解对象原型,在这个什么都是对象的语言中,充分理解并掌握对象原型,是成为专业码农必须要突破的关卡之一。
更多编程相关知识,请访问:编程课程!!
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!