模板文字中的'this'

Question

根据ES6规范,语法

foo`Hello!`

应该表现得很像

foo('Hello!')

在表达式之后放置模板文字会触发函数调用,类似于参数列表(括号中的逗号分隔值)如何触发函数调用.前面的代码等同于以下函数调用(实际上,函数获取更多信息,但稍后会对此进行说明).

资源

但是,在以下代码段中,将值绑定到函数会导致2个语法的行为不同:

function alertParans() { alert(this)  }
function alertNoParans() { alert `${this}`  }

var executeParans = alertParans.bind('roman empire');
var executeNoParans = alertNoParans.bind('greek empire');

executeParans();
executeNoParans();

第一个电话打印'罗马帝国',而第二个电话打印一个逗号.为什么？

小提琴

Answer 1

您应该阅读您链接的示例,因为它说的与您声称的不同.

在该部分中,陈述以下示例是等效的:

tagFunction`Hello ${firstName} ${lastName}!`
tagFunction(['Hello ', ' ', '!'], firstName, lastName)

现在,如果您将此应用于警报,它将如下所示:

function alertParans() { alert(['', ''], this);  }
function alertNoParans() { alert`${this}`;  }

var executeParans = alertParans.bind('roman empire');
var executeNoParans = alertNoParans.bind('greek empire');

executeParans();
executeNoParans();

现在你在两种情况下都得到了逗号,因为alert现在的第一个参数总是一个带有两个空字符串的数组.为什么？

因为模板文字被分割成内容before(''),during(this)和after('')内插.