Re: [問題] Node.js幫JavaScript搞出繼承的問題

看板Web_Design作者eight0 (人類)時間7年前 (2017/09/06 23:07)推噓7(7推 0噓 5→)

留言12則, 6人參與討論串3/3 (看更多)

前面文章的內容、推文、回文有諸多錯誤。但在解釋之前，原 PO 有必要先瞭解何為 __proto__、函式的 .prototype 屬性又是什麼。 JavaScript 的任何物件，包括函式（函式也是物件），有一個特殊的屬性 "__proto__"，用來達成類似「繼承」的功能。它和其它使用 class 的語言不同，這裡的繼承是「繼承另一個物件的屬性」而非「延伸一個介面」當對一個物件進行 property lookup 時，若是在當前的物件中沒有找到該屬性，就會往 __proto__ 找。例如︰ obj = { a: 1 }; obj2 = { b: 2, __proto__: obj }; console.log(obj2.a); // 1 // 這個屬性其實是長在 obj 身上，但因為 __proto__ // 的關係從 obj2 也找得到。尋找的過程大約是這樣 def lookupProperty(obj, name): if hasOwnProperty(obj, name): return getOwnProperty(obj, name) return lookupProperty(obj.__proto__, name) 由此可以看到，若是很多物件用 __proto__ 連在一起，尋找屬性時就會一個個地往下找。這功能稱為 prototype 鏈，或原型鏈。同時，為了區分一個屬性是長在自己身上呢？還是從原型鏈裡找出來（繼承）的呢？有一個 hasOwnProperty 的函式可以用。以上方的程式碼為例︰ obj2.hasOwnProperty('a'); // false obj2.hasOwnProperty('b'); // true 再來是函式的 prototype。當以 function 關鍵字來定義一個函式時，該函式會有一個 prototype 屬性（函式也是物件！）。 function Test() {} Test.hasOwnProperty('prototype'); // true 這個屬性平時一點用都沒有，只有在使用 new 關鍵字的時候有用。使用 new 關鍵字的時候，會建立一個新物件，並且把該物件的 __proto__ 屬性設為該函式的 prototype。然後再以這個物件為 this context，執行該函式︰ // new Test(); newObj = { __proto__: Test.prototype }; Test.call(newObj) 你可以看到，所有 new 出來的物件，都擁有相同的 __proto__，也就是 Test.prototype。如果你在 Test.prototype 上新增屬性，所有 new 出來的物件都能延著原型鏈找到該屬性。用這樣的功能就可以為這些物件建立共用的 method。也因為這個原因，這些函式會被叫作 class 或 constructor。原 PO 的問題來了，兩個 "class"，使其中一個繼承另一個，又是怎麼回事？ util.inherits 又做了什麼？其實就是這樣︰ function Test() {} Test.prototype.a = 1; function Test2() {} Test2.prototype.b = 2; Test2.prototype.__proto__ = Test.prototype; t2 = new Test2; console.log(t2.a); // 1 觀察一下原型鏈的狀況︰ * t2.__proto__ 指向 Test2.prototype，原因在「函式的 prototype」那段有解釋。 * Test2.prototype.__proto__ 指向 Test.prototype，是我們指定的（亮色那行）。從 t2 延著原型鏈尋找 a 屬性的結果，就是︰ 1. t2 沒有 a 屬性，看 t2.__proto__ (Test2.prototype) 2. Test2.prototype 沒有 a 屬性，看 Test2.prototype.__proto__ (Test.prototype) 3. Test.prototype 有 a 屬性，返回值這樣一來，就達成了「繼承另一個 class 的 method」的功能。最後，「console.log 不會顯示繼承的屬性」是正確的。但「console.log 不會顯示繼承的屬性，所以沒有繼承」是錯誤的。如果你是用瀏覽器的 console，它不只會顯示繼承的 __proto__，還可以把它點開看裡面有什麼東西。以原 PO 的例子來看︰ console.log(ChildObject.prototype) // console.log 不會顯示繼承的屬性，而 // hit 是長在 BaseObject.prototype 上的 console.log(ChildObject.prototype.__proto__) // 這大概是原 PO 要的結果下面是一些和原文無關的東西。 > inherits 會設定 enumerable:false 不會！inherits 就是在做上面亮白色那行。原始碼在這︰ https://github.com/nodejs/node/blob/1403d28e7ded280e7582daa6e999164588d2234e/lib/util.js#L966-L980 （縮︰https://goo.gl/iSMTDh） > class extends只是語法糖，做的事情基本上是一樣的不一樣！class 和 extends 關鍵字是語言層的繼承，constructor 也不等效於 function︰ class Test {} Test(); // error Test.call(); // error 建立物件的時機甚至相反︰ class A {} class B extends A { constructor() { console.log(this); // reference error super(); // 物件是由 A 建立的 console.log(this); // super 後才能使用 this } } new B; vs. function A() {} function B() { console.log(this); // 物件在 B 執行前已建立 A.call(this); } B.prototype.__proto__ = A.prototype; new B; > enumerable 當一個屬性被稱為 enumerable（可列舉），一般是在說 Object.getOwnPropertyDescriptor() 所回傳的 enumerable === true。而其它的列舉方法如 in, for...in, Object.keys, JSON, ... 的處理各有不同。詳細可以參考這個表︰ https://developer.mozilla.org/en-US/docs/Web/JavaScript/Enumerability_and_ownership_of_properties#Detection_Table （縮︰https://goo.gl/X7LtwT） > Object.create 會把繼承來的屬性設為 no enumerable 不會。Object.create 用來建立一個新物件，並指定 __proto__。 Object.create(null) 還可以建立一個完全空的物件（無繼承）。 > Object.create 就是 js 的繼承。 > 只是和 new 不相容我不太清楚這指的是什麼，不過想同時使用︰ function Test() {} Test.prototype.a = 1; (new Test).a; // 1 Object.create(Test.prototype).a; // 1 > 書上寫說javascript沒有繼承所以node.js才用 > prototype的概念弄出繼承如果書上這麼寫，建議換一本書。關於繼承的功能上面提過了，而 prototype 也不是 Node.js 發明的。Node.js 只是一個平台，和瀏覽器一樣。 -- ▉▏ ▉▏ ◢ ▊▎ ◣ ◤ ▄▆▄ ◥ 　 ◥ ◥ ◤ ◤ ▄ ▄ -- ※ 發信站: 批踢踢實業坊(ptt.cc), 來自: 118.166.130.128 ※ 文章網址: https://www.ptt.cc/bbs/Web_Design/M.1504710463.A.725.html