Users Online

· Guests Online: 42

· Members Online: 0

· Total Members: 188
· Newest Member: meenachowdary055

Forum Threads

Newest Threads
No Threads created
Hottest Threads
No Threads created

Latest Articles

JavaScript Reflect

JavaScript Reflect

JavaScript Reflect

Introduction to JavaScript Reflect

JavaScript Reflect is new built in function similar to Math which provides number of Utility functions. It is not a function object so is not constructible. In ‘JavaScript Proxy()’, all the handler functions here are similar in JavaScript Reflect. This object provides Static functions which have similar naming convention as of JavaScript proxy().

Syntax:

We have all the static methods here with Reflect, so syntax would depend upon the method used.

Reflect.<method_name>(target, argument/ propertyKey)

Also can be written as Function.prototype.<method_name>.

Static Methods of JavaScript Reflect

Given below are the static methods :

  • Reflect.apply(target, thisArgument, argumentsList): Calls target function with specified arguments in argumentsList.
  • Reflect.defineProperty(target, propertyKey, attributes): This reflect method returns a Boolean value is true if property is defined successfully.
  • Reflect.construct(target, argumentsList[, newTarget]): This Reflect method is similar to new target(…argumentsList), which provides an option to specify prototype different from previous one.
  • Reflect.deleteProperty(target, propertyKey): This Reflect method is similar to delete target[propertyKey], acts as a delete operator to a function.
  • Reflect.getOwnPropertyDescriptor(target, propertyKey): This Reflect method is similar to getOwnPropertyDescriptor() which will return property descriptor on the property if exists else undefined.
  • Reflect.get(target, propertyKey[, receiver]): This Reflect method returns property value. Works to get a property from an object as function.
  • Reflect.getPrototypeOf(target): This Reflect method is similar to Object.getPrototypeOf().
  • Reflect.isExtensible(target): This Reflect method is similar to Object.isExtensible(), and returns Boolean value true if the target here is extensible.
  • Reflect.preventExtensions(target)This Reflect method is similar to Object.preventExtensions() and returns a Boolean value true if update is successful.
  • Reflect.ownKeys(target)This Reflect method returns an array of target objects property keys which are not inherited.
  • Reflect.setPrototypeOf(target, prototype)This Reflect method sets prototype of an object. And returns a Boolean value true if update is successful.
  • Reflect.set(target, propertyKey, value[, receiver])This Reflect method assigns values to properties and returns a boolean value true if update is successful.

Examples of JavaScript Reflect

Given below are the examples mentioned :

Example #1

Code:

<!DOCTYPE html>
<html>
<head>
<title>JavaScript Reflect</title>
</head>
<body>
<h1>Using JavaScript Reflect methods</h1>
<script>
const employee = {
employeename: 'Maurice',
employeeLOB: 'BCMS',
employer: function() {
document.write(`Quaaaack! My name is ${this.employeename}`);
}
}
document.write("Employee having employeeLOB: " + Reflect.has(employee, 'employeeLOB'));
document.write("<br/>");
document.write("Employee having ID: " + Reflect.has(employee, 'ID'));
document.write("<br/>");
document.write("Employee Keys: " + Reflect.ownKeys(employee));
document.write("<br/>");
document.write("Employee adding a new property to object: " + Reflect.set(employee, 'eyes', 'BCMS'));
</script>
</body>
</html>

Output:

JavaScript Reflect 1

Example #2

Code:

<!DOCTYPE html>
<html>
<head>
<title>JavaScript Reflect</title>
</head>
<body>
<h1>Using JavaScript Reflect apply() method</h1>
<script>
varapplyThis = function()
{
document.write(this);
}
Reflect.apply(applyThis, 'On using JavaScript Reflect apply method returning a maximum value from array of numbers ', []);
//calling function with variable number arguments
var numbers = [2,4,6,8,10];
document.write(Reflect.apply(Math.max, undefined, numbers));
</script>
</body>
</html>

Output:

JavaScript Reflect 2

Example #3

Code:

<!DOCTYPE html>
<html>
<head>
<title>JavaScript Reflect</title>
</head>
<body>
<h1>Using JavaScript Reflect deleteProperty() method</h1>
<script>
var n = { n1: 1, n2: 3, n3: 6 };
document.write(delete n.n1);
document.write("<br/>");
document.write(delete n['n1']);
document.write("<br/>");
document.write(Reflect.deleteProperty(n, 'n1'));
document.write("<br/>");
document.write('n.n1=' + n.n1);
document.write("<br/>");
document.write();
document.write("<br/>");
Object.seal(n);
document.write("<br/>");
document.write(delete n.n2);
document.write("<br/>");
document.write(delete n['n2']);
document.write("<br/>");
document.write(Reflect.deleteProperty(n, 'n2'));
document.write("<br/>");
document.write('n.n2=' + n.n2);
</script>
</body>
</html>

Output:

deleteProperty()

Example #4

Code:

<!DOCTYPE html>
<html>
<head>
<title>JavaScript Reflect</title>
</head>
<body>
<h1>Using JavaScript Reflect get() method</h1>
<script>
var n = { n1: 9 };
document.write(n.n1);
document.write("<br/>");
document.write(n['n1']);
document.write("<br/>");
document.write(Reflect.get(n, 'n1'));
document.write("<br/>");
document.write();
n = { n2: 8, get num() { return this.n2; } };
document.write("<br/>");
document.write(n.num);
document.write("<br/>");
document.write(n['num']);
document.write("<br/>");
document.write(Reflect.get(n, 'num'));
document.write("<br/>");
document.write(Reflect.get(n, 'num', { n2: 3 }));
</script>
</body>
</html>

Output:

get() method

Example #5

Code:

<!DOCTYPE html>
<html>
<head>
<title>JavaScript Reflect</title>
</head>
<body>
<h1>Using JavaScript Reflect isExtensible() method</h1>
<script>
var n = { n1: 4 };
document.write(Reflect.isExtensible(n));
document.write("<br/>");
Reflect.preventExtensions(n);
document.write(Reflect.isExtensible(n));
document.write("<br/>");
try {
document.write(Reflect.isExtensible(4));
}
catch (e) {
document.write(e);
}
document.write("<br/>");
document.write(Object.isExtensible(4));
</script>
</body>
</html>

Output:

JavaScript Reflect 5

Example #6

Code:

<!DOCTYPE html>
<html>
<head>
<title>JavaScript Reflect</title>
</head>
<body>
<h1>Using JavaScript Reflect getPrototypeOf() method</h1>
<script>
varsamplebutton = function(text) {
this.text = text;
};
samplebutton.prototype.click = function() {
document.write(this.text + ' has been clicked');
document.write("<br/>");
}
varmysampleButton = { text: 'has been promoted' };
document.write("<br/>");
document.write(Reflect.getPrototypeOf(mysampleButton) === Object.prototype);
document.write("<br/>");
Reflect.setPrototypeOf(mysampleButton, samplebutton.prototype);
document.write(Reflect.getPrototypeOf(mysampleButton) === samplebutton.prototype);
mysampleButton.click();
</script>
</body>
</html>

Output:

getPrototypeOf()

Advantages of JavaScript Reflect

Given below are the advantages mentioned:

  • It abstracts operations staying behind the common JavaScript objects.
  • It provides reasonable way to forward actions as proxy traps.
  • It has the ability of a program to inspect and modify its structure and its behavior on runtime.
  • All the functions are introspection functions where internal details are queried at run time.

Conclusion

We have seen what is JavaScript Reflect and how is it implemented which is similar to JavaScript Proxy() implementation methods. We have seen how it works with few examples and also have gone through Reflect methods which we have. Also we have seen some of the advantages of JavaScript Reflect.

Comments

No Comments have been Posted.

Post Comment

Please Login to Post a Comment.

Ratings

Rating is available to Members only.

Please login or register to vote.

No Ratings have been Posted.
Render time: 0.77 seconds
10,844,837 unique visits