最新公告
  • 欢迎您光临起源地模板网,本站秉承服务宗旨 履行“站长”责任,销售只是起点 服务永无止境!立即加入钻石VIP
  • this的改变者(call apply bind)

    正文概述 掘金(此刻此间)   2021-07-29   472

    三者区别及用法

    bindcallapply
    (this,param1,param2,param3,...)(this,param1,param2,param3,...)(this,[param1,param2,param3,...])返回的是fn的拷贝,改变了this的指向,保留了fn的参数fn的执行结果fn的执行结果不立即执行立即执行立即执行

    bind使用场景

    let user = {
      data:[
        {name:'张三',age:'18'},
        {name:'王五',age:'25'},
      ],
      getUserAge(name){
        let {age=''} = this.data.find(item=>item.name === name) || {}
        console.log(age)
      }
    }
    user.getUserAge('王五')
    
    如果不执行call,apply,bind 此时的this-->user;age-->'25'
    
    let person = {
      data:[
        {name:'李四',age:'20'}
      ]
    }
    
    person需要getUserAge方法,不需要重新定义注入,直接借用user的即可
    
    person.getUserAge = user.getUserAge.bind(person,'李四')
    person.getUserAge() //此时的this-->person;age-->'20'
    
    

    call使用场景

      Object.prototype.toString.call 检验类型
    
      let argArray = {
        0:'王权',
        1:'富贵',
        length:2
      }
    
      Array.prototype.push.call(argArray,'星星','竹海') // { '0': '王权', '1': '富贵', '2': '星星', '3': '竹海', length: 4 }
    
    

    apply使用场景

    const arr = [0,1,22,66,2,11]
    const max = Math.max.apply(Math,arr)
    const min = Math.min.apply(Math,arr)
      
    

    拓展:

    new 关键字

    不用关键字new
    
    创建一个构造函数
    function Person(name,age){
      this.name = name;
      this.age = age;
    }
    
    添加方法
    Person.prototype.sayHi = function () {
      console.log(this.name)
    }
    
    调用
    const person1 = Person('夏有凉风',18)
    console.log(person1,'person') // undefined
    console.log(window.name) // this -->  window  '夏有凉风'
    
    关键字new
    const person2 = new Person('冬有雪',88)
    console.log(person2,'person') // Person { name: '冬有雪', age: 88 }
    person2.sayHi() // '冬有雪'
    
    实现new 
    1.创建一个新的对象
    2.新对象[[Prototype]]被赋值位为构造函数的prototype属性
    3.构造函数内部的this被赋值为新对象
    4.给新对象添加属性
    5.返回新的对象
    function _new(fn,arguments){
      cosnt newObj = {}
      newObj._proto_ = fn.prototype; // prototype是函数属性  _proto_ 对象的属性
      fn.apply(newObj,arguments)
      return newObj
    }
    
    注意点:如果构造函数返回了非空的对象
    
    function Person(name,age){
      this.name = name;
      this.age = age;
      return {car:'奔奔'}
    }
    
    const person2 = new Person('冬有雪',88) // { car: '奔奔' }
    
    此时new 返回的就是该非空的对象
    
    
    整合:
    function _new(fn,...args){
      cosnt newObj = Object.create(fn.prototype)
      const res = fn.apply(newObj,args)
      return res instabceof Object ? res : newObj
    }
    
    

    起源地下载网 » this的改变者(call apply bind)

    常见问题FAQ

    免费下载或者VIP会员专享资源能否直接商用?
    本站所有资源版权均属于原作者所有,这里所提供资源均只能用于参考学习用,请勿直接商用。若由于商用引起版权纠纷,一切责任均由使用者承担。更多说明请参考 VIP介绍。
    提示下载完但解压或打开不了?
    最常见的情况是下载不完整: 可对比下载完压缩包的与网盘上的容量,若小于网盘提示的容量则是这个原因。这是浏览器下载的bug,建议用百度网盘软件或迅雷下载。若排除这种情况,可在对应资源底部留言,或 联络我们.。
    找不到素材资源介绍文章里的示例图片?
    对于PPT,KEY,Mockups,APP,网页模版等类型的素材,文章内用于介绍的图片通常并不包含在对应可供下载素材包内。这些相关商业图片需另外购买,且本站不负责(也没有办法)找到出处。 同样地一些字体文件也是这种情况,但部分素材会在素材包内有一份字体下载链接清单。
    模板不会安装或需要功能定制以及二次开发?
    请QQ联系我们

    发表评论

    还没有评论,快来抢沙发吧!

    如需帝国cms功能定制以及二次开发请联系我们

    联系作者

    请选择支付方式

    ×
    迅虎支付宝
    迅虎微信
    支付宝当面付
    余额支付
    ×
    微信扫码支付 0 元