深入学习this、call、apply、bind

标签: js

this的指向问题一直是面试里的常客。也是es5的众坑之一。对于es6而讲,它极大地避免了this带来的错误。但是为了为了维护一些老代码,还是有必要了解this的。

this的指向原则:

  • this 永远指向最后调用它的那个对象(es5)。
  • 匿名函数的this总指向Window对象(全局对象)(es5)。
  • 箭头函数中的 this 只和定义它时候的作用域的 this 有关,而与在哪里以及如何调用它无关,同时它的 this 指向是不可改变的。

全局环境中的 this 是什么

浏览器:

console.log(this); //Window

node:

console.log(this); //global

函数里执行

全局函数执行

一个函数被直接调用的时候,属于全局调用,这时候它的 this 指向 全局对象
例如:

function test(){
    console.log(this);
}
test();//Window

作为对象的方法调用

例如:

var obj={
    name:"JoeWright",
    foo:function(){
        console.log(this);
    }
};
obj.foo();//Object {name: "JoeWright", foo: ƒ}

如果把对象的方法赋值给一个变量,然后直接调用这个变量,这时候,this 指向全局对象。
例如:

 var obj={
    name:"Joe",
    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("JoeWright"); //Person
//构造函数其实也是一个函数,如果我们把它当作一个普通函数执行,这个 this 仍然执行全局
var p2=Person("Wright");//Window

匿名函数使用(this的一些坑)

匿名函数的this总指向Window对象
例如:

var obj={
    name:"JoeWright",
    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:"JoeWright",
    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 的指向有以下几种方法:

  • 使用 ES6 的箭头函数
  • 在函数内部使用 that = this(或_this = this
  • 使用 applycallbind
  • new 实例化一个对象

1,2两点上面已经讲过,下面介绍下applycallbind的用法
例如:

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接收的是若干个参数列表。
  • bindcall的用法类似,但是bind 创建了一个新的函数,我们必须 手动去调用它

new关键字改变this的指向

如果函数调用前使用了 new 关键字, 则是调用了构造函数。

例如:

function Cat(name){
    this.name=name;
}
var c=new Cat("kitty"); 
console.log(c.name);  //kitty

new的过程
伪代码:

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;
}
  1. 先创建一个空对象obj
  2. 将新创建的空对象的隐式原型指向其构造函数的显式原型
  3. 使用call改变this的指向
  4. 如果没有返回值或者返回的是一个非对象值,则将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()等方法。

常见的伪数组

  1. 函数的argument对象
  2. 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]

最后:大家觉得有帮助的话,请点个赞哈哈,如果文章中有写的不恰当的地方,欢迎大家指出~

    原文作者:云中玉卷
    原文地址: https://www.jianshu.com/p/b01507377e31
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞