this、箭头函数

比特青焰引
• 阅读 965

普通函数

普通函数的this,由动态作用域决定,指向它的直接调用者,没有直接调用者统一指向window

1、情况一

function outFun() {
    console.log(this);
}
outFun(); // this指向window

// outFun()没有直接调用者
// this指向window

2、情况二

var obj = {
  outFun: function() {
    console.log(this);
  }
};
obj.outFun(); // this指向obj

var og = obj.outFun;
og(); // this指向window

// obj.outFun()的直接调用者是obj,所以this指向obj
// 把obj.outFun赋值给og,og()等同于直接执行outFun,此时没有直接调用者

3、情况三

var obj = {
  outFun: function () {
    function inFun () {
      console.log(this)
    };
    inFun ();
  }
};
obj.outFun(); // this指向window

// inFun执行时没有直接调用者
// 当没有直接调用者的时候
// this指向window

箭头函数

箭头函数没有自己的this,箭头函数里的this就是外部作用域里this

1、情况一

var outFun = () => {
  console.log(this);
};
outFun(); // this指向window

// 箭头函数的外部作用域就是全局作用域
// 全局作用域里的this指向的就是window(严格模式下,指向的是undefined)

2、情况二

var obj = {
  outFun: () => {
    console.log(this);
  }
};
obj.outFun(); // this指向window
var og = obj.outFun;
og(); // this指向window

// 箭头函数是对象obj里的一个属性
// 其外部作用域也是全局作用域
// this同样指向window

3、情况三

var obj = {
  outFun: function () {
    var inFun = () => {
      console.log(this);
    };
    inFun();
  }
};
obj.outFun(); // this指向的obj
var og = obj.outFun;
og(); // this指向window

// 箭头函数inFun的外部作用域是outFun
// 箭头函数里的this和外部作用域的this指向一致
// 但是outFun是个普通函数,普通函数的this指向的是其直接调用者
// 没有直接调用者时,指向window

4、情况四

var obj = {
  inObj: {
    outFun: () => {
      console.log(this)
    }
  }
}

obj.inObj.outFun() // this指向window

// 箭头函数outFun是obj.inObj的一个属性
// 外部作用域是全局作用域
// 所以this指向window
点赞
收藏
评论区
推荐文章
blmius blmius
3年前
MySQL:[Err] 1292 - Incorrect datetime value: ‘0000-00-00 00:00:00‘ for column ‘CREATE_TIME‘ at row 1
文章目录问题用navicat导入数据时,报错:原因这是因为当前的MySQL不支持datetime为0的情况。解决修改sql\mode:sql\mode:SQLMode定义了MySQL应支持的SQL语法、数据校验等,这样可以更容易地在不同的环境中使用MySQL。全局s
Wesley13 Wesley13
3年前
MySQL部分从库上面因为大量的临时表tmp_table造成慢查询
背景描述Time:20190124T00:08:14.70572408:00User@Host:@Id:Schema:sentrymetaLast_errno:0Killed:0Query_time:0.315758Lock_
美凌格栋栋酱 美凌格栋栋酱
6个月前
Oracle 分组与拼接字符串同时使用
SELECTT.,ROWNUMIDFROM(SELECTT.EMPLID,T.NAME,T.BU,T.REALDEPART,T.FORMATDATE,SUM(T.S0)S0,MAX(UPDATETIME)CREATETIME,LISTAGG(TOCHAR(
巴拉米 巴拉米
4年前
bind、call、apply 区别?如何实现一个bind?
一、作用call、apply、bind作用是改变函数执行时的上下文,简而言之就是改变函数运行时的this指向那么什么情况下需要改变this的指向呢?下面举个例子var name"lucy";const obj{    name:"martin",    say:function (){        co
皕杰报表之UUID
​在我们用皕杰报表工具设计填报报表时,如何在新增行里自动增加id呢?能新增整数排序id吗?目前可以在新增行里自动增加id,但只能用uuid函数增加UUID编码,不能新增整数排序id。uuid函数说明:获取一个UUID,可以在填报表中用来创建数据ID语法:uuid()或uuid(sep)参数说明:sep布尔值,生成的uuid中是否包含分隔符'',缺省为
菜园前端 菜园前端
2年前
JS难点:this 指向
原文链接:this指向分为两种情况,一种是普通函数中使用的this,另外一种是箭头函数中的this。普通函数this指向调用者。场景1javascriptfunctionsayHi()console.log(this)sayHi()//window这里的t
Wesley13 Wesley13
3年前
ES6新增内容(部分)
ES6新增内容(部分)一、两个声明变量的方法let、constlet:不能重复声明、有暂时性死区,不能提前访问、{}块级作用域。const:声明常量、声明之后不能被修改。二、箭头函数语法:(参数){表达式}箭头函数中this没有固定指向,一般指向宿主对象。
Wesley13 Wesley13
3年前
ES6箭头函数与普通函数的区别
箭头函数:letfun(){console.log('lala');}普通函数functionfun(){console.log('lalla');}箭头函数相当于匿名函数,并且简化了函数定义。箭头函数有两种格式,一
Stella981 Stella981
3年前
JS 中的this指向问题和call、apply、bind的区别
this的指向问题一般情况下this对象指向调用函数的对象,全局环境中执行函数this对象指向window。functiona(){console.log(this);//输出函数a中的this对象}functionb(){};varc{name:"call"}
Stella981 Stella981
3年前
ES6中箭头函数与普通函数this的区别(转)
看到一篇别人的博客,对this的理解又加深了一些。普通函数中的this:1\.this总是代表它的直接调用者,例如obj.func,那么func中的this就是obj2.在默认情况(非严格模式下,未使用'usestrict'),没找到直接调用者,则this指的是window3.在严格模式下,没有直接调用者的函数中的thi
Wesley13 Wesley13
3年前
ES6新增的一些特性
1、let关键字,用来代替var的关键字,特点: 1、变量不允许被重复定义2、不会进行变量声明提升3、保留块级作用域中i的2、const定义常量,特点:1、常量值不允许被改变2、不会进行变量声明提升3、箭头函数  与普通函数的区别:1、书写上用代替了function         2、普通函数的this指向window而ES6
比特青焰引
比特青焰引
Lv1
因为她才一米六,所以一旦吵架了,我就必须先低头。
文章
3
粉丝
0
获赞
0