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开发时的五个注意事项
Dec 08 Javascript
一些不错的js函数ajax
Aug 20 Javascript
IE浏览器PNG图片透明效果代码
Sep 02 Javascript
重载toString实现JS HashMap分析
Mar 13 Javascript
让textarea自动调整大小的js代码
Apr 12 Javascript
JS获取图片lowsrc属性的方法
Apr 01 Javascript
jQuery对JSON数据进行排序输出的方法
Jun 24 Javascript
javascript中对Date类型的常用操作小结
May 19 Javascript
只要1K 纯JS脚本送你一朵3D红色玫瑰
Aug 09 Javascript
AngularJS定时器的使用与移除操作方法【interval与timeout】
Dec 14 Javascript
JavaScript两种计时器的实例讲解
Jan 31 Javascript
element-ui点击查看大图的方法示例
Dec 14 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
PHP统计目录下的文件总数及代码行数(去除注释及空行)
2011/01/17 PHP
适用于抽奖程序、随机广告的PHP概率算法实例
2014/04/09 PHP
Yii编程开发常见调用技巧集锦
2016/07/15 PHP
PHP实现的获取文件mimes类型工具类示例
2018/04/08 PHP
js特效,页面下雪的小例子
2013/06/17 Javascript
Extjs单独定义各组件的实例代码
2013/06/25 Javascript
Google Dart编程语法和基本类型学习教程
2013/11/27 Javascript
dreamweaver 8实现Jquery自动提示
2014/12/04 Javascript
JS比较两个数值的大小实例
2016/11/25 Javascript
Bootstrap基本组件学习笔记之input输入框组(9)
2016/12/07 Javascript
用jQuery旋转插件jqueryrotate制作转盘抽奖
2017/02/10 Javascript
详解vue-cli中的ESlint配置文件eslintrc.js
2017/09/25 Javascript
echarts学习笔记之箱线图的分析与绘制详解
2017/11/22 Javascript
jquery+ajaxform+springboot控件实现数据更新功能
2018/01/22 jQuery
JS实现DOM删除节点操作示例
2018/04/04 Javascript
jQuery使用each遍历循环的方法
2018/09/19 jQuery
antd Upload 文件上传的示例代码
2018/12/14 Javascript
js实现图片实时时钟
2020/01/15 Javascript
vue 判断两个时间插件结束时间必选大于开始时间的代码
2020/11/04 Javascript
vue-video-player 断点续播的实现
2021/02/01 Vue.js
《Python之禅》中对于Python编程过程中的一些建议
2015/04/03 Python
python中string模块各属性以及函数的用法介绍
2016/05/30 Python
浅谈Python处理PDF的方法
2017/11/10 Python
对PyQt5中的菜单栏和工具栏实例详解
2019/06/20 Python
python 中Arduino串口传输数据到电脑并保存至excel表格
2019/10/14 Python
Pyqt5 关于流式布局和滚动条的综合使用示例代码
2020/03/24 Python
自定义实现 PyQt5 下拉复选框 ComboCheckBox的完整代码
2020/03/30 Python
CSS3制作轮播图的一种方法
2019/11/11 HTML / CSS
HTML5 拖拽批量上传文件的示例代码
2018/03/28 HTML / CSS
What's the difference between an interface and abstract class? (接口与抽象类有什么区别)
2012/10/29 面试题
大专计算机个人求职的自我评价
2013/10/21 职场文书
环境卫生标语
2014/06/09 职场文书
小学竞选班长演讲稿
2014/09/09 职场文书
2014保险公司个人工作总结
2014/12/09 职场文书
聋哑人盗窃罪辩护词
2015/05/21 职场文书
2019中小学生安全过暑期倡议书
2019/06/24 职场文书