jQuery on change引用this.value和this

时间:2016-09-20 10:19:29

标签: javascript jquery scope this

让我们说我有一些这样的代码可以在更改选择时运行:

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

有没有办法可以在不使用类似的东西的情况下引用我的全局这个对象(如果它被称为):

var self = this;

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

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

我不想更简洁和理解范围,所以我更喜欢绑定而不是保存对此的引用。如果我查看airbnb的代码标准,他们也不会使用self = this引用。

https://github.com/airbnb/javascript#naming--self-this

我想知道他们是如何解决这个问题的,尽管你们都需要本地范围引用这个以及对全局对象的引用。

我只是被迫仍然参考或者有什么方法吗?我可能只是在这里过度思考和挑剔,但我希望有一个优雅的解决方案,否则我最好坚持使用保存参考资料。

2 个答案:

答案 0 :(得分:0)

<强>注意: 在你的情况下,我认为你想要访问select元素的值,如果是这样的话 可以使用:

            String query = "select * from APPS.WSH_DELIVERABLE_TRIPS_V";

        PreparedStatement prep = Database.getConnection().prepareStatement(query);
        ResultSet rs = prep.executeQuery();

        while (rs.next()) {
            dataFound = true;
            textInfo.setText(String.valueOf(rs.getString(1)));
        }

而不是

    var query = (from wo in _dbContext.WorkOrder
                 join opr in _dbContext.Operation
                 on wo.operationID equals opr.operationID
                 where wo.orderid == selectedorderid
                 select new {wo.orderid, wo.workOrderID, wo.itemID, wo.operationID, opr.operationName, wo.operationCode}).ToList();

如果您想在浏览器平台中访问全局$(this).val(); Window ,则有两种选择:

选项1:

如果您想要ES5方式,可以使用IIFE功能,例如:

this.value;

选项2:

如果你想要ES6方式,那么用更少的代码编写会更好,例如:

this

其中(*)等同于之前的ES5代码。

答案 1 :(得分:0)

我不确定天气我理解你的问题。

使用#bind(ES5方式)

$('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

     

Lexical this

     

在箭头函数之前,每个新函数都定义了它自己的这个值(在构造函数的情况下是一个新对象,在严格模式函数调用中是未定义的,如果函数被称为&#34,则是上下文对象;对象方法&#34 ;等)。事实证明,这是一种面向对象的编程风格。

     

箭头函数不会创建自己的上下文;相反,它捕获了封闭上下文的这个值,所以下面的代码按预期工作。(我没有复制代码)

所以,您可以使用箭头功能

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