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 相关文章推荐
setAttribute 与 class冲突解决
Feb 17 Javascript
javascript在事件监听方面的兼容性小结
Apr 07 Javascript
浅谈Javascript如何实现匀速运动
Dec 19 Javascript
javascript判断变量是否有值的方法
Apr 20 Javascript
基于jQuery实现的旋转彩圈实例
Jun 26 Javascript
JavaScript人脸识别技术及脸部识别JavaScript类库Tracking.js
Sep 14 Javascript
同步文本框内容JS代码实现
Aug 04 Javascript
jQGrid Table操作列中点击【操作】按钮弹出按钮层的实现代码
Dec 05 Javascript
讲解vue-router之什么是动态路由
May 28 Javascript
使用vue开发移动端管理后台的注意事项
Mar 07 Javascript
vue自动路由-单页面项目(非build时构建)
Apr 30 Javascript
基于JavaScript实现简单扫雷游戏
Jan 02 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操作xml代码
2010/06/17 PHP
php array_pop()数组函数将数组最后一个单元弹出(出栈)
2011/07/12 PHP
解析:使用php mongodb扩展时 需要注意的事项
2013/06/18 PHP
详解提高使用Java反射的效率方法
2019/04/29 PHP
广告切换效果(缓动切换)
2009/05/27 Javascript
比较全面的event对像在IE与FF中的区别 推荐
2009/09/21 Javascript
javascript权威指南 学习笔记之null和undefined
2011/09/25 Javascript
jQuery EasyUI API 中文文档 - Menu菜单
2011/10/03 Javascript
js里怎么取select标签里的值并修改
2012/12/10 Javascript
Javascript排序算法之合并排序(归并排序)的2个例子
2014/04/04 Javascript
微信小程序 开发经验整理
2017/02/15 Javascript
Angular使用$http.jsonp发送跨站请求的方法
2017/03/16 Javascript
JS获取字符对应的ASCII码实例
2017/09/10 Javascript
简单了解JavaScript中的执行上下文和堆栈
2019/06/24 Javascript
微信小程序页面上下滚动效果
2020/11/18 Javascript
微信小程序scroll-view点击项自动居中效果的实现
2020/03/25 Javascript
浅谈使用nodejs搭建web服务器的过程
2020/07/20 NodeJs
vue如何使用外部特殊字体的操作
2020/07/30 Javascript
微信小程序实现单个或多个倒计时功能
2020/11/01 Javascript
[29:10]Ti4 冒泡赛第二天 NEWBEE vs Titan 3
2014/07/15 DOTA
[52:02]DOTA2-DPC中国联赛 正赛 Phoenix vs Dragon BO3 第二场 2月26日
2021/03/11 DOTA
Python科学计算之Pandas详解
2017/01/15 Python
python实现基于SVM手写数字识别功能
2020/05/27 Python
Python读取Word(.docx)正文信息的方法
2018/03/15 Python
python3+django2开发一个简单的人员管理系统过程详解
2019/07/23 Python
浅谈keras中的batch_dot,dot方法和TensorFlow的matmul
2020/06/18 Python
python3.8动态人脸识别的实现示例
2020/09/21 Python
python 下载文件的多种方法汇总
2020/11/17 Python
中英文自我评价常用句型
2013/12/19 职场文书
《夏夜多美》教学反思
2014/02/17 职场文书
物流管理专业毕业生求职信
2014/03/23 职场文书
公司聘任书模板
2014/03/29 职场文书
护士感人事迹
2014/05/01 职场文书
医院深入开展党的群众路线教育实践活动实施方案
2014/08/27 职场文书
学校施工安全责任书
2015/01/29 职场文书
Python可视化神器pyecharts之绘制地理图表练习
2022/07/07 Python