Les différences et l'utilisation de call(), apply() et bind() dans JS

1. Différence

1.1 Les similitudes entre les trois : elles servent toutes à changer le sens de cette

1.2 La différence entre call() et apply() :

Similitude : Ils appellent tous une méthode d'un objet et remplacent l'objet courant par un autre objet (même fonction)

Par exemple : B.call(A, args1,args2) ; c'est à dire que l'objet A appelle la méthode de l'objet B
F.apply(G, arguments) ; c'est à dire que l'objet G applique la méthode de l'objet F

Différence : différentes manières d'écrire les paramètres

Le premier paramètre de call() est l'objet vers lequel il pointe, et la liste de paramètres est transmise ultérieurement. Les paramètres peuvent être de n'importe quel type. Lorsque le premier paramètre est nul ou non défini, il pointe vers window par défaut ;

apply() : le premier paramètre est l’objet vers lequel il pointe et le deuxième paramètre est le tableau.

//例如:
var obj = {}//定义一个空的对象
function f(x,y){
console.log(x,y)
console.log(this) //this是指obj
}
f.apply(obj,[1,2]) //后面的值需要用[]括起来
f.call(obj,1,2) //直接写

1.3 La différence entre call() et bind() :

Similitude : Ils sont tous deux utilisés pour changer le pointeur de ce

La différence : après que call() ait modifié le pointeur de this, la fonction sera à nouveau exécutée. Après que bind() ait modifié cela, la fonction ne sera pas exécutée et une fonction liée au nouveau this sera renvoyée.

//例如:
function f(){
console.log("看我怎么被调用");
console.log(this) //指向this
}
var obj = {};
f.call(obj) //直接调用函数
var g = f.bind(obj); //bind()不能调用函数
g();  //此时才调用函数

2. Utilisation

2.1 Application de call()

2.1.1 Utilisez call() pour déterminer le type de données

Utiliser typeof pour déterminer la forme d'une classe de données n'est généralement pas très précis. Nous pouvons utiliser la méthode Object.prototype.toString.call() pour déterminer le type de données d'une donnée.

console.log(Object.prototype.toString.call("qq"))            // [Object String] 返回值都是字符串类型
console.log(Object.prototype.toString.call(12))              // [object Number]
console.log(Object.prototype.toString.call(false))           // [object Boolean]
console.log(Object.prototype.toString.call(undefined))       // [object Undefined]
console.log(Object.prototype.toString.call(null))            // [object Null]
console.log(Object.prototype.toString.call(function(){}))    // [object Function]
console.log(Object.prototype.toString.call([]))              // [object Array]
console.log(Object.prototype.toString.call({}))              // [object Object]

 Nous pouvons utiliser le contenu de sortie ci-dessus pour encapsuler une fonction afin de déterminer le type de base des données d'entrée.

   function getType(a){
       var obj = Object.prototype.toString.call(a); //区分对象类型  确定当前的数据的类型
       var sub = obj.substr(8); 
       // stringObject.substr(start,length)  start 要抽取的子符串的起始下标,
       // length 截取的长度,如果不写则表示从start开始截取到最后 ,stringObject表示某一字符串
      var len = sub.length;
      var sub = sub.substr(0,len-1)
      var rs =  sub.toLowerCase(sub) //转换成小写
      return rs ;
    }
     console.log(getType("a")); //string

2.1.2 Utilisez call() pour retourner la chaîne

//思路:将字符串转化为数组,借用数组中的reverse,将字符串翻转过来
 var str = "abcdefg";
 console.log(Array.prototype.reverse.call(str)); //此时会报错误,即引用类型错误,就是说只有数组才能使用reverse这个方法;(错误写法)
    //方法一:这种方法内有使用call()
 var arr =  Array.from(str).reverse().join("") //将字符串转化为数组,在进行翻转,然后在进行拼接
 console.log(arr) //gfedcba
 console.log(typeof arr) //string
     //方法二:
var rs = Array.prototype.reverse.call(str.split("")).join(""); 
    //splice(start,length)方法用于把一个字符串分割成字符串数组,start 表示从指定的地方分割字符串    length表示分割的长度。
    //返回一个一个字符串数组 如果把空字符串 ("") 用为参数那么字符串中的每个字符之间都会被分割
console.log(rs); //gfedcba
console.log(typeof arr) //string

2.2Application de apply()

2.2.1 Utilisez apply() pour trouver la valeur maximale

var arr =[2,6,8,3,4,9,7,23,56,889]; 
console.log(Math.max.apply(arr,arr)) //第一个arr表示让arr借用max这个方法,第二个arr表示传给max的数据

//apply()所执行的操作:1.执行Math.max(1,2,3,5,4) 2.把内部的this改成arr

Remarque : Math est un objet, pas un constructeur

Je suppose que tu aimes

Origine blog.csdn.net/m0_74265396/article/details/132564814
conseillé
Classement