zoukankan      html  css  js  c++  java
  • js this工作原理

    js中的this是个很妙的东西,你经常不知道它到底在指向谁,又是谁在调用它。

    通用判断方法:

    1.this总是指向它的直接调用者

    var a={
    user:'Artimis',
    fn:function(){
     console.log(this.user)
    }
    }
    
    a.fn()  //Artimis => this指向a
    
    var b=a.fn;
    b()   //undefined => this指向window

     2.如果没有找到直接调用者,则this指向window

    function fn(){
    var user='Artimis';
    console.log(this.user)
    }
    fn()   //undefined => this指向window

    3.遇到return,如果返回的是对象,则this指向返回对象,否则指向函数实例

    function A(){
    this.user='Artimis';
    return {}   //return一个空对象
    }
    
    var a=new A();
    console.log(a.user)  //undefined => this指向return的{}
    
    
    function B(){
    this.user='Artimis';
    return 1   //return一个数值
    }
    
    var b=new B();
    console.log(b.user)  //Artimis => this指向b

    4.使用call/apply/bind绑定的,this指向绑定对象

    5.定时器(匿名函数)内没有默认的宿主对象,所以this指向window

    6.箭头函数内部没有this,this指向外层最近的调用者

       1> 箭头函数在调用时,不会生成自身作用域下的this和arguments

       2> 不像普通函数一样在调用时自动获取this,而是沿着作用域链向上查找,找到最近的外部一层作用域的this,并获取

       3> 在定义对象的方法/具有动态上下文的回调函数/构造函数中都不适用

    改变this指针指向:

    1.new操作符

    new会创造一个对象实例,这个实例继承了new操作符右边的对象,因此在调用方法时,this会指向对象实例

    function A(){
     this.user='Artimis'
    }
    var a=new A();
    console.log(a.user)  //Artimis => this指向a

    2.call/apply/bind

     call和apply主要用于指定this的环境变量,第一个参数是什么,this就指向什么,如果是null,则指向window 

    var a={
        user:'Artimis',
        fn:function(){
          console.log(this.user)  
       }
    }    
    var b=a.fn;
    b() //undefined b.call(a)
    //Artimis => this指向a b.call(null) //undefined => this指向window

    bind是延迟的,会返回一个修改后的函数,可以自行决定执行的时间

    var a={
        user:'Artimis',
        fn:function(){
          console.log(this.user)  
       }
    }    
    var b=a.fn;
    var c=b.bind(a)
    c()   //Artimis => 延迟执行,自定义执行时间
    var a={
      fn:function(x,y){
        console.log(x+y)  
     }
    }
    
    var b=a.fn;
    var c=b.bind(a,2)  //自定义参数x 
    c(3)  //5
  • 相关阅读:
    8051单片机指令和寻址方式
    C/C++的关系
    go JSON 读写到文件
    Oracle 对未提交事务的查询
    win8 iis 安装
    Silverlight 项目 对话框
    VisualSVN错误 Cannot query proxy blanket解决办法
    silverlight浏览器自适应问题
    windows server2003 多用户登陆问题解决办法
    silverlight 缺少对象错误
  • 原文地址:https://www.cnblogs.com/artimis/p/9004134.html
Copyright © 2011-2022 走看看