当前位置: 首页 > 编程日记 > 正文

JS学习笔记之call、apply的用法

1、call和apply的区别

call和apply唯一的区别是传入参数的形式不同。

apply接受两个参数,第一个参数指定了函数体内this对象的指向,第二个参数为一个带下标的集合,可以是数组,也可以是类数组,apply方法会把集合中的元素作为参数传递给被调用的函数。

 var func = function (a, b, c) {console.log ([a, b, c]); // 输出 [1, 2, 3]};func.apply(null, [1, 2, 3]); // 数组中的1,2,3分别对应参数列表中的a,b,c
复制代码

call跟apply相同的是,第一个参数也是代表函数体内的this指向,第二个参数开始往后,参数依次被传入函数内,传入的参数数量不固定。

 var func = function (a, b, c) {console.log ([a, b, c]); //输出:[1, 2, 3]}func.call (null, 1, 2, 3);
复制代码

当调用函数时,Javascript解释器并不会计较形参和实参的数量、类型及顺序,在Javascript内部统一都是用数组表示。所以call其实就是包装在apply上的一颗语法糖。 在使用call和apply的时候,如果传入的第一个参数是null,函数体内的this会默认指向宿主对象,在浏览器环境里,就是window。

var func = function (a, b, c) {console.log (this === window); //输出:true
};
func.apply(null, [1, 2, 3]);
复制代码

如果是严格模式下,函数体内的this还是null

var func = function (a, b, c) {'use strict';console.log (this === null); //输出:true
};
func.apply(null, [1, 2, 3]);
复制代码

有时候call和apply还可以借用其他对象的方法,我们可以传入null来替代某个具体对象:

Math.min.apply(null, [5, 2, 1, 3, 4]); //输出:1
复制代码

2、call和apply的用途

(1) 可以改变this指向

call和apply最常见的用法就是用来改变函数内部的this指向。

var obj1 = {name: 'lq'
};
var obj2 = {name: 'xiaoming'
};
window.name = 'angelababy';
var getName = function () {console.log (this.name);
};
getName(); // 输出:angelababy
getName.call(obj1); // 输出:lq
getName.call(obj2); // 输出:xiaoming
复制代码

(2) Function.prototype.bind

几乎所有的高级浏览器都内置了Function.prototype.bind方法用来指定函数内部this指向问题。如果不支持原生的Function.prototype.bind,我们可以自己实现一个:

Function.prototype.diyBind = function (context) {var _this = this; // 保存原函数return function () { // 返回一个新的函数return _this.apply(context, arguments); // 执行新的函数时,会将之前传入的context当作新函数体内的this}
};
var obj = {name: 'lq'
}
var func = function () {console.log (this.name);
}.diyBind(obj);func();
复制代码

上面是简化版的,下面是稍微复杂点的版本:

Function.prototype.binds = function(){var _this = this, // 保存原来的函数context = [].shift.call(arguments), //截取第一个参数,即是绑定的this上下文args = [].slice.call(arguments); //剩余的参数转成数组return function(){ //返回一个新的函数return _this.apply(context, [].concat.call(args,[].slice.call(arguments))); // 执行新函数的时候,会将之前传入的context最为新函数体内的this,在此例中就是obj。用concat合并两次传入的参数,最为新函数的参数}
}
var obj = {name: 'lq'
}
var func = function(a, b, c, d){console.log(this.name); // 输出:lqconsole.log([a, b, c, d]); // 输出:[1, 2, 3, 4]
}.binds(obj,1, 2);func(3,4);
复制代码

(3)借用其他对象的方法

借用的第一种场景是“借用构造函数”:

var A = function (name) {this.name = name;
}
var B = function () {A.apply(this, arguments);
}
B.prototype.getName = function () {return this.name;
}
var b = new B('xiaoming');
console.log (b.getName()); //输出:xiaoming
复制代码

借用的第二种场景是“借用Array.prototype对象上的方法”,比如:

(function(){Array.prototype.push.call(arguments, 3);console.log (arguments); // 输出:[1, 2, 3]
})(1, 2)
复制代码

在操作arguments时我们经常会借用Array.prototype对象上的各种方法。比如想把arguments转成真正数组时,可以借用Array.prototype.slice方法。想截去arguments列表中的第一个元素,可以借用Array.prototype.shift方法。

相关文章:

实验LVS+keepalived

lvs说明:目前有三种IP负载均衡技术(VS/NAT、VS/TUN和VS/DR);八种调度算法(rr,wrr,lc,wlc,lblc,lblcr,dh,sh)。在调度器的实现技术中,IP负载均衡技术是效率最高的。在已有的IP负载均衡技术中有通过网络地址转…

Spark Streaming笔记整理(二):案例、SSC、数据源与自定义Receiver

[TOC] 实时WordCount案例 主要是监听网络端口中的数据,并实时进行wc的计算。 Java版 测试代码如下: package cn.xpleaf.bigdata.spark.java.streaming.p1;import org.apache.log4j.Level; import org.apache.log4j.Logger; import org.apache.spark.Spar…

复旦邱锡鹏教授公布《神经网络与深度学习》,中文免费下载 | 极客头条

点击上方↑↑↑蓝字关注我们~「2019 Python开发者日」,购票请扫码咨询 ↑↑↑整理 | Jane出品 | AI科技大本营优质的人工智能学习资源一直是大家非常关注的,以往我们也推荐过很多优秀的课程、书籍等,不过大多来自国外的名校、名师&#xff0c…

【Qt】信号和槽传递自定义结构体

一、使用信号和槽传递自定义结构体 这是一个老问题了,但是每次使用都要bing,因此做个笔记整理下。 一共有三种方法,可以让结构体在信号和槽之间传递。前两种方法可以让结构体在线程之间传递,最后一种方法只能在同一线程中传递。 Q_DECLARE_METATYPE qRegisterMetaType(推…

Tomcat:Connection reset by peer: socket write error

Connection reset by peer: socket write error错误分析及解决 Connection reset by peer: socket write error错误分析: 常出现的Connection reset by peer: 原因可能是多方面的,不过更常见的原因是: ①:服务器的并发连接数超过…

人脸识别的“生意经”

点击上方↑↑↑蓝字关注我们~「2019 Python开发者日」,购票请扫码咨询 ↑↑↑作者 | Jeff John Roberts译者 | 孙薇责编 | 琥珀出品 | AI科技大本营(ID:rgznai100)导语:不经意间,科技公司便拿着你的照片,推…

【Qt】pro中使用DEFINES来实现条件编译

1、pro中使用DEFINES来实现条件编译 在Qt的pro文件中使用DEFINES 来实现类似gcc -D的条件编译功能。 如,在pro中: #定义条件编译宏LAOER DEFINES += LAOER #依赖编译宏LAOER的编译选项: contains(DEFINES, LAOER){message(hello Laoer) } #与编译宏LAOER冲突的编译选项: …

nodejs -- promise的返回

为什么80%的码农都做不了架构师?>>> [javascript] view plain copy const a async () > { return Sequelize.findAll({}) //这里返回一个promise,"aaaaa"也行 } const b async ()>{ const result await a…

SQL 将一列数据转为一行字符串[转]

比如:我用select department,userName from users从表中查询出如下数据department | userName--------------- --------------it it1it it2it it3ur ur1ur ur2我能不能用什么SQL对department进行分组然后变成如下的结果呢?department | userName--------…

【C++】C++11的enum class enum struct和enum

1、问题描述 在走读QtCreator中看到一段代码 在QtCreator-v4.9.2源码中 src\plugins\projectexplorer\projectnodes.h enum class NodeType : quint16 {File 1,Folder,VirtualFolder,Project };以前一直使用enum,这里使用的是enum class,新enum的好处…

浙大首届AI专业本科生将于9月入学,纳入竺院图灵班

点击上方↑↑↑蓝字关注我们~「2019 Python开发者日」,购票请扫码咨询 ↑↑↑整理 | 琥珀出品 | AI科技大本营(ID:rgznai100)近日,据澎湃新闻报道,浙江大学计算机科学与技术学院副院长、浙江大学人工智能研究所所长吴飞…

解决阿里云无法正常使用samba的问题【转】

转自:https://blog.csdn.net/u011949148/article/details/54311288 昨天在阿里云上申请了一个云服务器,系统用的是ubuntu14.04,由于是免费的(初次使用),配置较低(单核1G内存,40G硬盘…

Google又放大招:高效实时实现视频目标检测 | 技术头条

点击上方↑↑↑蓝字关注我们~「2019 Python开发者日」,购票请扫码咨询 ↑↑↑作者 | 陈泰红,算法工程师,研究方向为机器学习、图像处理来源 | 极市平台(ID:extrememart)图像目标检测是图像处理领域的基础。…

一个java删除文件夹的小方法

java删除文件夹都是从里向外删除,使用递归的方法。public class IO_FILEdemo09 {public static void main(String[] args) {// TODO Auto-generated method stub// 删除目录演示File dir new File("C:\\version1");DeleteAll(dir);}public static void D…

【C++】operator bool() 和 operator const bool() const

1、问题描述 在走读QtCreator源码时&#xff0c;看到如下运算符重载 源码在QtCreator-v4.9.2中 src\plugins\projectexplorer\projectexplorer.h class OpenProjectResult { public:OpenProjectResult(const QList<Project *> &projects, const QList<Project *…

tomcat高并发的配置

以下内容来源于互联网&#xff0c;具体出处不详 据说服务器运行TOMCATJDK环境能负载到动态1W的并发&#xff0c;贴上他的配置&#xff0c;以后有机会在测试&#xff01; java 环境配置&#xff1a; export JAVA_OPTS"-server -Xms8g -Xmx8g -Xss128k -XX:ParallelGCThread…

【AI】图示:精确度(查准率)Precision、召回率(查全率)Recall

对Precision、Recall的直译是“精确度”和“召回率”&#xff0c;第一次接触这两个词&#xff0c;很难从字面上知道它们的含义。而翻译成“查准率”和“查全率”就比较好理解&#xff0c;下面统一使用“查准率”和“查全率”。 1、真假正负例 真正例&#xff08;True Positive…

@程序员,如何“终身成长”与跨界?

文 / Ant说《终身成长》是一碗“鸡汤”并不为过&#xff0c;截止到我看过的前半部分&#xff0c;围绕在一个主题展开——人的潜力是不可知的。换句话说&#xff0c;任何人都有可能成为自己想成为的人。书中列举了大量明星企业与管理者的真实案例&#xff0c;也引用了许多对比实…

TCP通过滑动窗口和拥塞窗口实现限流,能抵御ddos攻击吗

tcp可以通过滑动窗口和拥塞算法实现流量控制&#xff0c;限制上行和下行的流量&#xff0c;但是却不能抵御ddos攻击。 限流只是限制访问流量的大小&#xff0c;是无法区分正常流量和异常攻击流量的。 限流可以控制本软件或者应用的流量大小&#xff0c;从而减少对部署在相同物理…

WPF及Silverlight中将DataGrid数据导出

这段源码是我在项目中实际应用的源码&#xff0c;没有经过删减及处理。 如果你认为有用可以摘去作为自己的导出类中的一个小工具使用。 ///<summary>///数据源导出辅助类 ///</summary>///<remarks>///Author: sucsy ///Create date: 2011-…

首发 | 驭势科技推出“东风网络”:如何找到速度-精度的最优解?| 技术头条...

点击上方↑↑↑蓝字关注我们~「2019 Python开发者日」全日程揭晓&#xff0c;请扫码咨询 ↑↑↑作者 | 驭势科技给定目标硬件&#xff0c;如何确定最优的速度-精度折衷边界&#xff1f;换言之&#xff1a;给定推断延时的限制&#xff0c;模型能达到的最高精度是多少&#xff1f…

【AI】caffe使用步骤(一):将标注数据生成lmdb或leveldb

1、简述 caffe使用工具 convert_imageset 将标注数据转换成lmdb或leveldb格式&#xff0c;convert_imageset 使用方法可以参考脚本examples/imagenet/create_imagenet.sh。 convert_imageset 在./build/tools/中。 2、convert_imageset命令行参数 ./build/tools/convert_ima…

日本的GMO增加了比特币现金,和另外3种用于贷款项目的加密货币

2019独角兽企业重金招聘Python工程师标准>>> 日本的加密货币交易所 GMO正在不断地向其贷款项目中增加更多的货币&#xff0c;这使得它的客户可以将加密货币借给公司。最初&#xff0c;该项目是为BTC启动的&#xff0c;但现在GMO已经走得更远&#xff0c;并添加了比特…

功能演示:戴尔PowerConnect 8024交换机VLAN的创建与删除

戴尔PowerConnect 8024是一款带24个10 Gb以太网10GBASE-T端口的高密度10 Gb以太网交换机&#xff0c;专为具有高吞吐量和高可用性需求的数据中心、聚合和统一结构部署而设计。 这些高密度10 Gb交换机可用于汇聚型以太网环境&#xff0c;支持密集型虚拟化、iSCSI存储和10 Gb流量…

【AI】caffe使用步骤(二):设计网络模型prototxt

【一】以 lenet_train_test.prototxt 为例 name: "LeNet" layer {name: "mnist"type: "Data"top: "data"top: "label"include {phase: TRAIN}transform_param {scale: 0.00390625}data_param {source: "examples/mnis…

南大和中大“合体”拯救手残党:基于GAN的PI-REC重构网络,“老婆”画作有救了 | 技术头条...

点击上方↑↑↑蓝字关注我们~「2019 Python开发者日」全日程揭晓&#xff0c;请扫码咨询 ↑↑↑编译 | 一一出品 | AI科技大本营&#xff08;ID:rgznai100&#xff09;对于喜欢画画的你来说&#xff0c;总是画得七零八落&#xff0c;不堪入目&#xff0c;但现在&#xff0c;有一…

区块链技术应用领域和优势

区块链的应用正成为很多人关注的领域 &#xff0c;有很多的新应用正在逐步的实施当中&#xff0c;各种的区块链应用也是让众人惊喜不断&#xff0c; 随着区块链技术的发展 &#xff0c;各行各业在应用中所获取的成效也是越来越大&#xff0c; 这大大激发了人们对于区块链技术的…

Kataspace:用HTML5和WebGL创建基于浏览器的虚拟世界

源自斯坦福的创业公司Katalabs发布了一个用于创建基于浏览器的虚拟世界的开源框架。名叫KataSpace的软件&#xff0c;利用了新兴的HTML5技术&#xff0c;以及WebGL和WebSockets&#xff0c;允许用户无需安装任何插件&#xff0c;直接在浏览器的3D环境中展开互动。Katalabs已经推…

十问陆奇:努力、能力和机遇,谁能帮你跑赢未来?

点击上方↑↑↑蓝字关注我们~「2019 Python开发者日」全日程揭晓&#xff0c;请扫码咨询 ↑↑↑作者 | 陆奇转载自36氪陆奇说&#xff1a;在创业者从0到1的过程中&#xff0c;我们看到的主要挑战有以下几个方面&#xff1a;对需求的理解和判断不够&#xff0c;与目标用户/客户的…

【AI】caffe使用步骤(三):编写求解文件solver.prototxt

【一】参考博客 caffe solver 配置详解&#xff1a;http://www.mamicode.com/info-detail-2620709.html Caffe学习系列(7)&#xff1a;solver及其配置&#xff1a;https://www.cnblogs.com/denny402/p/5074049.html 【二】solver求解文件详解 1、solver求解文件例子如下 ne…