this应用详解-js原生

 

　　学习记录，以防遗忘，适合新手解惑。老鸟避让！

　　在微信H5的开发中，很多页面都是简单的一个模型item在加上很多很多数据组成起来的。例如微信朋友圈，仔细观察，他的一个基本模型就是 “头像图片 + 用户昵称 + 一段文本 + 一张或大于一张小于九张的图片 + startTime ”。总计五部分，这样的一个模板写好以后，只需要去刷新（即请求数据库数据），拿到数据后，进行动态渲染，把数据填充到模板里面。拿到了X条数据，就渲染出X个模板，最后，我们的朋友圈就这样展示出来了。原理就是这样，和我今天要记录的 this 指针有一点点关系。

　　模板只有一个！那么绑定在五个模块（即整个模板）上面的方法肯定是一模一样的，那请求的数据是不一样的，怎么区分事件呢？简单说，就是五个朋友都发了一条朋友圈，你要看第二个人的文字详情或图片大图，你点击了第二个人的圈圈详情，他就展示了该人的详情，那他怎么不展示其他人的详情呢？一个模板出来的模型，靠什么区分每一个 item 呢？可能其他语言有其他好的办法，JS里面可以依靠 this 指针来实现。

如图，通过模板结合数据创造出列表页，每个item 都有两个按钮，点击具体的某一个“去阅读”，不影响其他的“去阅读”按钮，还可以进行点击源“去阅读”按钮的一些样式变化和其他事件。

 

　　模板中，给“去阅读”按钮绑定 onclick 事件，传参 this ，在 函数中利用this 来区分当前用户点击的是哪一个item并作出该item 对应的事件，例如去请求不同的接口以及样式改变等，

之前我有拿过 e.target 方法来尝试找到点击源并做后续的事，但发现可能不太适合以上场景。使用this 却很方便。以上仅为记录回忆用，语言潦草具有理科男文章性质。待有时间在精细修改下。

 

转载于:https://www.cnblogs.com/fanghl/p/10103870.html