理解js中变量在作用域链与原型链中的查找顺序(转)

js作用域链

下面是一道js题目：

[javascript] view plain copy

    function C1(name){  
        if(name){  
            this.name = name;  
        }  
    }  
      
    function C2(name){  
        this.name = name;  
    }  
      
    function C3(name){  
        this.name = name || "John";  
    }  
      
    C1.prototype.name = "Tom";  
    C2.prototype.name = "Tom";  
    C3.prototype.name = "John";  
      
    console.log(new C1().name + "," + new C2().name + "," + new C3().name);  

不运行，求答案！^_^，这道题目对于理解js作用域链十分有用，拿出来和大家分享一下

 

要做出这道题，最重要是理解js中变量在作用域链和原型链中查找的顺序，
从内到外大致如下：
本地属性 --->  prototype
变量查找顺序：
能在本地属性中找到的绝不去prototype中找

 
1).先来分析第一个

[javascript] view plain copy

    new C1().name  
      
    function C1(name){  
        if(name){  
            this.name = name;  
        }  
    }  
      
    C1.prototype.name = "Tom";  

分析：
由于这里没有参数，默认被赋值成了undefined，所以到了if这里就进不去了，因此在C1本地
属性中找不到name这个属性，只能傻逼兮兮的往外找了，又因为C1.prototype.name = "Tom"的
存在，在prototype中找到了name属性，所以最后打印出来的答案是"Tom"

 
2).接着来分析第二个

[javascript] view plain copy

    new C2().name  
      
    function C2(name){  
        this.name = name;  
    }  
      
    C2.prototype.name = "Tom";  

分析：
由于这次还是没有参数，同样默认被赋值成了undefined，于是本地属性name被赋值成了
undefined。于是在查找的时候一下子就查到了name的值为undefined,
因此C2.prototype.name = "Tom"并没有什么卵用，最终答案为undefined

 
3).最后来分析第三个

[javascript] view plain copy

    new C3().name  
      
    function C3(name){  
        this.name = name || "John";  
    }  
      
    C3.prototype.name = "John";  

分析：
同样是没有参数，undefined作为参数进来以后情况变成了这样：
this.name = undefined || "John"，然后结果很明显了本地属性name被赋值成"John"。
接着是从内往外查找，一下子就锁定了本地属性name，此时的值为"John"。
因此C3.prototype.name = "John"同样没有什么用

 

最后的结果：

 

这里还有道小菜：

[javascript] view plain copy

    function Foo() {  
        this.say = function(){  
            alert('本地方法');  
        }  
    }  
    A.prototype.say = function() {  
        alert('prototype方法');  
    }  
    new Foo().say();  

总结：

如果原型链，作用域链上有相同的方法。那么会优先找作用域链上的，找到并执行，原型链上的方法就不执行了。
同样的，属性的查找也是这么个顺序。
---------------------
作者：jingtian678
来源：CSDN
原文：https://blog.csdn.net/jingtian678/article/details/79576059
版权声明：本文为博主原创文章，转载请附上博文链接！理解js中变量在作用域链与原型链中的查找顺序