javascript - 不工作 Object.create(Error.prototype)

Question

我有代码:

var TestError = function () {
var that = Error.call(this);
return that;
};
TestError.prototype = Object.create(Error.prototype);
TestError.prototype.why = function(){alert("NOT WORKING")}

var err = new TestError();
err.why();//not working :( TypeError: err.why is not a function

但不工作:(

当我写作时

var TestError = function () {
var that = Error.call(this);
return that;
};
TestError.prototype = Error.prototype;
TestError.prototype.why = function(){alert("WORKING")}

var err = new TestError();
err.why();// working :( 

为什么我不能使用 Object.create(Error.prototype)？

Answer 1

问题不在于 Object.create。问题是您从构造函数return that;。

that 是 Error 的实例，而不是 TestError 的实例。因此，当您正确地将why 添加到TestError.prototype 时，只有TestError 的实例才会有该方法，而不是错误。

这大致是您第一个示例中的环境状态:

+--------------------+       +------------------------+        +-----------------+
|     TestError      |       |  TestError.prototype   | +----->| Error.prototype |
+------------+-------+       +-------------+----------+ |      +-----------------+
|  prototype |   *---+------>|     why     |<Function>| |               ^         
+------------+-------+       +-------------+----------+ |               |         
                             |[[Prototype]]|      *---+-+               |         
                             +-------------+----------+                 |         
                                                                        |         
                                                                        |         
                             +------------------------+                 |         
+--------------------+       |        <Object>        |                 |         
|        err         |------>+-------------+----------+                 |         
+--------------------+       |[[Prototype]]|     *----+-----------------+         
                             +-------------+----------+                           

删除 return that; 行，它将起作用。

var TestError = function() {
  Error.call(this);
};
TestError.prototype = Object.create(Error.prototype);
TestError.prototype.why = function() {
  alert("WORKING")
}

var err = new TestError();
err.why();

因为这是你想要的:

+--------------------+       +------------------------+        +-----------------+
|     TestError      |       |  TestError.prototype   | +----->| Error.prototype |
+------------+-------+       +-------------+----------+ |      +-----------------+
|  prototype |   *---+------>|     why     |<Function>| |                         
+------------+-------+       +-------------+----------+ |                         
                             |[[Prototype]]|      *---+-+                         
                             +-------------+----------+                           
                                          ^                                       
                                          |                                       
                                          +---------------+                       
                                                          |                       
                             +------------------------+   |                       
+--------------------+       |        <Object>        |   |                       
|        err         |------>+-------------+----------+   |                       
+--------------------+       |[[Prototype]]|     *----+---+                       
                             +-------------+----------+                  

---

为什么没有 Object.create 也能正常工作？因为当你这样做的时候

TestError.prototype = Error.prototype;

您对 TestError.prototype 所做的每个扩展都会扩展 Error.prototype。因此，当您添加 why 时，Error 的每个实例都将具有该方法。

正如我上面提到的，return that; 返回一个 Error 的实例。由于所有错误实例现在都有一个 why 方法，所以它起作用了，但不是故意的，而是偶然的。

+--------------------+                                                 
|     TestError      |                       +------------------------+
+------------+-------+                       |    Error.prototype     |
|  prototype |   *---+---------------------->+-------------+----------+
+------------+-------+                       |     why     |<Function>|
                                             +-------------+----------+
                                                          ^            
                                                          |            
                                                          |            
                             +------------------------+   |            
+--------------------+       |        <Object>        |   |            
|        err         |------>+-------------+----------+   |            
+--------------------+       |[[Prototype]]|     *----+---+            
                             +-------------+----------+                

var TestError = function () {
var that = Error.call(this);
   return that;
};
TestError.prototype = Error.prototype;
TestError.prototype.why = function(){alert("WORKING")}

var err = new Error(); // <- Note that we execute Error here
err.why();// working, but it shouldn't. Every Error instance now has a why method