javascript의 프로토 타입에서 객체 속성에 액세스하는 방법은 무엇입니까?

Question

printData를 호출 할 때 아래 클래스가 있습니다. this.collection이 정의되지 않습니다.

printData() 내부의 프로토 타입에서 this.collection에 어떻게 액세스합니까? 또는 클래스 구조를 변경해야합니까? 실제로 객체는 인턴이 객체를 계층 구조로 반환하는 함수를 반환합니다.

미리 감사드립니다.

샘플 클래스 :

var DbProvider = (function() { 
    function DbProvider(db) { 
     var that = this; // create a reference to "this" object 
     that.collection = db; 
    } 
    DbProvider.prototype.create = function() { 
     return { 
      action: function() { 
       var y = { 
        printData: function() { 
         alert('Hello ' + this.collection.Name); 
        } 
       }; 
       return y; 
      } 
     }; 
    }; 
    return DbProvider; 
})(); 

사용법 : ES5 구문과 호출 구조를 유지

var a = new DbProvider({ "Name": "John" }); 
a.create().action().printData(); 

Answer 1

처럼 정확하게이 포인터 추적 할 필요

또는 당신은 약간의 리팩토링과 DbProvider의 외부 범위에 that를 이동하고 ES6 클래스를 사용할 수 있을까 printData

var DbProvider = (function() { 
 
    var that; 
 
    function DbProvider(db) { 
 
     that = this; // create a reference to "this" object 
 
     that.collection = db; 
 
    } 
 
    DbProvider.prototype.create = function() { 
 
     return { 
 
      action: function() { 
 
       var y = { 
 
        printData: function() { 
 
         alert('Hello ' + that.collection.Name); 
 
        } 
 
       }; 
 
       return y; 
 
      } 
 
     }; 
 
    }; 
 
    return DbProvider; 
 
})(); 
 

 
var a = new DbProvider({ "Name": "John" }); 
 
a.create().action().printData();

Answer 2

해결책은 다음과 같습니다 확실히

var DbProvider = (function() { 
    function DbProvider(db) { 
     var that = this; // create a reference to "this" object 
     that.collection = db; 
    } 
    DbProvider.prototype.create = function() { 
     var that = this; 
     return { 
      action: function() { 
       var y = { 
        printData: function() { 
         console.log('Hello ' + that.collection.Name); 
        } 
       }; 
       return y; 
      } 
     }; 
    }; 
    return DbProvider; 
})(); 

우아하지 만 작동 :)

구조를 변경하지 않으려면 함수를 arrow functions으로 변경하면이 동작을 얻을 수 있습니다.

var DbProvider = (function() { 
    function DbProvider(db) { 
     var that = this; // create a reference to "this" object 
     that.collection = db; 
    } 
    DbProvider.prototype.create = function() { 
     return { 
      action:() => { 
       var y = { 
        printData:() => { 
         alert('Hello ' + this.collection.Name); 
        } 
       }; 
       return y; 
      } 
     }; 
    }; 
    return DbProvider; 
})(); 

이 "클래스"를 만드는 방법은 확실히 비표준입니다. 더 나은 구조화 방법에 대한 예를 원한다면 알려주십시오.

Answer 3

는 당신은 this 참조를 저장하고 printData 기능

var DbProvider = (function() { 
 
    function DbProvider(db) { 
 
     var that = this; // create a reference to "this" object 
 
     that.collection = db; 
 
    } 
 
    DbProvider.prototype.create = function() { 
 
     var self = this; 
 
     return { 
 
      action: function() { 
 
       var y = { 
 
        printData: function() { 
 
         alert('Hello ' + this.collection.Name); 
 
        }.bind(self) 
 
       }; 
 
       return y; 
 
      } 
 
     }; 
 
    }; 
 
    return DbProvider; 
 
})(); 
 

 
var a = new DbProvider({ "Name": "John" }); 
 
a.create().action().printData();

에 바인딩 할 수이

var DbProvider = (function() { 
 
    function DbProvider(db) { 
 
    this.collection = db; 
 
    } 
 
    DbProvider.prototype.create = function() { 
 
    var self = this; 
 
    return { 
 
     action: function() { 
 
     var y = { 
 
      printData: function() { 
 
      alert('Hello ' + self.collection.Name); 
 
      } 
 
     }; 
 
     return y; 
 
     } 
 
    }; 
 
    }; 
 
    return DbProvider; 
 
})(); 
 

 

 

 
let dbProvider = new DbProvider({ 
 
    Name: "test" 
 
}); 
 
dbProvider.create().action().printData();