zoukankan      html  css  js  c++  java
  • 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();
      
  • 相关阅读:
    Hybrid 实验
    Access+Trunk 配置
    JS 超类和子类
    javascript高级程序设计第3版——第一章概括
    js 获取getElementsTagName()方法返回值的内容
    js 数组的pop(),push(),shift(),unshift()方法小结
    js parseInt()与Number()区别
    HTML中引用外部JS文件失效原因
    TP5报错 User qdm813229266 already has more than 'max_user_connections' active connections 解决办法
    微信内打开链接,跳转到公众号关注页面
  • 原文地址:https://www.cnblogs.com/lovecode3000/p/12401874.html
Copyright © 2011-2022 走看看