最近在学习angularJs的时候由于里面涉及到了箭头函数,箭头函数除了声明上有点区别以外,和普通函数最主要的区别还是在this的问题上。

Js中函数中嵌套的函数this不会 “继承”。比如说以下代码:

             var o = {
name:'xwt',
age:13
}
function outer(){
console.log(this);//输出{name:'xwt,age:13}
!function inner(){
console.log(this);//输出window
}();
}
outer.call(o);

  上面代码我们理想的输出是应该都是o,但是很遗憾,inner中的this已经是指向全局的window了。也可以这么理解,”this“关键字通常指当前正在执行的函数所在的对象,然而,如果函数并没有在对象上被调用,比如在内部函数中,”this“就被设置为全局对象(window)。以前我们想在inner中使用outer中的this,只能在outer中定义一个变量去保存this,一般是 var that = this;然后在inner中使用that来代替this。

  用function定义的函数的this是调用的时候去获取的,是不固定的。而箭头函数中的this是箭头函数定义的时候就定义的,并且在函数销毁之前的this都不会随之改变。箭头函数的this

指的就是函数声明时候作用域的this。用一下代码来说明区别:

             name = "cm";
age = 15;
var o = {
name:'xwt',
age:13,
sayName:()=>console.log(this.name),
sayAge:function(){
console.log(this.age);
}
};
o.sayName();//输出cm
o.sayAge();//输出13

  这里输出的13是没有任何问题的,但是这里为什么是输出cm而不是xwt呢?这个回答可以用上面的原理来解答。因为函数sayAge是在声明对象o的时候声明的。此时o是在全局中声明的

一个对象,所有这里sayName绑定的this就是全局的this。那么我们可以改变sayName的this吗?答案是当然可以。我们只要创建一个函数,然后在函数中声明o,然后通过call或者apply去改变

函数的this,那么声明出来的sayName的this就是绑定了call或者apply传进来的对象了。

             function aa(){
var o = {
name:'xwt',
age:13,
sayName:()=>console.log(this.name),
sayAge:function(){
console.log(this.age);
}
};
o.sayName();//输出bb
o.sayAge();//输出13
}
var bb = {
name:'bb',
age:111
}
aa.call(bb);

  如上面的代码是通过call改变声明了o对象时候的作用域中的this,所以sayName绑定的this就是aa函数中的this,也就是bb。所有sayName输出的就是'bb';

  这里差不多就解释完了箭头函数中this和普通function中this的区别了。还有如果这里有朋友不是在游览器上运行,而是用node.js来运行的话,node里面的全局指的是global,但是this

不是指向global的,他是指向module.exports(默认也是exports指向的对象)所指向的对象的。所以exports.name = 'xwt'也可以用this.name = 'xwt'来代替。这也是题外话了···

  参考:http://note.youdao.com/noteshare?id=893741a0f08ce95e930c48265a5a728e&sub=AB0F9A256AD7431699C331F45514A925

js中箭头函数和普通函数this的区别的更多相关文章

  1. JS中的日期内置函数

    用JS中的日期内置函数实现在页面显示:“今天是:2013年9月26日14:32:45”. var date=new Date(Date.parse('9/26/2013 14:32:45'));   ...

  2. js中ajax连接服务器open函数的另外两个默认参数get请求和默认异步(open的post方式send函数带参数)(post请求和get请求区别:get:快、简单 post:安全,量大,不缓存)(服务器同步和异步区别:同步:等待服务器响应当中浏览器不能做别的事情)(ajax和jquery一起用的)

    js中ajax连接服务器open函数的另外两个默认参数get请求和默认异步(open的post方式send函数带参数)(post请求和get请求区别:get:快.简单 post:安全,量大,不缓存)( ...

  3. 浅谈JS中的!=、== 、!==、===的用法和区别 JS中Null与Undefined的区别 读取XML文件 获取路径的方式 C#中Cookie,Session,Application的用法与区别? c#反射 抽象工厂

    浅谈JS中的!=.== .!==.===的用法和区别   var num = 1;     var str = '1';     var test = 1;     test == num  //tr ...

  4. js中的text(),html() ,val()的区别

    js中的text(),html() ,val()的区别 text(),html() ,val()三个方法用于html元素的存值和取值,但是他们各有特点,text()用于html元素文本内容的存取,ht ...

  5. => js 中箭头函数使用总结

    箭头函数感性认识 箭头函数 是在es6 中添加的一种规范 x => x * x 相当于 function(x){return x*x} 箭头函数相当于 匿名函数, 简化了函数的定义. 语言的发展 ...

  6. js中箭头函数 及 针对箭头函数this指向问题引出的单体模式

    ES6允许使用“箭头”(=>)定义函数 var f = a = > a //等同于 var f = function(a){ return a; } 如果箭头函数不需要参数或需要多个参数, ...

  7. JS中的substring和substr函数的区别

    1. 在JS中, 函数声明: stringObject.substring(start,stop) start是在原字符串检索的开始位置,stop是检索的终止位置,返回结果中不包括stop所指字符. ...

  8. JS中的循环嵌套 BOM函数

    [嵌套循环特点]                           外层循环转一次,内层循环转一圈              外层循环控制行数,内层循环控制每行元素个数             [做 ...

  9. JS中关于引用类型数据及函数的参数传递

    (JavaScript 中,函数的参数传递方式都是按值传递,没有按引用传递的参数) 一.数据类型 在 javascript 中数据类型可以分为两类: 基本类型值 primitive type,比如Un ...

随机推荐

  1. Laravel是怎么实现autoload的?

    用了一阵Laravel后发现很少有include和require,觉得有点奇怪,思考Laravel是怎么完成文件导入的. 其实Laravel依旧还是用include或者require的,只是都写在一个 ...

  2. Digging(DP)

    ZOJ Problem Set - 3689 Digging Time Limit: 2 Seconds      Memory Limit: 65536 KB When it comes to th ...

  3. .NET面试题系列(一)基本概念

    什么是CLR CLR常用简写词语,CLR是公共语言运行库(Common Language Runtime)和Java虚拟机一样也是一个运行时环境,它负责资源管理(内存分配和垃圾收集等),并保证应用和底 ...

  4. Centos7环境下消息队列之ActiveMQ实战

    Activemq介绍 对于消息的传递有两种类型: 一种是点对点的,即一个生产者和一个消费者一一对应: 另一种是发布/订阅模式,即一个生产者产生消息并进行发送后,可以由多个消费者进行接收. JMS定义了 ...

  5. 《JavaScript 实战》:JavaScript 实现拖拽缩放效果

    拖拉缩放效果,实现通过鼠标拖动来调整层的面积(宽高)大小,例如选框效果.这里的拖拉缩放比一般的选框复杂一点,能设置八个方位(方向)的固定触发点,能设置最小范围,最大范围和比例缩放. 跟拖放效果一样,程 ...

  6. jquery 事件对象属性小结

    使用事件自然少不了事件对象. 因为不同浏览器之间事件对象的获取, 以及事件对象的属性都有差异, 导致我们很难跨浏览器使用事件对象. jQuery中统一了事件对象, 当绑定事件处理函数时, 会将jQue ...

  7. 【Hadoop】用web查看hadoop运行状态

    博文已转移,请借一步说话.http://www.daniubiji.cn/archives/621 上一篇文章(去博客园),我们安装完hadoop,下面我们从视觉上看看hadoop怎么玩的. 我们可以 ...

  8. rxjs自定义operator

    rxjs自定义operator

  9. 快速入门react

    安装react npm install creat-react-app -g这里直接安装react的一个脚手架,里面包含了要用到的许多东西,帮助快速入门react 创建新项目 create-react ...

  10. 【leetcode 简单】第三十九题 Excel表列名称

    给定一个正整数,返回它在 Excel 表中相对应的列名称. 例如, 1 -> A 2 -> B 3 -> C ... 26 -> Z 27 -> AA 28 -> ...