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自动绑定父作用域