SS的作用，一目了然~

@路人甲：再加点js，不可描述

@路人乙：妖艳的见多了，都喜欢天然的了

@路人丙：我全都要.jpg

@路人丁：左边好看

@我：我就喜欢看你们昧着良心说话，左边的女生给你们，右边的女生谁也别跟我抢！

同志，快醒醒，产品经理叫你改功能了

@路人甲：我，我，我不行了，这.....这是我最后一个bug

@路人乙：啊啊啊啊啊！别拦我我要自杀

@路人丙：快 快 快拿我的刀给我 我要kan屎他

@路人丁：一句mmp送个他们

@我：给我滚，打车滚啊！

想要学习PHP的可以私信帐号“学习交流”加群一起讨论，领取学习视频资料。

面是2个作用域的题目，可以试着先做一遍，然后想想背后的原因。

function foo(b) {

var a=b;

return {

a: a,

change: function(b) {

console.log(a, b, this.a);

a=a + b + this.a;

},

output: function() {

console.log(a, this.a, b);

}

}

}

var x=foo(1);

console.log('change before:')

console.log(x.a); // 1;

x.output(); // 1, 1, 1

x.a=3;

x.change(2); // 1, 2, 3

console.log('after change:');

console.log(x.a); // 3

x.output(); // 6, 3, 1

原因分析

var x=foo(1); // 执行后，x函数里面返回的对象，里面的属性和值都在执行过程中确定了，作用域范围在代码定义的位置。

console.log('change before:')

console.log(x.a); // 1;

// x.a=1。因为foo()函数里面返回对象中属性a被赋值为变量a,

// 而变量a在foo(1)执行时被赋值为b也就是1

x.output();

// a=1, this.a=1, b=1

// a, output函数没有变量a，通过作用域链向上查找, 父函数foo中有变量a

// this.a, 函数执行上下文的this指向函数的调用方也就是x对象,x被赋值为1

// b, output也是通过作用域链向上查找到foo里的变量b,是foo里面的形参变量

x.a=3;

// 修改x.a为3，此时影响的只是x对象中的a属性，并不影响foo函数作用域下a变量

x.change(2);

// a=1, b=2, this.a=3

// a, 仍然是foo第一次被调用时的值，没有被修改，仍然是1

// b，这个b是change函数的形参变量，不是外部的b, b被赋值为2

// this.a，此时this.a也就是x.a，已经被修改为3

// 执行这句后，foo作用域下的a变量被赋值为a+b+this.a=1+2+3=6

console.log('after change:');

console.log(x.a); // 3

// x.a没有受到影响，依然是3

x.output();

// a=6, this.a=3, b=1

// a在执行change(2)时已经被改成6了

// this.a就是x.a，因此是3

// b从output沿作用域开始查找，值仍是1，b没有被改过