惯性聚合 高效追踪和阅读你感兴趣的博客、新闻、科技资讯
阅读原文 在惯性聚合中打开

推荐订阅源

月光博客
月光博客
雷峰网
雷峰网
S
SegmentFault 最新的问题
博客园 - 【当耐特】
博客园_首页
量子位
爱范儿
爱范儿
博客园 - 叶小钗
freeCodeCamp Programming Tutorials: Python, JavaScript, Git & More
Jina AI
Jina AI
V
V2EX
美团技术团队
V
Visual Studio Blog
博客园 - 三生石上(FineUI控件)
IT之家
IT之家
Hugging Face - Blog
Hugging Face - Blog
Apple Machine Learning Research
Apple Machine Learning Research
小众软件
小众软件
博客园 - 聂微东
钛媒体:引领未来商业与生活新知
钛媒体:引领未来商业与生活新知
The Cloudflare Blog
宝玉的分享
宝玉的分享
WordPress大学
WordPress大学
OSCHINA 社区最新新闻
OSCHINA 社区最新新闻

DEV Community

Authentication Security Deep Dive: From Brute Force to Salted Hashing (With Java Examples) Why AI Systems Don’t Fail — They Drift Spilling beans for how i learn for exam😁"Reinforcement Learning Cheat Sheet" I Replaced Chrome with Safari for AI Browser Automation. Here's What Broke (and What Finally Worked) How Python Borrows Other People's Work The $40 Architecture: Processing 1 Billion API Requests with 99.99% Uptime Vibe Coding: A Workflow Guide (From Zero to SaaS) Most webhook security guides protect the wrong side. The scary part is delivery. Headless CMS for TanStack Start: Build a Blog with Cosmic EU Age Verification App "Hacked in 2 Minutes" — What Actually Happened Comfy Cloud’s delete function does not actually remove files Running AI Models on GPU Cloud Servers: A Beginner Guide Event-driven media intelligence with AWS Step Functions and Bedrock I scored 500 AI prompts across 8 quality dimensions — here's what broke How to Call Google Gemini API from Next.js (Free Tier, No Backend Needed) The Portal Protocol: Reclaiming Human Connection in the Age of AI How to Fix Your Team's Scattered Knowledge Problem With a Self-Hosted Forum Intro to tc Cloud Functors: A Graph-First Mental Model for the Modern Cloud Designing Multi-Tenant Backends With Both Ownership and Team Access I Built a Neumorphic CSS Library with 77+ Components — Here's What I Learned PostgreSQL Performance Optimization: Why Connection Pooling Is Critical at Scale Cómo construí un SaaS multi-rubro para gestionar expensas en Argentina con FastAPI + Vue 3 🚀 I Built an Ethical Hacking Scanner Tool – Open Source Project I Replaced /usage and /context in Claude Code With a Single Statusline A Pythonic Way to Handle Emails (IMAP/SMTP) with Auto-Discovery and AI-Ready Design I Collected 8.9 Million Polymarket Price Points — Here's What I Found About How Markets Really Move EcoTrack AI — Carbon Footprint Tracker & Dashboard Everyone's Using AI. No One Agrees How. 5 self-hosted ebook managers worth trying in 2026 Building Your First AI Agent with LangChain: From Chatbot to Autonomous Assistant
JavaScript Constructor Functions
Saravanan Lakshmanan · 2026-06-17 · via DEV Community
Cover image for JavaScript Constructor Functions

Saravanan Lakshmanan

What is a Constructor Function?

A Constructor Function is a regular JavaScript function used with the new keyword to create and initialize multiple objects with the same structure.

It acts like a blueprint for creating objects.

By convention, constructor function names start with a capital letter.

Syntax

function ConstructorName(parameter1, parameter2) {
    this.property1 = parameter1;
    this.property2 = parameter2;
}


Example

function Employee(name, salary) {
    this.name = name;
    this.salary = salary;
}

const emp1 = new Employee("Saravanan", 50000);

console.log(emp1);

Output

Employee {
    name: "Saravanan",
    salary: 50000
}


How the new Keyword Works

When JavaScript executes:

const emp1 = new Employee("Saravanan", 50000);

it performs the following steps automatically:

Step 1: Creates an Empty Object

{}

Step 2: Sets this to the New Object

this = {}

Step 3: Executes the Constructor Function

this.name = "Saravanan";
this.salary = 50000;

Result:

{
    name: "Saravanan",
    salary: 50000
}

Step 4: Returns the Object Automatically

return this;


Understanding this

Inside a constructor function, this refers to the newly created object.

function Employee(name) {
    this.name = name;
}

const emp1 = new Employee("Saravanan");

Internally:

emp1.name = "Saravanan";

The property name is on the left side and the value comes from the parameter on the right side.

this.name = name;


Creating Multiple Objects

function Employee(name, salary) {
    this.name = name;
    this.salary = salary;
}

const emp1 = new Employee("Ram", 50000);
const emp2 = new Employee("Kumar", 60000);
const emp3 = new Employee("Ajay", 70000);

All objects follow the same structure.


Adding Methods

Constructor functions can also contain methods.

function Employee(name, salary) {
    this.name = name;
    this.salary = salary;

    this.displayInfo = function() {
        console.log(this.name + " earns " + this.salary);
    };
}

const emp1 = new Employee("Saravanan", 50000);

emp1.displayInfo();

Output

Saravanan earns 50000


CRUD Operations on Constructor Function Objects

Objects created using constructor functions behave like normal JavaScript objects.

Create

emp1.age = 26;

Read

console.log(emp1.age);

Update

emp1.age = 27;

Delete

delete emp1.age;


Adding Properties to One Object

emp1.department = "IT";

Only emp1 receives the property.


Adding Properties for All Objects Using Prototype

Employee.prototype.company = "TCS";

Now all Employee objects can access the property.

console.log(emp1.company);
console.log(emp2.company);

Output

TCS
TCS


Adding Shared Methods Using Prototype

Employee.prototype.greet = function() {
    console.log("Hello " + this.name);
};

Now every Employee object can use the same method.

emp1.greet();
emp2.greet();

This approach is more memory-efficient because only one copy of the function exists.


Constructor Function vs Object Literal

Object Literal

const employee = {
    name: "Ram",
    salary: 50000
};

Best when creating a single object.

Constructor Function

function Employee(name, salary) {
    this.name = name;
    this.salary = salary;
}

Best when creating multiple objects with the same structure.


References:
https://www.w3schools.com/js/js_object_constructors.asp
https://www.geeksforgeeks.org/javascript/javascript-function-constructor/
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/Function