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

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)剩余的参数

当bind(thisValue, ...)后面参数的个数小于原函数的个数时,绑定部分参数;

// 绑定部分参数;相当于参数复用,只需要处理剩余的参数
function fn(a,b) {
    return a + b
}
var newFn = fn.bind(null, 5)
/*
    newFn = function(b) {
        return 5 + b
    }
*/
console.log(newFn(6)); // 11

3)应用

  • bind方法每次运行都返回一个新的函数;在监听事件时需要注意
    document.addEventListener('click', obj.fn.bind(this))
    // 下面取消绑定无效;因为是不同的函数
    document.removeEventListener('click',obj.fn.bind(this))

        正确的写法写法应该是

var listener = obj.fn.bind(this);
document.addEventListener('click', listener);
document.removeEventListener('click', listener);
  • 结合回调函数使用
    obj.print = function () {
      this.times.forEach(function (n) {
        console.log(this.name);
      }.bind(this));
    };
    
    obj.print()
    // 张三
    // 张三
    // 张三
  • 和call方法结合使用;改变传参格式

    [1, 2, 3].slice(0, 1) // [1]
    // 等同于
    Array.prototype.slice.call([1, 2, 3], 0, 1) // [1]
    // 上面代码的意思是在Array.prototype.slice对象上调用call方法
    //
    var mySlice = Function.prototype.call.bind(Array.prototype.slice);
    console.log(mySlice([1,2,3], 0, 1))
    //同理
    var myPush = Function.prototype.call.bind(Array.prototype.push);
    // bind方法传参也可以被改变
    function f() {
        console.log(this.a);
    }
    var obj = {a: 1}
    var myBind = Function.prototype.call.bind(Function.prototype.bind);
    myBind(f, obj)(); // 1

     

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();

 

 

 

转载于:https://www.cnblogs.com/lyraLee/p/11441879.html

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值