javascript - 直接為變數賦值一個函數和引用一個函數有什麼不同？

Question

直接為變數賦值一個函數和引用一個函數有什麼不同？

如：片段1和片段2

片段1

function fn(){
  var box = document.getElementById("box");
  box.onclick = function(){
      console.log(111);
  };
  box = null;
}

片段2

function fn(){
  var box = document.getElementById("box");
  box.onclick = click;
}

function click(){
  console.log(111);
}

片段1中onclick裡面的函數允許訪問fn中的變量，而片段2中的onclick函數不允許訪問fn中的變量，我是這樣想的，因為片段2中的click由於是在fn外部定義的所以無法存取fn中的變量，那麼也就是說在片段2中為onclick賦值其實是引用而非拷貝？

Answer 1

不不不, 你又不是呼叫方法, 傳遞參數, 所以這兩個例子的核心不是什麼引用/拷貝的問題

這是作用域(原型鏈)的問題

變數在不同的作用域有不同的存取權限:
子作用域能存取父作用域
父作用域不能存取子作用域
同級作用域無法互相存取

Answer 2

猜測你可能需要深入學習下變數作用域的相關知識，js的作用域是在定義的時候就已經確定了。

片段1中

function fn(){
  var box = document.getElementById("box");
  box.onclick = function(){
      console.log(111);
  };
  box = null;
}

box綁定的onclick回調，是在fn的函數內部，因此其內部所有局部變數都能被該回調存取。

片段2中

function fn(){
  var box = document.getElementById("box");
  box.onclick = click;
}

function click(){
  console.log(111);
}

click方法在fn函数外部，与之同级，由于定义时，click尚不在fn內部，因此無法存取其內部作用域。