javascript上数组切片方法的奇怪行为

Question

在类中使用数组时，我发现它的一个非常奇怪的行为......我一直试图弄清楚发生了什么，但我无法理解。 所以这就是发生的事情。

class wtf{
  constructor(){
    this.array=[0,2,3];
    this.fn=this.fn.bind(this);
  }
  fn(){
    console.log(this.array.slice(0,this.length));// will print [0,2,3]
    console.log(this.array.slice(0,this.length-1));// will print an empty array
  }
}
const k=new wtf();
k.fn();

当我尝试使用this.array.slice(0,this.length)获取整个数组时，它完全正常。 它会给我完整的数组。 但是当我尝试使用this.array.slice(0,this.length-1)来获取一个不包括最后一个元素的数组时，它会给我一个空数组而不是我想要的。 似乎只有在对象方法中编写它时才会发生。 因为它正常工作。

const array=[0,2,3];
console.log(array.slice(0,this.length-1)); // will print [0,2]

我试图删除bind方法以查看这是否会影响行为，但它仍然给我相同的结果......

有人可以解释为什么会这样吗？

Answer 1

你代码错了，把this.array.length -1

this.length undefined

从你的谈话中我发现，你正在尝试继承 DOM Array

尝试像这样继承 Array

class MyArray extends Array {
   constructor(props){
    super();
    for(var i=0;i<arguments.length;i++) this.push(arguments[i]);
   }
}

const k=new MyArray(5,6,7,8);
console.log(k.length);

Answer 2

问题在于切片方法中的“this”关键字。 它试图在“未定义”的对象上找到长度属性。 同样未定义 - 1 结果为 NaN

您的代码与以下代码相同：

class wtf{
  constructor(){
    this.array=[0,2,3];
  }
  fn(){
   let length = this.array.length
    console.log(this.array.slice(0,undefined));// undefined because length is not defined on the object
    console.log(this.array.slice(0,NaN));// NaN because undefined-1 is NaN
  }
}
const k=new wtf();
k.fn();

相反，试试这个：

class wtf{
  constructor(){
    this.array=[0,2,3];
  }
  fn(){
   let length = this.array.length
    console.log(this.array.slice(0,length)); // logs [0,2,3]
    console.log(this.array.slice(0,length-1)); // logs [0,2]
  }
}
const k=new wtf();
k.fn();