不多逼逼 直接上代码:

var name = "window";
var obj = {
name: 'obj',
//普通函数
one: function(){
console.log(this.name)
},
//箭头函数
two: ()=> {
console.log(this.name)
},
//普通函数中的箭头函数
three: function(){
(()=>{
console.log(this.name)
})()
},
//多层箭头函数
four: ()=> {
(()=>{
console.log(this.name)
})()
}
}
obj.one(); //obj
obj.two(); //window
obj.three(); //obj
obj.four() //window

说明:

1、

普通函数中的this总是指向它的直接调用者;

箭头函数中的this是在定义函数的时候绑定,而不是在执行函数的时候绑定。

2、

①比如上面的 obj.one();直接调用者是obj,因此this指向obj

②箭头函数中的this指向是固定的,并不是因为箭头函数内部有绑定this的机制,实际原因是箭头函数内部没有this,箭头函数的this是在定义时就绑定的,它的this就是箭头函数所处的对象的所处作用域

比如obj.three();箭头函数所在的对象是函数three,函数three处于obj的作用域中,因此this指向obj;

比如obj.four();箭头函数所在的对象是obj,obj处于window的作用域中因此this指向window。

3、

es6函数写法有2种,一种是 fn: (str) => { } ; 一种是 fn(str){ }

箭头函数是没有上下文的、this会直接指向上一级

第二种写法this指向调用它的调用者

2019-01-30补充

//1内部this对象指向创建期上下文对象
// 普通函数的this指向是在函数的执行期间绑定的
//比如
function fn6(){
console.log(this)
}
fn6() // 自调用的时候,指向window
var obj = {};
obj.f = fn6;
obj.f(); // 指向他的直接调用者obj document.onclick = fn6; // 指向触发该事件的对象 document

ES6和ES5中的this指向问题的更多相关文章

  1. ES5中改变this指向的三种方法

    ES5中提供了三种改变函数中this指针指向的方法,分别如下 1.call() var obj = {username:"孙悟空"}; //没有任何修饰的调用函数,函数中的this ...

  2. ES6中的类继承和ES5中的继承模式详解

    1.ES5中的继承模式 我们先看ES5中的继承. 既然要实现继承,首先我们得要有一个父类. Animal.prototype.eat = function(food) { console.log(th ...

  3. ES6中。类与继承的方法,以及与ES5中的方法的对比

    // 在ES5中,通常使用构造函数方法去实现类与继承 // 创建父类 function Father(name, age){ this.name = name; this.age = age; } F ...

  4. Javascript定时器中的this指向

    使用js中的定时器(setInterval,setTimeout),很容易会遇到this指向的问题. 直接上例子: var name = 'my name is window'; var obj = ...

  5. JS中的this 指向问题

    我发现在对JS的学习中有很多朋友对this的指向问题还是有很大的误区或者说只是大致了解,但是一旦遇到复杂的情况就会因为this指向问题而引发各种bug. 对于之前学习过c或者是Java的朋友来说可能这 ...

  6. Javascript回调函数中的this指向问题

    使用js中的定时器(setInterval,setTimeout),很容易会遇到this指向的问题. 直接上例子: 1 var name = 'my name is window'; 2 var ob ...

  7. ES6与React中this完全解惑

    计划写很长的篇幅,预计12月初完成. 这篇文章涉及的知识较多,可能一次消化不了,可以渐渐来. 先说结论: 无论是ES6还是React的this,相对于ES5,只是增加了箭头函数this绑定了其封闭上下 ...

  8. JavaScript中this的指向(转载)

    转载自:http://www.cnblogs.com/dongcanliang/p/7054176.html 前言 this 指向问题是入坑前端必须了解知识点,现在迎来了ES6时代,因为箭头函数的出现 ...

  9. ES5中的this

    参考资料:>>> this的指向 在 ES5 中,其实 this 的指向,始终坚持一个原理: this 永远指向最后调用它的那个对象 下面我们来看一个最简单的例子:(例子均来自参考资 ...

随机推荐

  1. 算法Sedgewick第四版-第1章基础-1.4 Analysis of Algorithms-004计算内存

    1. 2. 3.字符串

  2. oracle 监听服务OracleOraDb11g_home1TNSListener打开后立马停止错误

    首先我真得吐槽一下,我安装这个破软件感觉真的是把能遇到的错误都遇到一遍了,生气!!!!!!! 关于监听服务OracleOraDb11g_home1TNSListener打开后立马停止这个错误,我的解决 ...

  3. Luogu 4514 上帝造题的七分钟

    二维差分+树状数组. 定义差分数组$d_{i, j} = a_{i, j} + a_{i - 1, j - 1} - a_{i, j - 1} - a_{i - 1, j}$,有$a_{i, j} = ...

  4. 数据结构_yjjsj(伊姐姐数字游戏)

    问题描述 伊姐姐热衷于各类数字游戏, 24 点. 2048.数独等轻轻松松毫无压力.一日,可爱的小姐姐邀请伊姐姐一起玩一种简单的数字 game,游戏规则如下:一开始桌上放着 n 张数字卡片,从左到右按 ...

  5. Head First HTML与CSS(第2版) 中文pdf扫描版​

    是不是已经厌倦了那些深奥的HTML书?你可能在抱怨,只有成为专家之后才能读懂那些书.那么,找一本新修订的<Head First HTML与CSS(第2版)>吧,来真正学习HTML.你可能希 ...

  6. 洛谷P3413 SAC#1 - 萌数(数位dp)

    题目描述 辣鸡蒟蒻SOL是一个傻逼,他居然觉得数很萌! 好在在他眼里,并不是所有数都是萌的.只有满足“存在长度至少为2的回文子串”的数是萌的——也就是说,101是萌的,因为101本身就是一个回文数:1 ...

  7. js中的DOM对象 和 jQuery对象 比较

    一,二者的区别 通过 jQuery 获取的元素是一个数组,数组中包含着原生JS中的DOM对象. 总结:jQuery 就是把 DOM 对象重新包装了一下,让其具有了 jQuery 方法. 二,二者的相互 ...

  8. P3628 [APIO2010]特别行动队

    \(\color{#0066ff}{ 题目描述 }\) 你有一支由 \(n\) 名预备役士兵组成的部队,士兵从 \(1\) 到 \(n\) 编号,要将他们拆分 成若干特别行动队调入战场.出于默契的考虑 ...

  9. 提交表单存在html标签报错-检测到有潜在危险的 Request.Form 值

    1..aspx页面 在.aspx文件头中加入这句<%@ Page validateRequest="false" %> 2.通用方法 修改web.config文件, & ...

  10. kuangbin专题七 POJ3468 A Simple Problem with Integers (线段树或树状数组)

    You have N integers, A1, A2, ... , AN. You need to deal with two kinds of operations. One type of op ...