Javascript this关键字使用分析


Posted in Javascript onOctober 21, 2008

关于js中的this关键字的文章已经不少了,我看过几篇,我写这篇文章的目的是从实例中分析出this的工作原理,希望对大家有所帮助。

一、基本的:

function doSomething(){ 
alert(this.id); 
} 
alert(window.doSomething);//证明了doSomething是属于window的 
doSomething();//undefined 
window.onload = function(){ 
document.getElementById("div2").onclick = doSomething;//div2 
document.getElementById("div3").onclick = function(){doSomething();}//undefined 
}

1、对于doSomething这个函数:
function doSomething(){ 
alert(this.id); 
}

这个函数是全局函数,这种全局函数实际上是属于window的(可以通过window.doSomething来访问),如果直接调用,那么根据“this always refers to the “owner” of the function we're executing”,那么函数中的this就是window,但是window没有id属性,所以显示“undefined”;

2、在html元素中这样调用

<div id="div1" onclick="doSomething();">div1</div>

这时也会显示“undefined”,这就相当于如下代码:

document.getElementById("div1").onclick = function(){doSomething();}

当点击div1时,调用属于window的doSomething函数,所以也是显示“undefined”;

3、通过js来绑定事件,在div2载入过后:

document.getElementById("div2").onclick = doSomething;

当点击div2时,显示“div2”,因为在给div2的onclick赋值,是将doSomething拷贝了一次,这时拷贝的这个函数是属于div2的了,跟属于window的doSomething没有任何关系了。点击div2时,就会触发属于div2的doSomething,这里的this就是指div2。

二、attachEvent和addEventListener

attachEvent是在ie中绑定事件的方法,会将相应函数拷贝到全局(即响应函数的owner为window),但是在DOM标准中,addEventListener绑定的事件时拷贝的响应函数的owner为事件所绑定的对象

function doSomething(){ 
alert(this.id); 
alert(this == window); 
} 
window.onload = function(){ 
var div1 = document.getElementById("div1"); 
if(div1.attachEvent){ 
div1.attachEvent("onclick",doSomething); 
document.body.appendChild(document.createTextNode("attachEvent")); 
}else if(div1.addEventListener){ 
div1.addEventListener("click",doSomething,false); 
document.body.appendChild(document.createTextNode("addEventListener")); 
}else{ 
div.onclick = doSomething; 
} 
}

对于函数doSomething

function doSomething(){ 
alert(this.id); 
alert(this == window); 
}

1、使用attachEvent绑定到div1的click事件上,doSometing会被复制到window,这时doSomething里面的this指的是window,点击div1时会显示“undefined”和“true”

2、使用addEventListener绑定div1的click事件,这时将doSomething拷贝,这个拷贝过后的函数是属于div1的,所以点击div1时会显示“div1”和“false”

注:http://www.quirksmode.org/js/this.html里认为attachEvent只是使用了函数的引用,看如下代码:

var obj = new Object(); 
obj.color = "black"; 
obj.showColor = function(){ 
alert(this.color); 
alert(this == window); 
} 
obj.showColor(); var div1 = document.getElementById("div1"); 
div1.attachEvent("onclick",obj.showColor);

此时点击div1的时候,会显示“undefined”和“true”,如果attachEvent仅仅是引用obj.showColor的话,那么this还是应该指的是obj,但是实际上这里this指的是window,所以我认为这里不是引用,而是拷贝到全局的。

三、关于对象冒充的继承方式

1、new与不new的区别

对于如下function

function ClassA(sColor){ 
this.color = sColor; 
this.sayColor = function(){ 
alert(this.color); 
} 
}

这是一个类还是一个函数?随你而定!

如果你认为这是一个函数,那么我们可以这样来调用它:

ClassA("red");
“red”是传递的一个参数,ClassA中的this指的是当然就是指的window了,所以现在window有了color属性和sayColor方法,并且color有“red”这个值。

这是调用sayColor或者window.sayColor都可以显示“red”;

window.sayColor();

如果你认为这是一个类,那么我们应该这样使用它:

var obj = new ClassA("red");
new这个关键词的出现让上面这一句代码增加了不少内容:首先,创建一个Object实例,然后,将ClassA中的this指向创建的这个Object中,最后返回这个Object,所以返回的这个Object就赋值给了obj。所以我们可以说this指向的是obj,obj拥有了color属性和sayColor方法,并且color属性值为“red”。

2、函数的owener

function showId(){ 
alert(this.id); 
} 
window.onload = function(){ 
var div1 = document.getElementById("div1"); 
div1.onclick = showId; 
div1.show = showId; 
div1.show(); var obj = new Object(); 
obj.id = "obj"; 
obj.show = showId; 
obj.show(); 
}

我们可以将showId这个函数赋值给click事件,也可以赋值给任何一个对象的任何一个属性,这是也会拷贝showId这个方法的,所以我们在调用div1.show方法时,this是指向div1的,在调用obj.show时,this指向的是obj的。

3、对象冒充的原理

下面的代码是通过对象冒充方法实现的继承

function ClassA(sColor){ 
this.color = sColor; 
this.sayColor = function(){ 
alert(this.color); 
} 
} function ClassB(sColor,sName){ 
this.newMethod = ClassA; 
this.newMethod(sColor); 
delete this.newMethod; 
this.name = sName; 
this.sayName = function(){ 
alert(this.name); 
} 
} 
var objB = new ClassB("color of objB","name of objB"); 
objB.sayColor();

objB是ClassB的一个实例,objB是如何拥有color属性和sayColor方法的呢?

首先从实例化的代码看起:

var objB = new ClassB("color of objB","name of objB");

这里ClassB是个类,ClassB中的this当然就是指的objB这个对象;

在ClassB中,前三行代码会用到ClassA,这时就把ClassA看作一个函数,而不是类。

我们如果直接调用ClassA这个函数,那么很显然,ClassA中的this指的就是window对象了,所以我们先将ClassA拷贝到objB的newMethod这个属性中(this.newMethod = ClassA),

然后再调用this.newMethod,这是这个方法的owener明显的已经成了this,而ClassB中的this在当前指的是objB,所以此时ClassA中(严格的说是newMethod中,因为这是拷贝过后的,跟ClassA已经是两个方法了)的this就是指的objB,这样在通过newMethod的调用,就给objB赋值了color属性和sayColor方法。用call和apply方法来实现继承实际上也是一个原理,call和apply可以看作是改变方法的owner的方法,而这里ClassB中的前三句代码也就是起这个作用的。

四、prototype1.6中的Class.create

prototype1.6中的Class.create方法大致如下: var Class = { 
create: function() { 
// 
function klass() { 
this.initialize.apply(this, arguments); 
} 
// 
for (var i = 0; i < properties.length; i++) 
klass.addMethods(properties[i]); 
// 
return klass; 
} 
};

在使用的时候是这样的:
var Person = Class.create({ 
initialize:function(name){ 
this.name = name; 
}, 
say:function(message){ 
alert(this.name + ":" + message); 
} 
}); var aPerson = new Person("name1"); 
aPerson.say("hello1");

Person实际上是通过Class.create这个方法所返回的klass(klass是Class.create中的局部变量,是一个function),Class.create所传递的参数(initialize方法和say方法)传递到create方法中的properties数组中并且通过addMethods方法让klass的prototype拥有这些方法。那么最关键的地方也是最难以理解的地方是:klass中的this究竟是指的是什么。仔细想一想就不难得到答案,Person实际上就是klass,而我们在实例化Person对象的时候,是用了new关键词的:

var aPerson = new Person("name1");

这就等价于

var aPerson = new klass("name1");

虽然klass在外面不能被访问到,但是这样能很轻易的说明问题,klass是一个类而不是简单的一个函数(我们看作如此,因为用了new关键字),那么klass中的this就指的是声明的实例,在这里就是aPerson,aPerson通过klass的prototype能够拥有initialize方法和say方法,在new的过程中,也会执行klass中的代码,所以initialize在实例化的时候会执行,即构造函数。(在klass里两个this都是指的aPerson,为什么还要通过apply调用一次呢?这主要是为了传递构造函数的参数,用apply方法可以将数目不定的多个参数通过数组方便的传到initialize方法中去。)

五、再分析几个例子

从别的文章里看到的例子,我在这里分析一下:

1、运行如下代码

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://3water.com/article/16863.htm

JavaScript this 深入理解
https://3water.com/article/19425.htm

JAVASCRIPT THIS详解 面向对象
https://3water.com/article/17584.htm

Javascript this指针
https://3water.com/article/19434.htm

JavaScript中this关键字使用方法详解
https://3water.com/article/7954.htm

Javascript 相关文章推荐
Mootools 1.2教程 滑动效果(Slide)
Sep 15 Javascript
JS操作select下拉框动态变动(创建/删除/获取)
Jun 02 Javascript
js判读浏览器是否支持html5的canvas的代码
Nov 18 Javascript
jquery中append()与appendto()用法分析
Nov 14 Javascript
Javascript基础教程之数据类型 (字符串 String)
Jan 18 Javascript
整理Javascript基础语法学习笔记
Nov 29 Javascript
JavaScript 身份证号有效验证详解及实例代码
Oct 20 Javascript
jsonp跨域获取百度联想词的方法分析
May 13 Javascript
浅谈一个webpack构建速度优化误区
Jun 24 Javascript
vue实现Excel文件的上传与下载功能的两种方式
Jun 28 Javascript
React传值 组件传值 之间的关系详解
Aug 26 Javascript
帮你提高开发效率的JavaScript20个技巧
Jun 18 Javascript
JQuery AJAX实现目录浏览与编辑的代码
Oct 21 #Javascript
JavaScript confirm选择判断
Oct 18 #Javascript
javascript脚本编程解决考试分数统计问题
Oct 18 #Javascript
提高网站信任度的技巧
Oct 17 #Javascript
javascript检查日期格式的函数[比较全]
Oct 17 #Javascript
JAVASCRIPT下判断IE与FF的比较简单的方式
Oct 17 #Javascript
jQuery弹出层插件简化版代码下载
Oct 16 #Javascript
You might like
一个用mysql_odbc和php写的serach数据库程序
2006/10/09 PHP
PHP Document 代码注释规范
2009/04/13 PHP
PHP生成等比缩略图类和自定义函数分享
2014/06/25 PHP
PHP易混淆知识整理笔记
2015/09/24 PHP
WordPress的主题编写中获取头部模板和底部模板
2015/12/28 PHP
详解PHP实现定时任务的五种方法
2016/07/25 PHP
javascript得到XML某节点的子节点个数的脚本
2008/10/11 Javascript
常用的JavaScript WEB操作方法分享
2015/02/28 Javascript
详解addEventListener的三个参数之useCapture
2015/03/16 Javascript
在JS方法中返回多个值的方法汇总
2015/05/20 Javascript
深入理解jquery中的事件与动画
2016/05/24 Javascript
jQuery右下角悬浮广告实例
2016/10/17 Javascript
js实现4个方向滚动的球
2017/03/06 Javascript
Vue.js常用指令的使用小结
2017/06/23 Javascript
express默认日志组件morgan的方法
2018/04/05 Javascript
详解基于node.js的脚手架工具开发经历
2019/01/28 Javascript
vue实现微信分享链接添加动态参数的方法
2019/04/29 Javascript
Vue.js页面中有多个input搜索框如何实现防抖操作
2019/11/04 Javascript
javascript中正则表达式语法详解
2020/08/07 Javascript
vue自定义组件(通过Vue.use()来使用)即install的用法说明
2020/08/11 Javascript
JavaScript 实现继承的几种方式
2021/02/19 Javascript
使用webpack和rollup打包组件库的方法
2021/02/25 Javascript
[01:01:52]DOTA2-DPC中国联赛正赛 iG vs LBZS BO3 第一场 3月4日
2021/03/11 DOTA
浅析Python装饰器以及装饰器模式
2018/05/28 Python
Python并行分布式框架Celery详解
2018/10/15 Python
在pycharm上mongodb配置及可视化设置方法
2018/11/30 Python
django2.0扩展用户字段示例
2019/02/13 Python
python如何安装下载后的模块
2020/07/03 Python
浅析Python的命名空间与作用域
2020/11/25 Python
Belstaff英国官方在线商店:Belstaff.co.uk
2021/02/09 全球购物
经济信息系毕业生自荐信范文
2014/03/15 职场文书
教师党员承诺书
2014/03/25 职场文书
单位考核聘任报告
2015/03/02 职场文书
2015年机关后勤工作总结
2015/05/26 职场文书
关于军训的感想
2015/08/07 职场文书
详解MySQL 联合查询优化机制
2021/05/10 MySQL