What is native prototype in JavaScript?

The native prototype is a JavaScript property that all built-in constructor functions in JavaScript use to inherit methods and properties from one another.

JavaScript is a prototype-based language, meaning that there is no class inheritance in JavaScript like in other programming languages; instead, there is a prototype property that can be used to extend objects by adding new properties and methods to them. Native prototypes can be edited or new ones can be added to them, but they cannot be deleted.

When we run Object.prototype in the console, we can see the prototype in action and what constitutes an Object.

Object.prototype
// Returns the following:
{constructor: ƒ, __defineGetter__: ƒ, __defineSetter__: ƒ, hasOwnProperty: ƒ, __lookupGetter__: ƒ, …}
constructor: ƒ Object()
hasOwnProperty: ƒ hasOwnProperty()
isPrototypeOf: ƒ isPrototypeOf()
propertyIsEnumerable: ƒ propertyIsEnumerable()
toLocaleString: ƒ toLocaleString()
toString: ƒ toString()
valueOf: ƒ valueOf()
__defineGetter__: ƒ __defineGetter__()
__defineSetter__: ƒ __defineSetter__()
__lookupGetter__: ƒ __lookupGetter__()
__lookupSetter__: ƒ __lookupSetter__()
get __proto__: ƒ __proto__()
set __proto__: ƒ __proto__()

Let’s create an example object using a constructor function to see how a prototype property is created:

function Person(fullname, age, gender) {
this.fullname = fullname;
this.age = age;
this.gender = gender;
}
const firstPerson = new Person('amy adams', 46, 'female')

If we run Person.prototype in the console, we can see the previously shown constructor method and all the methods that come with an object when it’s created. If we run firstPerson, we can see the following:

Person {fullname: "amy adams", age: 46, gender: "female"}
age: 46
gender: "female"
fullname: "amy adams"
__proto__:
constructor: ƒ Person(fullname, age, gender)
arguments: null
caller: null
length: 3
fullname: "Person"
prototype: {constructor: ƒ}
__proto__: ƒ ()
[[FunctionLocation]]: VM309:1
[[Scopes]]: Scopes[2]
__proto__:
constructor: ƒ Object()
hasOwnProperty: ƒ hasOwnProperty()
isPrototypeOf: ƒ isPrototypeOf()
propertyIsEnumerable: ƒ propertyIsEnumerable()
toLocaleString: ƒ toLocaleString()
toString: ƒ toString()
valueOf: ƒ valueOf()
__defineGetter__: ƒ __defineGetter__()
__defineSetter__: ƒ __defineSetter__()
__lookupGetter__: ƒ __lookupGetter__()
__lookupSetter__: ƒ __lookupSetter__()
get __proto__: ƒ __proto__()
set __proto__: ƒ __proto__()

Other built-in objects (such as Array, Date, Function, etc.) also keep their methods in prototypes.

For instance, when we create an array, the new, default Array() constructor is used internally. So, Array.prototype becomes its prototype and provides methods.

proto vs. prototype

The terms _ _ proto_ _ and prototype are both present when discussing JavaScript’s prototype-based nature.

The difference between them is:

  • The __proto__ is an object within every object. It references the prototype that has been set for that object -- we can see this in action in the code examples above.
  • The prototype property is only present when the "new" keyword is used to create an object. Therefore, it is present when an object is created with the constructor function.

Free Resources