JavaScript 中 call()、apply()、bind() 的用法,及区别

本文主要是介绍JavaScript 中 call()、apply()、bind() 的用法,及区别，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

JavaScript 中 call、apply、bind 的用法

• • • 1.例子：
    • 2.call(),apply(),bind()的用法
    • 3.分析：

其实是一个很简单的东西，认真看看几分钟就从一脸懵B到完全理解！

在讲解用法之前，我们先来看看下面两段代码：

1.例子：

<script>
    var name = "小明",
        age = 20;
    var obj = {
        name: "张三",
        age: 18,
        fn: function () {
            console.log(this.name); 
            console.log(this.age); 
        }
    }
    console.log(obj.name);//张三
    console.log(obj.age);//18
    obj.fn();//张三 18
</script>

<script>
var name="小红"
    function show(){
        console.log(this.name);
    }
    console.log(name);//小红
    show()  //小红
    window.show() //小红
</script>

我们比较一下这两段代码this的区别：
  第一段代码打印里面的 this 指向的是 obj对象，所以打印出来的是obj内的name和age属性值。
  第二段代码show方法是由window调用的，所以this指向window，name的值就是window里面name变量的值 ；

2.call(),apply(),bind()的用法

  call()、apply()、bind() 都是用来重新定义 this 指向的！

<script>
    var name = "小明",
        age = 20;
    var obj1 = {
        name: "张三",
        age: 18,
        fn: function (city,love) {
            console.log(this.name,this.age,city,love);
        }
    }
    var obj2 = {
        name: "鲲鲲",
        age: 16
    }
    // //没有使用call,apply,bind之前
    console.log(obj1.name,obj1.age);//张三  18
    obj1.fn();//张三 18 undefined undefined

    //使用call,apply,bind之后
    //1.不加参数   call,apply没有返回值,bind返回一个函数
    console.log(obj1.fn.call());//小明 20 undefined undefined
    console.log(obj1.fn.apply());//小明 20 undefined undefined
    console.log(obj1.fn.bind());// fun
    console.log(obj1.fn.bind()());//小明 20 undefined undefined
    //2.加参数
    obj1.fn.call(obj2)//鲲鲲 16 undefined undefined
    obj1.fn.apply(obj2)//鲲鲲 16 undefined undefined
    obj1.fn.bind(obj2)()//鲲鲲 16 undefined undefined
    obj1.fn.call(obj2,"北京","打篮球")//鲲鲲 16 北京 打篮球
    obj1.fn.apply(obj2,["北京","打篮球"])//鲲鲲 16 北京 打篮球
    obj1.fn.bind(obj2,"北京","打篮球")()//鲲鲲 16 北京 打篮球
</script>

运行结果：

3.分析：

  首先，bind方法会返回一个函数，所以直接使用时需要多加一个()进行调用

从上面的结果中不难看出:

call 、apply、bind 这三个函数：
  第一个参数都是 this 的指向对象（第一个参数没有时，指向全局window）
  第二个参数差别就来了：

    1.call 的参数是直接放进去的，第二第三一直到第 n 个参数全部都是用逗号隔开。
    2.apply 除了第一个参数外，所有参数都必须放在一个数组里面进行传参 。
    3.bind 除了返回的是函数以外，它的传参和 call 一样。

这篇关于JavaScript 中 call()、apply()、bind() 的用法,及区别的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！