JavaScript中this详解


Posted in Javascript onSeptember 01, 2015

这里的主题是 this ,不扯远了。this 本身原本很简单,总是指向类的当前实例,this 不能赋值。这前提是说 this 不能脱离 类/对象 来说,也就是说 this 是面向对象语言里常见的一个关键字。说的极端点,如果你编写的 JS 采用函数式写法,而不是面向对象式,你所有的代码里 this 会少很多,甚至没有。记住这一点,当你使用 this 时,你应该是在使用对象/类 方式开发,否则 this 只是函数调用时的副作用。

JavaScript中的this总是让人迷惑,应该是js众所周知的坑之一。 个人也觉得js中的this不是一个好的设计,由于this晚绑定的特性,它可以是全局对象,当前对象,或者…有人甚至因为坑大而不用this。

其实如果完全掌握了this的工作原理,自然就不会走进这些坑。来看下以下这些情况中的this分别会指向什么:

1.全局代码中的this

alert(this)
//window

全局范围内的this将会指向全局对象,在浏览器中即使window。

2.作为单纯的函数调用

function fooCoder(x) {
 this.x = x;
}
fooCoder(2);
alert(x);
// 全局变量x值为2

这里this指向了全局对象,即window。在严格模式中,则是undefined。

3.作为对象的方法调用

var name = "clever coder";
var person = {
 name : "foocoder",
 hello : function(sth){
  console.log(this.name + " says " + sth);
 }
}
person.hello("hello world");

输出 foocoder says hello world。this指向person对象,即当前对象。

4.作为构造函数

new FooCoder();

函数内部的this指向新创建的对象。

5.内部函数

var name = "clever coder";
var person = {
 name : "foocoder",
 hello : function(sth){
  var sayhello = function(sth) {
   console.log(this.name + " says " + sth);
  };
  sayhello(sth);
 }
}
person.hello("hello world");
//clever coder says hello world

在内部函数中,this没有按预想的绑定到外层函数对象上,而是绑定到了全局对象。这里普遍被认为是JavaScript语言的设计错误,因为没有人想让内部函数中的this指向全局对象。一般的处理方式是将this作为变量保存下来,一般约定为that或者self:

var name = "clever coder";
var person = {
 name : "foocoder",
 hello : function(sth){
  var that = this;
  var sayhello = function(sth) {
   console.log(that.name + " says " + sth);
  };
  sayhello(sth);
 }
}
person.hello("hello world");
//foocoder says hello world

6.使用call和apply设置this

person.hello.call(person, "world");

apply和call类似,只是后面的参数是通过一个数组传入,而不是分开传入。两者的方法定义:

call( thisArg [,arg1,arg2,… ] ); 
// 参数列表,arg1,arg2,...
apply(thisArg [,argArray] );  
// 参数数组,argArray

两者都是将某个函数绑定到某个具体对象上使用,自然此时的this会被显式的设置为第一个参数。

简单地总结

简单地总结以上几点,可以发现,其实只有第六点是让人疑惑的。

其实就可以总结为以下几点:

1.当函数作为对象的方法调用时,this指向该对象。

2.当函数作为淡出函数调用时,this指向全局对象(严格模式时,为undefined)

3.构造函数中的this指向新创建的对象

4.嵌套函数中的this不会继承上层函数的this,如果需要,可以用一个变量保存上层函数的this。

再总结的简单点,如果在函数中使用了this,只有在该函数直接被某对象调用时,该this才指向该对象。

obj.foocoder();
foocoder.call(obj, ...);
foocoder.apply(obj, …);

更进一步

我们可能经常会写这样的代码:

$("#some-ele").click = obj.handler;

如果在handler中用了this,this会绑定在obj上么?显然不是,赋值以后,函数是在回调中执行的,this会绑定到$(“#some-div”)元素上。这就需要理解函数的执行环境。本文不打算长篇赘述函数的执行环境,可以参考《javascript高级程序设计》中对执行环境和作用域链的相关介绍。这里要指出的时,理解js函数的执行环境,会更好地理解this。

那我们如何能解决回调函数绑定的问题?ES5中引入了一个新的方法,bind():

fun.bind(thisArg[, arg1[, arg2[, ...]]])
 thisArg

当绑定函数被调用时,该参数会作为原函数运行时的this指向.当使用new 操作符调用绑定函数时,该参数无效.

arg1, arg2, ...

当绑定函数被调用时,这些参数加上绑定函数本身的参数会按照顺序作为原函数运行时的参数.
该方法创建一个新函数,称为绑定函数,绑定函数会以创建它时传入bind方法的第一个参数作为this,传入bind方法的第二个以及以后的参数加上绑定函数运行时本身的参数按照顺序作为原函数的参数来调用原函数.

显然bind方法可以很好地解决上述问题。

$("#some-ele").click(person.hello.bind(person));
//相应元素被点击时,输出foocoder says hello world

其实该方法也很容易模拟,我们看下Prototype.js中bind方法的源码:

Function.prototype.bind = function(){
 var fn = this, args = Array.prototype.slice.call(arguments), object = args.shift();
 return function(){
 return fn.apply(object,
  args.concat(Array.prototype.slice.call(arguments)));
 };
};

相信看完全文以后,this不再是坑~,大家都明白了吗,欲了解更多请点击三水点靠木的网站学习。

Javascript 相关文章推荐
JQuery 常用方法基础教程
Feb 06 Javascript
js 通用订单代码
Dec 23 Javascript
如何实现textarea里的不同文本显示不同颜色
Jan 20 Javascript
Express.JS使用详解
Jul 17 Javascript
javascript数组去重小结
Mar 07 Javascript
javascript阻止事件冒泡和浏览器的默认行为
Jan 21 Javascript
jquery实现自适应banner焦点图
Feb 16 Javascript
AngularJS实现tab选项卡的方法详解
Jul 05 Javascript
jQuery列表检索功能实现代码
Jul 17 jQuery
详解Vue文档中几个易忽视部分的剖析
Mar 24 Javascript
JS实现动态星空背景效果
Nov 01 Javascript
JavaScript 实现拖拽效果组件功能(兼容移动端)
Nov 11 Javascript
JS实现的自定义右键菜单实例二则
Sep 01 #Javascript
jQuery中常用的遍历函数用法实例总结
Sep 01 #Javascript
jquery常用函数与方法汇总
Sep 01 #Javascript
js+CSS实现模拟华丽的select控件下拉菜单效果
Sep 01 #Javascript
JQuery自适应窗口大小导航菜单附源码下载
Sep 01 #Javascript
js实现简洁大方的二级下拉菜单效果代码
Sep 01 #Javascript
js实现点击向下展开的下拉菜单效果代码
Sep 01 #Javascript
You might like
PHP 远程文件管理,可以给表格排序,遍历目录,时间排序
2009/08/07 PHP
php下通过IP获取地理位置的代码(小偷程序)
2011/06/09 PHP
采集邮箱的php代码(抓取网页中的邮箱地址)
2012/07/17 PHP
PHP变量内存分配问题记录整理
2013/11/27 PHP
ThinkPHP CURD方法之page方法详解
2014/06/18 PHP
解决extjs在firefox中关闭窗口再打开后iframe中js函数访问不到的问题
2008/11/06 Javascript
对字符串进行HTML编码和解码的JavaScript函数
2010/02/01 Javascript
js操作数组函数实例小结
2015/12/10 Javascript
JavaScript中this的用法实例分析
2016/12/19 Javascript
bootstrap中添加额外的图标实例代码
2017/02/15 Javascript
浅析vue-router原理
2018/10/19 Javascript
vue实现pdf文档在线预览功能
2019/11/26 Javascript
vue 判断元素内容是否超过宽度的方式
2020/07/29 Javascript
vue 实现根据data中的属性值来设置不同的样式
2020/08/04 Javascript
[57:31]DOTA2-DPC中国联赛 正赛 SAG vs CDEC BO3 第一场 2月1日
2021/03/11 DOTA
Python函数式编程指南(三):迭代器详解
2015/06/24 Python
通过Python来使用七牛云存储的方法详解
2015/08/07 Python
讲解Python的Scrapy爬虫框架使用代理进行采集的方法
2016/02/18 Python
Python中.py文件打包成exe可执行文件详解
2017/03/22 Python
shell命令行,一键创建 python 模板文件脚本方法
2018/03/20 Python
Python检查和同步本地时间(北京时间)的实现方法
2018/12/03 Python
使用Python画股票的K线图的方法步骤
2019/06/28 Python
python之pexpect实现自动交互的例子
2019/07/25 Python
Python容器类型公共方法总结
2020/08/19 Python
Python爬虫实例之2021猫眼票房字体加密反爬策略(粗略版)
2021/02/22 Python
CSS3字体效果的设置方法小结
2016/06/13 HTML / CSS
HTML5语音识别标签写法附图
2013/11/18 HTML / CSS
Oroton中国官网:澳洲知名奢侈配饰品牌
2017/03/26 全球购物
英国珠宝钟表和家居礼品精品店:David Shuttle
2018/02/24 全球购物
雅诗兰黛澳大利亚官网:Estée Lauder澳大利亚
2019/05/31 全球购物
Woods官网:加拿大最古老、最受尊敬的户外品牌之一
2020/09/12 全球购物
如何写你的创业计划书
2014/01/07 职场文书
2014年医院个人工作总结
2014/12/09 职场文书
委托书格式要求
2015/01/28 职场文书
2015年社区党务工作总结
2015/04/21 职场文书
Golang表示枚举类型的详细讲解
2021/09/04 Golang