apply, bind, call--绑定this的方法

Posted 2022-09-18 lyralee

Function.prototype.call(),Function.prototype.apply(),Function.prototype.bind()

是三种改变函数内部this指向（即函数执行时所在作用域）的方法。

 

1.Function.prototype.call(thisValue, param1, param2,....)

1)第一个参数

第一个参数必须是对象，

• 如果是 空，undefine, null 都默认绑定到window;
• 如果是基础类型（如字符型，数值型，布尔型）会自动将基础类型转为包装类型，如： Number(5)
• 如果是this, 表示绑定的是当前作用域

var n = 123;
var obj = 
    n: 456

function a() 
    return this;

// this === window
a.call(); // window
a.call(null); // window
a.call(undefine); //window
a.call(window); // window
// this === obj
a.call(obj); // obj
// this === 包装对象
a.call(5); // Number(5) [[PrimitiveValue]]: 5

2) 其余的参数

其余的参数作为函数调用时传入的参数

function add(a,b) 
  return a + b;

//this表示固定当前this的指向； this === window
add.call(this, 1, 2); // 3 

3)应用

// 调用对象的原生方法
var obj = 
  a: 5

console.log(obj.hasOwnProperty(‘toString‘)); // fasle
obj.hasOwnProperty = function()  // 覆盖obj对象继承自原型链上的方法
  return true; // 改变的是obj本身的方法，原型链上的方法不变

console.log(obj.hasOwnProperty(‘toString‘)); // true
// obj可以使用原型链上的方法，表示在obj的作用域使用hasOwnProperty的方法
console.log(Object.prototype.hasOwnProperty.call(obj)); // false

2. Function.prototype.apply(thisValue, [param1, ....])

1）第一个参数和call方法规则相同

2）第二个参数

第二个参数是数组， 将数组中的参数依次作为调用函数的参数

function add(a,b) 
  return a + b;

add.apply(this, [1, 2])

3)应用

//1) 查找数组的最大值
const arr = [1,3,5];
Math.max.apply(null, arr); // 5
// 还可以
Math.max(...arr); // 5

// 2) 将数组的空项转为undefined;undefine可以被遍历，空会被遍历函数忽略
const arr = [1,,4];
Array.apply(null, arr); // [1,undefined,4] Array是数组的构造函数

 

3. Function.prototype.bind(thisValue, params, param2...)

1）第一个参数

同call,apply方法

2）

 

4. apply.call,bind之间的区别

1）call和apply方法调用后，相当于绑定this后立即执行

2）bind方法是返回一个新的函数，并不立即执行

应用：

1）将类数组转为数组

// 1）将类数组转为数组
// apply,call方法立即执行
Array.prototype.slice.apply( 0: 1, length: 1,);
Array.prototype.slice.call( 0: 1, length: 1,);
// bind方法生成一个新的函数，需要手动执行，后面加（）
Array.prototype.slice.bind( 0: 1, length: 1,)();

2）给回调函数绑定对象

// 2）绑定回调函数的对象；
// 未进行绑定前，回调函数中的this一般都是window
var name = ‘Hello World‘;
var obj = 
  name: ‘Lyra‘,
  times: [1,2,4],
  print: function() 
    console.log(this === obj); // true
    this.times.forEach(function() 
      console.log(this === window); // true 
      console.log(this.name);  // Hello World
    )
  

obj.print(); 

// 使用bind方法绑定回调函数中的this
var name = ‘Hello World‘;
var obj = 
  name: ‘Lyra‘,
  times: [1,2,4],
  print: function() 
    this.times.forEach((function() 
      console.log(this); // obj --3次
      console.log(this.name);  // Lyra --3次
    .bind(this))) // 不能用call,apply替换，因为会立即执行，就不再是函数了，会返回函数的默认返回值undefined
  

obj.print(); 

// 使用call, apply方法绑定回调函数中的this;
var name = ‘Hello World‘;
var obj = 
  name: ‘Lyra‘,
  times: [1,2,4],
  print: function() 
    const that = this;
    this.times.forEach((function() // 因为apply,call会立即执行，所以要嵌套一层函数
      (function IIFE() 
        console.log(this); // obj --3次
        console.log(this.name);  // Lyra --3次
      ).call(that); // 可以替换成apply。IIFE需要用括号扩起来变为函数表达式。否则函数声明不能调用call方法。
    ))
  

obj.print();