Native Prototypes

Native Prototypes in JavaScript

In JavaScript, prototypes are a fundamental part of its object-oriented structure. Every JavaScript object has a prototype, which is itself an object. The prototype object is where properties and methods are inherited from when you access them on an object.

JavaScript uses prototypes for inheritance, allowing objects to inherit properties and methods from other objects. Native prototypes refer to the built-in prototype objects provided by JavaScript for fundamental types like Object, Array, String, Function, and others.

Let’s dive into native prototypes and how they are used in JavaScript.

1️⃣ Understanding Prototypes in JavaScript

Each JavaScript object has a hidden internal property called [[Prototype]]. This property links to another object, called the object's prototype. When you try to access a property or method of an object, JavaScript first checks if the property exists in the object itself. If not, it looks for it in the prototype, and continues this process up the prototype chain.

Prototype Chain

The prototype chain is a mechanism by which objects inherit properties and methods from other objects. Here's a simple example of how the prototype chain works:

const person = {
  name: 'Alice',
  greet() {
    console.log(`Hello, ${this.name}!`);
  }
};

const student = Object.create(person);  // student inherits from person
student.name = 'Bob';
student.greet();  // "Hello, Bob!"

In the example above:

The student object inherits the greet method from person because student's prototype is person.
If greet() was not found in student, JavaScript would search for it in person.

2️⃣ Native Prototypes: Key Built-in Prototypes

JavaScript provides several built-in prototypes for common data types and functions. These prototypes are used to define methods and properties for instances of each type.

2.1 Object Prototype (`Object.prototype`)

The Object.prototype is the parent object for all objects in JavaScript. It provides basic methods such as toString(), hasOwnProperty(), and valueOf().

Object.prototype.toString(): Returns a string representation of the object.
Object.prototype.hasOwnProperty(): Returns a boolean indicating if an object has the specified property as its own (not inherited).

const obj = { name: 'Alice' };
console.log(obj.toString());  // "[object Object]"
console.log(obj.hasOwnProperty('name'));  // true

2.2 Array Prototype (`Array.prototype`)

Array.prototype provides methods for working with arrays, such as push(), pop(), shift(), unshift(), map(), and filter().

Array.prototype.push(): Adds one or more elements to the end of an array.
Array.prototype.map(): Creates a new array with the results of calling a provided function on every element.

const arr = [1, 2, 3];
arr.push(4);  // Adds 4 to the end
console.log(arr);  // [1, 2, 3, 4]

const doubled = arr.map(num => num * 2);
console.log(doubled);  // [2, 4, 6, 8]

2.3 String Prototype (`String.prototype`)

String.prototype provides methods for manipulating strings, such as slice(), split(), toUpperCase(), and charAt().

String.prototype.toUpperCase(): Returns a new string with all characters converted to uppercase.
String.prototype.charAt(): Returns the character at a specified index.

const str = 'hello';
console.log(str.toUpperCase());  // "HELLO"
console.log(str.charAt(1));  // "e"

2.4 Function Prototype (`Function.prototype`)

Function.prototype is used for all function objects. It provides methods such as call(), apply(), and bind() for invoking functions in different contexts.

Function.prototype.call(): Calls a function with a specified this value and arguments.
Function.prototype.bind(): Creates a new function that, when invoked, has its this value set to a specific object.

function greet() {
  console.log(`Hello, ${this.name}`);
}

const person = { name: 'Alice' };
greet.call(person);  // "Hello, Alice"

const boundGreet = greet.bind(person);
boundGreet();  // "Hello, Alice"

2.5 Date Prototype (`Date.prototype`)

Date.prototype provides methods for working with dates and times, such as getDate(), getFullYear(), and getMonth().

Date.prototype.getFullYear(): Returns the full year (4 digits).
Date.prototype.getDate(): Returns the day of the month.

const date = new Date();
console.log(date.getFullYear());  // 2025 (example year)
console.log(date.getDate());  // Current day of the month

2.6 Error Prototype (`Error.prototype`)

Error.prototype is used for handling errors. It provides properties like message and name.

Error.prototype.message: A string describing the error.
Error.prototype.name: The name of the error type (e.g., "Error", "TypeError").

try {
  throw new Error('Something went wrong!');
} catch (e) {
  console.log(e.name);    // "Error"
  console.log(e.message); // "Something went wrong!"
}

3️⃣ Modifying Native Prototypes

You can add or override methods on native prototypes. However, this practice is discouraged in most cases because it can introduce bugs or conflicts if done globally. It’s generally better to extend functionality through classes or utility functions.

Adding Methods to Native Prototypes (with caution)

For example, let's add a new method to Array.prototype:

Array.prototype.first = function() {
  return this[0];
};

const arr = [1, 2, 3];
console.log(arr.first());  // 1

Caution: Modify Native Prototypes Carefully

Modifying native prototypes should be done cautiously because it affects all instances of that type throughout the code. This can lead to unexpected behavior, especially in large or shared codebases. For example, if you overwrite an existing method or add a method that conflicts with another library or code, it can cause issues.

4️⃣ Conclusion

Prototypes in JavaScript are objects from which other objects inherit properties and methods. The prototype chain allows objects to access methods and properties from other objects.
Native prototypes like Object.prototype, Array.prototype, String.prototype, and others define essential methods for their respective types.
Modifying native prototypes can be done, but it should be done carefully and sparingly to avoid conflicts.

Prototypes are a powerful feature in JavaScript and are key to understanding inheritance and how objects interact. Let me know if you'd like more information on any of these topics! 😊

Souy Soeng

Native Prototypes