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 相关文章推荐
Jquery右下角抖动、浮动 实例代码(兼容ie6、FF)
Aug 15 Javascript
Jquery实现纵向横向菜单
Jan 24 Javascript
详解JS正则replace的使用方法
Mar 06 Javascript
js实现html table 行,列锁定的简单实例
Oct 13 Javascript
js实现图片放大展示效果
Aug 30 Javascript
jQuery实现IE输入框完成placeholder标签功能的方法
Sep 20 jQuery
node.js将MongoDB数据同步到MySQL的步骤
Dec 10 Javascript
JS与CSS3实现图片响应鼠标移动放大效果示例
May 04 Javascript
浅析Vue 生命周期
Jun 21 Javascript
利用JavaScript的Map提升性能的方法详解
Aug 14 Javascript
基于Vue实现微前端的示例代码
Apr 24 Javascript
Vue-cli3生成的Vue项目加载Mxgraph方法示例
May 31 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
ci检测是ajax还是页面post提交数据的方法
2014/11/10 PHP
PHP将HTML转换成文本的实现代码
2015/01/21 PHP
php编程实现简单的网页版计算器功能示例
2017/04/26 PHP
javascript 文章截取部分无损html显示实现代码
2010/05/04 Javascript
分享10篇优秀的jQuery幻灯片制作教程及应用案例
2011/04/16 Javascript
jquery固定底网站底部菜单效果
2013/08/13 Javascript
jquery 快速回到页首的方法
2013/12/05 Javascript
jQuery中prevUntil()方法用法实例
2015/01/08 Javascript
jQuery Ajax调用WCF服务详细教程
2015/03/31 Javascript
JavaScript+CSS实现仿天猫侧边网页菜单效果
2015/08/25 Javascript
javascript单页面手势滑屏切换原理详解
2016/03/21 Javascript
jQuery+CSS3+Html5实现弹出层效果实例代码(附源码下载)
2016/05/16 Javascript
JavaScript判断数字是否为质数的方法汇总
2016/06/02 Javascript
使用RequireJS库加载JavaScript模块的实例教程
2016/06/06 Javascript
模板视图和AngularJS之间冲突的解决方法
2016/11/22 Javascript
Jquery EasyUI Datagrid右键菜单实现方法
2016/12/30 Javascript
利用jquery禁止外层滚动条的滚动
2017/01/05 Javascript
jQuery 改变P标签文本值方法
2018/02/24 jQuery
简单使用webpack打包文件的实现
2019/10/29 Javascript
JS实现字体背景跑马灯
2020/01/06 Javascript
基于Ionic3实现选项卡切换并重新加载echarts
2020/09/24 Javascript
Java Web开发过程中登陆模块的验证码的实现方式总结
2016/05/25 Python
Python双精度浮点数运算并分行显示操作示例
2017/07/21 Python
python机器学习理论与实战(五)支持向量机
2018/01/19 Python
对python使用http、https代理的实例讲解
2018/05/07 Python
Python获取网段内ping通IP的方法
2019/01/31 Python
Python 数据可视化pyecharts的使用详解
2019/06/26 Python
Django 对象关系映射(ORM)源码详解
2019/08/06 Python
Python pymsql模块的使用
2020/09/07 Python
html5使用canvas实现跟随光标跳动的火焰效果
2014/01/07 HTML / CSS
西班牙床垫网上商店:Colchones.es
2018/05/06 全球购物
英国索普公园票务和酒店套餐:Thorpe Breaks
2019/09/14 全球购物
化工专业应届生求职信
2013/11/08 职场文书
新闻编辑自荐书范文
2014/02/12 职场文书
高一英语教学反思
2016/03/03 职场文书
CSS3 实现NES游戏机的示例代码
2021/04/21 HTML / CSS