返回介绍

this & self & scope

发布于 2021-04-10 06:03:37 字数 1974 浏览 988 评论 0 收藏 0

Vdt模板编译的结果,会添加如下代码

function(obj) {
  var self = this.data, scope = obj;

  ....
}

vdt.render() 方法这样调用模板函数

var vdt = {
  render: function() {
    template.call(vdt, data);

    ...
  }
}

所以

  • this 模板中this指向vdt实例
  • self 模板中self指向渲染到模板的数据this.data
  • scope 模板中scope指向传入模板的数据data

一般情况下,scope === self,但是当模板存在继承时就不相等了,例如:

// @file ./layout.vdt
console.log(self, this)
<div>
  <p>scope.name: {scope.name}</p>
  <p>self.name: {self.name}</p>
  <p>this.data.name: {this.data.name}</p>
</div>
var layout = require('./layout.vdt');

<t:layout name="Vdt" />
var vdt = Vdt(template);
vdt.render({
  name: 'Virtual-Dom'
})

上例中,self & this保持不变,但是scope等于继承layout时传入的数据{name: 'Vdt'}

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。
列表为空,暂无数据
    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
    原文