JS中apply、call和bind的共同点和区别是什么?

apply、call和bind的共同点,作用?

  • 他们都可以去调用别人的方法
  • 他们都可以改变this的指向
  • 他们的第一个参数都是this对象的指向
  • 后续都可以进行参数的传递

apply、call和bind的区别?

  1. 调用的呈现方式不一样

让我们一起先来看下代码

class Person{
name="美女"
say(){
console.log(this.name)
}}

//1.创建一个p1实例
let p1=new Person()

//2.创建一个对象
let obj={
name:'屌丝'
}

//3.借用美女的方法,喊上屌丝的名字
p1.bind(obj)()

  • bind直接调用的时候,不会执行方法,而是会返回一个新的函数,新的函数里面有bind调用的方法
//如果上面那个地方看不懂,我把它解构一下
let newfunc=p1.bind(obj)
newfunc()

那我们继续来看call和apply的调用

p1.say.call(obj)
p1.say.apply(obj)

  • call 和apply 调用的时候是一样的 既改变了this的指向,也会直接调用方法
  1. 传递参数的写法不一样
  • bind可以直接在新构建的函数里面传递参数
  • 也可以在传递的第二个参数里面写参数
 class Person {
        name = "美女"
        say(b) {
            console.log(this.name)
            console.log(b);
        }
    }
    let p1 = new Person()

    let obj = {
        name: '屌丝'
    }
	//这是第一种方法
    p1.say.bind(obj)("abc")
    
	//这是第二种方法
	//  p1.say.bind(obj, "abc")()

call 直接在第二个参数里面写需要传递的参数

    p1.say.call(obj,"abc")

apply需要将传递的参数放在一个数组里面

    p1.say.apply(obj,["abc"])

如果没有放在数组里面,就会出现这样子的报错
Uncaught TypeError: CreateListFromArrayLike called on non-object
在这里插入图片描述

小结

不同点bindValueValue
调用的呈现方式不一样调用之后不会直接执行方法,而是重新构建出一个新的函数,在新函数里面执行方法直接调用直接调用
传递参数的写法不一样p1.say.bind(obj, “abc”)() // p1.say.bind(obj, “abc”)()p1.say.call(obj,“abc”)p1.say.apply(obj,[“abc”])
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值