vue里面这个foreach中this为什么指向undefine?

 var a = [{name: 'yang',age:1},{school:'one'}]
console.log(this)  //window
this.a.forEach(function () {
  console.log(this) //window
})

forEach是不是不改变this指向,为什么下面这个图里面forEach中this由组件变成了undfine?
图片说明

https://gitee.com/qflyalltime/travel/blob/master/src/pages/city/components/Search.vue
第55行

打印的是window啊。。没问题。。

 <script src="https://cn.vuejs.org/js/vue.js"></script>
<div id="watch-example">
    <p>
        Ask a yes/no question:
        <input v-model="keyword">
    </p>
</div>
<script>
    var watchExampleVM = new Vue({
        el: '#watch-example',
        data: { cities: [[1, 2], [3, 4]] ,keyword:null},
        watch: {
            keyword: function (newValue, oldValue) {
                setTimeout(()=>{
                    console.log(this)
                    for (let i in this.cities) {
                        this.cities[i].forEach(function (item) {
                            console.log(item,this)
                        });
                    }
                },1000)
            }
        }
    });
  </script>

请使用es6语法,把function(item){} 改为 (item)=>{} this就会指向vue了,

里面那个this是foreach的回调里的this,跟外层vue对象的this不一样,可以在外层let cur = this ,再在foreach里面使用cur,这样就是想要的this指向了

此处thiss.a,this未定义

具体原因是,this指向调用的对象,而forEach回调函数并不是由this.a调用的,而是通过某种途径由window直接调用,所以要使this指向数组,必须使调用的
对象无作用域,建议用es6箭头函数,里面每一层this没有作用域,因此和该数组一样的作用域

应该是启用了严格模式,代码加入一句'use strict';,将指定代码在严格条件下执行。
严格模式下,禁止this关键字指向全局对象,因此this会是undefined

每一个用function声明的函数在调用时都会在函数内创建自己的this。this一般是函数所操作的对象。如果没有操作的对象。this在"use strict";严格模式下是 undefined,非严格模式下是 window。
也就是说,function声明的函数总是有自己的this。从而遮盖外层作用域中的this。
如果用es6的箭头函数()=>{}就没有自己的this。在箭头函数()=>{}中访问this,是访问外层作用域中的this。

建议使用es6箭头函数,this自动绑定父作用域