<p dir="auto">Here's an example where <code class="notranslate">Alpha</code> and <code class="notranslate">Beta</code> both extend <code class="notranslate">Axios</code> and when you log instances of these classes you can see that <code class="notranslate">this.defaults.headers</code> are shared between the two classes.</p>
<p dir="auto">The expected behavior would be that <code class="notranslate">alpha</code> would only contain the <code class="notranslate">alpha</code> header and <code class="notranslate">beta</code> would only contain <code class="notranslate">beta</code>.</p>
<p dir="auto">Any idea why this is not the case and how a PR can be made to fix this?</p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="import { Axios } from 'axios'

export class Alpha extends Axios {
  constructor () {
    super()
    this.alpha = 'alpha'
    this.defaults.headers.alpha = 'alpha'
  }
}

export class Beta extends Axios {
  constructor () {
    super()
    this.beta = 'beta'
    this.defaults.headers.beta = 'beta'
  }
}

let alpha = new Alpha()
let beta = new Beta()

console.log(alpha)
console.log(beta)"><pre class="notranslate"><span class="pl-k">import</span> <span class="pl-kos">{</span> <span class="pl-v">Axios</span> <span class="pl-kos">}</span> <span class="pl-k">from</span> <span class="pl-s">'axios'</span>

<span class="pl-k">export</span> <span class="pl-k">class</span> <span class="pl-v">Alpha</span> <span class="pl-k">extends</span> <span class="pl-v">Axios</span> <span class="pl-kos">{</span>
  <span class="pl-en">constructor</span> <span class="pl-kos">(</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
    <span class="pl-smi">super</span><span class="pl-kos">(</span><span class="pl-kos">)</span>
    <span class="pl-smi">this</span><span class="pl-kos">.</span><span class="pl-c1">alpha</span> <span class="pl-c1">=</span> <span class="pl-s">'alpha'</span>
    <span class="pl-smi">this</span><span class="pl-kos">.</span><span class="pl-c1">defaults</span><span class="pl-kos">.</span><span class="pl-c1">headers</span><span class="pl-kos">.</span><span class="pl-c1">alpha</span> <span class="pl-c1">=</span> <span class="pl-s">'alpha'</span>
  <span class="pl-kos">}</span>
<span class="pl-kos">}</span>

<span class="pl-k">export</span> <span class="pl-k">class</span> <span class="pl-v">Beta</span> <span class="pl-k">extends</span> <span class="pl-v">Axios</span> <span class="pl-kos">{</span>
  <span class="pl-en">constructor</span> <span class="pl-kos">(</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
    <span class="pl-smi">super</span><span class="pl-kos">(</span><span class="pl-kos">)</span>
    <span class="pl-smi">this</span><span class="pl-kos">.</span><span class="pl-c1">beta</span> <span class="pl-c1">=</span> <span class="pl-s">'beta'</span>
    <span class="pl-smi">this</span><span class="pl-kos">.</span><span class="pl-c1">defaults</span><span class="pl-kos">.</span><span class="pl-c1">headers</span><span class="pl-kos">.</span><span class="pl-c1">beta</span> <span class="pl-c1">=</span> <span class="pl-s">'beta'</span>
  <span class="pl-kos">}</span>
<span class="pl-kos">}</span>

<span class="pl-k">let</span> <span class="pl-s1">alpha</span> <span class="pl-c1">=</span> <span class="pl-k">new</span> <span class="pl-v">Alpha</span><span class="pl-kos">(</span><span class="pl-kos">)</span>
<span class="pl-k">let</span> <span class="pl-s1">beta</span> <span class="pl-c1">=</span> <span class="pl-k">new</span> <span class="pl-v">Beta</span><span class="pl-kos">(</span><span class="pl-kos">)</span>

<span class="pl-smi">console</span><span class="pl-kos">.</span><span class="pl-en">log</span><span class="pl-kos">(</span><span class="pl-s1">alpha</span><span class="pl-kos">)</span>
<span class="pl-smi">console</span><span class="pl-kos">.</span><span class="pl-en">log</span><span class="pl-kos">(</span><span class="pl-s1">beta</span><span class="pl-kos">)</span></pre></div>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="Alpha {
  defaults: 
   { transformRequest: [ [Function: transformRequest] ],
     transformResponse: [ [Function: transformResponse] ],
     headers: 
      { common: [Object],
        patch: [Object],
        post: [Object],
        put: [Object],
        alpha: 'alpha',
        beta: 'beta' },
     timeout: 0,
     xsrfCookieName: 'XSRF-TOKEN',
     xsrfHeaderName: 'X-XSRF-TOKEN',
     maxContentLength: -1,
     validateStatus: [Function: validateStatus] },
  interceptors: 
   { request: InterceptorManager { handlers: [] },
     response: InterceptorManager { handlers: [] } },
  alpha: 'alpha' }
Beta {
  defaults: 
   { transformRequest: [ [Function: transformRequest] ],
     transformResponse: [ [Function: transformResponse] ],
     headers: 
      { common: [Object],
        patch: [Object],
        post: [Object],
        put: [Object],
        alpha: 'alpha',
        beta: 'beta' },
     timeout: 0,
     xsrfCookieName: 'XSRF-TOKEN',
     xsrfHeaderName: 'X-XSRF-TOKEN',
     maxContentLength: -1,
     validateStatus: [Function: validateStatus] },
  interceptors: 
   { request: InterceptorManager { handlers: [] },
     response: InterceptorManager { handlers: [] } },
  beta: 'beta' }"><pre class="notranslate"><code class="notranslate">Alpha {
  defaults: 
   { transformRequest: [ [Function: transformRequest] ],
     transformResponse: [ [Function: transformResponse] ],
     headers: 
      { common: [Object],
        patch: [Object],
        post: [Object],
        put: [Object],
        alpha: 'alpha',
        beta: 'beta' },
     timeout: 0,
     xsrfCookieName: 'XSRF-TOKEN',
     xsrfHeaderName: 'X-XSRF-TOKEN',
     maxContentLength: -1,
     validateStatus: [Function: validateStatus] },
  interceptors: 
   { request: InterceptorManager { handlers: [] },
     response: InterceptorManager { handlers: [] } },
  alpha: 'alpha' }
Beta {
  defaults: 
   { transformRequest: [ [Function: transformRequest] ],
     transformResponse: [ [Function: transformResponse] ],
     headers: 
      { common: [Object],
        patch: [Object],
        post: [Object],
        put: [Object],
        alpha: 'alpha',
        beta: 'beta' },
     timeout: 0,
     xsrfCookieName: 'XSRF-TOKEN',
     xsrfHeaderName: 'X-XSRF-TOKEN',
     maxContentLength: -1,
     validateStatus: [Function: validateStatus] },
  interceptors: 
   { request: InterceptorManager { handlers: [] },
     response: InterceptorManager { handlers: [] } },
  beta: 'beta' }
</code></pre></div>
<p dir="auto">If I have two instances of axios created with axios.create and I set a default header on one, it also changes it on all the other ones in existence.</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="var instance1 = this.oauthService = axios.create({});
var instance2 = this.oauthService = axios.create({});

instance2.defaults.headers.common['Authorization'] = 'askdjfaksdjf';"><pre class="notranslate"><code class="notranslate">var instance1 = this.oauthService = axios.create({});
var instance2 = this.oauthService = axios.create({});

instance2.defaults.headers.common['Authorization'] = 'askdjfaksdjf';
</code></pre></div>
<p dir="auto">Both instance1 and 2 now have the Authorization header changed.  I believe the problem is that the util.merge operation doesn't do deep merging, though as you see below, only if the result[key] and val are both objects, does it do a recursive merge, otherwise it assigns the value by reference.</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="function merge(/\* obj1, obj2, obj3, ... */) {
  var result = {};
  function assignValue(val, key) {
    if (typeof result[key] === 'object' &amp;&amp; typeof val === 'object') {
      result[key] = merge(result[key], val);
    } else {
      result[key] = val;
    }
  }

  for (var i = 0, l = arguments.length; i &lt; l; i++) {
    forEach(arguments[i], assignValue);
  }
  return result;
}"><pre class="notranslate"><code class="notranslate">function merge(/\* obj1, obj2, obj3, ... */) {
  var result = {};
  function assignValue(val, key) {
    if (typeof result[key] === 'object' &amp;&amp; typeof val === 'object') {
      result[key] = merge(result[key], val);
    } else {
      result[key] = val;
    }
  }

  for (var i = 0, l = arguments.length; i &lt; l; i++) {
    forEach(arguments[i], assignValue);
  }
  return result;
}
</code></pre></div>