使用 $.fn 时使用“this”访问范围。和 $('#test').demo();答案

【问题标题】：Access scope with "this" when using $.fn. and $('#test').demo();使用 $.fn 时使用“this”访问范围。和 $('#test').demo();
【发布时间】：2017-10-03 15:25:10
【问题描述】：

我希望这不是一个非常愚蠢的问题，但我对 jQuery 在使用其原型函数时如何处理 this 属性感到有些困惑。

将参数传递给$.fn.demo等函数时，this的值将包含参数中传递的DOM对象，在这种情况下与选择器#test匹配的对象：

$('#test').demo({test: 'test1'});

在使用带参数的 jQuery 原型函数时是否可以访问函数范围？我的目标是动态定义范围变量，我通常会使用this['demo'] = 'aaa'

如果不在this 中，它们会存储在哪里？

Code online

$.fn.demo = function(options){
    var helloText = "hello";

    // keeping central set of classnames and selectors
    var classes = {
        wrapper: 'wrapper',
        pepe: 'demo'
    };

    //this has the #test DOM object value, not the function scope
    console.log(this);

    //trying to assign the object keys to the global scope
    for (var key in classes) {
        this[key] = classes[key];
    }

    console.log(helloText);

    //fails to print the value of "pepe", it doens't exist in the scope
    console.log(pepe);
};

$('#test').demo({test: 'test1'});

【问题讨论】：

this 不是 DOM 对象，而是 jquery 对象实例。
@MinusFour nvm 我错了
如果你使用this.pepe 而不是pepe 它应该可以工作
@MinusFour 我想避免使用对象属性。他们最终使代码更长，并且没有使用常见的缩小器进行缩小。
你还必须避免this[key]。您可以动态创建变量的唯一方法是通过 eval，而且更糟。

标签： javascript jquery jquery-plugins

【解决方案1】：

浏览器 Javascript 的全局对象是 window 对象。所以你可以像这样修改你的部分代码，它会起作用：

for (var key in classes) {
    window[key] = classes[key];
}

然而，将东西写入窗口对象通常是个坏主意，因为一切都可以从那里写入和读取。防止这种情况的一种方法是：

(function() {
  var myEncapsulatedValues = {};

  var myJQueryFunction = function() {
    var classes = {
      wrapper: 'Yay it works!!',
      pepe: 'demo'
    };
    
    for (var prop in classes) {
      myEncapsulatedValues[prop] = classes[prop];
    }
  };

  myJQueryFunction();

  console.log(myEncapsulatedValues['wrapper']);

})();

// But I cant access encapsulated values here
console.log(typeof myEncapsulatedValues);

这是一种在Javascript中模拟封装的基本方式，称为IIFE（Immediately Invoked Function Expression）。

如果您是 Javascript 新手，有很多东西需要学习。范围，上下文，关闭，提升，模块。即使知道他们的名字也会让你更有能力解决你将面临的困难。基本思路可以here.

【讨论】：

【解决方案2】：

我不确定您的目标，如果只是在“this”范围内添加变量，那么当您使用它时，您应该使用“this”，就像@MinusFour 已经说过的那样，或者您想在函数范围内添加变量然后使用eval，可以看到下面js代码的区别；

$.fn.demo = function(options){
    var helloText = "hello";

    // keeping central set of classnames and selectors
    var classes = {
        wrapper: 'wrapper',
        pepe: 'demo'
    };

    //this has the #test DOM object value, not the function scope
    console.log(this);

    //trying to assign the object keys to the global scope
    for (var key in classes) {
        this[key] = classes[key];
        eval("var " + key+"='"+classes[key]+"'");
    }
    console.log(this);

    console.log(helloText);

    //fails to print the value of "pepe", it doens't exist in the scope
    console.log(this.pepe);
    console.log(pepe);
};

$('#test').demo({test: 'test1'});

【讨论】：