JavaScript中的this

JavaScript中的this一直以来都是一个比较不容易理解的知识点,this的指向问题很容易对新手造成干扰这里就总结一下JavaScript中的this的指向问题
　　this的指向大致分为以下四种:

• 作为对象的方法调用
• 作为普通函数调用
• 构造器调用
• Function.prototype.call或Function.prototype.apply调用
  下面分别进行介绍:

1.作为对象的方法调用

当函数作为对象的方法被调用时,this指向该对象;

var obj = {
    a: 1,
    getA: function () {
        alert(this === obj); //输出true
        alert(this.a); // 输出1
    }
}
obj.getA()

2.作为普通函数调用

当函数不作为对象的属性被调用时,也就是我们通常说得普通函数方式,此时的this总是指向全局对象.在浏览器的JavaScript里,这个全局对象就是window对象.

window.name = 'globalName'
var getName = function () {
  return this.name
}
console.log(getName()); // 输出globalName

或者

window.name = 'globalName'
var getName = function () {
    return this.name
}
console.log(getName()); // 输出globalName
var myObject = {
    name: 'michael',
    getName: function () {
        return this.name
    }
}
console.log(myObject.getName())  // 输出michael
var getName = myObject.getName
console.log(getName())  // 输出globalName

有时候我们会遇到一些困扰,比如在div节点的事件内部,有一个局部的callback方法,callback作为普通函数调用时,callback内部的this指向了window,但我们往往希望让它总是指向该节点,见如下代码:

<div id="div1">我是一个div</div>
<script>
window.id = 'window'
 document.getElementById('div1').onclick = function () {
   alert(this.id) //输出div1
   var callback = function () {
     alert(this.id);  //输出window
   }
   callback();
 }
</script>

此时有一种简单的解决方案,可以用一个变量临时保存div节点的引用:

window.id = 'window'
document.getElementById('div1').onclick = function () {
  var that = this; // 保存div的引用
  var callback = function () {
    alert(that.id);  //输出div1
  }
  callback();
}

在ECMA5的static模式下,这种情况的this已经被规定为不会指向全局对象,而是undefined:

function func() {
   "use strict";
   alert(this);//输出undefined
 }
 func();

在最新的es6中,引入了箭头函数的概念,箭头函数很大一部分对this的影响很深,这里不对es6的箭头函数详细分析,直接拿出结论,箭头函数没有自己的 this，其内部的 this 绑定到它的外围作用域。对象内部的箭头函数若有this，则指向对象的外围作用域。

window.color = "red";
//let 声明的全局变量不具有全局属性，即不能用window.访问
let color = "green";
let obj = {
    color: "blue",
　　 getColor: () => {
　　　　 return this.color;//this指向window
　　 }
};
let sayColor = () => {
    return this.color;//this指向window
};
obj.getColor();//red
sayColor();//red

如果是对vue熟悉的,那么对这个问题就更容易理解了,在vue中,我们会很方便的使用箭头函数,比如ajax之后,改变vue的data的值：
html:

<div id="app" @click="getName">
  我是div
</div>

<script>
  let a = 10
  var vm = new Vue({
    el: '#app',
    data: {
      a: 11
    },
    methods: {
      getName: function () {
        console.log(this.a)  // 输出11
        $.get('https://cnodejs.org/api/v1/topics', function (data) {
          console.log(this.a)  // 输出undefined
var that=this;
console.log(that.a);//输出11
        })
        $.get('https://cnodejs.org/api/v1/topics', (data) => {
          console.log(this.a)  //输出11
        })
      }
    }
  })
</script>

以上两种用jQuery的ajax在vue中分别使用了普通函数和箭头函数,输出的结果都不一样,箭头函数指向了vue对象,所以输出data里面的a,输出11,普通函数则输出undefined．
查看原文:https://blog.noob6.com/2018/06/03/the_meaning-of-this-in-javascript/