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 相关文章推荐
js 内存释放问题
Apr 25 Javascript
Javascript学习笔记-详解in运算符
Sep 13 Javascript
原生js实现查找/添加/删除/指定元素的class
Apr 12 Javascript
基于jquery的文章中所有图片width大小批量设置方法
Aug 01 Javascript
JS Replace 全部替换字符的用法小结
Dec 24 Javascript
Jquery实现动态切换图片的方法
May 18 Javascript
简介JavaScript中的sub()方法的使用
Jun 08 Javascript
AngularJS入门教程之多视图切换用法示例
Nov 02 Javascript
基于vuejs+webpack的日期选择插件
May 21 Javascript
EasyUI学习之Combobox下拉列表(1)
Dec 29 Javascript
手机端转换rem适应
Apr 01 Javascript
webpack4简单入门实例
Sep 06 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实现时间轴函数代码
2011/10/08 PHP
php实现获取文件mime类型的方法
2015/02/11 PHP
PHP实现的自定义图像居中裁剪函数示例【测试可用】
2017/08/11 PHP
Laravel5.5新特性之友好报错以及展示详解
2017/08/13 PHP
tp5(thinkPHP5框架)captcha验证码配置及验证操作示例
2019/05/28 PHP
javascript代码加载优化方法
2011/01/30 Javascript
IE中jquery.form中ajax提交没反应解决方法分享
2012/09/11 Javascript
使用jQuery.fn自定义jQuery翻页插件
2013/01/20 Javascript
借助javascript代码判断网页是静态还是伪静态
2014/05/05 Javascript
JavaScript实现鼠标点击后层展开效果的方法
2015/05/13 Javascript
jquery验证手机号是否正确实例讲解
2015/11/17 Javascript
Bootstrap源码解读表单(2)
2016/12/22 Javascript
JS实现可视化文件上传
2018/09/08 Javascript
详解react内联样式使用webpack将px转rem
2018/09/13 Javascript
使用node搭建自动发图文微博机器人的方法
2019/03/22 Javascript
vue制作抓娃娃机的示例代码
2020/04/17 Javascript
openlayers4.6.5实现距离量测和面积量测
2020/09/25 Javascript
小程序实现点击tab切换左右滑动
2020/11/16 Javascript
python用字典统计单词或汉字词个数示例
2014/04/22 Python
python处理xml文件的方法小结
2017/05/02 Python
python3实现从kafka获取数据,并解析为json格式,写入到mysql中
2019/12/23 Python
Python字符串三种格式化输出
2020/09/17 Python
python实现移动木板小游戏
2020/10/09 Python
如何利用python生成MD5并去重
2020/12/07 Python
Python制作简单的剪刀石头布游戏
2020/12/10 Python
HTML5响应式(自适应)网页设计的实现
2017/11/17 HTML / CSS
SQL面试题
2013/04/30 面试题
业务总经理岗位职责
2014/02/03 职场文书
销售职业生涯规划范文
2014/03/14 职场文书
李敖北大演讲稿
2014/05/24 职场文书
工程部主管岗位职责
2015/02/12 职场文书
2015年女生节活动总结
2015/02/27 职场文书
求职意向书范本
2015/05/11 职场文书
浅谈如何提高PHP代码质量之单元测试
2021/05/28 PHP
十大最强岩石系宝可梦,怪颚龙实力最强,第七破坏力很强
2022/03/18 日漫
Python中的嵌套循环详情
2022/03/23 Python