JavaScript new.target元属性

ES6提供了一个称为new.target的元属性，用于识别一个函数或构造函数是否使用了new运算符。target属性、点操作符和new关键字构建了new.target的对象。所有方法都可以访问new.target元属性。

相比之下，箭头函数中的new.target是与相关函数相关的。使用new.target属性在执行时检查一个函数是作为函数还是作为构造函数执行。在父类中可以使用new运算符来识别被调用的特定派生类。

语法

以下语法显示了一个新的JavaScript目标属性。

new.target

这是与脚本标签一起使用的简单函数。

示例

这些多个示例展示了如何以不同方式使用 new.target 属性。

示例1：

以下示例显示了一个基本的 JavaScript new target 属性。您可以使用该属性获取给定函数的消息。

<!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>

输出

下面的图片显示了函数的信息。

JavaScript new.target元属性

示例2:

下面的示例展示了一个基本的JavaScript new target属性。您可以通过Web页面的目标名称获取给定函数的消息。

<!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>

输出

下图显示了函数信息的目标。

JavaScript new.target元属性