Question

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

将参数传递给this之类的函数时，#test的值将包含参数中传递的DOM对象，在本例中是与选择器$('#test').demo({test: 'test1'});匹配的对象：

this['demo'] = 'aaa'

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

来做

如果不在$.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'});中，它们会存储在哪里？

Code online

spring:
devtools:
    restart:
        enabled: false
    livereload:
        enabled: false
data:
    mongodb:
        uri: mongodb://xxxxx:27017
        database: xxx
datasources:    
    elser:
        driver-class-name: org.postgresql.Driver
        url: jdbc:postgresql://222.21.224.337:5432/xxx
        username: username
        password: password
mail:
    host: localhost
    port: 25
    username:
    password:
thymeleaf:
    cache: true
jpa:
    show-sql: true
    database-platform: io.github.jhipster.domain.util.FixedPostgreSQL82Dialect
    database: POSTGRESQL
    properties:
        hibernate.id.new_generator_mappings: true
        hibernate.cache.use_second_level_cache: false
        hibernate.cache.use_query_cache: false
        hibernate.generate_statistics: true
        hibernate.dialect: org.hibernate.dialect.PostgreSQL82Dialect

Answer 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（立即调用函数表达式）。

如果您不熟悉Javascript，还有很多事情需要学习。范围，背景，关闭，吊装，模块。即使知道他们的名字也会让你更有能力解决你将面临的困难。您可以获得基本的想法here。

Answer 2

我不确定你的目标，如果只是在“this”范围内添加变量那么当你使用它时你应该使用像@MinusFour已经说过的“this”或者你想在函数范围中添加变量然后使用eval，你可以看到js Code以下的差异;

$.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'});

使用＆＃34;访问范围＆＃34;当使用$ .fn时。和$（＆＃39; #test＆＃39;）。demo（）;

2 个答案: