详解js的bind、call、apply
详解js的bind、call、apply
说明
虽然bind、call、apply都是js很基础的一块知识,但是我从未认真总结过这三者的区别。
由于公司后端是用的微服务架构,又没有中间层对接,导致前端这边非常难于处理接口数据。
于是我在项目初期封装了一套薄弱的api方法充当中间层的作用,还有为了让后端接口字段命名统一,也单独封装了一套方法用来统一每个微服务字段返回名。
但是,随着业务的增加,代码出现强耦合现象,到最后薄弱的中间层已经撑不住了,连代码的审视都变得很麻烦。
最后不得以重新设计这套api方法,幸好之前考虑周全留了个心眼,所以今天只花了一天时间就基本完成了。
最后的设计思路是不在api中间层使用restful风格的接口(当然后端接口还是不变),但是又为了api不重名,就选择让程序只加载当前页面api方法,也就是说如果用户如果当前操作的是A页面,那B页面的api方法是不会被载入的,这样也避免了首次加载程序的时候加载过多的api方法。
然后我在为每个api方法提供公共的数据处理方法的时候需要改变api方法的this指向,于是用到了call方法,所以有了此文。
后台=>通道
体验账号1:账号:“123456”。密码:“123456”
体验账号2:账号:“123123”。密码:“123123”
关于this指向
bind
bind用来创建一个新的函数,与普通函数不同,这个函数创建的时候可以指定运行环境。
let log=console.log;
let people = {
name: '张三',
getName: function() {
return this.name;
},
};
let getNameTo = function(hello) {
log(this.getName());
log(this.name+hello);
};
let logName = getNameTo.bind(people);
logName('你好啊!');
所谓的指定运行环境,就是指定运行时候的上下文
上面的代码如同以下:
let log=console.log;
let people = {
name: '张三',
getName: function() {
return this.name;
},
getNameTo:function(hello) {
log(this.getName());
log(this.name+hello);
}
};
people.getNameTo('你好啊!')
call()和apply()
- call和apply会立即执行调用它的函数
- call接受的参数是单个单个传递的,apply接受的参数则需要一个数组
let log=console.log;
var people = {
name: '张三',
getName: function() {
return this.name;
},
};
var getNameTo = function(a,b) {
console.log(this.getName() + a+ b);
};
getNameTo.call(people,'aa', 'bb');
getNameTo.apply(people,['11', '22']);
详解js的bind、call、apply的更多相关文章
- 详解js变量、作用域及内存
详解js变量.作用域及内存 来源:伯乐在线 作者:trigkit4 原文出处: trigkit4 基本类型值有:undefined,NUll,Boolean,Number和Strin ...
- [转]javascript console 函数详解 js开发调试的利器
javascript console 函数详解 js开发调试的利器 分步阅读 Console 是用于显示 JS和 DOM 对象信息的单独窗口.并且向 JS 中注入1个 console 对象,使用该 ...
- 详解js和jquery里的this关键字
详解js和jquery里的this关键字 js中的this 我们要记住:this永远指向函数运行时所在的对象!而不是函数被创建时所在的对象.this对象是在运行时基于函数的执行环境绑定的,在全局环境中 ...
- 详解js面向对象编程
转自:http://segmentfault.com/a/1190000000713346 基本概念 ECMA关于对象的定义是:”无序属性的集合,其属性可以包含基本值.对象或者函数.“对象的每个属性或 ...
- 详解js中的闭包
前言 在js中,闭包是一个很重要又相当不容易完全理解的要点,网上关于讲解闭包的文章非常多,但是并不是非常容易读懂,在这里以<javascript高级程序设计>里面的理论为基础.用拆分的方式 ...
- Jquery 选择器 详解 js 判断字符串是否包含另外一个字符串
Jquery 选择器 详解 在线文档地址:http://tool.oschina.net/apidocs/apidoc?api=jquery 各种在线工具地址:http://www.ostools ...
- 详解js中的apply与call的用法
前言 call 和 apply 都是为了改变某个函数运行时的 context 即上下文而存在的,换句话说,就是为了改变函数体内部 this 的指向.call 和 apply二者的作用完全一样,只是接受 ...
- 详解JS设计模式
原文链接:www.cnblogs.com 一:理解工厂模式 工厂模式类似于现实生活中的工厂可以产生大量相似的商品,去做同样的事情,实现同样的效果;这时候需要使用工厂模式. 简单的工厂模式可以理解为解决 ...
- 详解 JavaScript的 call() 和 apply()
定义 ECMAScript规范为所有函数都包含两个方法(这两个方法非继承而来), call 和 apply .这两个函数都是在特定的作用域中调用函数,能改变函数的作用域,实际上是改变函数体内 this ...
随机推荐
- 公司安装mariaDB-5.5.52和Jdk 7
转自:http://www.cnblogs.com/kgdxpr/p/3209009.html vi /etc/yum.repos.d/MariaDB.repo 加入下面内容 [mariabd]nam ...
- @bzoj - 3750@ [POI2015] Pieczęć
目录 @description@ @solution@ @accepted code@ @details@ @description@ 一张 n*m 的方格纸,有些格子需要印成黑色,剩下的格子需要保留 ...
- Springboot应用中@EntityScan和@EnableJpaRepositories的用法
在Springboot应用开发中使用JPA时,通常在主应用程序所在包或者其子包的某个位置定义我们的Entity和Repository,这样基于Springboot的自动配置,无需额外配置,我们定义的E ...
- JQuery完整验证&密码的显示与隐藏&验证码
HTML <link href="bootstrap.css" rel="stylesheet"> <link href="gloa ...
- angular安装应用
首先你要有node 和npm 全局安装angular npm install -g @angular/cli 安装一个angular项目 ng new 项目名称 cd进入新建的项目 跑页 ...
- 【DCN】路由操作
offset */interface in/out access-list/prefix-list <1-16> // 修改路由偏移量 RIP偏移列表 ...
- Educational Codeforces Round 11、A B题
A. Co-prime Array 题意:给你一个数列,要求构造两两相邻之间的数互质的数列,可以插入的数的小于10的9次方 思路:其实可以选择靠近10的9次方的最大的三个素数.然后按我下面的方法做就可 ...
- hibernate中因双向依赖而造成的json怪相--springmvc项目
简单说一下Jackson 如果想要详细了解一下Jackson,可以去其github上的项目主页查看其版本情况以及各项功能.除此以外,需要格外提一下Jackson的版本问题.Jackson目前主流版本有 ...
- liunx重定向控制台消息
Linux 在控制台记录策略上允许一些灵活性, 它允许你发送消息到一个指定的虚拟控制台 (如果你的控制台使用的是文本屏幕). 缺省地, 这个"控制台"是当前虚拟终端. 为了选择 一 ...
- 记录vue创建项目过程
已经学过无数次,但是每次都忘记,毕竟脑容量太小了,每次都需要翻看原来项目和视频再次学习,所以以此文字形式记录下来,方便于下次使用观看 1.打开git,找到创建vue的文件夹(已经安装好git的,然后在 ...