原生js中call、apply、bind的区别和相同点

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

结论：

相同点：

1、都是js原生方法，改变函数中的this指向

2、都可以传递参数，第一个参数为把this指向到哪里去，即目标元素

不同点：

1、call和apply都是主动触发，绑定后自动执行，bind为手动绑定，不自动执行。

2、call和apply在传递参数的方式上有所不同，call为直接传参,apply的参数需要放在数组中

代码：

<script type="text/javascript">

    var person = {name:'小明'}

    person.say = function(){

        console.log(this.name+'给范冰打了一晚上电话')

    }

    person.say();

    var person2 = {name:'阿华'}

    person.say.call(person2) //把this指向改为person2,且主动执行了say方法，apply方法用法一样

</script>

传参时：

<script type="text/javascript">

    var person = {name:'小明'}

    person.say = function(tar,time){

        console.log(this.name+'给'+tar+'打了'+time+'电话')

    }

    person.say('特朗普','1小时');

    var penson2 = {name:'阿华'}

    person.say.call(penson2,'奥巴马','2小时')    //call传递参数时，直接传参

    //person.say.apply(penson2,['奥巴马','2小时'])  //apply传递参数时，用数组传参

</script>

bind用法：

<script type="text/javascript">

    var person = {name:'小明'}

    person.say = function(tar,time){

        setTimeout(function(){

            console.log(this.name)

        }.bind(person), 1000) //手动在函数后面绑定this指向，1秒后打印小明

    }

    person.say()

</script>

如此，打完收工！