this的5种绑定方式

雨点打透心脏的1/2处 2022-11-12 05:22 105阅读 0赞

*  1.默认绑定

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

*  2.隐式绑定

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

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

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

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

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][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  
来源：简书  
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

[call_apply_bind]: https://www.jianshu.com/p/5afd6674f352