Import the js and call the reusable method, but got cannot access the method

Here is my kitchen script

frappe.provide('SmartPOS.POS');
var pos = undefined
frappe.pages['kitchen'].on_page_load = function(wrapper) {
	frappe.ui.make_app_page({
		parent: wrapper,
		title: __('kitchen View'),
		single_column: true
	});
	frappe.require('/assets/smartpos/js/pos_controller.js', function() {
        //create global scope
		this.pos = new SmartPOS.POS.Controller(wrapper);
		this.pos.change_amount('first called method');//this calling works
	});
	//read global scope variable
	this.pos.change_amount('second call method');// Raise an error in console
};
frappe.pages['kitchen'].refresh = function(wrapper) {
	if (document.scannerDetectionData) {
		onScan.detachFrom(document);
		wrapper.pos.wrapper.html("<h1>Hello</h1>");
	}
};

here is my controller class

SmartPOS.POS.Controller = class {
	constructor(wrapper) {
		this.wrapper = $(wrapper).find('.layout-main-section');
		this.page = wrapper.page;
        console.log(this.page);  
	}
	change_amount(amount){
		console.log(`${amount}`);
	}
};

When I ran the page I got only one time called the first one and show me an error with the second called.

TypeError: Cannot read properties of undefined (reading ‘change_amount’)
at frappe.pages.kitchen.on_page_load (kitchen.js:14:11)
at Page2.trigger_page_event (pageview.js:101:15)
at new Page2 (pageview.js:88:8)
at pageview.js:50:6
at Object.callback (pageview.js:33:6)
at Object.callback [as success_callback] (request.js:83:16)
at 200 (request.js:127:34)
at Object. (request.js:279:6)
at fire (jquery.js:3500:31)
at Object.fireWith [as resolveWith] (jquery.js:3630:7)