• 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();
      
  • 相关阅读:
    CSS中的外边距合并问题
    Web性能优化的途径
    HTML5读书笔记——canvas元素(续)
    HTML5读书笔记——canvas元素
    2016/9/8日志
    【每日一醒】【架构师之路】设计文档之惑
    华为是个好公司,但不全是好员工——记初次压力面试的体验
    忐忑的一天,心里还是小兴奋的
    atexit()函数
    年终心结,心绪的总结!
  • 原文地址:https://www.cnblogs.com/lovecode3000/p/12401874.html
Copyright © 2020-2023  润新知