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 相关文章推荐
Mootools 图片展示插件(lightbox,ImageMenu)收集集合
May 21 Javascript
JQuery之拖拽插件实现代码
Apr 14 Javascript
使用JSLint提高JS代码质量方法分享
Dec 16 Javascript
node.js中使用node-schedule实现定时任务实例
Jun 03 Javascript
jQuery中animate用法实例分析
Mar 09 Javascript
JavaScript如何实现跨域请求
Aug 05 Javascript
Bootstrap输入框组件简单实现代码
Mar 06 Javascript
ES6新特性八:async函数用法实例详解
Apr 21 Javascript
vue中七牛插件使用的实例代码
Jul 28 Javascript
小程序数据通信方法大全(推荐)
Apr 15 Javascript
JS中的函数与对象的创建方式
May 12 Javascript
vue ref如何获取子组件属性值
Mar 31 Vue.js
原生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读取mysql乱码,用set names XXX解决的原理分享
2011/12/29 PHP
Laravel实现用户注册和登录
2015/01/23 PHP
php无限极分类实现方法分析
2019/07/04 PHP
利用javascript移动div层-javascript 拖动层
2009/03/22 Javascript
js获取url参数值的两种方式
2013/09/10 Javascript
使用JavaScript修改浏览器URL地址栏的实现代码
2013/10/21 Javascript
jquery mobile页面跳转后样式丢失js失效的解决方法
2014/09/06 Javascript
js实现数字每三位加逗号的方法
2015/02/05 Javascript
JavaScript返回当前会话cookie全部键值对照的方法
2015/04/03 Javascript
原生js和jquery实现图片轮播特效
2015/04/23 Javascript
AngularJS ng-style中使用filter
2016/09/21 Javascript
angular2路由之routerLinkActive指令【推荐】
2018/05/30 Javascript
分享5个顶级的JavaScript Ajax组件库
2018/09/16 Javascript
理顺8个版本vue的区别(小结)
2018/09/17 Javascript
VsCode里的Vue模板的实现
2020/08/12 Javascript
python基于pyDes库实现des加密的方法
2017/04/29 Python
Python导入模块时遇到的错误分析
2017/08/30 Python
用Python实现读写锁的示例代码
2018/11/05 Python
pygame游戏之旅 计算游戏中躲过的障碍数量
2018/11/20 Python
python3 批量获取对应端口服务的实例
2019/07/25 Python
解决Python logging模块无法正常输出日志的问题
2020/02/21 Python
详解Pycharm第三方库的安装及使用方法
2020/12/29 Python
html5 touch事件实现触屏页面上下滑动(一)
2016/03/10 HTML / CSS
HTML5 本地存储之如果没有数据库究竟会怎样
2013/04/25 HTML / CSS
Columbia美国官网:美国著名的户外服装品牌
2016/11/24 全球购物
流行文化收藏品:Sideshow(DC漫画,星球大战,漫威)
2019/03/17 全球购物
荷兰浴室和卫浴网上商店:Badkamerxxl.nl
2020/10/06 全球购物
学校就业推荐信范文
2014/05/19 职场文书
社团活动总结报告
2014/06/27 职场文书
艺术设计专业毕业生推荐信
2014/07/08 职场文书
2014年财务科工作总结
2014/11/11 职场文书
如果用一句诗总结你的上半年,你会用哪句呢?
2019/07/16 职场文书
基于PyTorch实现一个简单的CNN图像分类器
2021/05/29 Python
聊聊SpringBoot自动装配的魔力
2021/11/17 Java/Android
python中mongodb包操作数据库
2022/04/19 Python
Flutter Navigator 实现路由传递参数
2022/04/22 Java/Android