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 相关文章推荐
asp.net HttpHandler实现图片防盗链
Nov 09 Javascript
用js判断输入是否为中文的函数
Mar 10 Javascript
js 日期比较相关天数代码
Apr 02 Javascript
Websocket协议详解及简单实例代码
Dec 12 Javascript
微信小程序之蓝牙的链接
Sep 26 Javascript
原生JS实现ajax与ajax的跨域请求实例
Dec 01 Javascript
详解微信小程序实现WebSocket心跳重连
Jul 31 Javascript
vue.js 双层嵌套for遍历的方法详解, 类似php foreach()
Sep 07 Javascript
详解vue文件中使用echarts.js的两种方式
Oct 18 Javascript
extract-text-webpack-plugin用法详解
Feb 14 Javascript
js核心基础之闭包的应用实例分析
May 11 Javascript
微信小程序简单的canvas裁剪图片功能详解
Jul 12 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
使用PHP+AJAX让WordPress动态加载文章的教程
2015/12/11 PHP
使用YII2框架实现微信公众号中表单提交功能
2017/09/04 PHP
js判断输入是否为正整数、浮点数等数字的函数代码
2010/11/17 Javascript
javascript函数以及基础写法100多条实用整理
2013/01/13 Javascript
js根据给定的日期计算当月有多少天实现思路及代码
2013/02/25 Javascript
jquery获取radio值实例
2014/10/16 Javascript
使用FlexiGrid实现Extjs表格效果方法分享
2014/12/16 Javascript
JavaScript实现计算字符串中出现次数最多的字符和出现的次数
2015/03/12 Javascript
Javascript中判断对象是否为空
2015/06/10 Javascript
javascript生成大小写字母
2015/07/03 Javascript
SpringMVC restful 注解之@RequestBody进行json与object转换
2015/12/10 Javascript
使用Jasmine和Karma对AngularJS页面程序进行测试
2016/03/05 Javascript
JavaScript中匿名函数的用法及优缺点详解
2016/06/01 Javascript
jquery仿京东侧边栏导航效果
2017/03/02 Javascript
Angular2学习教程之组件中的DOM操作详解
2017/05/28 Javascript
Ionic3 UI组件之Gallery Modal详解
2017/06/07 Javascript
从Vuex中取出数组赋值给新的数组,新数组push时报错的解决方法
2018/09/18 Javascript
详解Nuxt.js中使用Element-UI填坑
2019/09/06 Javascript
[55:35]VGJ.S vs Mski Supermajor小组赛C组 BO3 第二场 6.3
2018/06/04 DOTA
python调用机器喇叭发出蜂鸣声(Beep)的方法
2015/03/23 Python
python利用MethodType绑定方法到类示例代码
2017/08/27 Python
python数据结构之链表详解
2017/09/12 Python
Django入门使用示例
2017/12/12 Python
Python2和Python3之间的str处理方式导致乱码的讲解
2019/01/03 Python
python ddt数据驱动最简实例代码
2019/02/22 Python
Python3之不使用第三方变量,实现交换两个变量的值
2019/06/26 Python
Python如何通过百度翻译API实现翻译功能
2020/04/02 Python
详解Django中异步任务之django-celery
2020/11/05 Python
Pycharm安装Qt Design快捷工具的详细教程
2020/11/18 Python
Fresh馥蕾诗英国官网:法国LVMH集团旗下高端天然护肤品牌
2018/11/01 全球购物
兰蔻英国官网:Lancome英国
2019/04/30 全球购物
static关键字的用法
2013/10/07 面试题
环保建议书
2014/03/12 职场文书
法人代表授权委托书范文
2014/09/10 职场文书
2015年教师党员公开承诺书
2015/01/22 职场文书
MySQL派生表联表查询实战过程
2022/03/20 MySQL