一道题目理解js作用域链

页面导航:首页 > 网络编程 > JavaScript > 一道题目理解js作用域链

一道题目理解js作用域链

来源: 作者: 时间:2016-01-23 10:23 【

js作用域链下面是一道js题目:function C1(name){if(name){this name = name;}}function C2(name){this name = name;}function C3(name){this name = name || "John ";}C1 prototyp

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作用域链十分有用,拿出来和大家分享一下
要做出这道题,最重要是理解js中作用域链的概念,
从内到外大致如下:
内部 ---> prototype ---> window
变量查找顺序:
能在内部属性中找到的绝不去prototype中找,能在prototype中找到的绝不去window中找

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"同样并没有什么用


最后的结果: \

Tags:

文章评论

最 近 更 新
热 点 排 行
Js与CSS工具
代码转换工具

<