jQuery上的改动参考这个.价值和这个

Question

假设我有一段这样的代码，它运行在select:

$('select[name="nights"]').on('change', function() {
  console.log(this.value);
});

有没有办法，我可以有一个引用到我的全局this对象(如果它被称为)，而不使用类似的东西:

var self = this;

使用bind之类的东西会破坏对jQuery select元素的引用:

$('select[name="nights"]').on('change', function() {
  console.log(this.value);
});

我不想更简洁地理解作用域，所以我更喜欢绑定而不是保存引用。例如，如果我看一下airbnb的代码标准，他们宁愿不使用self = this参考。

https://github.com/airbnb/javascript命名——自己

我想知道他们是如何绕过这种东西的，尽管你都需要一个局部作用域引用到this和一个this引用到你的全局对象。

我只是被迫仍然做一个参考，还是有任何办法解决这个问题?我可能只是在这里想得太多和挑剔，但我希望有一个优雅的解决方案，否则我最好还是坚持保存引用。

Answer 1

我不太明白你的问题。

With #bind (ES5 way)

$('select[name="nights"]').on('change', function(){
  console.log(this.value);
}.bind(this)); 

从https://developer.mozilla.org/enUS/docs/Web/JavaScript/Reference/Global_Objects/Function/bind

bind()方法创建了一个新函数，当调用该函数时，该函数具有其此关键字设置为所提供的值，具有给定的序列在调用新函数时提供的任何前面的参数。

ES6方式

从https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions

词汇这

直到箭头函数，每个新函数都定义了自己的this值(在构造函数中是一个新对象，在严格模式函数调用中是未定义的，如果函数作为"对象方法"调用，则是上下文对象，等等)。这对于面向对象的编程风格来说是很烦人的。

箭头函数不创建自己的this上下文;相反，它捕获封闭上下文的this值，因此下面的代码按预期工作。(我没有复制代码)

所以，你可以用箭头函数

$('select[name="nights"]').on('change', () => {
  console.log(this.value);
});

Answer 2

注意:在你的情况下，我认为你想要访问选择元素的值，如果是这样的话可以使用:

$(this).val();

代替

this.value;

如果您想访问全局this值，即浏览器平台中的Window，您有两个选择:

选项1:

如果你想用ES5的方式，你可以使用IIFE函数，例如:

var that = (function(){return this;}());

选项2:

如果你想要ES6的方式，这是更好的少写代码，例如:

const that = (()=>this)(); // .... (*)

其中(*)相当于之前的ES5代码。