前端关于一些this的问题

第一种情况： this它指向的window本身

var sum=10;
        function fn1() {
          
   
//           全局变量就是window的属性，而this在这里就是window。
//            因此this.sum就是window.sum,也就是sum全局变量
//            console.log(this.sum);
        }
//        console.log(this);

        /*var status=5;
        console.log(typeof status);*/
        fn1();

第二种情况： this它指向事件函数本身

/*
*   所有事件函数中的this，都是这个监听事件监听对象
*  在事件函数中this===e.currentTarget也就是事件侦听的对象
*
*
* */
document.querySelector(".div0").onclick=function (e) {
          
   
    console.log(this);
    console.log(e.target);
    console.log(e.currentTarget);
};

第三种情况：this它指向对象本身

在对象函数中如果需要调用当前对象的其他函数或者属性时 必须加this.属性名 或者 this.方法名

/*
*
*  对象中的this
*  this就是当前这个对象
*  在对象的函数中，如果需要调用当前对象的其他函数或者属性时
*  必须加this.属性名或者this.方法名
*
* */
    var obj =  {
          
   
      a:1,
      c:function(){
          
   
        console.log(this.a);
      }
    };

ES5和ES6的面向对象

/*
        *
        *   下面两种是ES5和ES6的面向对象
        *    类中描述的this，都是实例化后的对象
        *
        *
        * */
//        ES5

ES5:

function Box(d) {
          
   
      this.d = d;
    }
    Box.prototype = {
          
   
      a: 1,
      c: function() {
          
   
        //这里的this就是box1
        console.log(this.a + this.d);
      }
    };
    var box1 = new Box(10);
    box1.c();

ES6:

class Ball {
          
   
  constructor(d) {
          
   
    this.d = d;
    this.a = 1;
  }
  c() {
          
   
    console.log(this.d + this.a);
  }
}
var ball1 = new Ball (10);
ball1.c();

第四种情况修改替换this的改变——call、apply、bind替换中的this

这里的this就是被替换的对象

/*
*
* call、apply、bind替换的this
* 这里的this就是被替换的对象
* 他们都是用来修改this的指向
*call、apply 基本没什么区别 只不过他们接受的第二个参数有些不同而已
      call接受的是单独参数
      apply接受的是数组
      而bind 通常是给函数修改this指向的 通常我们在react当中会大量的使用.bing的方法来修改this的指向        
* */

第五种情况使用箭头函数修改this

要注意的是箭头函数本身是没有this的 它捕获的是上下文的this指向来调用 当你在用箭头函数中使用call、apply、bind 方法是无法改变this的指向的。

this.$nextTick(() => {
          
   
      this.getRecord();
    });

上面这个函数是实际vue开发当中遇见的一个bug，然后用了在created中获取不到修改的参数 然而也可以在 mounted(){} ,周期里获取到 就只是想偷个懒。但是尽量的使用对应的周期函数去做组件的该做的事情。 https://blog..net/HarryHY/article/details/99311838 good good study ，day day up