不多逼逼 直接上代码:

  1. var name = "window";
  2. var obj = {
  3. name: 'obj',
  4. //普通函数
  5. one: function(){
  6. console.log(this.name)
  7. },
  8. //箭头函数
  9. two: ()=> {
  10. console.log(this.name)
  11. },
  12. //普通函数中的箭头函数
  13. three: function(){
  14. (()=>{
  15. console.log(this.name)
  16. })()
  17. },
  18. //多层箭头函数
  19. four: ()=> {
  20. (()=>{
  21. console.log(this.name)
  22. })()
  23. }
  24. }
  25. obj.one(); //obj
  26. obj.two(); //window
  27. obj.three(); //obj
  28. 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. //1内部this对象指向创建期上下文对象
  2. // 普通函数的this指向是在函数的执行期间绑定的
  3. //比如
  4. function fn6(){
  5. console.log(this)
  6. }
  7. fn6() // 自调用的时候,指向window
  8. var obj = {};
  9. obj.f = fn6;
  10. obj.f(); // 指向他的直接调用者obj
  11. 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. jquery checkbox (选中和取消选中事件on("change"))做笔记

    $("#btn_Company").attr("disabled", "disabled"); $("#agency") ...

  2. [学习笔记]man手册的使用

  3. 【Android学习】Merge 优化布局

      <merge />标签用于减少View树的层次来优化Android的布局   新建项目,不需要改动   运行后使用“DDMS -> Dump View Hierarchy for ...

  4. springmvc和js前端的数据传递和接收方式

    在springmvc中controller的结果集可通过json格式传到js前端接受,也可以通过Map传给前端,具体实现如下 1,通过json格式传递 controller层实现如下 @Request ...

  5. win10下安装配置mysql-8.0.13--实战可用

    1.下载mysql-8.0.13安装包 1 https://dev.mysql.com/downloads/mysql/ 选择zip安装包下载就好. 2.解压到你要安装的目录 3.创建my.ini配置 ...

  6. 转载 【Linux】Linux中常用操作命令

    [Linux]Linux中常用操作命令     https://www.cnblogs.com/laov/p/3541414.html#vim   Linux简介及Ubuntu安装 常见指令 系统管理 ...

  7. CI框架源码学习笔记3——Log.php

    上一节说完了Common.php,然而跟代码打交道总是免不了日志记录,所以这一节我们说说Log.php文件. 先看看类里面的几个属性, protected $_log_path;  日志路径 prot ...

  8. ABAP开发常见任务

    在ABAP开发中 最主要的工作: 1 报表的开发 主要使用到数据库读取 ALV LIST等技术: 2 单据的打印 主要使用到数据库读取.SmartFirms.Form等技术: 3 数据的上载 主要使用 ...

  9. String s String s=null和String s="a"区别

    原文链接:https://www.cnblogs.com/ipetergo/p/6826909.htmlString s;和String s=null;和String s="a"; ...

  10. silverlight browse information

    public class Browser { /// <summary> /// During static instantiation, only the Netscape flag i ...