javascript中的每一个Function对象都有一个apply()和一个call()方法,它们的语法分别是:

/*apply()方法*/

function.apply(thisObj[, argArray])

apply: 调用一个对象的一个方法,用另一个对象替换当前对象。 例如: B.apply(A,arguments); 即A对象应用B对象的方法。

/*call()方法*/

function.call(thisObj[, arg1[, arg2[, [,...argN]]]]);

call: 调用一个对象的一个方法,用另一个对象替换当前对象。 例如:B.call(A,args1,args2);即A对象调用B对象的方法。

相同点:

1.方法的含义是一样的,功能自然也是一样的;

2.第一个参数的作用是一样的。

不同点:两者传入的列表形式不一样

1.call可以传入多个参数

2.apply只能传入两个参数,所以器第二个参数往往是作为数组的形式传入。

意义:

实现(多重)继承

实例代码:

function sum(num1,num2){

return num1+num2

}

function sub(num1,num2){

return num1-num2

}

var a1 = sum.apply(sub,[4,2])  // sub调用sum内的方法

console.log(a1) // 6

var a2 = sub.apply(sum,[4,2])  // sum调用sub内部的方法

console.log(a2) // 2

var c1 = sum.call(sub,4,2)      // sub调用sum的方法

console.log(c1) // 6

var c2 = sub.call(sum,4,2)  // sum调用sub内部的方法

console.log(c2) // 2

window.color = 'red';

var o = {color:'blue'}

function sayColor(){

console.log(this)

console.log(this.color)

}

console.log(this) // window

sayColor.call(this)    // window    red

sayColor.call(window)   // window    red

sayColor.call(o)        // {color:'blue'}  blue

sayColor.apply(this) // window red

sayColor.apply(window) // window    red

sayColor.apply(o)        // {color:'blue'}  blue

实现继承

function Animal(name){

this.name = name

this.showName = function(){

console.log(this.name)

}

}

function Cat(name){

Animal.apply(this,[name])

}

var cat = new Cat("猫")

cat.showName() //猫

// 多继承

function Sum(){

this.sumadd = function(a,b){

console.log(a+b)

}

}

function Sub(){

this.subadd = function(a,b){

console.log(a-b)

}

}

function Js(){

console.log(this)            //Js {}

Sum.apply(this)

Sub.apply(this)

}

var a = new Js();

a.sumadd(3,1) //4

a.subadd(3,1) //2

/*bind()方法*/

bind() 这个方法会创建一个函数实例,其this值会被绑定到传给bind()函数的值

var objSayColor = sayColor.bind(o) //{color:'blue'}

objSayColor() // blue

var a = {

user: 'skl',

}

var b = function(e,d,f){

console.log(this.user)  //skl

console.log(e,d,f)  //10,1,2

};

var c = b.bind(a,10)

c(1,2)

总结:call和apply都是改变上下文中的this并立即执行这个函数,bind方法可以让对应的函数想什么时候调就什么时候调用,并且可以将参数在执行的时候添加,这是它们的区别,根据自己的实际情况来选择使用。

call(),apply()和bind()的区别的更多相关文章

  1. JS 中的this指向问题和call、apply、bind的区别

    this的指向问题 一般情况下this对象指向调用函数的对象,全局环境中执行函数this对象指向window. function a(){ console.log(this); //输出函数a中的th ...

  2. this+call、apply、bind的区别与使用

    http://www.ruanyifeng.com/blog/2018/06/javascript-this.html https://segmentfault.com/a/1190000018017 ...

  3. 改变this指针的apply,call,bind的区别

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

  4. js中call、apply和bind的区别

    在JS中,这三者都是用来改变函数的this对象的指向的,他们有什么样的区别呢.在说区别之前还是先总结一下三者的相似之处:1.都是用来改变函数的this对象的指向的.2.第一个参数都是this要指向的对 ...

  5. call和apply和bind的区别

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

  6. 有关call和apply、bind的区别及this指向问题

    call和apply都是解决this指向问题的方法,唯一的区别是apply传入的参数除了其指定的this对象之外的参数是一个数组,数组中的值会作为参数按照顺序传入到this指定的对象中. bind是解 ...

  7. Javascript中call,apply,bind的区别

    一.探索call方法原理 Function.prototype.call = function(obj) { // 1.让fn中的this指向obj // eval(this.toString().r ...

  8. JS中call()和apply()以及bind()的区别

    一.方法定义: apply:调用一个对象的一个方法,用另一个对象替换当前对象.例如:B.apply(A, arguments);即A对象应用B对象的方法. call:调用一个对象的一个方法,用另一个对 ...

  9. 超容易理解的call()、apply()、bind()的区别

    call().apply().bind()是用来改变this的指向的. 一 举个例子 一个叫喵喵的猫喜欢吃鱼,一个叫汪汪的小狗喜欢啃骨头,用代码实现如下: 有一天,小狗汪汪和喵喵共进午餐的时候,汪汪说 ...

  10. apply,all,bind的区别

    这三个都是用来改变this指向的 call() 和apply()的第一个参数相同,就是指定的对象.这个对象就是该函数的执行上下文.call()和apply()的区别就在于,两者接收的参数不一样.cal ...

随机推荐

  1. JWT 加密

    什么是JWT Json web token (JWT), 是为了在网络应用环境间传递声明而执行的一种基于JSON的开放标准((RFC 7519).该token被设计为紧凑且安全的,特别适用于分布式站点 ...

  2. GWAS后续分析:LocusZoom图的绘制

    LocusZoom图几乎是GWAS文章的必备图形之一,其主要作用是可以快速可视化GWAS找出来的信号在基因组的具体信息:比如周围有没有高度连锁的位点,高度连锁的位点是否也显著. 下面是locuszoo ...

  3. QString与LPWSTR之间的转换;

    QString 转换成 LPWSTR LPWSTR lpStr = (LPWSTR) QString("nihao").toStdWString().c_str();

  4. markdown 转义字符

    \\ 反斜杠 \` 反引号 \* 星号 \_ 下划线 \{\} 大括号 \[\] 中括号 \(\) 小括号 \# 井号 \+ 加号 \- 减号 \. 英文句号 \! 感叹号

  5. jQuery使用():Callbacks回调函数列表之异步编程(含源码分析)

    Callbacks的基本功能回调函数缓存与调用 特定需求模式的Callbacks Callbacks的模拟源码 一.Callbacks的基本功能回调函数缓存与调用 Callbacks即回调函数集合,在 ...

  6. 如何安装 PhoneGap / Cordova (for Win10)

    最近需要配置 PhoneGap / Cordova 环境,折腾了一阵子,写篇博客 Mark 一下整个过程. 具体参照了:http://www.assortedgarbage.com/apigee/ 以 ...

  7. H5_0004:JS设置循环debugger的方法

    在HTML页面加上如下代码,则PC打开控制台后,就会循环debugger,防止调试代码. <script>eval(function (p, a, c, k, e, r) { e = fu ...

  8. AngularJs的基本使用(一)

    AngularJS 指令 AngularJS 通过 ng-directives 扩展了 HTML,AngularJS 指令是以 ng 作为前缀的 HTML 属性. ng-app 指令定义一个 Angu ...

  9. 使用以太网通信方式刷新AB PLC固件

    本文详细介绍如何使用以太网通信方式刷新AB PLC固件 一.准备工作 1.  AB PLC控制器一台,本文以5069-L330ER为例,将其通电: 2.  5069-L330ER的IP已设置为172. ...

  10. vue-router.esm.js:1905 TypeError: Cannot convert undefined or null to object

    环境:vue+vuex+element 报错原因 ...mapState('isDialNumber') mapState如果传递一个参数,参数必须是数组 ...mapState(['isDialNu ...