web前端面试入坑（1）

疑难点1.“3函数”——call、apply、bind

<script type="text/javascript">function xiaohong(){   alert("小红");}function xiaoming(){   return "小明";}//xiaohong();xiaohong.call(xiaoming)</script>

解析：上述函数中“xiaohong.call(xiaoming)”表示xiaohong()函数里的this对象，指向了xiaoming()里的对象，但是函数调用依旧是xiaohong()

call()用法：用在函数上边的

案例1：this对象不改变

<script type="text/javascript">  var Dog = function(){    this.name="汪星人";    this.shout = function(){           alert(this.name);   }};var Cat = function(){   this.name="喵星人";};var dog= new Dog();var cat=new Cat();dog.shout();      //"汪星人"//若想Cat含有shout方法，即可需要call()dog.shout().call(cat);  //dog.shout中的this对象，将指向cat对象</script>

案例2：写一个函数，this指向不同的对象

<script type="text/javascript"> var xh={  name:"小红",  job:"JS工程师"};var xm={  name:"小明",  job:"资深前端开发工程师"};var jx={  name:"杰西",  job:"前端开发总监"};function myjob(){  alert(this.name+"是一名"+this.job);}myjob.call(xh);   //将myjob中this指向xhmyjob.call(xm);  //将myjob中this指向xm</script>

注意：若将上述案例中“call”改为“apply”，结果相同，但区别是什么呢？

将案例2进行修正，如下：

<script type="text/javascript"> var xh={  name:"小红",  job:"JS工程师"};var xm={  name:"小明",  job:"资深前端开发工程师"};var jx={  name:"杰西",  job:"前端开发总监"};function myjob(gender,age,company){  alert(this.name+gender+"今年"+age+"岁，在"+company+"担任"+this.job +"一职");}myjob.call(xh,'女',22,"腾讯");   myjob.call(xm,'男',23,"京东");    myjob.apply(xh,['女',22,"腾讯"]);myjob.apply(xm,['男',23,'京东']);</script>

call() VS apply()总结：

（1）在call()传入参数的时候，需要与函数所接受的参数——一一对应

（2）在apply()传入参数的时候，则必须以“数组”的方式传入，

               数组中的元素，需要与函数所接受的参数——一一对应

案例3：bind()

<script type="text/javascipt"> var info=["W3C","QQ","Sina","Sohu"]; var it ={  info:["前端开发网","腾讯","新浪","搜狐"], getInfo: function(){   alert(this.info.join(",")); }};//it.getInfo();var data=it.getInfo;data();   //this指向windows对象，"W3C,QQ,Sina,Sohu"//若需要弹出中文it中的内容，需要bind()函数var data1 = it.getInfo.bind(it);data();   //this指向it中的对象，即中文内容 </script>

解析：若不加bind()时，会发现this指向的是windows下“info对象”，加了bind()函数时，绑定了it对象，此时this对象即为“it对象”。

案例3-1：将一个对象赋予另一个对象的方法，需要使用bind()

<script type="text/javascript">var jx={ name:"杰西",gender:"男",age:24,say:function(){  alert(this.name+","+this.gender+",j今年"+this.age);}};jx.say();   //杰西,男,今年24岁var xm=jx.say.bind({name:"小明",gender:"男",age:23});xm();     //小明,男,今年23岁</script>

案例3-2：bind()函数中可以传入参数吗？  可以！

<script type="text/javascript"> var jx={ name:"杰西", job:"前端工程师", say:function(gender,age,company){   alert(this.name+","+gender+",今年"+age+"岁，在"+company+"担任"+this.job+"一职"); }};var data=jx.say.bind(jx,"男",24,"百度");data();</script>

总结：call、apply、bind都是可以绑架“this”，逼迫this指向其他对象，

作用：改变this对象至想要指向对象。

疑难点2.this对象

this作用：全局作用域中的this指向的是“window对象”

案例1：

<script type="text/javascript">var test=function(){  this.x=1;  alert(this.x);};test();  //1function test2(){  alert(this.x);  //1}var x=1;function test3(){   this.x=100;}test3();    alert(x);   //100</script>

this“公理”：this关键字永远指向函数（方法）的所有者。

（1）函数被赋值于变量时“this”的问题

<script type="text/javascript">var info=["W3C","QQ","Sina"];var it={info:["W3C","腾讯","新浪"],getInfo:function(){alert(this.info.join(","));}};var data=it.getInfo;data();var data2=function(){ alert(this.info.join(","));};data2();</script>

（2）当作为对象方法时this的问题

<script type="text/javascript">function test(){ alert(this.x);}//var o={};//o.x=1;//o.t=test()//o.t();var o={  x:1,  t:function test(){      alert(this.x);  }}o.t();  //1</script>

（3）作为构造函数“this”的问题

<script type="text.javascript">function test(){ this.x=1;}var o=new test();alert(o.x);  //1</script>

进行改造一下，如下：

<script type="text/javascript">var x=2;function test(){this.x=1;}var o=new test();alert(o.x);  //1alert(x);    //2</script>

（4）闭包中this的问题

<script type="text/javascript">var as={info:["W3C","腾讯","新浪"],getInfo:function(){console.log(this);console.log(this.info);/*function abc(){  console.log(this);  console.log(this.info);}    //window  "undefined"*/var _this=this;function abc(){  console.log(_this);  console.log(_this.info);};abc();}}as.getInfo();</script>