美文网首页web前端
JS-call、apply、bind用法

JS-call、apply、bind用法

作者: CNSTT | 来源:发表于2019-03-28 10:54 被阅读16次

一、call&apply与bind区别

call和apply方法对函数直接调用
bind方法后面还需要()来进行调用才可以

<!DOCTYPE html>
<html lang="cn">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> 
    <title>测试页面</title>
</head>
<body>
    <script src="js/jquery.min.js"></script>
    <script type="text/javascript">
        var zs = {
            name: '张三',
            age: 24,
            say: function () {
                console.log(`姓名: ${this.name}, 年龄: ${this.age}`)
            }
        }
        var ls = {
            name: '李四',
            age: 18
        }
        zs.say()
        zs.say.apply(ls)
        zs.say.call(ls)
        zs.say.bind(ls)()
    </script>  
</body>
</html>
输出结果.png

二、call与apply区别

call 传参参数一一对应
apply 第二个参数是一个数组
bind 有两种书写方式

<!DOCTYPE html>
<html lang="cn">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> 
    <title>测试页面</title>
</head>
<body>
    <script src="js/jquery.min.js"></script>
    <script type="text/javascript">
        var zs = {
            name: '张三',
            age: 24,
            say: function (gender, city) {
                console.log(`姓名: ${this.name}, 年龄: ${this.age}, 性别: ${gender}, 城市: ${city}`)
            }
        }
        var ls = {
            name: '李四',
            age: 18
        }
        zs.say('男', '上海')
        zs.say.call(ls, '女', '北京')
        zs.say.apply(ls, ['女', '北京'])
        zs.say.bind(ls)('女', '北京')
        zs.say.bind(ls, '女', '北京')()        
    </script>  
</body>
</html>
输出结果2.png

相关文章

网友评论

    本文标题:JS-call、apply、bind用法

    本文链接:https://www.haomeiwen.com/subject/pwpfbqtx.html