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. SKU : Stock Keeping Unit

    Stock Keeping Unit  is a number assigned to a product by a retail store to identify the price, produ ...

  2. python正则表达式 - re

    1,匹配符号 任意字符 . : 任意字符,除了\n,flags设置为DOTALL(S)可以让.匹配\n []字符集合,字符组:规范/元字符不同于正则式主体 [0-9] : 数字 [A-Z] : 大写字 ...

  3. 2 Class类

     在程序运行期间,Java运行时系统始终为所有的对象维护一个被称为运行时地类型标识.这个信息跟踪着每个对象所属地类.虚拟机 利用运行时类型信息选择相应地方法执行. 然而,可以通过专门地Java类访问这 ...

  4. vue-cli3.0怎么修改端口?

    在根目录新建 vue.config.js 文件 module.exports = { devServer: { port: 8888, // 端口 }, lintOnSave: false // 取消 ...

  5. 5、继承(extends)

    继承主要目的是提高代码的复用性,但是只有在类与类之间有所属关系的时候才能继承,不能为了获取其他类的功能而继承,Java中只有单继承,不支持多继承,但可以多层继承 当父类中定义了相同的功能,内容不同时, ...

  6. javascript高级程序设计第3版——第12章 DOM2与DOM3

    12章——DOM2与DOM3 为了增强D0M1,DOM级规范定义了一些模块. DOM2核心:为不同的DOM类型引入了一些与XML命名空间有关的方法,还定义了以编程方式创建Document实例的方法: ...

  7. 【性能测试】LoadRunner11安装(包含破解、汉化)

    LoadRunner安装(包含破解.汉化) 安装LoadRunner a.以解压包的方式打开[性能测试工具LR11.00].loadrunner-11.iso文件,运行“setup.ext”(花费时间 ...

  8. 信用卡欺诈数据的分析-excel篇

    本篇文章为大家提供了数据集分析的思路和步骤,同时也分享了自己的经验. 一.背景 反欺诈是一项识别服务,是对交易诈骗.网络诈骗.电话诈骗.盗卡盗号等行为的一项风险识别.其核心是通过大数据的收集.分析和处 ...

  9. As The End of The Year Approaches,The Weighted Blanket Season Begins

    Weight blankets are well known for anxiety, insomnia, depression and so on. It is physical therapy, ...

  10. JS-1

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...