javascript中this用法实例详解


Posted in Javascript onApril 06, 2017

本文实例讲述了javascript中this用法。分享给大家供大家参考,具体如下:

JavaScript中的this含义非常丰富,它可以是全局对象,当前对象或者是任意对象,这都取决于函数的调用方式。函数有以下几种调用方式:作为对象方法调用、作为函数调用、作为构造函数调用、apply或call调用。

对象方法调用

作为对象方法调用的时候,this会被绑定到该对象。

var point = {
 x : 0,
 y : 0,
 moveTo : function(x, y) {
   this.x = this.x + x;
   this.y = this.y + y;
   }
};
point.moveTo(1, 1)//this 绑定到当前对象,即 point 对象

这里我想强调一点内容,就是this是在函数执行的时候去获取对应的值,而不是函数定义时。即使是对象方法调用,如果该方法的函数属性以函数名的形式传入别的作用域,也会改变this的指向。我举一个例子:

var a = {
  aa : 0,
  bb : 0,
  fun : function(x,y){
    this.aa = this.aa + x;
    this.bb = this.bb + y;
  }
};
var aa = 1;
var b = {
  aa:0,
  bb:0,
  fun : function(){return this.aa;}
}
a.fun(3,2);
document.write(a.aa);//3,this指向对象本身
document.write(b.fun());//0,this指向对象本身
(function(aa){//注意传入的是函数,而不是函数执行的结果
  var c = aa();
  document.write(c);//1 , 由于fun在该处执行,导致this不再指向对象本身,而是这里的window
})(b.fun);

这样就明白了吧。这是一个容易混淆的地方。

函数调用

函数也可以直接被调用,这个时候this被绑定到了全局对象。

var x = 1;
function test(){
  this.x = 0;
}
test();
alert(x); //0

但这样就会出现一些问题,就是在函数内部定义的函数,其this也会指向全局,而和我们希望的恰恰相反。代码如下:

var point = {
 x : 0,
 y : 0,
 moveTo : function(x, y) {
   // 内部函数
   var moveX = function(x) {
   this.x = x;//this 绑定到了全局
  };
  // 内部函数
  var moveY = function(y) {
  this.y = y;//this 绑定到了全局
  };
  moveX(x);
  moveY(y);
  }
};
point.moveTo(1, 1);
point.x; //==>0
point.y; //==>0
x; //==>1
y; //==>1

我们会发现不但我们希望的移动呢效果没有完成,反而会多出两个全局变量。那么如何解决呢?只要要进入函数中的函数时将this保存到一个变量中,再运用该变量即可。代码如下:

var point = {
 x : 0,
 y : 0,
 moveTo : function(x, y) {
   var that = this;
   // 内部函数
   var moveX = function(x) {
   that.x = x;
   };
   // 内部函数
   var moveY = function(y) {
   that.y = y;
   }
   moveX(x);
   moveY(y);
   }
};
point.moveTo(1, 1);
point.x; //==>1
point.y; //==>1

构造函数调用

在javascript中自己创建构造函数时可以利用this来指向新创建的对象上。这样就可以避免函数中的this指向全局了。

var x = 2;
function test(){
  this.x = 1;
}
var o = new test();
alert(x); //2

apply或call调用

这两个方法可以切换函数执行的上下文环境,也就是改变this绑定的对象。apply和call比较类似,区别在于传入参数时一个要求是数组,一个要求是分开传入。所以我们以apply为例:

var name = "window";
var someone = {
  name: "Bob",
  showName: function(){
    alert(this.name);
  }
};
var other = {
  name: "Tom"
};
someone.showName();   //Bob
someone.showName.apply();  //window
someone.showName.apply(other);  //Tom

可以看到,正常访问对象中方法时,this指向对象。使用了apply后,apply无参数时,this的当前对象是全局,apply有参数时,this的当前对象就是该参数。

箭头函数调用

这里需要补充一点内容,就是在下一代javascript标准ES6中的箭头函数的 this始终指向函数定义时的 this,而非执行时。我们通过一个例子来理解:

var o = {
  x : 1,
  func : function() { console.log(this.x) },
  test : function() {
    setTimeout(function() {
      this.func();
    }, 100);
  }
};
o.test(); // TypeError : this.func is not a function

上面的代码会出现错误,因为this的指向从o变为了全局。我们需要修改上面的代码如下:

var o = {
  x : 1,
  func : function() { console.log(this.x) },
  test : function() {
    var _this = this;
    setTimeout(function() {
      _this.func();
    }, 100);
  }
};
o.test();

通过使用外部事先保存的this就行了。这里就可以利用到箭头函数了,我们刚才说过,箭头函数的 this始终指向函数定义时的 this,而非执行时。所以我们将上面的代码修改如下:

var o = {
  x : 1,
  func : function() { console.log(this.x) },
  test : function() {
    setTimeout(() => { this.func() }, 100);
  }
};
o.test();

这回this就指向o了,我们还需要注意一点的就是这个this是不会改变指向对象的,我们知道call和apply可以改变this的指向,但是在箭头函数中是无效的。

var x = 1,
  o = {
    x : 10,
    test : () => this.x
  };
o.test(); // 1
o.test.call(o); // 依然是1

这样就可以明白各种情况下this绑定对象的区别了。

更多关于JavaScript相关内容可查看本站专题:《javascript面向对象入门教程》、《JavaScript中json操作技巧总结》、《JavaScript切换特效与技巧总结》、《JavaScript查找算法技巧总结》、《JavaScript动画特效与技巧汇总》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结》

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
javascript 匿名函数的理解(透彻版)
Jan 28 Javascript
Ajax请求在数据量大的时候出现超时的解决方法
Feb 27 Javascript
jQuery 如何先创建、再修改、后添加DOM元素
May 20 Javascript
jquery插件ajaxupload实现文件上传操作
Dec 09 Javascript
解决angular的post请求后SpringMVC后台接收不到参数值问题的方法
Dec 10 Javascript
JS组件Bootstrap dropdown组件扩展hover事件
Apr 17 Javascript
网站发布后Bootstrap框架引用woff字体无法正常显示的解决方法
Nov 24 Javascript
Js面试算法详解
Apr 08 Javascript
bootstrap自定义样式之bootstrap实现侧边导航栏功能
Sep 10 Javascript
微信小程序组件传值图示过程详解
Jul 31 Javascript
vuex实现像调用模板方法一样调用Mutations方法
Nov 06 Javascript
JavaScript字符和ASCII实现互相转换
Jun 03 Javascript
selenium 与 chrome 进行qq登录并发邮件操作实例详解
Apr 06 #Javascript
js遍历获取表格内数据的方法(必看)
Apr 06 #Javascript
JS优化与惰性载入函数实例分析
Apr 06 #Javascript
大白话讲解JavaScript的Promise
Apr 06 #Javascript
JS实现的二叉树算法完整实例
Apr 06 #Javascript
JavaScript结合HTML DOM实现联动菜单
Apr 05 #Javascript
js实现按座位号抽奖
Apr 05 #Javascript
You might like
全国FM电台频率大全 - 8 黑龙江省
2020/03/11 无线电
PHP is_dir() 判断给定文件名是否是一个目录
2010/05/10 PHP
php上传文件并显示上传进度的方法
2015/03/24 PHP
PHP生成推广海报的方法分享
2018/04/22 PHP
效率高的Javscript字符串替换函数的benchmark
2008/08/02 Javascript
AJAX使用了UpdatePanel后无法使用alert弹出脚本
2010/04/02 Javascript
基于jquery的二级联动菜单实现代码
2011/04/25 Javascript
javascript中String类的subString()方法和slice()方法
2011/05/24 Javascript
javascript倒计时功能实现代码
2012/06/07 Javascript
jQuery筛选器children()案例详解(图文)
2013/02/17 Javascript
读取input:file的路径并显示本地图片的方法
2013/09/23 Javascript
JavaScript 学习笔记之语句
2015/01/14 Javascript
node.js [superAgent] 请求使用示例
2015/03/13 Javascript
JQuery插入DOM节点的方法
2015/06/11 Javascript
JS实现仿QQ效果的三级竖向菜单
2015/09/25 Javascript
JS实现的自定义网页拖动类
2015/11/06 Javascript
浅谈webpack对样式的处理
2018/01/05 Javascript
详解mpvue中小程序自定义导航组件开发指南
2019/02/11 Javascript
koa2 用户注册、登录校验与加盐加密的实现方法
2019/07/22 Javascript
使用 Angular RouteReuseStrategy 缓存(路由)组件的实例代码
2019/11/01 Javascript
JavaScript, select标签元素左右移动功能实现
2020/05/14 Javascript
Vue2.x和Vue3.x的双向绑定原理详解
2020/11/05 Javascript
django 创建过滤器的实例详解
2017/08/14 Python
python机器学习理论与实战(六)支持向量机
2018/01/19 Python
Python编写合并字典并实现敏感目录的小脚本
2019/02/26 Python
详解Python3之数据指纹MD5校验与对比
2019/06/11 Python
python算法与数据结构之单链表的实现代码
2019/06/27 Python
python实现XML解析的方法解析
2019/11/16 Python
python:删除离群值操作(每一行为一类数据)
2020/06/08 Python
HTML5之多线程(Web Worker)
2019/01/02 HTML / CSS
Html5页面中的返回实现的方法
2018/02/26 HTML / CSS
体育教师个人的自我评价
2014/02/16 职场文书
大学生操行评语大全
2014/12/31 职场文书
步步惊心观后感
2015/06/12 职场文书
百善孝为先:关于孝道的经典语录
2019/10/18 职场文书
Python实战之OpenCV实现猫脸检测
2021/06/26 Python