js-bind

在学习使用js过程中,我们经常会用到this这一神奇关键字,有时候他可以是’对象‘,有时候他又可以代表’方法‘,那么有时候我们经常会迷惑他到底指向哪里呢。

这就得提到一个方法,在bind方法中,可以指定this指向谁。

bind的官方解释是bind() 方法创建一个新的函数,在 bind() 被调用时,这个新函数的 this 被指定为 bind() 的第一个参数,而其余参数将作为新函数的参数,供调用时使用。

比如在这里

    function fn2() {
      let info = '学好技术,有了前途,没了头发...';
      console.log(this);
    }
    let obj1 = {
      name: '小甜甜'
    }
    let res=fn2.bind(obj1);
    console.log(res);
    res();
  /*
      bind(this指向,参数1,参数2...) 
      是属于函数的方法,返回一个新的函数,改变新函数中this的指向为bind的第一个参数
 
      参数1,参数2是给函数传递的实参...
    */

这个时候res方法虽然是复制的fn2方法,但在fn2中,this指向的还是window,而res指向的已经成为obj1这个对象

console.log(res === fn2);  // false

我们比对下,发现这个时候可以发现这两个并不相等因为fn2 调用bind,将fn2的函数体克隆一份,产生新的函数,返回.新函数中this指向bind的第一个参数(obj1)

注意:

在使用bind方法中,可以使用参数

    function fn3(name, age) {
    let info = `我是${name},今年${age}岁`;
    console.log(info, this);

    }
    var res1 = fn3.bind({}, '喜月', 18);
    console.log(res1);
    // 我是喜月,今年18岁

但是注意没有办法传递实参

res1('月喜', 81)
onsole.log(res1);
//我是喜月,今年18岁

像这样在使用过bind方法后,调用res1时加入实参,会发现没有发生变化

且在使用箭头函数时,箭头函数的this也不会被bind改变

let fn4 = () => {
  console.log(this, 'fn4');
 }
 let res2 = fn4.bind({})
 res2();
// window,fn4
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值