Question

http://jsbin.com/mosedibera/edit?js,console

function Point(x, y) {
  this.x = x
  this.y = y
}

Point.prototype.point = function() {
  console.log('point')
}

var point = new Point(1, 2)
for (var x in point) {
  console.log(x)  // x y point
}
console.log(point)

class ClassPoint {
  constructor(x, y) {
    this.x = x
    this.y = y
  }
  point() {
    console.log('class point')
  }
}
var classPoint = new ClassPoint(1, 2)
for (var y in classPoint) {
  console.log(y) // x y (without point)
}
console.log(classPoint)

如图所示，我很好奇ES2015级和原型之间的区别。 for-in的结果是不同的。（尽管使用Object.hasOwnProperty（）可以避免这个问题）

有没有人知道导致结果的原因？

非常感谢！

Answer 1

for-in之间的差异是因为class语法自动使方法不可枚举，而当你这样做时：

Point.prototype.point = function() {
  console.log('point')
}

...在用作该构造函数创建的对象原型的对象上创建可枚举属性。

您可以class通过Object.defineProperty做同样的事情：

Object.defineProperty(Point.prototype, "point", {
    value: function() {
        console.log('point')
    },
    writable: true
});

这会创建一个不可枚举的属性而不是可枚举的属性（因为我们没有包含enumerable: true而默认值为false;我们还没有包含configurable: true等等该属性不可配置，这也是class对方法的作用。

实例：

function Point(x, y) {
  this.x = x
  this.y = y
}

Object.defineProperty(Point.prototype, "point", {
    value: function() {
        console.log('point')
    },
    writable: true,
    configurable: true
});

var point = new Point(1, 2)
for (var x in point) {
  console.log(x)  // x y point
}
console.log(point)

class ClassPoint {
  constructor(x, y) {
    this.x = x
    this.y = y
  }
  point() {
    console.log('class point')
  }
}
var classPoint = new ClassPoint(1, 2)
for (var y in classPoint) {
  console.log(y) // x y (without point)
}
console.log(classPoint)

还有其他与super相关的细微差别，但这与您的for-in问题无关，而且由于您未在该代码中使用super，因此未提及无论如何，进入它。

Javascript类方法与原型属性

1 个答案: