JavaScript is new.target Metaproperty

ES6 offers a metaproperty called new.target to identify whether a function or constructor runs using the new operator. The target attribute, dot, and new keyword build the object of the new.target. All methods have access to the new.target metaproperty.

In contrast, the new.target in arrow functions is the one that pertains to the related function. Use the new.target property to check at execution whether a function is being performed as a function or as a constructor. The new operator can be used from within a parent class to identify a particular derived class that was invoked.

Syntax

The following syntax shows a new JavaScript target property.

It is the simple function used with the script tag.

Examples

The multiple examples show how to work new.target property in different ways.

Example 1:

The following example shows a basic JavaScript new target property. You can get the message of the given function using the property.

<!DOCTYPE HTML>
<html>
<head>
<title> JavaScript new.target property </title>
</head>
<body style = "text-align:center;">
<h1 style = "color:red;">
JAVATPOINT
</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 following image shows the function's information.

Example 2:

The following example shows a basic JavaScript new target property. You can get the message of the given function with the target name of the web page.

<!DOCTYPE HTML>
<html>
<head>
<title> JavaScript new.target property </title>
</head>
<body style = "text-align:center;">
<h1 style = "color:red;">
JAVATPOINT
</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 following image shows the target of the function information.

Example 3:

The following example shows a basic JavaScript new target property. You can get the message of the given function with a new operator using the property. Here we use class in the script tag of the web application with the constructor functionality.

<!DOCTYPE HTML>
<html>
<head>
<title> JavaScript new.target property </title>
</head>
<body style = "text-align:center;">
<h1 style = "color:red;">
JAVATPOINT
</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 following image shows the function's information.

Example 4:

The following example shows a basic JavaScript new target property. You can get the message of the given function without a new operator using the property. Here, we use the constructor th get the required output data using the onclick function.

<!DOCTYPE HTML>
<html>
<head>
<title> JavaScript new.target property </title>
</head>
<body style = "text-align:center;">
<h1 style = "color:red;">
JAVATPOINT
</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 following image shows the function's information.

Example 5:

The following example shows a basic JavaScript new target property. You can get the message of the given function with the constructor using the property. You can extend the function and call the new target property a constructor.

<!DOCTYPE HTML>
<html>
<head>
<title> JavaScript new.target property </title>
</head>
<body style = "text-align:center;">
<h1 style = "color:red;">
JAVATPOINT
</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 following image shows the function's information.

Conclusion

The new javascript target property gets the constructor and methods available in the function. It helps to know the available methods used in the web application.

Next TopicJavascript proxy

← prev next →