• JavaScript中改变this指针的注意事项


    this的用法想必大家都是知道,简单理解this就是谁调用我,我只向谁。

    在一般文章介绍中,都是介绍改变this指向的方法,如使用call、apply、bind

    但经过测试,这句话一说出来就很不严谨。

    关于this指向的细节

    举例

    var obj = {
    	name:'vicer'
    }
    
    function person(){
    	console.log(this.name)
    }
    
    person.call(obj)    
    
    

    这里很容易得出,打印{name: "vicer"}。
    不就是改变了this的指向吗?怎么不严谨了。我们接着往下看

    我们添加一行代码

    var obj = {
    	name:'obj'
    }
    
    function person(){
        this.currentname = 'person'
        console.log(this)
    }
    
    person.call(obj)   
    
    

    此时this打印的是谁的this?

    {name: "obj", currentname: "person"}

    两个this指向都打印出来了,所以这里使用call()、apply()、bind()时,他们都是添加this的指向(而不是改变)
    唯一的区别只不过用法不同。

    还有一种情况,让我们直接看代码

    var obj = {
    	name:'obj'
    }
    
    function person(){
        this.name = 'person'
        console.log(this)
    }
    
    person.call(obj)   
    
    

    此时this中有两个name,这里就不卖关子了,优先打印的是person中的this

    {name : "person"}

    call、apply、bind的区别

    这里再介绍一下区别

    1. call后面传参数时,参数用逗号分隔

      var obj = {
          name: 'vicer'
      }
      
      function person(height, age) {
          console.log('名字:'+this.name)
          console.log('身高'+height)
          console.log('年龄'+age)
      }
      
      person.call(obj, 185, 18)
      //名字:vicer
      //身高185
      //年龄18
      
    2. apply后面传参数时,只能以数组方式传入

      person.apply(obj, [185, 18])
      
    3. bind传入参数,可以用逗号分隔,也可以传入数组,但需要主动调动才能改变this

      var p = person.bind(obj, 185, 18);
      p();
      
  • 相关阅读:
    Zuul的核心源码解析
    基于Sentinel的服务保护
    Sentinel
    windows进行配置转发
    Hystrix断路器
    服务熔断Hystrix高级
    微服务架构的高并发问题
    Feign的高级配置
    倒排序原理和实例
    云计算技术的产生、概念、原理、应用和前景
  • 原文地址:https://www.cnblogs.com/lovecode3000/p/12401874.html
Copyright © 2020-2023  润新知