zoukankan      html  css  js  c++  java
  • 原生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>

    如此,打完收工!

  • 相关阅读:
    如何选择Linux操作系统版本?
    js+html实现玫瑰花绽放
    Linux系统目录结构
    laravel5.6操作数据curd写法(查询构建器)
    laravel5.6 常规框架部署和配置文件说明
    PHP读取XML文件数据获取节点值
    Fiddler正则匹配调试接口示例
    php常用端口号
    php heredoc的用法详解
    oracle表空间操作
  • 原文地址:https://www.cnblogs.com/javascripter/p/10194833.html
Copyright © 2011-2022 走看看