ES6 introduces a metaproperty referred to as new.target, which serves to determine if a function or constructor is invoked with the new operator. The combination of the target attribute, dot notation, and the new keyword constructs the object associated with new.target. Every method is granted access to this new.target metaproperty.
In comparison, the new.target within arrow functions refers specifically to the associated function. Utilize the new.target property to determine during execution whether a function is being invoked as a standard function or as a constructor. The new operator can be employed from within a parent class to pinpoint a specific derived class that has been called.
Syntax
The syntax presented below illustrates a newly introduced target property in JavaScript.
new.target
This is a basic function employed alongside the script tag.
Examples
The various examples illustrate how to utilize the new.target property through different approaches.
Example 1:
The subsequent illustration demonstrates a fundamental JavaScript new target property. This property allows you to retrieve the message from the specified function.
<!DOCTYPE HTML>
<html>
<head>
<title> JavaScript new.target property </title>
</head>
<body style = "text-align:center;">
<h1 style = "color:red;">
Example
</h1>
<p>
JavaScript is new.target Metaproperty
</p>
<button onclick = "JTP();">
click here
</button>
<p id = "JTP_INFO"></p>
<script>
var jtp_data = document.getElementById("JTP_INFO");
function Function_info() {
if (!new.target) {
throw 'Function_info() works with button operator';
}
}
function JTP(event) {
try {
Function_info();
} catch (e) {
jtp_data.innerHTML = e;
}
}
</script>
</body>
</html>
Output
The image below displays the details pertaining to the function.
Example 2:
The example below illustrates a fundamental aspect of the JavaScript new.target property. This allows you to retrieve the message from the specified function, using the target name associated with the web page.
<!DOCTYPE HTML>
<html>
<head>
<title> JavaScript new.target property </title>
</head>
<body style = "text-align:center;">
<h1 style = "color:red;">
Example
</h1>
<p>
JavaScript is new.target Metaproperty
</p>
<button onclick = "myData(event);"> click here </button>
<p id = "JTP_INFO"> </p>
<script>
function myData(event) {
let text_value = event.target.tagName;
document.getElementById("JTP_INFO").innerHTML = text_value;
}
</script>
</body>
</html>
Output
The image below illustrates the objective of the function details.
Example 3:
The subsequent illustration demonstrates a fundamental use of the new target property in JavaScript. You can retrieve the message from the specified function by utilizing the new operator in conjunction with this property. In this instance, we employ a class within the script tag of the web application, incorporating the functionality of a constructor.
<!DOCTYPE HTML>
<html>
<head>
<title> JavaScript new.target property </title>
</head>
<body style = "text-align:center;">
<h1 style = "color:red;">
Example
</h1>
<p>
JavaScript is new.target Metaproperty
</p>
<button onclick = "JTP();">
click here
</button>
<p id = "JTP_INFO"></p>
<script>
var jtp_data = document
.getElementById("JTP_INFO");
class Student {
constructor(s_name) {
this.s_name = s_name;
if (!new.target) {
throw 'Function works without new operator';
}
else {
throw 'Function works with new operator';
}
}
}
function JTP(event) {
try {
var s = new Student('JTP');
} catch (e) {
jtp_data.innerHTML = e;
}
}
</script>
</body>
</html>
Output
The image below displays the details pertaining to the function.
Example 4:
The subsequent example illustrates a fundamental JavaScript property known as the new target. This property allows you to retrieve the output message of a specific function without employing the new operator. In this instance, we utilize the constructor to obtain the desired output data through the onclick function.
<!DOCTYPE HTML>
<html>
<head>
<title> JavaScript new.target property </title>
</head>
<body style = "text-align:center;">
<h1 style = "color:red;">
Example
</h1>
<p>
JavaScript is new.target Metaproperty
</p>
<button onclick = "JTP();">
click here
</button>
<p id = "JTP_INFO"></p>
<script>
var jtp_data = document
.getElementById("JTP_INFO");
class Student {
constructor(s_name) {
this.s_name = s_name;
if (new.target) {
throw 'Function works without new operator';
}
else {
throw 'Function works with new operator';
}
}
}
function JTP(event) {
try {
var s = new Student('JTP');
} catch (e) {
jtp_data.innerHTML = e;
}
}
</script>
</body>
</html>
Output
The image below illustrates the details pertaining to the function.
Example 5:
The example below illustrates a fundamental aspect of the new target property in JavaScript. This property enables you to retrieve the message associated with a specific function when utilizing it as a constructor. Additionally, you can augment the function and invoke the new target property as a constructor.
<!DOCTYPE HTML>
<html>
<head>
<title> JavaScript new.target property </title>
</head>
<body style = "text-align:center;">
<h1 style = "color:red;">
Example
</h1>
<p>
JavaScript is new.target Metaproperty
</p>
<p id = "JTP_INFO"> See the console tab for new target constructor </p>
<script>
console.log("JavaScript is new.target Metaproperty");
var jtp_data = document.getElementById("JTP_INFO");
class Student {
constructor(names) {
this.names = names;
console.log(new.target.name);
}
}
class Friend extends Student {
constructor(names, title) {
super(names);
this.title = title;
}
}
let Sam = new Student('Same Doe');
let David = new Friend('Simmy David', 'Data');
</script>
</body>
</html>
Output
The image below displays the details regarding the function.
Conclusion
The newly introduced JavaScript target property retrieves the constructor and the methods that are associated with a function. This feature is beneficial for understanding the methods that can be utilized within a web application.