• js中的this


      js中的this是在运行时基于执行环境动态绑定的。

      js中的this指向一般分为以下几种情况:

        1,对象调用

        2,普通函数调用

        3,new

        4,call,apply,bind

        5,箭头函数

      当函数作为对象的方法时,this指向该对象,也就是.之前的对象。

    let obj = {
        a:1,
        b: function () {console.log(this) }    // 当前的this为 obj
    }

      当不作为对象的属性而只是一个普通函数被调用时,this指向window,也就是全局对象。

     let obj = {
        a:1,
        b: function (){console.log(this)} 
    }
    
    let getThis = obj.b;
    getThis()    // window

      当使用new调用构造函数时,总是会返回一个对象,this一般指向返回的这个对象。

    let P = function (){
        this.a = 1;
    }
    
    let p = new P()
    console.log(p.a)   // 1

        如果构造函数显式的返回一个对象,那么this就指向显式返回的这个对象。

    let P = function(){
        this.a = 1;
        return {
            a: 2
        }  
    }
    let p = new P()
    p.a    // 2

      当使用call apply bind的时候,会改变当前的this指向

    let obj = {
        a:1,
        b: function (){console.log(this.a)}
    }
    
    let obj1 = {
        a:2
    }
    obj.b.call(obj1)    // 2
    obj.b.apply(obj1)   // 2
    obj.b.bind(obj1)() // 2

       箭头函数的this

        随着es6越来越普及,上面的现象慢慢的变得不那么需要了,我们只需要搞懂箭头函数中this的问题,就能处理大部分目前开发中遇到的问题。

        箭头函数的this指的就是定义时所在的对象。并不是上面几种运行时才确定的。这就说明在箭头函数中this是固定的。

        这是因为本质上箭头函数是没有this的,导致他里面使用到this时,就只能用外层环境的this

        这里可以总结一句话:  箭头函数中的this和外层function的this一致,如果外层不是function,则this指向window

               

      

  • 相关阅读:
    VSCode前端 插件
    restframework 分页组件、响应器
    restframework 解析器、渲染器、url控制组件
    __getattr__
    apply和call的用法
    继承
    原型的指向改变
    局部变量变全局变量
    构造函数和实例对象和原型对象之间的关系
    _proto_和prototype
  • 原文地址:https://www.cnblogs.com/wjyz/p/10373290.html
Copyright © 2020-2023  润新知