在一个JavaScript文件中,我看到:
function Somefunction(){
var that = this;
...
}
声明它并将它赋值给它的目的是什么?
在一个JavaScript文件中,我看到:
function Somefunction(){
var that = this;
...
}
声明它并将它赋值给它的目的是什么?
当前回答
如果你使用call()或apply()来解决这个问题,那么就没有必要使用它:
var car = {};
car.starter = {};
car.start = function(){
this.starter.active = false;
var activateStarter = function(){
// 'this' now points to our main object
this.starter.active = true;
};
activateStarter.apply(this);
};
其他回答
有时this可以引用另一个作用域并引用其他东西,例如,假设您想在DOM事件中调用构造函数方法,在这种情况下,this将引用DOM元素而不是创建的对象。
HTML
<button id="button">Alert Name</button>
JS
var Person = function(name) {
this.name = name;
var that = this;
this.sayHi = function() {
alert(that.name);
};
};
var ahmad = new Person('Ahmad');
var element = document.getElementById('button');
element.addEventListener('click', ahmad.sayHi); // => Ahmad
Demo
上面的解决方案将把这个传递给那个,然后我们可以从sayHi方法中访问name属性,所以在DOM调用中可以没有问题地调用这个。
另一种解决方案是为该对象分配一个空对象,并向其添加属性和方法,然后返回该对象。但是使用这个解决方案,您失去了构造函数的原型。
var Person = function(name) {
var that = {};
that.name = name;
that.sayHi = function() {
alert(that.name);
};
return that;
};
从Crockford
按照惯例,我们创建一个private that 变量。这是用来制作 对象对私有对象可用 方法。这是一个变通方法 错误在ECMAScript语言 这一规范导致了 内部函数设置不正确。
JS小提琴
function usesThis(name) {
this.myName = name;
function returnMe() {
return this; //scope is lost because of the inner function
}
return {
returnMe : returnMe
}
}
function usesThat(name) {
var that = this;
this.myName = name;
function returnMe() {
return that; //scope is baked in with 'that' to the "class"
}
return {
returnMe : returnMe
}
}
var usesthat = new usesThat('Dave');
var usesthis = new usesThis('John');
alert("UsesThat thinks it's called " + usesthat.returnMe().myName + '\r\n' +
"UsesThis thinks it's called " + usesthis.returnMe().myName);
这个警报……
UsesThat认为它叫Dave UsesThis认为它是未定义的
我将以一个例子开始回答这个问题:
var colours = ['red', 'green', 'blue'];
document.getElementById('element').addEventListener('click', function() {
// this is a reference to the element clicked on
var that = this;
colours.forEach(function() {
// this is undefined
// that is a reference to the element clicked on
});
});
我的答案最初用jQuery演示了这一点,这只是略有不同:
$('#element').click(function(){
// this is a reference to the element clicked on
var that = this;
$('.elements').each(function(){
// this is a reference to the current element in the loop
// that is still a reference to the element clicked on
});
});
因为当您通过调用新函数来更改作用域时,这个值经常会发生变化,因此您不能通过使用它来访问原始值。把它混叠成这样,你仍然可以访问这个的原始值。
就我个人而言,我不喜欢用那个作为别名。它指的是什么并不明显,特别是如果函数的长度超过几行。我总是用一个更有描述性的别名。在上面的例子中,我可能会使用clickedEl。
这是一种让内部函数(在其他函数中定义的函数)工作得更正常的方法。在javascript中,当你在另一个函数中定义一个函数时,它会自动被设置为全局作用域。这可能会令人困惑,因为您希望这个函数的值与外部函数中的值相同。
var car = {};
car.starter = {};
car.start = function(){
var that = this;
// you can access car.starter inside this method with 'this'
this.starter.active = false;
var activateStarter = function(){
// 'this' now points to the global scope
// 'this.starter' is undefined, so we use 'that' instead.
that.starter.active = true;
// you could also use car.starter, but using 'that' gives
// us more consistency and flexibility
};
activateStarter();
};
当你创建一个函数作为一个对象的方法(比如car。然后在该方法中创建一个函数(如activatstartter)。在顶层方法中this指向对象,它是一个方法(在本例中为car),但在内部函数中this现在指向全局作用域。这是一种痛苦。
在这两个作用域中创建一个按照约定使用的变量是javascript中这个非常普遍问题的解决方案(尽管它在jquery函数中也很有用)。这就是为什么使用听起来很普通的名称。这是一种很容易识别的习惯,用来克服语言中的缺点。
就像埃尔·罗诺科暗示的那样,道格拉斯·克罗克福德认为这是个好主意。
如果你使用call()或apply()来解决这个问题,那么就没有必要使用它:
var car = {};
car.starter = {};
car.start = function(){
this.starter.active = false;
var activateStarter = function(){
// 'this' now points to our main object
this.starter.active = true;
};
activateStarter.apply(this);
};