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

作者: eight0 (欸XD)   2017-09-06 23:07:33
前面文章的內容、推文、回文有諸多錯誤。但在解釋之前,原 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 只是一個平台,和瀏覽器一樣。
作者: Hevak (Arthow Eshes)   2017-09-07 01:39:00
推詳細
作者: ian90911 (xopowo)   2017-09-07 09:40:00
作者: tino1991 (深白)   2017-09-07 10:32:00
推!
作者: kisha024 (4545454554)   2017-09-07 21:42:00
很詳細
作者: hijkxyzuw (i,j,k) ×(x,y,z)   2017-09-07 23:46:00
呃,我的意思是 c = Object.create(p) 後,原本 p 的 enumerable 屬性,在 c 變成 no enumerable和 function.prototype 與 instance 的行為不同。雖然在 p 裡的 descriptor 還是 enumerable ,但用 for..in 在 c 裡會找不到。找得到欸,我之前弄錯了。和 new 不相容是那篇文章講的,我回在自己那篇好了
作者: Kenqr (function(){})()   2017-09-09 17:01:00

Links booklink

Contact Us: admin [ a t ] ucptt.com