JavaScript全面了解作用域(基础、this、闭包、继承)之二
this这个东西,确实不好懂,很具有迷惑性,一不小心就错了。
this代表的是当前的作用域,知道当前的作用域,就可以确定了,但是这不是很容易确定。
第四部分:在全局中使用this
<script>
var a = 2;
function test(){
var a = 1;
document.writeln(a);
document.writeln(this.a);
}
test();
document.write(this.a);
</script>
<script>
var a = 2;
function test(){
var a = 1;
document.writeln(a);
document.writeln(this.a);
}
test();
document.write(this.a);
</script>
你认为结果是什么呢?1 1 2?但是结果是1 2 2
很有疑问吧?调用这个函数是在window中调用,所以说this就是window,window.a=2。不是this存在test()当中,this就是在test域。
第五部分:在对象中使用this
<script>
var name = "JIM";
function Person(){
this.name = "Mike";
this.myname = getName;
}
function getName(){
return this.name;
}
var person = new Person();
document.write(person.myname());
</script>
<script>
var name = "JIM";
function Person(){
this.name = "Mike";
this.myname = getName;
}
function getName(){
return this.name;
}
var person = new Person();
document.write(person.myname());
</script>
结果是Mike。this所在的作用域是在person当中,先搜索其中的属性,然后搜索原型,一直找到。
<script>
var name = "JIM";
function Person(){
this.myname = getName;
}
Person.prototype.name="Mike";
function getName(){
return this.name;
}
var person = new Person();
document.write(person.myname());
</script>
<script>
var name = "JIM";
function Person(){
this.myname = getName;
}
Person.prototype.name="Mike";
function getName(){
return this.name;
}
var person = new Person();
document.write(person.myname());
</script>
这里一直搜索到Person.prototype.name
第五部分:this在继承当中使用
<script>
var name = "JIM";
function Person(){
this.myname = getName;
this.name="Mike";
}
function Son()
{
this.name="Sam";
}
Son.prototype=new Person();
function getName(){
return this.name;
}
var son = new Son();
document.write(son.myname());
</script>
<script>
var name = "JIM";
function Person(){
this.myname = getName;
this.name="Mike";
}
function Son()
{
this.name="Sam";
}
Son.prototype=new Person();
function getName(){
return this.name;
}
var son = new Son();
document.write(son.myname());
</script>
结果是Sam,调用者是son,他先找自己的属性,然后是原型,最后的是原型的原型,一直找到。
第六部分:在回调函数中使用this
<script>
var name = "JIM";
function Person(){
this.name="Mike";
}
function getName(){
return this.name;
}
var person=new Person();
document.writeln(getName.call(person));
document.write(getName.call(this));
</script>
<script>
var name = "JIM";
function Person(){
this.name="Mike";
}
function getName(){
return this.name;
}
var person=new Person();
document.writeln(getName.call(person));
document.write(getName.call(this));
</script>
结果是Mike JIM。第一个相当于person在调用,搜索他的作用域。第二个是window在调用,搜索window作用域。
第七部分:在闭包中使用this
下面的例子也许你会喜欢的,为什么呢?
<script>
var name = "JIM";
function Person(){
this.name = "Mike";
this.getName = function(){
return function(){
return this.name;
};
};
}
var person = new Person();
document.write(person.getName()());
</script>
<script>
var name = "JIM";
function Person(){
this.name = "Mike";
this.getName = function(){
return function(){
return this.name;
};
};
}
var person = new Person();
document.write(person.getName()());
</script>
结果你以为是Mike,但是你错了,结果是JIM。
我来分析一下吧。this不会保存在作用域链的。我们把person.getName()分一下。
var temp=person.getName();
document.write(temp());
var temp=person.getName();
document.write(temp());
person.getName()返回的是一个函数,他可以保存其他的作用域链,this不保存,第一步仅仅是返回了一个函数,他的结果是什么,还得继续看,调用的位置。这里是window,当然是JIM啦。 www.2cto.com
我们现在可以总结一下,关于this在函数当中的使用情况。谁调用他,this就指向谁,就搜索他的作用域。
这下子,就完全明了了,this到底怎么使用了,他指向的是谁。
摘自 WebGIS,一步一步踏实走出来
相关新闻>>
- Javascript 兼容 IE6、IE7、FF 的“加入收藏”“设为首页”
- 好好学一遍JavaScript 笔记(一)——基础中的基础
- 好好学一遍JavaScript 笔记(二)——encode、数组、对象创建
- 好好学一遍JavaScript 笔记(三)——StringBuffer、prototype
- 好好学一遍javaScript 笔记(四)——Attribute、HTML元素、文档碎
- 好好学一遍JavaScript 笔记(五)——正则表达式基础
- 好好学一遍JavaScript 笔记(六)——正则表达式基础二
- 好好学一遍JavaScript 笔记(七)——RegExp对象与常用正则
- 好好学一遍JavaScript 笔记(八)——冒泡型事件、捕获型事件
- JavaScript详解
- 发表评论
-
- 最新评论 更多>>