this的5种绑定方式

• 1.默认绑定

默认绑定一般发生在回调函数,函数直接调用;

 

    function test() {
        console.log(this); //window 或 严格模式下是undefined
    }
    setTimeout(function () {
        console.log(this); 
//window setTimeout比较奇怪,默认绑定严格模式下竟然不是undefined
    });
   arr.forEach(function(){
        console.log(this);//window 或严格模式下是undefined
    });

• 2.隐式绑定

这个通俗点用一句话概括就是谁调用就是指向谁

 

    const obj = {
        name:'joy',
        getName(){
            console.log(this); //obj
            console.log(this.name); //joy
        }
    };
    obj.getName();

还有一些情况,链式调用,看最后那个

 

    const obj1 = {
        name:'joy',
        getName(){
            console.log(this); //obj
            console.log(this.name); //joy
        }
    };

    const obj2 = {
        name:'sam',
        friend:obj1
    };

    const obj3 = {
        name: 'jam',
        friend:obj2
    };

    obj3.friend.friend.getName()  //obj joy本质上还是obj1调用的

 

    const obj1 = {
        name:'joy',
        getName(){
            console.log(this); 
            console.log(this.name); 
        }
    };

    const obj2 = {
        name:'sam',
        getName:obj1.getName
    };

    obj2.getName()  //obj2 sam

• 3.显示绑定call,apply,bind

 

    const obj1 = {
        name:'joy',
        getName(){
            console.log(this); //obj
            console.log(this.name); //joy
        }
    };

    const obj2 = {
        name:'sam'
    };

    obj1.getName.call(obj2); //obj2 sam
    obj1.getName.apply(obj2); //obj2 sam
    const fn = obj1.getName.bind(obj2);
    fn();//obj2 sam

call和apply之间的不同,就是传参的方式不同

 

    fn.apply(this,[1,2]); //不管多少个,都用数组包裹传参
    fn.call(this,1,2); //一个个参数列出来传

call,apply和bind的区别
call和apply都是即时调用,绑定既是调用,而bind不是,bind会返回绑定后的函数,自行需要的时候再调用
学习要知其然知其所以然,我们来试试如何自己实现一个call,apply,bind吧

自己实现call,apply,bind

• new绑定

 

    function Vehicle() {
        console.log(this);
    }
    Vehicle(); //window
    new Vehicle(); //Vehicle这个new出来的对象

• es6的箭头函数

 

    window.name = 'win';
    const obj1 = {
        name: 'joy',
        getName: () => {
            console.log(this); //window 调用前this是什么函数里面的this就是什么
            console.log(this.name); //win 
        }
    };
    obj1.getName();

以上就是this指向5种绑定的方式,那么问题来了,当同时拥有几种绑定方式,谁的优先级更高呢?

箭头函数 > new > 显式 > 隐式 > 默认绑定

具体可以自行去尝试一下,这里就先给出结论

作者：土豪码农
链接：https://www.jianshu.com/p/66eb9b21105d
来源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。