js原型链
下面是一道js题目:
- 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中变量在原型链中查找的顺序,
从内到外大致如下:
本地属性 ---> prototype
变量查找顺序:
能在本地属性中找到的绝不去prototype中找
从内到外大致如下:
本地属性 ---> prototype
变量查找顺序:
能在本地属性中找到的绝不去prototype中找
1).先来分析第一个
- 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).接着来分析第二个
- new C2().name
- function C2(name){
- this.name = name;
- }
- C2.prototype.name = "Tom";
由于这次还是没有参数,同样默认被赋值成了undefined,于是本地属性name被赋值成了
undefined。于是在查找的时候一下子就查到了name的值为undefined,
因此C2.prototype.name = "Tom"并没有什么卵用,最终答案为undefined
3).最后来分析第三个
- 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"同样没有什么用
最后的结果:
这里还有道小菜:
- function Foo() {
- this.say = function(){
- alert('本地方法');
- }
- }
- Foo.prototype.say = function() {
- alert('prototype方法');
- }
- new Foo().say();
如果原型链上有相同的方法。那么会优先找本地方法,找到并执行,原型链上的方法就不执行了。
同样的,属性的查找也是这么个顺序。
同样的,属性的查找也是这么个顺序。