JavaScript深入学习this、call、apply和bind
前言
this的指向问题一直是面试里的常客。也是es5的众坑之一。对于es6而讲，它极大地避免了this带来的错误。但是为了为了维护一些老代码，还是有必要了解this的。
this的指向原则：
- this 永远指向最后调用它的那个对象（es5）。
- 匿名函数的this总指向Window对象(全局对象)（es5）。
- 箭头函数中的 this 只和定义它时候的作用域的 this 有关，而与在哪里以及如何调用它无关，同时它的 this 指向是不可改变的。
全局环境中的 this 是什么
浏览器：
console.log(this); //Windownode：
console.log(this); //global函数里执行
全局函数执行
一个函数被直接调用的时候，属于全局调用，这时候它的 this 指向 全局对象 例如：
function test(){
console.log(this);
}
test();//Window作为对象的方法调用
例如：
var obj={
name:"Javanx",
foo:function(){
console.log(this);
}
};
obj.foo();//Object {name: "Javanx", foo: ƒ}如果把对象的方法赋值给一个变量，然后直接调用这个变量,这时候,this 指向全局对象。 例如：
var obj={
name:"Javanx",
foo:function(){
console.log(this);
}
};
var test=obj.foo;
test();//Window作为一个构造函数使用
this 指向了这个构造函数调用时候实例化出来的对象 例如：
function Person(name){
this.name=name;
console.log(this);
}
//this 指向了这个构造函数调用时候实例化出来的对象
var p1 = new Person("Javanx"); //Person
//构造函数其实也是一个函数，如果我们把它当作一个普通函数执行，这个 this 仍然执行全局
var p2 = Person("James");//Window匿名函数使用（this的一些坑）
匿名函数的this总指向Window对象 例如：
var obj={
name:"Javanx",
f1:function(){
console.log(this);//Window
},
f2:function(){
console.log(this);//Object
setTimeout(this.f1,1000);//此时this.f1相当于setTimeout 函数的形参fun，即做了fun=this.f1这个操作
}
};
obj.f2();解决方法（改变this的指向）：
1.使用箭头函数
var obj={
name:"Javanx",
f1:function(){
console.log(this);
},
f2:function(){
console.log(this);//Object
setTimeout(()=>{
console.log(this);//Object
},1000);
}
};
obj.f2();2.在函数内部使用that=this（或者_this=this）
var obj={
name:"JoeWright",
f1:function(){
console.log(this);
},
f2:function(){
console.log(this);//Object
var that=this;//上面的this指向的是obj4,这里我们用that变量存储下来
setTimeout(function(){
console.log(that);//Object
},1000);
}
};
obj.f2();改变this的指向
改变 this 的指向有以下几种方法：
1,2两点上面已经讲过，下面介绍下apply、call、bind的用法
例如：
function Cat(name){
this.name=name;
}
function Dog(name){
this.name=name;
}
Cat.prototype.eat=function(food){
console.log(this.name+" eat "+food);
}
Dog.prototype.eat=function(food){
console.log(this.name+" eat "+food);
}
var c=new Cat("kitty");
var d=new Dog("Bubby");
c.eat("fish"); //kitty eat fish
d.eat("meat"); //Bubby eat meat
c.eat.apply(d,["fish"]); //Bubby eat fish
c.eat.call(d,"fish"); //Bubby eat fish
d.eat.call(c,"apple"); //kitty eat apple
d.eat.bind(c,"apple")(); //kitty eat apple从上述的例子可知：
apply接收的是一个由若干参数组成的数组，而call接收的是若干个参数列表。bind与call的用法类似，但是bind 创建了一个新的函数，我们必须 手动去调用它。
new关键字改变this的指向
如果函数调用前使用了 new 关键字, 则是调用了构造函数。
例如：
function Cat(name){
this.name=name;
}
var c=new Cat("kitty");
console.log(c.name); //kittynew的过程： 伪代码：
var c=new Cat("kitty");
new Cat{
var obj={};
obj.__proto__=Cat.prototype;
var res=Cat.call(obj,"kitty");
return typeof res==="obj"?res:obj;
}- 先创建一个空对象obj
- 将新创建的空对象的隐式原型指向其构造函数的显式原型
- 使用
call改变this的指向 - 如果没有返回值或者返回的是一个非对象值，则将obj返回为一个新对象；如果返回值是一个对象的话，就直接返回该对象。
apply，call，bind的应用场景
嗯，既然call，apply，bind可以改变this的指向，那我们在哪里可以用到呢
（1） 处理伪数组 什么是伪数组？ 先看一个例子吧：
<div>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</div> const oLi=document.getElementsByTagName("li");
console.log(oLi.length);//4
console.log(oLi); //HTMLCollection(4) [li, li, li, li]
console.log(oLi.slice(1,3)); //Uncaught TypeError: oLi.slice is not a function看到没，上面的oLi就是一个伪数组。它有数组的length属性，但是不可用数组的slice方法。
伪数组的定义：
- 存在length属性
- 可以通过数组下标的方式对元素进行访问
- 能像遍历数组一样遍历
- 不能使用数组的
slice()、push()等方法。
常见的伪数组
- 函数的argument对象
- document.getElementsByTagName()、document.getElementsByClassName()、childNodes/children等方法的返回值（返回的是一个节点列表）
解决办法：伪数组没有这些方法那就借用Array的方法。
[].slice.call(oLi,1,3) //[li, li]（推荐）或者：
oLi.slice=[].slice; //为oLi添加一个slice方法（会污染数组对象）
console.log(oLi.slice(1,3));//[li, li]如果可以随意改变原对象，可以 直接将其转成真正的数组对象。
Array.prototype.slice.call(oLi);
console.log(oLi.slice(1,3)); //[li, li]（2）继承
- 单继承
function Person(name){
this.name=name;
}
function Man(sex,name){
this.sex=sex;
Person.call(this,name); //继承Person的name
}
var p=new Man("male","JoeWright");
console.log(p.sex,p.name); //male JoeWright- 多继承
function Person(name){
this.name=name;
}
function Man(sex){
this.sex=sex;
}
function Coder(name,sex,learn){
this.learn=learn;
Person.call(this,name);
Man.call(this,sex);
}
var p2=new Coder("JoeWright","male","FE");
console.log(p2.name,p2.sex,p2.learn);//JoeWright male FE（3）获取数组的最值
Math.max()方法，支持传递多个参数，比如：
Math.max(1,4,2,3,7,5,6)但是它不支持直接传递一个数组作为参数，比如：Math.max(new Array(1,4,2,3,7,5,6))。 这里，只要我们有方法把数组，一个一个拆分开来，传递到Math.max()方法中，就实现了传递数组的方法。而apply接收一个数组，并且是将数组中的每个值，分开来，传递给Math.max()方法
例如：
var arr=[1,3,6,10,9];
console.log(Math.max.apply(null,arr)); //10
console.log(Math.min.apply(null,arr)); //1
//等价于
console.log(Math.max.apply(Math,arr)); //10
console.log(Math.min.apply(Math,arr)); //1
console.log(Math.max.apply("a",arr)); //10
console.log(Math.min.apply(a,arr)); //Uncaught ReferenceError: a is not defined(a未定义报错)但为什么上面的例子中apply传的第一个参数为null和Math都会得到相同的结果呢？在网上看了很多解答后，我得出一个结论： 按apply的语法上来讲，apply的第一个参数此时是Math.max()方法运行时指定的 this 值。需要注意的是，指定的 this 值并不一定是该函数执行时真正的 this 值，如果这个函数处于非严格模式下，则指定为 null 或 undefined 时会自动指向全局对象（浏览器中就是window对象），同时值为原始值（数字，字符串，布尔值）的 this 会指向该原始值的自动包装对象。 换句话说：当我们传Math就相当于Math对象调用max方法，我们传window相当于window调用这个方法，传Number就相当于Number函数对象调用max方法... 但是传入的参数必须是一个对象（或者参数的原始值的自动包装对象），所以我们传123，"aaa",undefined都可以，但是传入一个未定义的变量是不行的，当然传入null也是可以的。
（4）合并数组 例如：
var arr=[1,3,6,10,9];
var arr2=[2,4,8];
[].push.apply(arr,arr2);
console.log(arr); //[1, 3, 6, 10, 9, 2, 4, 8]腾讯云开发者
