scrip 查找 ron ole nts 先來 作用域 技術分享 blog

js原型鏈

下面是一道js題目： [javascript] view plain copy

1. function C1(name){
2. if(name){
3. this.name = name;
4. }
5. }
7. function C2(name){
8. this.name = name;
9. }
11. function C3(name){
12. this.name = name || "John";
13. }
15. C1.prototype.name = "Tom";
16. C2.prototype.name = "Tom";
17. C3.prototype.name = "John";
19. console.log(new C1().name + "," + new C2().name + "," + new C3().name);

不運行，求答案！^_^，這道題目對於理解js作用域鏈十分有用，拿出來和大家分享一下 要做出這道題，最重要是理解js中變量在原型鏈中查找的順序，
從內到外大致如下：
本地屬性 ---> prototype
變量查找順序：
能在本地屬性中找到的絕不去prototype中找

1).先來分析第一個

[javascript] view plain copy

1. new C1().name
3. function C1(name){
4. if(name){
5. this.name = name;
6. }
7. }
9. C1.prototype.name = "Tom";

分析：
由於這裏沒有參數，默認被賦值成了undefined，所以到了if這裏就進不去了，因此在C1本地
屬性中找不到name這個屬性，只能傻逼兮兮的往外找了，又因為C1.prototype.name = "Tom"的
存在，在prototype中找到了name屬性，所以最後打印出來的答案是"Tom"

2).接著來分析第二個

[javascript] view plain copy

1. new C2().name
3. function C2(name){
4. this.name = name;
5. }
7. C2.prototype.name = "Tom";

分析：
由於這次還是沒有參數，同樣默認被賦值成了undefined，於是本地屬性name被賦值成了
undefined。於是在查找的時候一下子就查到了name的值為undefined,
因此C2.prototype.name = "Tom"並沒有什麽卵用，最終答案為undefined

3).最後來分析第三個

[javascript] view plain copy

1. new C3().name
3. function C3(name){
4. this.name = name || "John";
5. }
7. C3.prototype.name = "John";

分析：
同樣是沒有參數，undefined作為參數進來以後情況變成了這樣：
this.name = undefined || "John"，然後結果很明顯了本地屬性name被賦值成"John"。
接著是從內往外查找，一下子就鎖定了本地屬性name，此時的值為"John"。
因此C3.prototype.name = "John"同樣沒有什麽用

最後的結果： 這裏還有道小菜： [javascript] view plain copy

1. function Foo() {
2. this.say = function(){
3. alert(‘本地方法‘);
4. }
5. }
6. Foo.prototype.say = function() {
7. alert(‘prototype方法‘);
8. }
9. new Foo().say();

總結： 如果原型鏈上有相同的方法。那麽會優先找本地方法，找到並執行，原型鏈上的方法就不執行了。
同樣的，屬性的查找也是這麽個順序。

變量在原型鏈中的查找順序