call、apply、bind方法的共同点与区别:

apply、call、bind 三者都是用来改变函数的this对象的指向;

apply、call、bind 三者都可以利用后续参数传参;

bind 是返回对应函数,便于稍后调用;apply、call则是立即调用。

一、call

1、   call(thisObj,x,y)

thisObj的取值有以下4种情况:

(1)不传,或者传null,undefined,函数中的this指向window对象;

(2)传递另一个函数的函数名,函数中的this指向这个函数的引用;

(3)传递字符串、数值或者布尔类型等基础类型,函数中的this指向其对应的包装对象,如string、number、boolean

(4)  传递一个对象,函数中的this指向这个对象

function a(){
console.log(this);
} function b(){} var c={name: 'call'}; a.call(); // window
a.call(null); //window
a.call(undefined) //window
a.call(1); // Number
a.call(''); // String
a.call(true) // Boolean
a.call(b) // function b(){}
a.call(c) // Object

2、 举个例子:

function Animal(){
this.name="animal";
this.showName=function(){
console.log(this.name);
}
}
function Dog(){
this.name = "dog";
}
var animal=new Animal();
var dog = new Dog();
animal.showName.call(dog); 返回的是dog

因为dog继承了animal中showName 这个方法,但是this的指向还是dog,所有打印出来的是dog 中的name.

3、 call()在继承中的运用

function Animal(name) {
this.name=name;
this.showName=function(){
console.log(this.name);
}
}
function Dog(name){
Animal.call(this,name);
}
var dog = new Dog("Crazy dog");
dog.showName();
}
输出:Crazy dog

传入了name 这个参数。

二、apply()

apply(thisObj,[argArray])

如果argArray 不是一个有效的数组或者不是arguments对象,那么将导致一个TypeError。

如果没有提供argArray 和thisObj 任何一个参数,那么Global对象将被用作thisObj, 并且无法被传递任何参数。

call 与apply 用法几乎是一样,只是传参的方式不一样。在js中,如果某个参数数量是不固定的,适合用apply,可以把参数push 进数组,传递进去。如果参数的数量是明确的,那就可以用cal。

三、bind

1、bind是在ES5 中扩展的方法(IE6,7,8不支持)

bind()方法与apply 和call很相似,也是可以改变函数体内的this的指向。

MDN的解释是:bind()方法会创建一个新函数,称为绑定函数,当调用这个绑定函数时,绑定函数会以创建它时传入bind()方法的第一个参数作为this,传入bind()方法的第二个以及以后的参数加上绑定函数运行时本身的参数按照顺序作为原函数的参数来调用原函数。

var bar=function(){
console.log(this.x)
} var foo={
x:3
}
bar()
bar.bind(foo)(); var func=bar.bind(foo);
func() 输出:
undefined
3

2、如果连续bind()两次,艺或者是连续bind()三次,那么输出的值是什么?

var bar = function(){
console.log(this.x)
}
var foo = {
x:3
}
var sed = {
x:4
}
var func = bar.bind(foo).bind(sed);
func();//
var fiv = {
x:5
}
var func = bar.bind(foo).bind(sed).bind(fiv);
func();

答案都是3。原因是,在js中,多次bind()是无效的。

四、总结apply、call、bind比较

var obj = {
x: 81
} var foo = {
getX: function() {
return this.x;
}
} console.log(foo.getX.bind(obj)()); //
console.log(foo.getX.call(obj)); //
console.log(foo.getX.apply(obj)); //

三个输出是81,但是注意看使用bind()方法,后面多了对括号。

区别是:当你希望改变上下文环境之后并非立即执行,而是回调执行的时候,使用bind()方法。而apply/call则会立即执行函数。

再总结一下:

apply、call、bind 三者都是用来改变函数的this对象的指向的;

apply、call、bind 三者第一个参数都是this要指向的对象,也就是想指定的上下文;

apply、call、bind 三者都可以利用后续参数传参;

bind是返回对应函数,便于稍后调用;apply、call则是立即调用。

js 中call,apply,bind的区别的更多相关文章

  1. JS中call,apply,bind的区别

    1.关于this对象的指向,请看如下代码 var name = 'jack'; var age = 18; var obj = { name:'mary', objAge:this.age, myFu ...

  2. JS中call,apply,bind方法的总结

    why?call,apply,bind干什么的?为什么要学这个? 一般用来指定this的环境,在没有学之前,通常会有这些问题. var a = { user: "小马扎", fn: ...

  3. 深入理解js中的apply、call、bind

    概述 js中的apply,call都是为了改变某个函数运行时的上下文环境而存在的,即改变函数内部的this指向. apply() apply 方法传入两个参数:一个是作为函数上下文的对象,另外一个是作 ...

  4. JS 的 call apply bind 方法

    js的call apply bind 方法都很常见,目的都是为了改变某个方法的执行环境(context) call call([thisObj[,arg1[, arg2[,   [,.argN]]]] ...

  5. javascript中call,apply,bind的用法对比分析

    这篇文章主要给大家对比分析了javascript中call,apply,bind三个函数的用法,非常的详细,这里推荐给小伙伴们.   关于call,apply,bind这三个函数的用法,是学习java ...

  6. JS中isPrototypeOf 和hasOwnProperty 的区别 ------- js使用in和hasOwnProperty获取对象属性的区别

    JS中isPrototypeOf 和hasOwnProperty 的区别 1.isPrototypeOf isPrototypeOf是用来判断指定对象object1是否存在于另一个对象object2的 ...

  7. (网页)Angular.js 中 copy 赋值与 = 赋值 区别

    转自st.gg Angular.js 中 copy 赋值与 = 赋值 区别 为什么用 $scope.user = $scope.master; $scope.master 会跟着 $scope.use ...

  8. js中的substr和substring区别

    js中的substr和substring区别 Substring: 该方法可以有一个参数也可以有两个参数. (1)  一个参数: 示例: var str=“Olive”: str.substring( ...

  9. JS 中的require 和 import 区别整理

    ES6标准发布后,module成为标准,标准的使用是以export指令导出接口,以import引入模块,但是在我们一贯的node模块中,我们采用的是CommonJS规范,使用require引入模块,使 ...

随机推荐

  1. P1026 统计单词个数 (动态规划)

    题目描述 给出一个长度不超过200的由小写英文字母组成的字母串(约定;该字串以每行20个字母的方式输入,且保证每行一定为20个).要求将此字母串分成k份(1<k<=40),且每份中包含的单 ...

  2. cf493E Vasya and Polynomial

    Vasya is studying in the last class of school and soon he will take exams. He decided to study polyn ...

  3. Spring-IOC源码解读2.1-BeanDefinition的Resource定位

    Spring通过ResourceLoader来处理得到的Resource.在前面我们知道容器初始化是以refresh()方法为入口的,内部的实现首先准备上下文,然后通过obtainFreshBeanF ...

  4. centos7 下修改网络配置

    修改ip地址 编辑 /etc/sysconfig/network-scripts/ifcfg-eth0 TYPE=Ethernet BOOTPROTO=static 静态ip DEFROUTE=yes ...

  5. 陌上花开(bzoj 3262)

    Description 有n朵花,每朵花有三个属性:花形(s).颜色(c).气味(m),又三个整数表示.现要对每朵花评级,一朵花的级别是它拥有的美丽能超过的花的数量.定义一朵花A比另一朵花B要美丽,当 ...

  6. 洛谷 P 3371 单元最短路

    题目描述 如题,给出一个有向图,请输出从某一点出发到所有点的最短路径长度. 输入输出格式 输入格式: 第一行包含三个整数N.M.S,分别表示点的个数.有向边的个数.出发点的编号. 接下来M行每行包含三 ...

  7. MySQL中blob 与 text

    BLOB是一个二进制大对象,可以容纳可变数量的数据.有4种BLOB类型:TINYBLOB.BLOB.MEDIUMBLOB和LONGBLOB.它们只是可容纳值的最大长度不同. 有4种TEXT类型:TIN ...

  8. 在 IntelliJ IDEA 中为自己设计的类库生成 JavaDoc

    因为某个项目需要,为团队其他兄弟姐妹开发了一个 XML 分析处理器,并将其设计为一个类库,提供相应的 API 接口.为了方便大家的使用,需要生成对应的 JavaDoc 帮助文档,就像 JavaSE 标 ...

  9. hdu4888 多校B 最大流以及最大流唯一判断+输出方案

    题意,给一个矩阵,告诉你每行和.每列和,并且限制所填数不大于k,问矩阵是否唯一. 经典建图不说了,第一次遇到判断最大流唯一性的,学习了:用dfs来判断残网中是否还存在环,若存在,则表明绕这个环走一圈, ...

  10. luogu P1351 联合权值

    题目描述 无向连通图G 有n 个点,n - 1 条边.点从1 到n 依次编号,编号为 i 的点的权值为W i ,每条边的长度均为1 .图上两点( u , v ) 的距离定义为u 点到v 点的最短距离. ...