الدرس 15 · How JavaScript really works

Prototypes and classes

لم يُترجم بعد؛ يُعرض باللغة الإنجليزية

Every JavaScript object has a hidden link to another object, its prototype. Reading a property the object does not have walks up these links until the property is found or the chain ends at null. Follow a nine-line script: a class Dog makes Dog.prototype, new makes two dogs linked to it, and three lookups find speak one link up, toString two links up, and fly nowhere.

11 دقيقة10 خطوات5 أسئلةIntermediate

شكل 15 · تفاعلي

جارٍ تحميل الرسم…

أو ← →

اختبر نفسك

5 أسئلة سريعة

اختر إجابة لتعرف السبب. تُحفَظ نتيجتك مع تقدّمك.

01rex is made with new Dog("Rex"). Where is the speak method stored?

Methods written in a class body are stored on the class's prototype object. rex.speak === fido.speak is true: both find the same function through their [[Prototype]] link.

02What does JavaScript do when you read rex.toString and rex has no own toString?

A property read looks on the object, then on its prototype, then on that object's prototype, and so on. toString is found on Object.prototype, two links up from rex.

03Which is NOT one of the things new Dog("Rex") does?

Nothing is copied. The object only gets a link to Dog.prototype, and the constructor adds own properties such as name.

04What does console.log(rex.fly) print, given that no object in the chain has fly?

The search reaches null without finding fly, so the read gives undefined. Only calling it, rex.fly(), throws a TypeError.

05Inside speak, called as fido.speak(), what is this?

this is set by how a function is called, not where it is stored. Called as fido.speak(), this is fido, so it returns "Fido woofs".

المصطلحات الأساسية

المسرد

Prototype: The object another object is linked to. When a property is missing on an object, JavaScript looks on its prototype next.
[[Prototype]]: The hidden internal link from an object to its prototype (or to null). Read it with Object.getPrototypeOf(obj).
Prototype chain: The series of prototype links from an object up to null, for example rex → Dog.prototype → Object.prototype → null.
Own property: A property stored on the object itself, such as rex.name. Object.hasOwn(obj, key) tells you whether a property is own.
Class: A neat syntax for a constructor function plus a prototype object that holds its methods. typeof a class is "function".
Constructor: The function new calls to set up a new object; in a class it is the method named constructor.
new: The operator that makes an empty object, links it to the constructor's prototype, runs the constructor with this set to it, and returns it.
Object.prototype: The built-in object at the top of most chains. It holds shared methods such as toString; its own prototype is null.

تفاصيل إضافية

الملاحظات والمصادر

The hidden link is the internal slot [[Prototype]] in the ECMAScript specification. Read it with Object.getPrototypeOf(obj). Browsers also expose it as obj.__proto__, but that is a legacy accessor; prefer getPrototypeOf.
The figure shows only the properties the example uses. Dog.prototype also has constructor, which points back to Dog, and Object.prototype has more methods, such as hasOwnProperty and valueOf.
If rex had its own speak property, the search would stop on rex and never reach Dog.prototype: an own property shadows one further up the chain.
class Puppy extends Dog adds one more link: Puppy.prototype is linked to Dog.prototype, so a puppy finds Dog's methods by the same walk up the chain.
A class is not only shorthand: calling Dog() without new throws a TypeError, a class body runs in strict mode, and class methods are not enumerable.
The nine lines are real. Paste them into a browser console, or save them as dogs.js and run node dogs.js. They print Rex woofs, [object Object] and undefined.

اختبار يتاح بعد الخطوة الأخيرة.