qflyalltime
小羊也疯狂
2018-06-29 01:04
采纳率: 88.4%
浏览 5.5k

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行

  • 点赞
  • 写回答
  • 关注问题
  • 收藏
  • 邀请回答

8条回答 默认 最新

  • showbo
    已采纳

    打印的是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>
    
    点赞 评论
  • Pig8229651
    Pig8229651 2018-06-29 01:56

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

    点赞 评论
  • weixin_41340076
    weixin_41340076 2018-06-29 02:05

    此处thiss.a,this未定义

    点赞 评论
  • qq_38743432
    qq_38743432 2018-06-29 02:15

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

    点赞 评论
  • zuggs_
    zuggs_ 2018-06-29 03:35

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

    点赞 评论
  • ambit_tsai
    ambit_tsai-微信 2018-06-29 04:20

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

    点赞 评论
  • jslang
    天际的海浪 2018-06-29 06:14

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

    点赞 评论
  • obiko
    obiko 2018-06-29 06:22

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

    点赞 评论

相关推荐