美文网首页让前端飞
js中this的指向

js中this的指向

作者: 土豪码农 | 来源:发表于2019-02-28 07:37 被阅读6次

this的在什么时候确定下来的

  • this和作用域不一样,作用域是声明的时候就定下来了,this是在调用的时候才确定下来

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 > 显式 > 隐式 > 默认绑定

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

相关文章

  • JS进阶篇-this指向问题

    JS中this的指向问题不同于其他语言,JS中的this不是指向定义它的位置,而是在哪里调用它就指向哪里。 JS中...

  • JS中this指向

    一、全局作用域中的thises5与es6中严格模式与非严格模式全局函数的this都指向window 二、全局作用域...

  • JS中this指向

    函数有4种调用方式,对应就有4种绑定规则:默认绑定、隐式绑定、硬绑定和构造函数绑定。 1、默认绑定 当作为普通函数...

  • js中this指向

    1.this总是指向函数的直接调用者2.如果有new关键字,this指向new出来的那个对象3.DOM事件中thi...

  • JS中this指向

    (1)事件调用环境:谁触发事件,函数里面的this指向就是谁(某个DOM)。 (2)node全局环境:this指向...

  • js中this指向

    当我们需要把函数当做另外函数参数传入时,我们使用箭头函数。 关于this的指向。 问题:箭头函数中的this是如何...

  • JS中this的指向

    什么是this? 它是函数运行时,在函数体内部自动生成的一个对象,只能在函数体内部使用。 JS中this的指向,取...

  • JS中this的指向

    JS中this的指向 1.背景介绍 2.知识剖析 3.常见问题 4.解决方案 5.编码实战 6.扩展思考 7.参考...

  • JS中this的指向

    1、普通函数中this的指向( 普通函数中的this指针指向于调用者) 2、定时器中的this的指向 3、在对象...

  • JS中THIS的指向?

    大家好,我是IT修真院北京分院第22期的学员杨纲,一枚正直纯洁善良的WEB前端程序员。 1.背景介绍 this对象...

网友评论

    本文标题:js中this的指向

    本文链接:https://www.haomeiwen.com/subject/zwiquqtx.html