JS零散知识汇总（一）

JS零散知识汇总

解决函数中this指向的问题：

1.如果回调函数中使用this,并且父级对象中的this指向需要的对象，这时我们可以考虑使用箭头函数;
箭头函数：箭头函数本身是没有this和arguments的，在箭头函数中引用this实际上是调用的是定义时的上一层作用域的this。这里强调的是上一层作用域，是因为对象是不能形成独立的作用域的。
2.如果父级中的this指向对象并不是我们所需的对象，则可以使用that来赋值重新调用this指向；

 mounted: function(){
        //var that = this;
       // axios.get('books').then(function(data){
        //  console.log(data.data)
         //在回调函数中的this指向调用函数的对象，所以我们需要用that进行转换
         // that.books = data.data;
        })
        // 箭头函数：箭头函数本身是没有this和arguments的，在箭头函数中引用this实际上是调用的是定义时的上一层作用域的this。
        // 这里强调的是上一层作用域，是因为对象是不能形成独立的作用域的。
        axios.get('books').then((data)=>{
          console.log(data.data)
          this.books = data.data;
        }
      }

箭头函数注意事项

1.由于大括号被解释为代码块，所以如果箭头函数直接返回一个对象，必须在对象外面加上括号，否则会报错

// 报错
let getTempItem = id => { id: id, name: "Temp" };

// 不报错
let getTempItem = id => ({ id: id, name: "Temp" });

2.箭头函数可以与变量解构结合使用。

const full = ({ first, last }) => first + ' ' + last;
// 等同于
function full(person) {
  return person.first + ' ' + person.last;
}

3.箭头函数使得表达更加简洁。

// 正常函数写法
[1,2,3].map(function (x) {
  return x * x;
});
// 箭头函数写法
[1,2,3].map(x => x * x);

4.函数体内的this对象，就是定义时所在的对象，而不是使用时所在的对象;
箭头函数可以让setTimeout里面的this，绑定定义时所在的作用域，而不是指向运行时所在的作用域。

function Timer() {
  this.s1 = 0;
  this.s2 = 0;
  // 箭头函数
  setInterval(() => this.s1++, 1000);
  // 普通函数
  setInterval(function () {
    this.s2++;
  }, 1000);
}

var timer = new Timer();

setTimeout(() => console.log('s1: ', timer.s1), 3100);
setTimeout(() => console.log('s2: ', timer.s2), 3100);
// s1: 3
// s2: 0
上面代码中，Timer函数内部设置了两个定时器，分别使用了箭头函数和普通函数。
前者的this绑定定义时所在的作用域（即Timer函数），后者的this指向运行时所在的作用域（即全局对象）。
所以，3100 毫秒之后，timer.s1被更新了 3 次，而timer.s2一次都没更新。