Javascript中的this,bind和that使用实例


Posted in Javascript onDecember 05, 2019

这篇文章主要介绍了Javascript中的this,bind和that使用实例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下

Javascript中必须通过this来访问类成员,可是this的特点就是函数绑在哪个对象上,它就指向那个对象。这个可能困扰过很多的程序员,特别是从C#,Java等语言过来的程序员。

function Foo(){
  this.message = 'This is message from Foo';
}

Foo.prototype.printMessage = function(){
  console.log(this.message);
}

function Foo2(){
  this.message = 'This is message from Foo2';
}

var foo = new Foo();
foo.printMessage();

var foo2 = new Foo2();
foo2.printMessage = foo.printMessage;
foo2.printMessage();

输出为:

This is message from Foo

This is message from Foo2

主要原因就是this改变了,因此Javascript中this的用法,和C++\C#中的大为不同。如果需要传统方式使用this的函数,可以使用Function.prototype.bind(),指定函数的this值:

function Foo(){
  this.message = 'This is message from Foo';
  
  this.printMessage = (function(){
    console.log(this.message);
  }).bind(this);
}

function Foo2(){
  this.message = 'This is message from Foo2';
}

var foo = new Foo();
foo.printMessage();

var foo2 = new Foo2();
foo2.printMessage = foo.printMessage;
foo2.printMessage();

输出为:

This is message from Foo

This is message from Foo

另外使用call和apply也可以改变函数调用时的this值。

bind函数的主要问题是IE9以后才开始提供。并且一旦开始习惯了Javascript的this用法,这种bind反而会不习惯。在实践中,更多用到的还是保存this:

function Foo(){
  var that = this;
  
  this.message = 'This is message from Foo';
  
  this.printMessage = function(){
    console.log(that.message);
  };
}

function Foo2(){
  this.message = 'This is message from Foo2';
}

var foo = new Foo();
foo.printMessage();

var foo2 = new Foo2();
foo2.printMessage = foo.printMessage;
foo2.printMessage();

输出同上。

注意我们是通过that来访问的message(除了that,context和self也是常用的名称)。Javascript一个还算欣慰的地方就是他的闭包上下文始终是在函数定义的地方,因此不管函数被挂上哪个对象上,捕获到的that始终是这个。当然这个地方不算闭包,有闭无包,但原理是相同的。这也是实践中用的最多的方法,推荐使用。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jQuery Lightbox 图片展示插件使用说明
Apr 25 Javascript
扩展jquery实现客户端表格的分页、排序功能代码
Mar 16 Javascript
引用外部脚本时script标签关闭的写法
Jan 20 Javascript
简单的JavaScript互斥锁分享
Feb 02 Javascript
jquery插件开发之实现google+圈子选择功能
Mar 10 Javascript
javascript中通过arguments参数伪装方法重载
Oct 08 Javascript
JavaScript获取指定元素位置的方法
Apr 08 Javascript
JavaScript获取客户端IP的方法(新方法)
Mar 11 Javascript
推荐三款不错的图片压缩上传插件(webuploader、localResizeIMG4、LUploader)
Apr 21 Javascript
详解Jest结合Vue-test-utils使用的初步实践
Jun 27 Javascript
vuex actions异步修改状态的实例详解
Nov 06 Javascript
压缩Vue.js打包后的体积方法总结(Vue.js打包后体积过大问题)
Feb 03 Javascript
原生JS与CSS实现软件卸载对话框功能
Dec 05 #Javascript
Vue快速实现通用表单验证功能
Dec 05 #Javascript
Vue组件通信中非父子组件传值知识点总结
Dec 05 #Javascript
基于javascript实现贪吃蛇经典小游戏
Apr 10 #Javascript
微信小程序登录时如何获取input框中的内容
Dec 04 #Javascript
微信小程序日历插件代码实例
Dec 04 #Javascript
微信小程序request请求封装,验签代码实例
Dec 04 #Javascript
You might like
php中截取中文字符串的代码小结
2011/07/17 PHP
php结合ACCESS的跨库查询功能
2015/06/12 PHP
实例讲解PHP验证邮箱是否合格
2019/01/28 PHP
javascript 动态table添加colspan\rowspan 参数的方法
2009/07/25 Javascript
在jQuery 1.5中使用deferred对象的代码(翻译)
2011/03/10 Javascript
常见JS效果之图片减速度滚动实现代码
2011/12/08 Javascript
使用jQuery内容过滤选择器选择元素实例讲解
2013/04/18 Javascript
Javascript自定义函数判断网站访问类型是PC还是移动终端
2014/01/10 Javascript
js获取窗口相对于屏幕左边和上边的位置坐标
2014/05/15 Javascript
Javascript基础之数组的使用
2016/05/13 Javascript
深入浅析Vue组件开发
2016/11/25 Javascript
JavaScript如何把两个数组对象合并过程解析
2019/10/10 Javascript
vue离开当前页面触发的函数代码
2020/09/01 Javascript
UEditor 自定义图片视频尺寸校验功能的实现代码
2020/10/20 Javascript
[02:20]2014DOTA2西雅图邀请赛 MVP外卡赛首胜采访
2014/07/09 DOTA
[01:21:07]EG vs Liquid 2018国际邀请赛淘汰赛BO3 第一场 8.25
2018/08/29 DOTA
python中的代码编码格式转换问题
2015/06/10 Python
Python的消息队列包SnakeMQ使用初探
2016/06/29 Python
用Python写一段用户登录的程序代码
2018/04/22 Python
Python实现查看系统启动项功能示例
2018/05/10 Python
Tensorflow 使用pb文件保存(恢复)模型计算图和参数实例详解
2020/02/11 Python
Python将字典转换为XML的方法
2020/08/01 Python
Scrapy-Redis之RedisSpider与RedisCrawlSpider详解
2020/11/18 Python
实例讲解使用CSS实现多边框和透明边框的方法
2015/09/08 HTML / CSS
美国知名的女性服饰品牌:LOFT(洛芙特)
2016/08/05 全球购物
ProBikeKit美国官网:自行车套件,跑步和铁人三项套件
2016/10/13 全球购物
Nip + Fab官网:英国美容品牌
2019/08/26 全球购物
党的群众路线教育实践活动学习心得体会
2014/03/03 职场文书
绿色城市实施方案
2014/03/19 职场文书
运动会方阵口号
2014/06/07 职场文书
升职自荐信范文
2015/03/27 职场文书
汤姆索亚历险记读书笔记
2015/06/29 职场文书
2015年街道办事处团委工作总结
2015/10/14 职场文书
2016年圣诞节寄语(一句话)
2015/12/07 职场文书
Nginx访问日志及错误日志参数说明
2021/03/31 Servers
《艾尔登法环》Boss腐烂树灵很有可能是《黑暗之魂3》的一个废案
2022/04/11 其他游戏