this指针指代问题

来源:25-3 使用Module和Class提取封装一个Movie对象

夏河文化

2019-03-19

老师,请问一下,我在您用class类改写movie那一章节中对this的指向问题还有一点不清楚:
图片描述
这里老师您说需要用bind绑定this使得processDoubanData中的this指的是Movie类,这样才能用this.cb调用Movie类中的cb方法:图片描述
然后我发现在没有使用Movie这个class之前,我们是直接在页面调用util.http函数进行数据绑定的:图片描述
而调用页面中也有一个processDoubanData函数,其中也用到了this指针用于绑定数据到当前页面的data中:
图片描述

那么我想请问一下为什么第一种做法需要bind(this)来确保processDoubanData函数内部的this指的是Movie类,而第二种就不需要绑定this用于指代当前页面呢?这样的话,processDoubanData函数传到util中的http方法时this的指向不也发生了改变么?

补充:
Movie.js

var util = require('../../../../utils/util.js')
class Movie {
  constructor(url) {
    this.url = url;
  }

  getMovieData(cb) {
    this.cb = cb;
    util.http(this.url, this.processDoubanData.bind(this));
  }

  processDoubanData(data) {
    if (!data) {
      return; 
    }
    var director = {
      avatar: "",
      name: "",
      id: ""
    }
    if (data.directors[0] != null) {
      if (data.directors[0].avatars != null) {
        director.avatar = data.directors[0].avatars.large

      }
      director.name = data.directors[0].name;
      director.id = data.directors[0].id;
    }
    var movie = {
      movieImg: data.images ? data.images.large : "",
      country: data.countries[0],
      title: data.title,
      originalTitle: data.original_title,
      wishCount: data.wish_count,
      commentCount: data.comments_count,
      year: data.year,
      generes: data.genres.join("、"),
      stars: util.convertToStarsArray(data.rating.stars),
      score: data.rating.average,
      director: director,
      casts: util.convertToCastString(data.casts),
      castsInfo: util.convertToCastInfos(data.casts),
      summary: data.summary
    }
    this.cb(movie);
  }
}

export { Movie }

util.js中的http方法

function http(url, callBack){
  wx.request({
    url: url,
    method: 'GET',
    header: {
      "Content-Type": ""
    },
    success:function(res){
      callBack(res.data)
    },
    fail: function(error){
      console.log(error)
    }
  })

}

movie-detail.js中的方法:

 onLoad: function(options) {
    var movieId = options.id
    var url = app.globalData.doubanBase + '/v2/movie/subject/' + movieId
    
    // 方法一:用本页面函数
    // util.http(url, this.processDoubanData)

    // 方法二:用class类+匿名函数
    // 因为此处匿名函数内部this的指向发生改变,所以用了that
    var movie = new Movie(url);
    var movieData = movie.getMovieData();
    var that = this;
    movie.getMovieData(function (movie) {
      that.setData({
        movie: movie
      })
    })
写回答

2回答

7七月

2019-03-19

util.http(url, this.processDoubanData) ,这个代码没毛病吧?process函数就在当前的Page里对吧。我们已经写了很多个this.method的代码了。

第二个 that.setData这是因为他是在一个回调函数呀。这个我觉得,你还是要去详细的看一下this这个关键字的意义。this的指代 主要是和“谁”调用这个函数有关系的,你可以看下上述 函数调用方到底是哪个?


0
1
夏河文化
对,我一直理解的就是谁调用哪个函数那么这个函数中的this指代的就是谁。所以我就去看最后到底是谁调用了processDoubanData这个方法,发现最后它是在http方法中的success:function(res)方法中以callback函数的形式调用的,并没有显示指定调用方是谁。在web网页开发中,函数中的this指代的就是全局对象window,也就是window直接调用函数,而在小程序中并没有window全局对象,所以我就想是processDoubanData函数最后调用的页面对象是它的调用方,所以processDoubanData中的this指代的还是当前页面对象。不知道老师我这样理解的对不对呢?
2019-03-19
共1条回复

7七月

2019-03-19

你把代码贴全一点,这样分段我不太能理解。

0
1
夏河文化
好的,我已经修改了问题,把代码贴上去了,请老师看一下
2019-03-19
共1条回复

微信小程序入门与实战(全新版) 超20000人学习的好课

4年同步微信官方迭代,累计20000+人学习, 比微信官方更火爆!

23866 学习 · 6899 问题

查看课程