javascript - 打字稿在函数（）中获得当前范围或变量

Question

我使用 JQueryload函数append（而不是替换）一些 html 数据到一个元素。我的问题是数据是this加载函数的范围。不能用() =>。如何访问加载回调之外的变量？

var element: JQuery;

$("<div></div>").load("http://www.google.de", function {
   $(element).append(this);
});

Answer 1

在 TypeScript 中，当您使用() =>语法时，它实际上只是创建了一个变量来包含“this 的当前含义”，然后替换用法this来调用生成的变量。在需要 .的两种含义的情况下，您可以手动执行此操作this。

这里有些例子...

this在回调中正常使用。this是事件目标。

$('div').click( function () {
    // this is the clicked element
    alert('this: ' + this.id);
});

用于回调的 TypeScript 箭头函数。this是词法范围。

$('div').click( () => {
    // this is the lexical scope
    // i.e. the containing class, containing function, or window
    alert('this: ' + this.id);
});

手动示例，创建一个名为self以包含词法范围的变量并this作为事件目标。

var self = this;
$('div').click( function () {
    // this is the clicked element
    alert('this: ' + this.id);

    // self is the lexical scope
    // i.e. the containing class, containing function, or window
    alert('self: ' + self.id);
});

值得牢记的是，JavaScript 在运行时遍历作用域链，因此如果未在函数内部定义变量，JavaScript 会检查该变量的封闭函数。它一直沿着链向上走，直到它检查了全局范围。

这个例子展示了这一点，但是嵌套可以更深并且它仍然有效（即内部的函数innerFunction仍然可以范围遍历以获取test变量。

var example = function () {
    var test = 'A test';

    var innerFunction = function () {
        alert(test); // 'A test'
    }

    innerFunction();
}

example();

Answer 2

正如你所期望的那样。您可以使用函数之外的任何变量：

var element: JQuery;
var someOther = "123";

$("<div></div>").load("http://www.google.de", function(){
   $(element).append(this);
   $(this).text(someOther);
});