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内部，因此无法访问其内部作用域。