为什么在javascript过滤中扩展数组的类的对象会调用它的构造函数?

我有这个示例代码:

class TestClass extends Array {
	constructor() {
		console.log( 'constructor' );
		
		let ar = [];
		ar.push( { id: 1,name: 'a' } );
		ar.push( { id: 2,name: 'b' } );
		ar.push( { id: 3,name: 'c' } );
		ar.push( { id: 4,name: 'd' } );
		
		// finalizing object
		super( ...ar );
	}
	
	Foo() {
		console.log( 'foo' );
		return this.filter( item => item.id > 2 );
	}
}

let t = new TestClass();
console.log( t.Foo() );

这是我已经写过的更简单的版本.我的应用程序一直工作到现在,但在我需要过滤扩展阵列中的数据时停止了.
我发现,问题是在我的类的对象上调用过滤器函数在内部调用构造函数.上面的代码显示了这个例子.
有没有办法绕过这个问题,因为我此时无法再次调用构造函数.另外,我发现(使用这个简单的TestClass)实际输出不是我所期望的 – 我得到一个包含id为3,4,3,4的4个项目的数组.任何人都可以解释这里发生了什么?

解决方法

Symbol.species提供了一种方法来返回派生类的另一个实例,但是对于.e.g.在这种情况下,再次是一个Array实例.

class TestClass extends Array {
  constructor() {
    console.log( 'constructor' );

    let ar = [];
    ar.push( { id: 1,name: 'a' } );
    ar.push( { id: 2,name: 'b' } );
    ar.push( { id: 3,name: 'c' } );
    ar.push( { id: 4,name: 'd' } );

    // finalizing object
    super( ...ar );
  }
  static get [Symbol.species]() { return Array; }

  Foo() {
    console.log( 'foo' );
    return this.filter( item => item.id > 2 );
  }
}

let t = new TestClass();
let a = t.Foo();

console.log('a : ',a);
console.log('(a instanceof Array) ? ',(a instanceof Array));
console.log('(a instanceof TestClass) ? ',(a instanceof TestClass));
.as-console-wrapper { max-height: 100%!important; top: 0; }

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。

相关推荐


kindeditor4.x代码高亮功能默认使用的是prettify插件,prettify是Google提供的一款源代码语法高亮着色器,它提供一种简单的形式来着色HTML页面上的程序代码,实现方式如下: 首先在编辑器里面插入javascript代码: 确定后会在编辑器插入这样的代码: <pre
这一篇我将介绍如何让kindeditor4.x整合SyntaxHighlighter代码高亮,因为SyntaxHighlighter的应用非常广泛,所以将kindeditor默认的prettify替换为SyntaxHighlighter代码高亮插件 上一篇“让kindeditor显示高亮代码”中已经
js如何实现弹出form提交表单?(图文+视频)
js怎么获取复选框选中的值
js如何实现倒计时跳转页面
如何用js控制图片放大缩小
JS怎么获取当前时间戳
JS如何判断对象是否为数组
JS怎么获取图片当前宽高
JS对象如何转为json格式字符串
JS怎么获取图片原始宽高
怎么在click事件中调用多个js函数
js如何往数组中添加新元素
js如何拆分字符串
JS怎么对数组内元素进行求和
JS如何判断屏幕大小
js怎么解析json数据
js如何实时获取浏览器窗口大小
原生JS实现别踩白块小游戏(五)
原生JS实现别踩白块小游戏(一)