JS中call,apply,bind方法的总结
why?call,apply,bind干什么的?为什么要学这个?
一般用来指定this的环境,在没有学之前,通常会有这些问题。
var a = {
user: "小马扎",
fn: function(){
console.log(this.user);
}
}
var b = a.fn;
b(); // undefined
我们是想打印对象a里面的user却打印出来undefined是怎么回事呢?如果我们直接执行a.fn()是可以的。
var a = {
user: "小马扎",
fn:function(){
console.log(this.user);
}
}
a.fn(); // 小马扎
这里能够打印是因为,这里的this指向的是函数a,那为什么上面的不指向a?我们如果需要了解this的指向问题。
虽然这种方法可以达到我们的目的,但是有时候我们不得不将这个对象保存到另外的一个变量中,那么就可以通过以下方法。
1、call()
var a = {
user: "小马扎",
fn: function(){
console.log(this.user);
}
}
var b = a.fn;
b.call(a); // 小马扎
通过call方法,给第一个参数添加要把b添加到哪个环境中,简单来说,this就会指向那个对象。
call方法除了第一个参数以外还可以添加多个参数,如下:
var a = {
user: "小马扎",
fn: function(num1, num2){
console.log(this.user);
console.log(num1 + num2);
}
}
var b = a.fn;
b.call(a, , ); // 小马扎 3
2、apply()
apply方法和call方法有些相似,它也可以改变this的指向
var a = {
user: "小马扎",
fn: function(){
console.log(this.user);
}
}
var b = a.fn;
b.apply(a); // 小马扎
同样apply也可以有多个参数,但是不同的是,第二个参数必须是一个数组,如下:
var a = {
user: "小马扎",
fn: function(num1, num2){
console.log(this.user);
console.log(num1 + num2);
}
}
var b = a.fn;
b.apply(a, [, ]); // 小马扎 11
注意如果call和apply的第一个参数写的是null,那么this指向的是window对象
var a = {
user: "小马扎",
fn: function(){
console.log(this); //Window {external: Object, chrome: Object, document: document, a: Object, speechSynthesis: SpeechSynthesis…}
}
}
var b = a.fn;
b.apply(null);
3、bind()
bind方法和call、apply方法有些不同,但是不管怎么说它们都可以用来改变this的指向。
先来说说它们的不同吧。
var a = {
user: "小马扎",
fn: function(){
console.log(this.user);
}
}
var b = a.fn;
b.bind(a);
console.log(b.bind(a)); // ƒ (){console.log(this.user);}
我们发现代码没有被打印,对,这就是bind和call、apply方法的不同,实际上bind方法返回的是一个修改过后的函数。
那么我们现在执行一下函数c看看,能不能打印出对象a里面的user
var a = {
user: "小马扎",
fn: function(){
console.log(this.user);
}
}
var b = a.fn;
var c = b.bind(a);
c(); // 小马扎
ok,同样bind也可以有多个参数,并且参数可以执行的时候再次添加,但是要注意的是,参数是按照形参的顺序进行的。
var a = {
user: "小马扎",
fn: function(e,d,f){
console.log(this.user);
console.log(e,d,f);
}
}
var b = a.fn;
var c = b.bind(a,);
c(,); // 小马扎 10 1 2
总结:call和apply都是改变上下文中的this并立即执行这个函数,bind方法可以让对应的函数想什么时候调就什么时候调用,并且可以将参数在执行的时候添加,这是它们的区别,根据自己的实际情况来选择使用。
JS中call,apply,bind方法的总结的更多相关文章
- JS 的 call apply bind 方法
js的call apply bind 方法都很常见,目的都是为了改变某个方法的执行环境(context) call call([thisObj[,arg1[, arg2[, [,.argN]]]] ...
- JavaScript中call,apply,bind方法的区别
call,apply,bind方法一般用来指定this的环境. var a = { user:"hahaha", fn:function(){ console.log(this.u ...
- JavaScript中call,apply,bind方法的总结。
why?call,apply,bind干什么的?为什么要学这个? 一般用来指定this的环境,在没有学之前,通常会有这些问题. var a = { user:"追梦子", fn:f ...
- JavaScript中call,apply,bind方法的总结
原文链接:http://www.cnblogs.com/pssp/p/5215621.html why?call,apply,bind干什么的?为什么要学这个? 一般用来指定this的环境,在没有学之 ...
- JavaScript中call,apply,bind方法
why?call,apply,bind干什么的?为什么要学这个? 一般用来指定this的环境,在没有学之前,通常会有这些问题. var a = { user:"追梦子", fn:f ...
- prototype.js中Function.prototype.bind方法浅解
prototype.js中的Function.prototype.bind方法: Function.prototype.bind = function() { var __method = this; ...
- js 中call,apply,bind的区别
call.apply.bind方法的共同点与区别: apply.call.bind 三者都是用来改变函数的this对象的指向: apply.call.bind 三者都可以利用后续参数传参: bind ...
- JS中call,apply,bind的区别
1.关于this对象的指向,请看如下代码 var name = 'jack'; var age = 18; var obj = { name:'mary', objAge:this.age, myFu ...
- 深入理解js中的apply、call、bind
概述 js中的apply,call都是为了改变某个函数运行时的上下文环境而存在的,即改变函数内部的this指向. apply() apply 方法传入两个参数:一个是作为函数上下文的对象,另外一个是作 ...
随机推荐
- 【NOIP2009提高组】最优贸易
https://www.luogu.org/problem/show?pid=1073 如果他想在i点卖出,那么就要在从1点出发到i点的路径里找个最便宜的买入,用Bellman-Ford求出这样最便宜 ...
- BFS求最短路 Abbottt's Revenge UVa 816
本题的题意是输入起点,朝向和终点,求一条最短路径(多解时任意输出一个即可) 本题的主要代码是bfs求解,就是以下代码中的slove的主要部分,通过起点按照路径的长度来寻找最短路径,输出最先到终点的一系 ...
- 修改Mac系统的文件权限
修改Mac系统的文件权限 有时候,因为各种各样的需求Mac OS系统使用者需要修改某个系统文件,但是很多时候Mac OS系统会提示你"没有足够的权限".所以往往会无法保侟.编辑甚至 ...
- Ali RocketMQ与Kafka对照
淘宝内部的交易系统使用了淘宝自主研发的Notify消息中间件,使用Mysql作为消息存储媒介.可全然水平扩容,为了进一步减少成本.我们觉得存储部分能够进一步优化,2011年初,Linkin开源了Kaf ...
- 单源最短路径 dijkstra算法实现
本文记录一下dijkstra算法的实现,图用邻接矩阵表示,假设图为无向图.而且连通,有向图,不连通图的做法相似. 算法简述: 首先确定"单源"的源.假设是第0个顶点. 维护三个数组 ...
- Vue深度学习(3)
基础 Vue.js允许自定义指令,实质上是让你教 Vue一些新技巧:怎样将数据的变化映射到 DOM 的行为.可以使用 Vue.directive(id, definition) 的方法传入指令 id ...
- 在dotnet core web api中支持CORS(跨域访问)
最近在写的Office add-in开发系列中,其中有一个比较共性的问题就是在add-in的客户端脚本中访问远程服务时,要特别注意跨域访问的问题. 关于CORS的一些基本知识,请参考维基百科的说明:h ...
- Java基础(四)-异常处理机制及其设计
本篇主要是记录自己所理解的Java异常处理机制(基于jdk1.7)以及怎么去处理和设计异常.还记得当初学习Java异常这块的时候都没怎么注意它的用途,以为就是简单的处理下异常,我避免程序出现这样错误就 ...
- 基于Metronic的Bootstrap开发框架经验总结(17)-- 使用 summernote插件实现HTML文档的编辑和图片插入操作
在很多场合,我们需要在线编辑HTML内容,然后在页面上或者其他终端上(如小程序.APP应用等)显示,编辑HTML内容的插件有很多,本篇介绍基于Bootstrap的 summernote插件实现HTML ...
- 一 、Spring Boot 学习之项目搭建
一.简介 spring 官方网站本身使用Spring 框架开发,随着功能以及业务逻辑的日益复杂,应用伴随着大量的XML配置文件以及复杂的Bean依赖关系. 随着Spring 3.0的发布,Spring ...