AngularJs destructuring $location

Question

Instead of using:

const ref = $location.protocol() + '://' + $location.host();

i try to do it like this:

const { protocol, host } = $location;
const ref = protocol() + '://' + host();

but it does not seem to work. ( protocol() is not returning anything, same for host() ) However, if I try something like this:

const loc = {
    protocol: function(){
        return 'http';
    },
    host: function(){
        return 'example.com';
    },
};

const { protocol, host } = loc;

document.write(protocol() + '://' + host());

it works. Any ideea why?

Ps. Some sample here, just uncomment the second line and it would not work anymore.

Answer 1

The destructuring assignment syntax is a JavaScript expression that makes it possible to unpack values from arrays, or properties from objects, into distinct variables.

You loose reference to this when you de-structure methods,$location.protocol and protocol refer to different this

let a = {
  myName : 'my name',
  nameLogger(){
    return this.myName
  }
}

let {nameLogger} = a

console.log( 'Hello ' + nameLogger())

nameLogger = nameLogger.bind(a)

console.log( 'Hello ' + nameLogger())