Teach with us

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 !
Updated on 28-Apr-2022 13:09:10

0 Views

Tutorials Point

Previous Page Next Page  
Advertisements