Could not call contract function with its signature

Question

Web3.js documentation says here that the methods of a smart contract are available through:

1. The name: myContract.methods.myMethod
2. The name with parameters: myContract.methods['myMethod(uint256)']
3. The signature: myContract.methods['0x58cf5f10']

but when i call the method with 2nd and 3rd option, I could not retrieved the value, rather it show lot of signature of objects.. here is my code

async function d () {

  var  myContAddr = '0x8175036782E9564C084eD1DA6C44C27150F24316';
  var myContractAbiDefenition = myAbi;
  var myContractInstance = new web3.eth.Contract(myContractAbiDefenition, myContAddr);

  tokens = await myContractInstance.methods['0xc4e41b22'].call();
  //tokens = await myContractInstance.methods['getTotalSupply()'].call(); // its also give same output
  //  tokens = await myContractInstance.methods.getTotalSupply().call(); // this gives me required output "Tokens :  6"  
  console.log("Tokens : ",tokens);
}
d();

here is my output

Tokens :  { call:
   { [Function: bound _executeMethod] request: [Function: bound _executeMethod] },
  send:
   { [Function: bound _executeMethod] request: [Function: bound _executeMethod] },
  encodeABI: [Function: bound _encodeMethodABI],
  estimateGas: [Function: bound _executeMethod],
  arguments: [],
  _method:
   { constant: true,
     inputs: [],
     name: 'getTotalSupply',
     outputs: [ [Object] ],
     payable: false,
     stateMutability: 'view',
     type: 'function',
     signature: '0xc4e41b22' },
  _parent:
   Contract {
     currentProvider: [Getter/Setter],
     _requestManager:
      RequestManager {
        provider: [HttpProvider],
        providers: [Object],
        subscriptions: {} },
     givenProvider: null,
     providers:
      { WebsocketProvider: [Function: WebsocketProvider],
        HttpProvider: [Function: HttpProvider],
        IpcProvider: [Function: IpcProvider] },
     _provider:
      HttpProvider {
        host: 'HTTP://127.0.0.1:7545',
        httpAgent: [Agent],
        withCredentials: false,
        timeout: 0,
        headers: undefined,
        connected: false },
     setProvider: [Function],
     BatchRequest: [Function: bound Batch],
     extend:
      { [Function: ex]
        formatters: [Object],
        utils: [Object],
        Method: [Function: Method] },
     clearSubscriptions: [Function],
     options: { address: [Getter/Setter], jsonInterface: [Getter/Setter] },
     transactionBlockTimeout: 50,
     transactionConfirmationBlocks: 24,
     transactionPollingTimeout: 750,
     defaultChain: undefined,
     defaultHardfork: undefined,
     defaultCommon: undefined,
     defaultAccount: [Getter/Setter],
     defaultBlock: [Getter/Setter],
     methods:
      { balances: [Function: bound _createTxObject],
        '0x27e235e3': [Function: bound _createTxObject],
        'balances(address)': [Function: bound _createTxObject],
        buyToken: [Function: bound _createTxObject],
        '0xa4821719': [Function: bound _createTxObject],
        'buyToken()': [Function: bound _createTxObject],
        getTotalSupply: [Function: bound _createTxObject],
        '0xc4e41b22': [Function: bound _createTxObject],
        'getTotalSupply()': [Function: bound _createTxObject],
        owner: [Function: bound _createTxObject],
        '0x8da5cb5b': [Function: bound _createTxObject],
        'owner()': [Function: bound _createTxObject],
        setTotalSupply: [Function: bound _createTxObject],
        '0xf7ea7a3d': [Function: bound _createTxObject],
        'setTotalSupply(uint256)': [Function: bound _createTxObject],
        totalSupply: [Function: bound _createTxObject],
        '0x18160ddd': [Function: bound _createTxObject],
        'totalSupply()': [Function: bound _createTxObject] },
     events: { allEvents: [Function: bound ] },
     _address: '0x8175036782E9564C084eD1DA6C44C27150F24316',
     _jsonInterface:
      [ [Object],
        [Object],
        [Object],
        [Object],
        [Object],
        [Object],
        [Object],
        [Object] ] },
  _ethAccounts:
   Accounts {
     currentProvider: [Getter/Setter],
     _requestManager:
      RequestManager {
        provider: [HttpProvider],
        providers: [Object],
        subscriptions: {} },
     givenProvider: null,
     providers:
      { WebsocketProvider: [Function: WebsocketProvider],
        HttpProvider: [Function: HttpProvider],
        IpcProvider: [Function: IpcProvider] },
     _provider:
      HttpProvider {
        host: 'HTTP://127.0.0.1:7545',
        httpAgent: [Agent],
        withCredentials: false,
        timeout: 0,
        headers: undefined,
        connected: false },
     setProvider: [Function],
     _ethereumCall:
      { getNetworkId: [Function],
        getChainId: [Function],
        getGasPrice: [Function],
        getTransactionCount: [Function] },
     wallet:
      Wallet {
        _accounts: [Circular],
        length: 0,
        defaultKeyName: 'web3js_wallet' } } }

Answer 1

You're missing () after myContractInstance.methods['0xc4e41b22'].