JS经典理解例子

Posted 2021-03-11 maycpou

1.  

var name = ‘the window‘;

var obj = {

　　name:"my obj",

　　getNameFunc:function(){

　　　　return function(){

　　　　　　return this.name;

　　　　}

　　}

};

alert(obj.getNameFunc()());//问输出结果是多少

答案：the window

理解：这里的obj.getNameFunc()返回了一个function,然后再再外面调用这个function,这时候调用function的是window对象，所有输出the window

 

2.

var name = ‘the window‘;

var obj = {

　　name:"my obj",

　　getNameFunc:function(){

　　　　var that = this;

　　　　return function(){

　　　　　　return that.name;

　　　　}

　　}

};

alert(obj.getNameFunc()());//问输出结果是多少

答案：my obj

理解：返回的这个function是getNameFunc的一个内部函数，而他使用了外部函数定义的变量，所以产生了闭包，再调用执行return that.name;的时候，可以再闭包中找到这个that变量（即外部函数的this）,所有最终相当于调用了obj 的name,所以返回my obj

 

3.

function A(){}

A.prototype.n = 1;

var b = new A();

A.prototype={

　　n:2,

　　m:3

}

var c = new A();

console.log(b.n,b.m,c.n,c.m);//问输出多少

答案：1，undefined，2，3

理解：b 对象的原型__proto__指向的是第一次创建A functon的时候的A的prototype,只是上面多加了一个属性n值为1。当后面改变A的prototype的指向另外一个对象时并不会改变b对象的__proto__的指向，只是改变了后面新创建的c对象的指向。

 

4.

var F = function (){}

Object.prototype.a = function (){

　　console.log(‘a()‘);

}

Function.prototype.b = function (){

　　console.log(‘b()‘);

}

var f = new F();

f.a();

f.b();

F.a();

F.b();

问依次输出是什么？

答案：a()  报错  a()  b()

理解：首先执行var F = function (){}的时候创建了F，F的__proto__指向Function的prototype，所以再Function的prototype上面加的属性F是可以访问的，所以F.b();应该输出b()。而Function的prototype是Object的一个对象，这个对象是由Object作为Function产生的，所以这个这个对象的__proto__指向Object的prototype，所以F.a();应该输出a()。

var f = new F();所以f .__proto__指向F 的prototype，而F的的prototype是Object的一个对象，这个对象是由Object作为Function产生的，所以这个这个对象的__proto__指向Object的prototype，所以f.a();应该输出a()。而prototype和Functiono的prototype没有直接联系，所以f.b();应该会报错找不到这个方法。

 

5.

console.log(‘global begin:‘+i);

var i = 1;

foo(1);

function foo(i){

　　if(i==4){

　　　　return;

　　}

　　console.log(‘foo begin:‘+i);

　　foo(i+1);

　　console.log(‘foo end:‘+i);

}

console.log(‘global end:‘+i);

问：所有的输出结果

答案：global begin:undefined  foo begin:1  foo begin:2  foo begin:3  foo end:3  foo end:2  foo end:1  global end:1

理解：这个比较简单，按代码执行顺序就能知道结果。

 

6.

function a (){}

var a;

console.log(typeof(a));//问输出什么

答案：function

理解：变量提升先于函数提升，所以先执行变量提升a=undefined，然后再将a赋值给函数。

 

7.

if(!(b in window))

{

　　var b = 1;

}

cnsole.log(b);//问输出什么

答案：undefined

理解：再es5里面没有块作用域，所以再{var b = 1;}相当于再外面执行var b = 1;，由于变量提升再代码执行前window中就有了b属性只是值为undefined，所以b in window为true，不执行判断语句里面的代码，输出undefined

 

8.

var c = 1 ;

functiong c(c){

　　console.log(c);

}

c(2);//问输出什么

答案：报错：c不是一个函数

理解：由于函数和变量提升，所以实际的执行顺序是：var c ;   function c(c){console.log(c);};   c = 1;  c(2);

 

9.

var x = 10;

function fn(){

　　console.log(x);

}

function show(f){

　　var x = 20;

　　f();

}

show(fn);

问：输出结果是什么

答案：10

理解：由于fn是最外层的函数所以没有闭包产生，应该用函数的作用域来解决，函数的作用域是再定义函数的时候就已经产生了，并不是代码执行的时候产生，所以即便把fn作为参数传到了show()函数里面，但是执行代码时使用的作用域是定义函数时候的，fn是在最外层定义的，所以当自己内部找不到x的时候会去window上面找。

 

10.

var fn = function (){

　　console.log(fn);

}

fn();

var obj = {

　　f2:function(){

　　　　console.log(f2);

　　}

}

obj.f2();

问：输出结果是什么

答案：function (){console.log(fn);}   报错：找不到f2

理解：根据作用域，这里会生成三个作用域：最外层作用域/fn 作用域/f2作用域。根据自己找不到到外层去找，第一个外层能找到，第二个外层找不到；

注：如果第二个想输出obj的f2，则function中要写成console.log(this.f2); this指向调用这个函数的对象也就是obj。