【问题标题】:different scope when using class/constructor vs. variable methods使用类/构造函数与变量方法时的不同范围
【发布时间】:2016-06-08 19:18:56
【问题描述】:

我有一个脚本可以解析特定对象属性的关键字,然后将这些关键字和另一个属性附加到对象。新的属性值将打印到文档中以进行错误检查。

    var chemistry = {
     field: "chemistry",
     keywords: [
         "atom",
         "proton",
         "electron",
         "wavefunction",
         "neutron",
         "catalyst"],
     filter: function( title ) {
             var i;
             for( i = 0 ; i < title.split( " " ).length; i++ )  {
             var title_part = title.toLowerCase().split( " " )[ i ];
             var j;                    
                for( j = 0 ; j < this.keywords.length; j++ ) {
                    if ( this.keywords[ j ] == title_part && library[ 0 ].keywords.indexOf( this.keywords[ j ] ) == -1 ) {
                        library[ 0 ].keywords.push( this.keywords[ j ] );
                        if ( library[ 0 ].field.indexOf( this.field ) == -1 ) {
                            library[ 0 ].field.push( this.field );
                         };
                     };
                 };
             };
         }
   };

chemistry.filter( library[0].title );

document.writeln( "KEYWORDS: " + library[0].keywords );
document.writeln( "FIELD: " + library[0].field );

这很好用,但我正在尝试创建一个类来构造一个如上所述的新对象。这是我正在使用的代码

"use strict"         
class Discipline {
     constructor(field, keyword) {
         this.field = field;
         this.keywords = keyword;
         this.filter =  function( title ) {
             var i;
             for( i = 0 ; i < title.split( " " ).length; i++ )  {
             var title_part = title.toLowerCase().split( " " )[ i ];
             var j;                    
                for( j = 0 ; j < this.keywords.length; j++ ) {
                    if ( this.keywords[ j ] == title_part && library[ 0 ].keywords.indexOf( this.keywords[ j ] ) == -1 ) {
                        library[ 0 ].keywords.push( this.keywords[ j ] );
                        if ( library[ 0 ].field.indexOf( this.field ) == -1 ) {
                            library[ 0 ].field.push( this.field );
                         };
                     };
                 };
             };
         }
     }
 };

 var chemistry = new Discipline("chemistry", "electron");
 chemistry.filter( library[0].title );

 document.writeln( "KEYWORDS: " + library[0].keywords );
 document.writeln( "FIELD: " + library[0].field );

过滤器似乎没有输出任何内容,我只在文档中看到“KEYWORDS:FIELD:”。令人困惑的是,如果我使用 document.writeln() 检查 library[0].field 和 library[0].keywords,我会得到预期值。

我想知道“this”的范围。当我使用类构造函数时发生变化。还是发生了其他事情?

顺便说一句,如果有人知道将数组作为关键字参数传递的好方法,那将不胜感激。现在我正在传递一个间隔字符串并将其拆分。

【问题讨论】:

    标签: javascript arrays class constructor scope


    【解决方案1】:

    是的,this 的范围正在改变。不过你可以这样做:

    var that = this;
    

    然后在需要的地方使用that.keywords。所以在你的代码中,像这样:

    class Discipline {
         constructor(field, keyword) {
             var that = this;
             that.field = field;
             that.keywords = keyword;
             that.filter =  function( title ) {
                 var i;
                 for( i = 0 ; i < title.split( " " ).length; i++ )  {
                 var title_part = title.toLowerCase().split( " " )[ i ];
                 var j;                    
                    for( j = 0 ; j < that.keywords.length; j++ ) {
                        if ( that.keywords[ j ] == title_part && library[ 0 ].keywords.indexOf( this.keywords[ j ] ) == -1 ) {
                            library[ 0 ].keywords.push( that.keywords[ j ] );
                            if ( library[ 0 ].field.indexOf( that.field ) == -1 ) {
                                library[ 0 ].field.push( that.field );
                             };
                         };
                     };
                 };
             }
         }
     };
    

    【讨论】:

    • 那么当var chemistry = new Discipline("chemistry", "electron");运行时,这是什么。指的是什么?
    • constructor(field, keyword) {} 部分中,this 指的是该函数。然后,当您进入 that.filter = function(title) {} 时,this 现在指的是您所在的新功能。
    • 我更新了代码,但还是没有得到预期的结果jsfiddle.net/jo3ghoLm
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2019-06-08
    • 2016-01-04
    • 2010-10-15
    • 1970-01-01
    • 1970-01-01
    • 2016-04-08
    相关资源
    最近更新 更多