其实是一个很简单的东西,认真看看几分钟就从一脸懵B到完全理解!
在讲解用法之前,我们先来看看下面两段代码:
<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变量的值 ;
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>
运行结果:
首先,bind方法会返回一个函数,所以直接使用时需要多加一个()进行调用
从上面的结果中不难看出:
call 、apply、bind 这三个函数:
第一个参数都是 this 的指向对象(第一个参数没有时,指向全局window)
第二个参数差别就来了:
1.call 的参数是直接放进去的,第二第三一直到第 n 个参数全部都是用逗号隔开。
2.apply 除了第一个参数外,所有参数都必须放在一个数组里面进行传参 。
3.bind 除了返回的是函数以外,它的传参和 call 一样。