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指向xh
myjob.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();  //1

function 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);  //1
alert(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>