Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
What are JavaScript Classes and Proxies?
JavaScript Classes and Proxies are powerful ES6+ features that enhance object-oriented programming and metaprogramming capabilities. Classes provide a cleaner syntax for creating objects and implementing inheritance, while Proxies allow you to intercept and customize operations on objects.
JavaScript Classes
Classes in JavaScript are syntactic sugar over the existing prototype-based inheritance. They use the class keyword instead of functions and must be declared before use, unlike function declarations which are hoisted.
Class Declaration Syntax
class ClassName {
constructor(property1, property2) {
this.property1 = property1;
this.property2 = property2;
}
methodName() {
// method implementation
}
}
Example: Basic Class
<!DOCTYPE html>
<html lang="en">
<head>
<title>JavaScript Classes</title>
</head>
<body>
<h1 style="color: red;">Welcome To Tutorials Point</h1>
<script>
class Student {
constructor(name, id) {
this.name = name;
this.id = id;
}
getInfo() {
return `Student: ${this.name}, ID: ${this.id}`;
}
}
let student = new Student("Steve", 101);
console.log(student);
console.log(student.getInfo());
</script>
</body>
</html>
Student {name: 'Steve', id: 101}
Student: Steve, ID: 101
Class Expressions
Classes can also be defined using class expressions, which can be named or unnamed. The class name can be accessed using the name property.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Class Expressions</title>
</head>
<body>
<h1 style="color: red;">Welcome To Tutorials Point</h1>
<script>
// Unnamed class expression
let Student = class {
constructor(name, id) {
this.name = name;
this.id = id;
}
}
console.log("Unnamed class name:", Student.name);
// Named class expression
let Employee = class EmployeeClass {
constructor(name, id) {
this.name = name;
this.id = id;
}
}
console.log("Named class name:", Employee.name);
</script>
</body>
</html>
Unnamed class name: Student Named class name: EmployeeClass
JavaScript Proxies
Proxies are objects that allow you to intercept and customize operations performed on other objects (such as property lookup, assignment, enumeration, function invocation, etc.).
Proxy Syntax
const proxy = new Proxy(target, handler);
Parameters
target ? The original object you want to wrap with the proxy.
handler ? An object that defines which operations are intercepted and how to redefine intercepted operations.
Example: Proxy with Get Handler
<!DOCTYPE html>
<html lang="en">
<head>
<title>JavaScript Proxies</title>
</head>
<body>
<h1 style="color: red;">Welcome To Tutorials Point</h1>
<script>
const target = {
property1: "Tutorials Point",
property2: "SIMPLY LEARNING"
};
const handler = {
get: function(target, prop, receiver) {
if (prop === "property2") {
return "Start your Learning journey today!";
} else {
return Reflect.get(target, prop);
}
}
};
const proxy = new Proxy(target, handler);
console.log("Original property1:", target.property1);
console.log("Proxy property1:", proxy.property1);
console.log("Original property2:", target.property2);
console.log("Proxy property2:", proxy.property2);
</script>
</body>
</html>
Original property1: Tutorials Point Proxy property1: Tutorials Point Original property2: SIMPLY LEARNING Proxy property2: Start your Learning journey today!
Key Differences
| Feature | Classes | Proxies |
|---|---|---|
| Purpose | Object creation and inheritance | Intercept object operations |
| Syntax |
class keyword |
new Proxy() |
| Use Case | Define object blueprints | Customize object behavior |
Conclusion
Classes provide a cleaner way to create objects and implement inheritance in JavaScript, while Proxies offer powerful metaprogramming capabilities by intercepting object operations. Both features enhance JavaScript's object-oriented programming capabilities significantly.
265 Views
