[js log] Detailed explanation of call, apply and bind methods in JS

1. Difference

1.1 The same point of the three: they are used to change the direction of this

1.2 The difference between call() and apply():

  • The same point: Both call a method of an object, and replace the current object with another object (same function)
    For example: B.call(A, args1,args2); That is, object A calls the method of object B
    F.apply(G, arguments); that is, the method of G object application F object

  • Differences: the way the parameters are written is different
    . The first parameter of call() is the object that this points to, and the parameter list is passed in later. The parameters can be of any type. When the first parameter is null or undefined, it points to by default. window;
    apply(): The first parameter is the object to be pointed to by this, and the second parameter is an array

//例如:
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 The difference between call() and bind():

  • The same point: are used to change the direction of this
  • Differences: After call() changes the point of this, the function will be executed again. After bind() changes this, the function will not be executed, and a function bound to the new this will return
//例如:
function f(){
    
    
console.log("看我怎么被调用");
console.log(this) //指向this
}
var obj = {
    
    };
f.call(obj) //直接调用函数
var g = f.bind(obj); //bind()不能调用函数
g();  //此时才调用函数

2. Usage

2.1 Application of call()

2.1.1 Use call() to determine the data type

Using typeof in judging the form of the data type is generally not too accurate. We can use the Object.prototype.toString.call() method to judge the data type of a data

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]

We can use the content of the output above to encapsulate a function in order to determine the basic type of input data

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 Use call() to reverse the string

//思路:将字符串转化为数组,借用数组中的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.2 Application of apply()

2.2.1 Use apply() to find the maximum

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
1
2
3
4
注意:Math是一个对象,并不是构造器

Guess you like

Origin blog.csdn.net/u013034585/article/details/105763831