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。问题是您从构造函数中返回了;。

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