call方法:

语法:call(thisObj,'',''........)

定义:调用一个对象的一个方法,以另一个对象替换当前对象

说明:call方法可以用来代替另一个对象调用一个方法。call方法可将一个函数的对象上下文初始的上下文改变为由thisObj指定的新对象,如果没有提供thisObj参数,那么global对象被用做thisObj

apply方法:

语法:apply(thisObj,['','',''....])

定义:应用某一个对象的方法,用另一个对象替换当前对象

如果argArray不是一个有效的数组或者不是arguments对象,那么将导致一个TypeError.如果没有提供argArray和thisObj任何一个参数,那么Global对象将用做thisObj,并且无法被传递任何参数

相同之处:

1、都是用来改变函数的this对象的指向
2、第一个参数都是this要指向的对象
3、都可以利用后续参数传参 不同之处:
1、call和apply都是对函数的直接调用,而bind方法返回的仍然是一个函数,因此后面需要加上()来进行调用才可以

案例一:bind与call、apply的区别

var a={
name:'阿姨请别把您闺女介绍给我',
sex:'男',
age:'24',
say:function(){
console.log(this.name+',今年'+this.age+'岁,性别'+this.sex)
}
} var b={
name:'就要把闺女介绍给你',
sex:'女',
age:'18'
}
a.say();//阿姨请别把您闺女介绍给我,今年24岁了,性别男 那么我们想一下如何让b用say的方法显示数据呢? 用call方法:a.say.call(b) 用apply方法:a.say.apply(b) 用bind方法:a.say.bind(b)()

案例二:call与apply的区别

var a={
name:'阿姨请不要把您闺女介绍给我',
sex:'男',
age:'18',
say:function(school,grade){
console.log(this.name+'性别'+this.sex+'年龄'+this.age+school+grade)
}
} var b={
name:'就喜欢把闺女介绍给你',
sex:'女',
age:'18'
} 现在我们看say方法中多了两个参数,我们通过call和apply的参数进行传参 用call方法:a.say.call(b,'清华','三年级') 用apply方法:a.say.apply(b,['清华','六年级']) call后面的参数与say方法中是一一对应的,而apply第二个参数是一个数组 用bind方法:a.say.bind(b,'清华','三年级')
但是由于bind返回的仍然是一个函数,所以我们可以在调用的时候在进行传参
a.say.bind(b)('清华','三年级')
由于IE6-IE8不支持该方法,所以若想在不同浏览器中使用所以我们要做下处理
兼容处理bind方式
if(!Function.prototype.bind){
Function.prototype.bind=function(obj){
var This=this;
var args=arguments;
return function(){
This.apply(obj,Array.prototype.slice.call(args,1))
}
}
}

call Apply bind详解的更多相关文章

  1. 011-Scala中的apply实战详解

    011-Scala中的apply实战详解 object中的apply方法 class中的apply方法 使用方法 apply方法可以应用在类或者Object对象中 class类 必须要创建实例化的类对 ...

  2. Js apply 方法 详解

    Js apply方法详解 我在一开始看到JavaScript的函数apply和call时,非常的模糊,看也看不懂,最近在网上看到一些文章对apply方法和call的一些示例,总算是看的有点眉目了,在这 ...

  3. Js apply()使用详解

    Js apply方法详解 我在一开始看到javascript的函数apply和call时,非常的模糊,看也看不懂,最近在网上看到一些文章对apply方法和call的一些示例,总算是看的有点眉目了,在这 ...

  4. angularJS中$apply()方法详解

    这篇文章主要介绍了angularJS中$apply()方法详解,需要的朋友可以参考下   对于一个在前端属于纯新手的我来说,Javascript都还是一知半解,要想直接上手angular JS,遇到的 ...

  5. Js apply方法详解,及其apply()方法的妙用

    Js apply方法详解 我在一开始看到javascript的函数apply和call时,非常的模糊,看也看不懂,最近在网上看到一些文章对apply方法和call的一些示例,总算是看的有点眉目了,在这 ...

  6. 原生JS:Function对象(apply、call、bind)详解

    Function对象(apply.call.bind) 原创文章,转摘请注明出处:苏福:http://www.cnblogs.com/susufufu/p/5850180.html 本文参考MDN做的 ...

  7. javascript中的apply,call,bind详解

    apply.call 在 javascript 中,call 和 apply 都是为了改变某个函数运行时的上下文(context)而存在的,换句话说,就是为了改变函数体内部 this 的指向. Jav ...

  8. call,apply和bind详解

    一.call和apply call和apply其实是同一个东西,区别只有参数不同,call是apply的语法糖,所以就放在一起说了,这两个方法都是定义在函数对象的原型上的(Function.proto ...

  9. call,apply,bind详解

    为什么要改变this指向? 我们知道bind,call,apply的作用都是用来改变this指向的,那为什么要改变this指向呢?请看下面的例子: var name="lucy"; ...

随机推荐

  1. HTTP请求头和响应头部包括的信息有哪些?(转)

    转载自:https://www.cnblogs.com/hxc555/p/6506154.html 每个HTTP请求和响应都会带有相应的头部信息.默认情况下,在发送XHR请求的同时,还会发送下列头部信 ...

  2. CSS清除浮动的一种简便的方法

    在使用的浮动的元素的父元素添加该CSS样式 .clear{ overflow: auto; }

  3. vue使用webapck的最基本最简单的开发环境配置

    这个配置生成出来的代码只能支持ES6的浏览器下正常显示. npm init -y npm install vue-loader vue-template-compiler vue-style-load ...

  4. Cache Line

    转载: https://yq.aliyun.com/articles/46550

  5. 关于java类加载机制的一些理解

    关于java的类加载机制加载顺序,这个东西可以说是基础的东西,不过很遗憾这方面很多人也都不是很在意,比如我自己,最近上班闲下来了,就开始看一些博客文章了,今天恰好被一篇博文给吸引了,并且他的示例题一开 ...

  6. XV Open Cup named after E.V. Pankratiev. GP of Central Europe (AMPPZ-2014)--B.Petrol

    多源最短路+并查集 #include <bits/stdc++.h> using namespace std; #define rep(i, j, k) for (int i = int( ...

  7. spring cloud(五)熔断监控Hystrix Dashboard和Turbine

    Hystrix-dashboard是一款针对Hystrix进行实时监控的工具,通过Hystrix Dashboard我们可以在直观地看到各Hystrix Command的请求响应时间, 请求成功率等数 ...

  8. mac电脑上不能用移动硬盘的原因和方法

    原因: 一般性是因为这个移动硬盘的格式是 NTFS 格式的,对于这种格式的磁盘格式,在苹果系统中却是不支持往硬盘里写入数据的 解决方法: 方法一: ntfs的格式分区,这种格式分区与我们的苹果电脑自身 ...

  9. css选择器以及使用场景

    1.选择器以及使用场景 id选择器:#header{} 类选择器:.header{} 元素选择器:div{} 子选择器:ul > li{} 后代选择器:div p{} 伪类选择器:a:hover ...

  10. Java开源框架知识整理

    1.Spring的了解     Spring是一个轻量级的IOC/DI和AOP容器的开源框架.可以实现Java模块化开发,贯穿表现层,业务层,逻辑层,实现各层之间的解耦合关系.     IOC,控制反 ...