function OuterFoo(){
this.Name = 'Outer Name';
function InnerFoo(){
var Name = 'Inner Name';
alert(Name + ', ' + this.Name);
}
return InnerFoo;
}
OuterFoo()();
所显示的结果是“Inner Name, Outer Name”
OuterFoo是一个函数（而不是类），那么第一句
this.Name = 'Outer Name';
中的this指的是window对象，所以OuterFoo（）过后window.Name = ‘Outer Name';
并且将InnerFoo返回，此时InnerFoo同样是一个函数（不是类），执行InnerFoo的时候，this同样指window，所以InnerFoo中的this.Name的值为”Outer Name”（window.Name充当了一个中转站的角色，让OuterFoo能够向InnerFoo传递“Outer Name”这个值）,而Name的值即为局部变量”Inner Name”
2、运行如下代码
复制代码 代码如下:
function JSClass(){
this.m_Text = 'division element';
this.m_Element = document.createElement('DIV');
this.m_Element.innerHTML = this.m_Text;
if(this.m_Element.attachEvent)
this.m_Element.attachEvent('onclick', this.ToString);
else if(this.m_Element.addEventListener)
this.m_Element.addEventListener('click', this.ToString,false);
else
this.m_Element.onclick = this.ToString;
}
JSClass.prototype.Render = function(){
document.body.appendChild(this.m_Element);
}
JSClass.prototype.ToString = function(){
alert(this.m_Text);
alert(this == window);
}
window.onload = function(){
var jc = new JSClass();
jc.Render();
jc.ToString();
}
点击“division element”会显示“undefined”，在ie下还要显示“true”，其他浏览器中还要显示“false”。
实例声明和调用实例方法都没什么可说的，元素的click事件的绑定到了一个实例的方法，那么通过addEventListener绑定到的方法是拷贝过后的，所以this指的是html元素，这个元素没有m_Text属性（m_Text属性是属于JSClass的实例的，即属于jc的），所以点击元素显示undefined，attachEvent绑定的事件会将函数复制到全局，此时this指的是window对象，点击元素也会显示“undefined”。只有在调用jc.ToString()方法是，this指的是jc这个对象，因为jc拥有m_Text，所以能够显示“division element”。
六、总结
怎样在一个代码环境中快速的找到this所指的对象呢？我想要注意以下三个方面：
1、 要清楚的知道对于函数的每一步操作是拷贝还是引用（调用）
2、 要清楚的知道函数的拥有者（owner）是什么
3、 对于一个function，我们要搞清楚我们是把它当作函数使用还是在当作类使用
补充：
1.在实例和类上都可以直接定义函数
2.不能在实例上使用prototype定义函数，只能在类上使用prototype定义函数
3.类上直接定义的函数不能使用this访问对象的属性
4.在类的prototype上建立的函数可以用this,在类内部定义的函数可以使用this,在对象实例上建立的函数额可以this
复制代码 代码如下:
window.alert=function (msg)
{
document.write(msg+"<br>");
}
function say()
{
this.f="props";
this.func3=function(){alert("f3,"+this.f);}
}
say.func1=function(){alert("func1,"+this.f);}; //Error,类上直接定义的函数，不能使用this
say.prototype.func2=function(){alert("func2,"+this.f);}
say.func1();
(new say()).func2();
say.func2(); //Error, 在用prototype定义的函数，必须实例化对象才能调用
say.func3(); //Error,在类上定义的函数，必须实例化才能调用
(new say()).func3();
var obj={
fld1:10,
func1:function(msg){alert(msg);},
func4:function(){alert(this.fld1);}
}
obj.prototype.func=function(){alert("func");}; //Error 实例对象上不能使用prototype定义对象
obj.func2=function(){alert("func2,"+this.fld1);}; //ok,实例上直接定义的函数可以使用this,访问对象的属性
alert(obj.fld1);
obj.func1("func1");
obj.func2();
obj.func4();
javascript this用法小结
https://www.jb51.net/article/16863.htm
JavaScript this 深入理解
https://www.jb51.net/article/19425.htm
JAVASCRIPT THIS详解 面向对象
https://www.jb51.net/article/17584.htm
Javascript this指针
https://www.jb51.net/article/19434.htm
JavaScript中this关键字使用方法详解
https://www.jb51.net/article/7954.htm
您可能感兴趣的文章: