记录一下 ES6 的 new.target 属性

本文深入探讨了new.target属性在JavaScript中的应用,详细解释了如何利用该属性检测函数或构造方法是否通过new运算符调用。文章提供了具体示例,展示了如何定义必须实例化的构造函数以及不能独立使用、必须继承后才能使用的类。

最近在准备实习面试,复习到了构造函数,简单记录下 new.target 属性的作用。

new.target 属性允许你检测函数或构造方法是否是通过 new 运算符被调用的。在通过 new 运算符被初始化的函数或构造方法中, new.target 返回一个指向构造方法或函数的引用。在普通的函数调用中, new.target 的值是 undefined

我们可以利用这个特性来实现的需求有:

  1. 定义一个必须实例化的构造函数。
function Person(name) {
  if (!new.target) throw new Error('该构造函数必须实例化。')

  this.name = name
}

new Person('maxin')
  1. 不能独立使用、必须继承后才能使用的类。
class Parent {
  constructor() {
    if (new.target) throw Error('该构造函数不能被实例化。')
  }
}

class Son extends Parent {
  constructor(name) {
    super()
    this.name = name
  }
}

文章来源:https://juejin.im/post/6859997114802700301

让你解释这个代码,你在干嘛? var indexCache = new Set(); var topColour = '#92b1ef40' var checkedColour = '#a5ecbdb0' var selectedCategory = '' //增加到翻页按钮中ajax done后调用 function updateCheckBox() { indexCache.forEach(function (index, id) { var checkbox = $('#' + id).filter('input[type=checkbox]'); checkbox.prop('checked', true); checkbox.closest('tr').css('background-color', checkedColour) }); createdDataTableSelectedInfo() } function createdDataTableSelectedInfo() { if (indexCache.size>0) { $('.selected_rows_info .selected_size_span').text(indexCache.size) $('.selected_rows_info').show() }else { $('.selected_rows_info').hide() } } //监听checkbox选中和取消选中 // document.addEventListener('change', function (event) { // if (event.target.type === 'checkbox' && event.target.checked) { // indexCache.add(event.target.id); // var row = $('#' + event.target.id).parent().parent() // row.css({ // 'background-color': 'beige' // }) // indexCache.forEach(key => console.log('add' + key)); // // } // if (event.target.type === 'checkbox' && !event.target.checked) { // indexCache.delete(event.target.id) // var row = $('#' + event.target.id).parent().parent() // row.css({ // 'background-color': '' // }) // indexCache.forEach(key => console.log('now' + key)); // } // }) function setMyCaseTop() { $('#eQuotaCaseTable tbody tr').each(function () { if ($(this).attr('data-is-top') === '1') { $(this).css('background-color', topColour); } }) } $(document).ready(function () { setMyCaseTop() //应对点击非table事件 $(document).on('click', function (event) { if (!$(event.target).closest('#eQuotaCaseTable').length) { text = null; } }); var startX, startY, endX, endY; var text; $(document).mousedown(function (event) { startX = event.pageX; startY = event.pageY; }); $(document).mouseup(true, function (event) { endX = event.pageX; endY = event.pageY; var distance = calculateDistance(startX, startY, endX, endY); let allTr = $('#eQuotaCaseTable tbody tr'); let allCheckBoxInput = $('#eQuotaCaseTable input[type="checkbox"]'); allTr.off('click') allCheckBoxInput.off('click') if (distance > 5) { text = window.getSelection().toString(); event.stopPropagation(); } else { allTr.click(function (event) { if ($(event.target).is('input[type="checkbox"]')) { event.stopPropagation() } else if ($(this).find('td:last-child').find(event.target)[0] || $(this).find('td:last-child').is(event.target) || $(this).hasClass('no-data-tip') || $(this).find('td:nth-child(4) a').is(event.target)) { text = null; } else { if (!text) { var checkbox = $(this).find('input[type="checkbox"]'); var row = $(this) if (!checkbox.is(':checked')) { let rowCategory = row.data('category') if (selectedCategory === '' || selectedCategory === rowCategory) { selectedCategory = rowCategory checkbox.children(indexCache.add(checkbox.attr('id'))); row.css('background-color', checkedColour) checkbox.prop('checked', true); createdDataTableSelectedInfo() refreshQuotaType() }else { alert("只能选择一种Category!"); } } else { checkbox.children(indexCache.delete(checkbox.attr('id'))); if (indexCache.size === 0) { selectedCategory = '' refreshQuotaType() } row.css('background-color', '') checkbox.prop('checked', false); if ($(this).attr('data-is-top') === '1') { $(this).css('background-color', topColour); } createdDataTableSelectedInfo() } } else { text = null; } } }); allCheckBoxInput.click(function (event) { if (event.target.type === 'checkbox' && event.target.checked) { indexCache.add(event.target.id); var row = $('#' + event.target.id).parent().parent() row.css('background-color', checkedColour) indexCache.forEach(key => console.log('add' + key)); createdDataTableSelectedInfo() } if (event.target.type === 'checkbox' && !event.target.checked) { indexCache.delete(event.target.id) var row = $('#' + event.target.id).parent().parent() row.css('background-color', '') if (row.attr('data-is-top') === '1') { row.css('background-color', topColour); } indexCache.forEach(key => console.log('now' + key)); createdDataTableSelectedInfo() } }); } }); function calculateDistance(startX, startY, endX, endY) { var distanceX = endX - startX; var distanceY = endY - startY; return Math.sqrt(distanceX * distanceX + distanceY * distanceY); } }); function refreshQuotaType() { // $.ajax({ // url: "/select-quota-type", // type: "post", // data: {quotaCategory: selectedCategory}, // }).done(function (data) { // $('#quota-type-radio-part').replaceWith(data) // }) }
最新发布
12-03
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值