为什么我的JavaScript权威指南类示例的替代版本不起作用

Question

Its on pp 200-201 of Chapter 9 on Classes and Modules. This approach below occured to me as being more straightforward, but the commented output lines below are not working for unknown reasons:

Range.prototype = {
  includes: function(x) {
    return this.from <= x && x <= this.to;
  },

  foreach: function(f) {
    for (var x = Math.ceil(this.from); x <= this.to; x++) f(x);
  },

  toString: function() {
    return "(" + this.from + "..." + this.to + ")";
  },

  Z: "ZZZZZZZZZZZZZZZZZZZ",    
}

function Range(from,to) {
  this.from = from
  this.to = to
}

var r = new Range(1,3)

console.log(Range.prototype.Z)
console.log(r.constructor.prototype.Z)  //undefined 
console.log(r.Z)
console.log(r.includes(2));
console.log(r.toString());
console.log(r);  // Does not use Range.toString 
r.foreach(console.log); // TypeError 

Answer 1

1) console.log(r.constructor.prototype.Z) //undefined

The issue is that r.constructor === Object rather than Range . This is because the value is inherited from the prototype object, which itself has a constructor of Object .

You'll have to override it within the prototype for it to reference Range as you expected:

Range.prototype = {
  constructor: Range,
  ...
}

[ Edit ] Or, rather than setting the entire prototype to a new object, you can extend the existing object:

Range.prototype.includes = function ...;
Range.prototype.foreach = function ...;
Range.prototype.toString = function ...;
Range.prototype.Z = "ZZZZZZZZZZZZZZZZZZZ";

With this, any preset keys, like constructor , are still part of the prototype without having to set them yourself.

---

2) console.log(r); // Does not use Range.toString console.log(r); // Does not use Range.toString

The console simply doesn't use toString() . It instead lists the instance as browsable so you can see all of its properties and their values.

If you want it to show the result of toString() , you have to call it yourself as you did on the line before:

console.log(r.toString());

---

3) r.foreach(console.log); // TypeError r.foreach(console.log); // TypeError

log specifically needs its context (the value of this ) to be console , but it's being passed as a simple function reference without a context.

You'll either have to wrap it in another function so it can be called as a method or bind it to console :

r.foreach(function (n) { console.log(n); });
r.foreach(console.log.bind(console));