JavaScript 中call()、 apply()、 bind()改变this指向理解

  最近开发的过程中遇到了this指向问题,首先想到的是call()、apply()、bind()三个方法,有些时候这三个方法确实是十分重要,现在我们就把他们的使用方法及异同点讲解一下。

  1、每个函数都包含三个非继承而来的方法,call()方法、apply()方法和bind()方法

      2、相同点:三者的作用都是一样的,都是在特定作用中调用函数,等于设置函数体内this的值,以扩充函数赖以运行的作用域。

  一般来说,this总是指向调用某个方法的对象,但是使用call()、apply()和bind()方法时,就会改变this的指向。

  3、不同点:

    1)、bind()方法会返回一个函数,将接受多个参数的函数变换成接受一个单一参数。

      注意:bind(thisArg[, arg1[, arg2[, ...]]]), 将接受多个参数的函数变换成接受一个单一参数。bind()方法所返回的函数的length(形参数量)等于原函数的形参数量减去传入bind()方法中的实参数量(第一个参数以后的所有参数),因为传入bind中的实参都

      会绑定到原函数的形参。

    2)、apply()方法 接收两个参数,一个是函数运行的作用域(this),另一个是参数数组。

      注意:apply([thisObj [,argArray] ]);,调用一个对象的一个方法,2另一个对象替换当前对象。如果argArray不是一个有效数组或不是arguments对象,那么将导致一个TypeError,如果没有提供argArray和thisObj任何一个参数,那么Global对象

      将用作thisObj。

    3)、call()方法 第一个参数和apply()方法的一样,但是传递给函数的参数必须列举出来。

      注意:call([thisObject[,arg1 [,arg2 [,...,argn]]]]);,应用某一对象的一个方法,用另一个对象替换当前对象。call方法可以用来代替另一个对象调用一个方法,call方法可以将一个函数的对象上下文从初始的上下文改变为thisObj指定的新对象,如果没有

      提供thisObj参数,那么Global对象被用于thisObj。

   话不多说,上代码:

  

 1 //例1
 2     <script>
 3         window.color = ‘red‘;
 4         document.color = ‘yellow‘;
 5
 6         var s1 = {color: ‘blue‘ };
 7         function changeColor(){
 8             console.log(this.color);
 9         }
10
11         changeColor.call();         //red (默认传递参数)
12         changeColor.call(window);   //red
13         changeColor.call(document); //yellow
14         changeColor.call(this);     //red
15         changeColor.call(s1);       //blue
16
17     </script>
18
19     //例2
20     var Pet = {
21         words : ‘...‘,
22         speak : function (say) {
23             console.log(say + ‘‘+ this.words)
24         }
25     }
26     Pet.speak(‘Speak‘); // 结果:Speak...
27
28     var Dog = {
29         words:‘Wang‘
30     }
31
32     //将this的指向改变成了Dog
33     Pet.speak.call(Dog, ‘Speak‘); //结果: SpeakWang

call的用例代码

 1 //例1
 2     <script>
 3         window.number = ‘one‘;
 4         document.number = ‘two‘;
 5
 6         var s1 = {number: ‘three‘ };
 7         function changeColor(){
 8             console.log(this.number);
 9         }
10
11         changeColor.apply();         //one (默认传参)
12         changeColor.apply(window);   //one
13         changeColor.apply(document); //two
14         changeColor.apply(this);     //one
15         changeColor.apply(s1);       //three
16
17     </script>
18
19     //例2
20     function Pet(words){
21         this.words = words;
22         this.speak = function () {
23             console.log( this.words)
24         }
25     }
26     function Dog(words){
27         //Pet.call(this, words); //结果: Wang
28        Pet.apply(this, arguments); //结果: Wang
29     }
30     var dog = new Dog(‘Wang‘);
31     dog.speak();

apply的用例代码

 1 var test = {
 2     a : 5,
 3     b : 6,
 4     sum : function (a,b) {
 5         var self = this;
 6         function getA() {
 7             return self.a;
 8         }
 9         function getB(){
10             return self.b;
11         }
12         alert(a);
13         alert(b);
14         return getA() + getB();
15     }
16 }
17 var obj = {a:2,b:3};
18 alert(test.sum.call(obj,4,5));      // 调用时self = this = obj,alert顺序4,5,5
19 alert(test.sum.apply(obj,[6,7]));   // 调用时self = this = obj,alert顺序6,7,5
20 var sum = test.sum.bind(obj,8);     // 此处返回一个只有一个参数的函数sum(b)
21 alert(sum(9));                      // 调用时self = this = obj,alert顺序8,9,5

bind的用例代码

   

  总结:

    1、call 、bind 、 apply 这三个函数的第一个参数都是 this 的指向对象

    2、call的参数是直接放进去的,第二第三第n个参数全都用逗号分隔

    3、apply的所有参数都必须放在一个数组里面传进去

    4、bind除了返回是函数以外,它的参数传递方式和call 一样。    

    当然,三者的参数不限定是string类型,允许是各种类型,包括函数 、 object 等等!

原文地址:https://www.cnblogs.com/hexiaobao/p/11578388.html

时间: 2024-10-13 16:50:56

JavaScript 中call()、 apply()、 bind()改变this指向理解的相关文章

javascript中call,apply,bind的用法对比分析

这篇文章主要给大家对比分析了javascript中call,apply,bind三个函数的用法,非常的详细,这里推荐给小伙伴们. 关于call,apply,bind这三个函数的用法,是学习javascript这门语言无法越过的知识点.下边我就来好好总结一下它们三者各自的用法,及常见的应用场景. 首先看call这个函数,可以理解成"借用“,"请求".想像一下如下的情景:你孤单一人漂泊在外,有急事想往家里打电话,可是很不巧,手机欠费了,或者没电了,或者掉坑里了,总之你的手机就是用

JavaScript中call,apply,bind方法的总结

why?call,apply,bind干什么的?为什么要学这个? 一般用来指定this的环境,在没有学之前,通常会有这些问题. var a = { user:"追梦子", fn:function(){ console.log(this.user); } } var b = a.fn; b(); //undefined 我们是想打印对象a里面的user却打印出来undefined是怎么回事呢?如果我们直接执行a.fn()是可以的. var a = { user:"追梦子&quo

JavaScript中call,apply,bind方法

why?call,apply,bind干什么的?为什么要学这个? 一般用来指定this的环境,在没有学之前,通常会有这些问题. var a = { user:"追梦子", fn:function(){ console.log(this.user); } } var b = a.fn; b(); //undefined 我们是想打印对象a里面的user却打印出来undefined是怎么回事呢?如果我们直接执行a.fn()是可以的. var a = { user:"追梦子&quo

javascript中call,apply,bind的区别

在JS中,这三者都是用来改变函数的this对象的指向的,他们有什么样的区别呢. 在说区别之前还是先总结一下三者的相似之处: 1.都是用来改变函数的this对象的指向的.2.第一个参数都是this要指向的对象.3.都可以利用后续参数传参.那么他们的区别在哪里的,先看一个例子. var xw = { name : "小王", gender : "男", age : 24, say : function() { alert(this.name + " , &qu

JavaScript中的apply()方法和call()方法使用介绍

javascript中apply和call方法的作用及区别说明 call和apply的说明 call,apply都属于Function.prototype的一个方法,它是JavaScript引擎内在实现的,因为属于Function.prototype,所以每个Function对象实例(就是每个方法)都有call,apply属性.既然作为方法的属性,那它们的使用就当然是针对方法的了,这两个方法是容易混淆的,因为它们的作用一样,只是使用方式不同. 语法:foo.call(this, arg1,arg

JavaScript中的apply()、call()、bind()

JavaScript 中 apply.call.bind方法的异同: 相同点 都是用来动态指定函数 this 对象的指向 第一个参数都是 this 要指向的对象,也就是要指定的上下文 都可以利用后续参数传参 不同点 传参形式不同:apply 方法接受的是一个参数数组,call 和 bind 方法接受的是参数列表 执行方式不同:apply.call 会立即执行,而 bind 方法会创建一个新函数,需要单独调用执行 apply() 的使用 语法:func.apply(thisArg, [argsAr

JavaScript 之 call apply bind

关键字 this 绑定的方法 this的动态切换,固然为JavaScript创造了巨大的灵活性,但也使得编程变得困难和模糊.有时,需要把this固定下来,避免出现意想不到的情况.JavaScript提供了call.apply.bind这三个方法,来切换/固定this的指向. 1. apply(thisArg[,args]) call(thisArgs [,args...]) 后面跟的是若干个参数列表 而 apply接收的是参数数组. thisArgs指定了函数在运行期的调用者,也就是函数中的th

JS中call,apply,bind方法的总结

why?call,apply,bind干什么的?为什么要学这个? 一般用来指定this的环境,在没有学之前,通常会有这些问题. var a = { user: "小马扎", fn: function(){ console.log(this.user); } } var b = a.fn; b(); // undefined 我们是想打印对象a里面的user却打印出来undefined是怎么回事呢?如果我们直接执行a.fn()是可以的. var a = { user: "小马扎

JavaScript中的apply和call函数详解

第一次翻译技术文章,见笑了! 翻译原文:Function.apply and Function.call in JavaScript 第一段略. 每个JavaScript函数都会有很多附属的(attached)方法,包括toString().call()以及apply().听起来,你是否会感到奇怪,一个函数可能会有属于它自己的方法,但是记住,JavaScript中的每个函数都是一个对象.看一下这篇文章,复习一下(refresher)JavaScript特性.你可能还想知道JavaScript中函