摘要：在上一篇文章中中和模塊的導(dǎo)入導(dǎo)出對比，偏向于理論層面，還有一些同學(xué)在微信群里或是私下里針對一些問題進(jìn)行了溝通，所以有了這一篇文章，對的導(dǎo)入導(dǎo)出進(jìn)行總結(jié)和實(shí)踐當(dāng)直接給時，會失效這個問題其實(shí)已經(jīng)和導(dǎo)入導(dǎo)出沒什么關(guān)系了，我們看一個知乎上的問題詳細(xì)

在上一篇文章中JavaScript中AMD和ES6模塊的導(dǎo)入導(dǎo)出對比，偏向于理論層面，還有一些同學(xué)在微信群里或是私下里針對一些問題進(jìn)行了溝通，所以有了這一篇文章，對js的導(dǎo)入導(dǎo)出進(jìn)行總結(jié)和實(shí)踐

這個問題其實(shí)已經(jīng)和導(dǎo)入導(dǎo)出沒什么關(guān)系了，
我們看一個知乎上的問題（詳細(xì)地址閱讀原文可以查看）
我們以此為突破點(diǎn)
js 數(shù)組賦值問題 ：值傳遞還是引用？

var a = [1,2,3];
var b = a;
a = [4,5,6];
console.log(b);  //=>[1,2,3]

繼續(xù)看

var a = [1,2,3];
var b = a;
a.pop();
console.log(b);  //=>[1,2]

為什么會出現(xiàn)這種情況？

數(shù)組和對象的賦值操作都是引用傳遞

看下這個（留意注釋部分）

var a = [1,2,3];// a指向了數(shù)組 [1,2,3];
var b = a;//b 指向 a 所指向的數(shù)組[1,2,3];
a = [4,5,6];//a 指向了新的數(shù)組 [4,5,6],(a的指向發(fā)生了變化，改變的是a引用本身，沒有改變數(shù)組對象,所以b沒有變)
console.log(b);  //b沒有改變，還是指向數(shù)組 [1,2,3];

再看下這個（留意注釋部分）

var a = [1,2,3];// a指向了數(shù)組 [1,2,3];
var b = a;//b 指向 a 所指向的數(shù)組[1,2,3];
a.pop();// a 指向的數(shù)組實(shí)例發(fā)生了 pop 操作
console.log(b);  //=>a和b都是指向同一個數(shù)組，a變量，所以b也變量，最后輸出=>[1,2]

看一張圖片，很形象的描述

數(shù)組如此，對象也是大同小異
看一個群友@ZSing提供的demo

var test = {
  "name": "zhangshuo"
}
var demo = test;

demo.name = "want you"
//你認(rèn)為test是什么？
console.log(test)//=>{ name: "want you" }

下面通過注釋解釋一下（如出一轍）

var test = {  "name": "zhangshuo"}//test指向了一個對象 {  "name": "zhangshuo"}
var demo = test;//demo 指向 test 所指向的對象 {  "name": "zhangshuo"}
demo.name = "want you"http://對象的屬性發(fā)生了改變 {  "name": "want you"}
//你認(rèn)為test是什么？
console.log(test)//=>{ name: "want you" }

test和demo指向了同一個對象，一個變了，就都變了
同樣的，我們對上面的demo做一下改造

var test = {
  "name": "zhangshuo"
}
var demo = test;
  test={
    "name": "更改了這個name"
  }
demo.name = "want you"
//你認(rèn)為test是什么？
console.log(test)//=>{ name: "更改了這個name" }

還需要對此進(jìn)行贅述嗎？
還是通過注釋對此進(jìn)行解釋說明

var test = {  "name": "zhangshuo"}//test指向了一個對象 {  "name": "zhangshuo"}
var demo = test;//demo 指向 test 所指向的對象 {  "name": "zhangshuo"}
  test={ "name": "更改了這個name" }//test的指向發(fā)生了變化，指向了一個新對象{ "name": "更改了這個name" }
demo.name = "want you"http://demo的指向沒有變，改變了原對象的屬性 {  "name": "want you"}
//你認(rèn)為test是什么？
console.log(test)//=>{ name: "更改了這個name" }

我相信，上面的兩個栗子你已經(jīng)看懂了，即將進(jìn)入正題
先來一個過渡
再看一個栗子，用來模擬exports和 module.exports的關(guān)聯(lián)關(guān)系

  let md = {exps:{}}//md指向一個對象 {exps:{}}
  let exps = md.exps//exps指向了md.exps所指向的對象 ,這個空對象{}
  md.exps = {a: 1,  b: 2}//md.exps指向了一個新對象 {a: 1,  b: 2}
  exps.c=3//exps,屬性賦值 {c: 3}
  console.log(md.exps); //新對象{ a: 1, b: 2 }

上面栗子中的md就是module，md.exps就是module.exports，exps就是exports
在每一個模塊的頭部都有一行這樣的命令

var exports = module.exports;

當(dāng)直接給module.exports賦值時（module.exports={.....}），module.exports就指向了一個新對象,exports會失效

還是這樣的一個前提

var exports = module.exports;

exports是來自于module，exports指向 module.exports所指向的對象
當(dāng)直接給exports賦值，即

 exports = {a:1}

exports指向了一個新對象，不再是 module.exports所指向的對象，所以不要給 exports 直接賦值（ exports =。。。）

exports的output.js

exports.str="string字符串"http://導(dǎo)出字符串
exports.bool=true//導(dǎo)出布爾
exports.num=123//導(dǎo)出number
exports.foo=(r)=>{//導(dǎo)出函數(shù)
  console.log(`導(dǎo)出函數(shù)為：${r}`);
}
exports.arr=[1,2,3]//導(dǎo)出數(shù)組
exports.obj={ a:1, b:2}//導(dǎo)出對象

input.js

  const iptObj= require("./output.js")
  console.log(iptObj.str);//=>string字符串
  console.log(iptObj.bool);//=>true
  console.log(iptObj.num);//=>123
  console.log(iptObj.arr);//=>[ 1, 2, 3 ]
  console.log(iptObj.obj);//=>{ a: 1, b: 2 }
  iptObj.foo("參數(shù)")//=>導(dǎo)出函數(shù)為：參數(shù)

module.exports的output.js

module.exports={
  str:"string字符串",
  bool:true,
  num:123,
  foo:(r)=>{
    console.log(`導(dǎo)出函數(shù)為：${r}`);
  },
  arr:[1,2,3],
  obj:{ a:1, b:2}
}

input.js

  const iptObj= require("./output.js")
  console.log(iptObj.str);//=>string字符串
  console.log(iptObj.bool);//=>true
  console.log(iptObj.num);//=>123
  console.log(iptObj.arr);//=>[ 1, 2, 3 ]
  console.log(iptObj.obj);//=>{ a: 1, b: 2 }
  iptObj.foo("參數(shù)")//=>導(dǎo)出函數(shù)為：參數(shù)

module.exports的output.js同時支持如下寫法

module.exports.str="string字符串"
module.exports.bool=true
module.exports.num=123
module.exports.foo=(r)=>{
  console.log(`導(dǎo)出函數(shù)為：${r}`);
}
module.exports.arr=[1,2,3]
module.exports.obj={ a:1, b:2}

input.js不變

export的output.js

export const srt = "string字符串"
export const bool = true
export const num = 123
export const arr = [1, 2, 3]
export const obj = { a: 1, b: 2}
export function foo(r) {
  console.log(`導(dǎo)出函數(shù)為：${r}`);
}

input.js

import {str,arr,obj,bool,num,foo} from "./output"
console.log(str)
console.log(arr)
console.log(obj)
console.log(bool)
console.log(num)
foo("參數(shù)")

export的output.js同時支持如下寫法

const str = "string字符串" 
const bool = true
const num = 123
const arr = [1, 2, 3]
const obj = { a: 1, b: 2}
function foo(r) {
  console.log(`導(dǎo)出函數(shù)為：${r}`);
}
export {
  str,bool,num,arr,obj,foo
}

input.js 導(dǎo)入支持重命名

import {str as STR,arr,obj,bool,num,foo as FOO} from "./output"
console.log(STR)
console.log(arr)
console.log(obj)
console.log(bool)
console.log(num)
FOO("參數(shù)")

繼續(xù)重命名

import * as newName from "./output"
console.log(newName.str)
console.log(newName.arr)
console.log(newName.obj)
console.log(newName.bool)
console.log(newName.num)
newName.foo("參數(shù)")

export default的output.js

export default {
  str: "string字符串",
  bool: true,
  num: 123,
  foo: (r) => {
    console.log(`導(dǎo)出函數(shù)為：${r}`);
  },
  arr: [1, 2, 3],
  obj: { a: 1, b: 2 }
}

input.js

import defaultObj from "./output"
console.log(defaultObj.str)
console.log(defaultObj.arr)
console.log(defaultObj.bool)
console.log(defaultObj.num)
console.log(defaultObj.obj)
defaultObj.foo("ef")//=>導(dǎo)出函數(shù)為：ef

export default的output.js同時支持如下寫法

const str = "string字符串"
const bool = true
const num = 123
const arr = [1, 2, 3]
const obj = {a: 1, b: 2}
function foo(r) {
  console.log(`導(dǎo)出函數(shù)為：${r}`);
}
export default {
  str,
  bool,
  num,
  arr,
  obj,
  foo
}

input.js不變

這篇文章是對上一篇文章的總結(jié)和實(shí)踐

當(dāng)直接給 module.exports時，exports會失效

直接給exports賦值會切斷exports和 module.exports的關(guān)聯(lián)關(guān)系

export，export default，exports，module.exports具體的使用方法實(shí)例

更多前端資源請關(guān)注微信公眾號“前端陌上寒”

原文鏈接

參考鏈接
js 數(shù)組賦值問題 ：值傳遞還是引用？