Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
What are JavaScript Classes and Proxies?
In this article, we are going to explore Classes and Proxies and the difference between the two.
Classes in JavaScript are similar to functions. The only difference is it uses the class keyword instead of the function. Another important difference between the functions and the classes is that the functions can be called in the code even before they are defined. Whereas the class object should be defined before the class object to prevent it from throwing any Reference error.
Syntax
class Classname {
constructor(property1, property2) {
this.property1 = property1;
this.prop erty2 = property2;
}
}Example 1
In this example, we are going to use the methods from the weak set and see how to use it in various cases.
#Filename: index.html
<!DOCTYPE html>
<html lang="en">
<head>
<title>Classes and Proxies</title>
</head>
<body>
<h1 style="color: red;">
Welcome To Tutorials Point
</h1>
<script>
class Student {
constructor(name, id) {
this.name = name;
this.id = id;
}
}
let student = new Student("Steve", 101);
console.log(student);
</script>
</body>
</html>Output
It will produce the following output in the Console.
Student {name: 'Steve', id: 101}Class Expressions − We can also define a class using the class expressions. Class expressions can be of two types namely: named and unnamed. The name of the class can be accessed by the name property.
Syntax
let Employee = class {
constructor(name, id) {
this.name = name;
this.id = id;
}
}Example 2
#Filename: index.html
<!DOCTYPE html>
<html lang="en">
<head>
<title>Classes and Proxies</title>
</head>
<body>
<h1 style="color: red;">
Welcome To Tutorials Point
</h1>
<script>
// Unnamed class
let student = class {
constructor(name, id) {
this.name = name;
this.id = id;
}
}
console.log(student.name);
// Named class
let studentV2 = class junior {
constructor(name, id) {
this.name = name;
this.id = id;
}
}
console.log(studentV2.name);
</script>
</body>
</html>Output
It will produce the following output in the Console.
student 27 junior
Proxies − These are the objects that are used for refining the fundamental operations of the object. It allows the user to create a proxy of another object.
Parameters
The proxy accepts two parameters that are −
target − This is the original object that is required for wrapping the proxy.
handler − This object property defines the proxy behavior if an operation is performed on that proxy.
Syntax
const target = {
property1: "first property",
property2: "second property"
};
const handler = { ... };
const proxy1 = new Proxy(target, handler);Example 3
<!DOCTYPE html>
<html lang="en">
<head>
<title>Classes and 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(proxy.property1);
console.log(proxy.property2);
</script>
</body>
</html>Output
It will produce the following output in the Console.
Tutorials Point Start your Learning journey today !
110 Views
