• this指向解析


    this:包含他的函数作为方法被调用时所属的对象

    情况一:如果一个函数中有this,但是它没有被上一级的对象调用,那么this指向的就是window,这里需要说明的是在js的严格版中this指向的不是window,而是undefined

    function a(){

      var user = "追梦子";

      console.log(this.user); //undefined

      console.log(this); //Window

    }

    a(); //相当于window.a();

    //this最终指向的是调用它的对象,这里的函数a实际是被Window对象所点出来的

    情况二:如果一个函数中有this,这个函数有被上一级的对象所调用,那么this指向的就是上一级的对象

    var o = {

      user:"追梦子",

      fn:function(){

        console.log(this.user); //追梦子

         console.log(this); //{user: "追梦子", fn: ƒ}

      }

    }

    o.fn(); //this执行时被它的上一级对象o{user: "追梦子", fn: ƒ}调用

    情况三:如果一个函数中有this,这个函数中包含多个对象,尽管这个函数是被最外层的对象所调用,this指向的也只是他上一级的对象

    var o = {

      a:10,

      b:{

        //a:12,

        fn:function(){

           console.log(this.a); //undefind 有两个对象b和o,所以此this.a指向它的上一级

        }

       },

      fn1:function(){

        console.log(this.a); //10

      }

    }

    o.fn1();

    o.b.fn();

    还有两种特殊情况:

    第一种:当 this遇到return

    function fn() {

      this.user='追梦子';

      return{};

    }

    var a=new fn();

    console.log(a.user);//undefined

    function fn() {

      this.user='追梦子';

      return function(){};

    }

    var a=new fn;

    console.log(a.user);//undefined

    unction fn() {

      this.user='追梦子';

      return 1;

    }

    var a=new fn;

    console.log(a.user);//追梦子

    unction fn() {

      this.user='追梦子';

      return null;

    }

    var a=new fn;

    console.log(a.user);//追梦子

    总结:如果返回值是一个对象,那么this指向的就是那个返回的对象,如果返回值不是一个对象那么this还是指向函数的实例

    还有一点:虽然null也是对象,但是在这里this还是指向那个函数的实例,因为null比较特殊

    二.改变this的指向

    第一种:new关键字改变this指向

    //构造函数版this

    function Fn(){

      this.user = "追梦子";

    }

    var a = new Fn();

    console.log(a.user); //追梦子

    用变量a创建了一个Fn的实例(相当于复制了一份Fn到对象a里面),此时仅仅只是创建,并没有执行,而调用这个函数Fn的是对象a,那么this指向的自然是对象a,那么为什么对象a中会有user,因为你已经复制了一份Fn函数到对象a中,用了new关键字就等同于复制了一份

    第二种:call()

    var a = {

      user:"追梦子",

      fn:function(){

        console.log(this.user); //追梦子

      }

    }

    var b = a.fn;

    b.call(a); //若不用call,则b()执行后this指的是Window对象

    第三种:apply()

    var a = {

      user:"追梦子",

       fn:function(){

         console.log(this.user); //追梦子

      }

    }

    var b = a.fn;

    b.apply(a);

    apply和call方法类似,都可以改变this指向,也可以有多个参数,但是不同的是,apply第二个参数必须是数组

    第四种:bind() 
    bind方法和call、apply方法有些不同,如下:

    var a = {

      user:"追梦子",

      fn:function(){

        console.log(this.user);

      }

    }

    var b = a.fn;

    b.bind(a); //代码没有被打印

    我们发现代码没有被打印,对,这就是bind和call、apply方法的不同,实际上bind方法返回的是一个修改过后的函数。

    var a = {

      user:"追梦子",

      fn:function(){

        console.log(this.user); //追梦子

      }

    }

    var b = a.fn;

    var c = b.bind(a);

    c();

    同样bind也可以有多个参数,并且参数可以执行的时候再次添加,但是要注意的是,参数是按照形参的顺序进行的。

    总结: call和apply都是改变上下文中的this并立即执行这个函数,bind方法可以让对应的函数想什么时候调就什么时候调用,并且可以将参数在执行的时候添加,这是它们的区别

  • 相关阅读:
    防简单攻击iptables策略
    Iptables 防火墙常用配置
    9个常用iptables配置实例
    NFS服务的端口分配
    docker参数--restart=always的作用
    nginx的proxy_pass路径转发规则最后带/问题
    查看tomcat进程启动了多少个线程
    Tomcat 普通用户启动
    SSH远程执行脚本tomcat未启动
    mysql 前缀索引
  • 原文地址:https://www.cnblogs.com/110162-wsx/p/9176173.html
Copyright © 2020-2023  润新知