首页 > Web开发 > 详细

js中的this

时间:2019-02-14 10:58:02      阅读:185      评论:0      收藏:0      [点我收藏+]

  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

           

  

js中的this

原文:https://www.cnblogs.com/wjyz/p/10373290.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!