js中一个函数中调用另一个函数,内部函数怎么访问外部函数的变量?
无意中逛到这个问题,突然发现自己以前也有这样的困惑

1
2
3
4
5
6
function a(){ alert(num);   }
function b(){
var num=3;
a();
}
b(); //num is not defined

a函数不是b的内部函数(闭包),而是全局函数。所以对于a函数来说,即使你b在内部调用了我a,我a还是访问不了你b。
说到底就是作用域问题,所以我想到了改变作用域的方法

call(),apply(),bind()

实现

1
2
3
4
5
6
function a(){ alert(num);   }
function b(){
var num=3;
a.call(b);
}
b(); // num is not defined

尝试了很多次,都无法获取到b,原来我对这些方法理解有误,查阅文档,发现此类方法主要作用是,对象调用不属于自己的方法,例如下例:
food函数是没有product方法,使用call对food的上下文进行product操作

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
//mozilla官方用例
function Product(name, price) {
this.name = name;
this.price = price;
}

function Food(name, price) {
Product.call(this, name, price);
this.category = 'food';
}

function Toy(name, price) {
Product.call(this, name, price);
this.category = 'toy';
}
var cheese = new Food('feta', 5);
var fun = new Toy('robot', 40);

使用闭包

闭包就不多说了,一个函数内部定义(不是调用)另一个函数
内部函数可调用外部函数的变量,作用域链的延长

改写

1
2
3
4
5
6
7

function b(){
var num=3;
function a(){ alert(num); }
a();
}
b(); //3

传参

1
2
3
4
5
6
function a(num){ alert(num);   }
function b(){
var num=3;
a(num);
}
b(); //3

return

1
2
3
4
5
6
function a(){ alert(b());   }
function b(){
var num=3;
return num;
}
a();

总结

一般来说,a是复用的函数,才会有此类用法,传参实现即可。

参考资料

深入浅出妙用 Javascript 中 apply、call、bind
学习Javascript闭包(Closure)
call()方法