唉，最近有点忙，没来及更新博客和主题，大家见谅~~(●'?'●)如果本站的内容帮助到了您，请帮忙点击页面上的广告，万分感谢！
> ES6：箭头函数lambda函数即匿名函数，在ES6发布之前，我们通常会这样写匿名函数var selected = allJobs.filter(function (job) {
return job.isSelected();
});ES6中引入了一种编写函数的新语法var selected = allJobs.filter(job =& job.isSelected());它的语法非常简单：标识符=&表达式。如果要写一个接受多重参数（也可能没有参数，或者是不定参数、默认参数、参数解构）的函数，你需要用小括号包裹参数list。
var total = values.reduce(function (a, b) {
return a +
var total = values.reduce((a, b) =& a + b, 0);除表达式外，箭头函数还可以包含一个块语句。
$("#confetti-btn").click(function (event) {
playTrumpet();
fireConfettiCannon();
$("#confetti-btn").click(event =& {
playTrumpet();
fireConfettiCannon();
});注意，使用了块语句的箭头函数不会自动返回值，你需要使用return语句将所需值返回。
小提示：当使用箭头函数创建普通对象时，你总是需要将对象包裹在小括号里。
var chewToys = puppies.map(puppy =& {});
var chewToys = puppies.map(puppy =& ({})); 不幸的是，一个空对象{}和一个空的块{}看起来完全一样。ES6中的规则是，紧随箭头的{被解析为块的开始，而不是对象的开始。因此，puppy =& {}这段代码就被解析为没有任何行为并返回undefined的箭头函数。不绑定 this在箭头函数出现之前，每个新定义的函数都有其自己的 this 值.function Person() {
this.age = 0;
setInterval(function growUp() {
this.age++;
var p = new Person();在 ECMAScript 3/5 中，这个问题可以通过新增一个变量来指向期望的 this 对象，然后将该变量放到闭包中来解决。function Person() {
var self =
self.age = 0;
setInterval(function growUp() {
self.age++;
}箭头函数则会捕获其所在上下文的
this 值，作为自己的 this 值，因此下面的代码将如期运行。function Person(){
this.age = 0;
setInterval(() =& {
this.age++; // |this| 正确地指向了 person 对象
var p = new Person();使用 call 或 apply 调用时的this值？call()和apply()的第一个参数都是要调用的函数的对象，在函数体内这一参数是关键字this的值,剩余参数是传递给要调用的函数的值。而箭头函数通过 call() 或 apply() 方法调用一个函数时，只是传入了参数而已，对 this 并没有什么影响：var adder = {
add : function(a) {
var f = v =& v + this.
return f(a);
addThruCall: function(a) {
var f = v =& v + this.
return f.call(b, a);
console.log(adder.add(1));
console.log(adder.addThruCall(1)); 不绑定 arguments箭头函数不会在其内部暴露出 arguments 对象： arguments.length, arguments[0], arguments[1] 等等，都不会指向箭头函数的 arguments，而是指向了箭头函数所在作用域的一个名为 arguments 的值（如果有的话，否则，就是 undefined）。var arguments = 42;
var arr = () =& arguments;
function foo() {
var f = () =& arguments[0];
return f(2);
foo(1); 箭头函数没有自己的 arguments 对象，不过在大多数情形下，rest参数可以给出一个解决方案：function foo() {
var f = (...args) =& args[0];
return f(2);
foo(1); 另外要注意，箭头函数不能用作构造器，和 new 一起用就会抛出错误。箭头函数在参数和箭头之间不能换行哦！参考链接：
q.com/cn/articles/es6-in-depth-arrow-functions
https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Functions/Arrow_functions本文由【】发表在 本文固定链接： 欢迎关注本站官方公众号，每日都有干货分享！
赏分享 (0)7090人阅读
mobile（13）
ES6中新增了箭头函数这种语法,箭头函数以其简洁性和方便获取this的特性,俘获了大批粉丝儿
它也可能是面试中的宠儿, 我们关键要搞清楚 箭头函数和普通函数中的this
一针见血式总结:
普通函数中的this:
1. this总是代表它的直接调用者, 例如 obj.func ,那么func中的this就是obj
2.在默认情况(非严格模式下,未使用 'use strict'),没找到直接调用者,则this指的是 window
3.在严格模式下,没有直接调用者的函数中的this是 undefined
4.使用call,apply,bind(ES5新增)绑定的,this指的是 绑定的对象
箭头函数中的this
默认指向在定义它时,它所处的对象(宿主对象),而不是执行时的对象, 定义它的时候,可能环境是window
下面通过一些例子来研究一下 this的一些使用场景[&使用最新版 chrome测试&]
要整明白这些, 我们需要首先了解一下作用域链:
当在函数中使用一个变量的时候,首先在本函数内部查找该变量,如果找不到则找其父级函数,
最后直到window,全局变量默认挂载在window对象下
1.全局变量默认挂载在window对象下
&script& &var aa = 2; &alert(window.aa); &(function () { & &aa = 3; &})(); &alert(window.aa);&/script&
我们仅仅声明了一个全局变量aa,但是打印出window.aa却和aa保持一致,为什么呢?
眼见为实, 我们使用 console.dir(window)&打印 window对象看看
我们可以看到在window属性中,看到aa属性了;此外,函数也适用于此情况,全局函数也会挂在在window对象下
我们常见的window的属性和方法有: alert, location,document,parseInt,setTimeout,setInterval等,window的属性默认可以省略window前缀!
2.在普通函数中,this指向它的直接调用者;如果找不到直接调用者,则是window
我们来看一些例子
&script& &function test() { & &console.log(this); &} &test();&/script&
结果是: window&
原因: test()是一个全局函数,也就是说是挂在window对象下的,所以 test()等价于 window.test() ,所以此时的this是window
&script& &var obj = { & &say: function () { & & &setTimeout(function () { & & & &console.log(this) & & &}); & &} &} &obj.say();&/script&
结果是: window
匿名函数,定时器中的函数,由于没有默认的宿主对象,所以默认this指向window
问题: 如果想要在setTimeout/setInterval中使用这个对象的this引用呢?
用一个 变量提前把正确的 this引用保存 起来, 我们通常使用that = this, 或者 _this = this来保存我们需要的this指针!
&script& &var obj = { & &func: function() {}, & &say: function () { & & &var that = & //此时的this就是obj对象 & & &setTimeout(function () { & & & &console.log(this) & & & &that.func() & & &}); & &} &} &obj.say();&/script&
我们也可以使用 func.bind(this) 给回调函数直接绑定宿主对象, bind绑定宿主对象后依然返回这个函数, 这是更优雅的做法
示例3(改变自360面试题):
&window.val = 1; &var obj = { & &val: 2, & &dbl: function () { & & &this.val *= 2; & & &val *= 2; & & &console.log(val); & & &console.log(this.val); & &} &}; &// 说出下面的输出结果 &obj.dbl(); &var func = obj. &func();
结果是: &2 & 4 & &8 & 8
&1& 12行代码调用
val变量在没有指定对象前缀,默认从函数中找,找不到则从window中找全局变量
即 val *=2 就是 window.val *= 2
this.val默认指的是 obj.因为 dbl()第一次被obj直接调用
&2&14行代码调用
func() 没有任何前缀,类似于全局函数,即 &window.func调用,所以
第二次调用的时候, this指的是window, val指的是window.val
第二次的结果受第一次的影响
3.在严格模式下的this
&script& &function test() { & &'use strict'; & &console.log(this); &} &test();&/script&
结果是: undefined
4.箭头函数中的 this
&script& &var obj = { & &say: function () { & & &setTimeout(() =& { & & & &console.log(this) & & &}); & &} &} &obj.say(); // obj&/script&
此时的 this指的是定义它的对象, obj,而不是 window!
示例(多层嵌套的箭头函数):
var obj = {
say: function () {
var f1 = () =& {
console.log(this); // obj
setTimeout(() =& {
console.log(this); // obj
obj.say()&/script&
因为f1定义时所处的函数 中的 this是指的 obj, 所以不管有多层嵌套,都是 obj
示例(复杂情况: 普通函数和箭头函数混杂嵌套)
var obj = {
say: function () {
var f1 = function () {
console.log(this);
// window, f1调用时,没有宿主对象,默认是window
setTimeout(() =& {
console.log(this); // window
obj.say()&/script&
结果: 都是 window,因为 箭头函数在定义的时候它所处的环境相当于是window, 所以在箭头函数内部的this函数window
示例(严格模式下的混杂嵌套)
var obj = {
say: function () {
'use strict';
var f1 = function () {
console.log(this); // undefined
setTimeout(() =& {
console.log(this); // undefined
obj.say()&/script&
结果都是undefined
说明: 严格模式下,没有宿主调用的函数中的this是undefined!!!所以箭头函数中的也是undefined!
使用箭头函数,可以让我们解决一些在匿名函数中 this指向不正确的问题;但是要注意在和普通函数混合的时候,this的指向可能是window !
Y(^o^)Y, 掌握这么多已经足够面试绝大部分关于this的内容了,我们在开发中的应用也没问题了!
如果对大家有所帮助, 我会感到很开心!
&&相关文章推荐
* 以上用户言论只代表其个人观点，不代表CSDN网站的观点或立场
访问：329820次
积分：3601
积分：3601
排名：第9650名
原创：96篇
评论：37条
阅读：4888
阅读：27736
(3)(1)(1)(8)(2)(2)(1)(2)(1)(2)(9)(4)(5)(5)(12)(25)(8)(3)(5)(1)(1)
(window.slotbydup = window.slotbydup || []).push({
id: '4740881',
container: s,
size: '200,200',
display: 'inlay-fix'1304人阅读
ES6允许使用“箭头”（=&）定义函数。
var f = v =&
上面的箭头函数等同于：
var f = function(v) {&
如果箭头函数不需要参数或需要多个参数，就使用一个圆括号代表参数部分。
var f = () =& 5;&
// 等同于&
var f = function () { return 5 };
var sum = (num1, num2) =& num1 + num2;&
// 等同于&
var sum = function(num1, num2) {&
return num1 + num2;&
如果箭头函数的代码块部分多于一条语句，就要使用大括号将它们括起来，并且使用return语句返回。
var sum = (num1, num2) =& { return num1 + num2; }
由于大括号被解释为代码块，所以如果箭头函数直接返回一个对象，必须在对象外面加上括号。
var getTempItem = id =& ({ id: id, name: “Temp” });
箭头函数可以与变量解构结合使用。
const full = ({ first, last }) =& first + ’ ’ +
// 等同于&
function full(person) {&
return person.first + ’ ’ + person.&
箭头函数使得表达更加简洁。
const isEven = n =& n % 2 == 0;&
const square = n =& n *
上面代码只用了两行，就定义了两个简单的工具函数。如果不用箭头函数，可能就要占用多行，而且还不如现在这样写醒目。
箭头函数的一个用处是简化回调函数。
// 正常函数写法&
[1,2,3].map(function (x) {&
return x *&
// 箭头函数写法&
[1,2,3].map(x =& x * x);
另一个例子是
// 正常函数写法&
var result = values.sort(function (a, b) {&
return a -&
// 箭头函数写法
var result = values.sort((a, b) =& a - b);
下面是rest参数与箭头函数结合的例子。
const numbers = (…nums) =&
numbers(1, 2, 3, 4, 5)&
// [1,2,3,4,5]
const headAndTail = (head, …tail) =& [head, tail];
headAndTail(1, 2, 3, 4, 5)&
// [1,[2,3,4,5]]
使用注意点
箭头函数有几个使用注意点。
（1）函数体内的this对象，就是定义时所在的对象，而不是使用时所在的对象。
（2）不可以当作构造函数，也就是说，不可以使用new命令，否则会抛出一个错误。
（3）不可以使用arguments对象，该对象在函数体内不存在。如果要用，可以用Rest参数代替。
（4）不可以使用yield命令，因此箭头函数不能用作Generator函数。
上面四点中，第一点尤其值得注意。this对象的指向是可变的，但是在箭头函数中，它是固定的。
function foo() {&
setTimeout(() =& {&
console.log(‘id:’, this.id);&
var id = 21;
foo.call({ id: 42 });&
上面代码中，setTimeout的参数是一个箭头函数，这个箭头函数的定义生效是在foo函数生成时，而它的真正执行要等到100毫秒后。如果是普通函数，执行时this应该指向全局对象window，这时应该输出21。但是，箭头函数导致this总是指向函数定义生效时所在的对象（本例是{id: 42}），所以输出的是42。
箭头函数可以让setTimeout里面的this，绑定定义时所在的作用域，而不是指向运行时所在的作用域。下面是另一个例子。
function Timer() {&
this.s1 = 0;&
this.s2 = 0;&
// 箭头函数&
setInterval(() =& this.s1++, 1000);&
// 普通函数&
setInterval(function () {&
this.s2++;&
}, 1000);&
var timer = new Timer();
setTimeout(() =& console.log(‘s1: ‘, timer.s1), 3100);&
setTimeout(() =& console.log(‘s2: ‘, timer.s2), 3100);&
上面代码中，Timer函数内部设置了两个定时器，分别使用了箭头函数和普通函数。前者的this绑定定义时所在的作用域（即Timer函数），后者的this指向运行时所在的作用域（即全局对象）。所以，3100毫秒之后，timer.s1被更新了3次，而timer.s2一次都没更新。
箭头函数可以让this指向固定化，这种特性很有利于封装回调函数。下面是一个例子，DOM事件的回调函数封装在一个对象里面。
var handler = {&
id: ‘123456’,
init: function() {&
document.addEventListener(‘click’,&
event =& this.doSomething(event.type), false);&
doSomething: function(type) {&
console.log(‘Handling ’ + type + ’ for ’ + this.id);&
上面代码的init方法中，使用了箭头函数，这导致这个箭头函数里面的this，总是指向handler对象。否则，回调函数运行时，this.doSomething这一行会报错，因为此时this指向document对象。
this指向的固定化，并不是因为箭头函数内部有绑定this的机制，实际原因是箭头函数根本没有自己的this，导致内部的this就是外层代码块的this。正是因为它没有this，所以也就不能用作构造函数。
所以，箭头函数转成ES5的代码如下。
function foo() {&
setTimeout(() =& {&
console.log(‘id:’, this.id);&
function foo() {&
var _this =
setTimeout(function () {&
console.log(‘id:’, _this.id);&
上面代码中，转换后的ES5版本清楚地说明了，箭头函数里面根本没有自己的this，而是引用外层的this。
请问下面的代码之中有几个this？
function foo() {&
return () =& {&
return () =& {&
return () =& {&
console.log(‘id:’, this.id);&
var f = foo.call({id: 1});
var t1 = f.call({id: 2})()(); // id: 1&
var t2 = f().call({id: 3})(); // id: 1&
var t3 = f()().call({id: 4}); // id: 1
上面代码之中，只有一个this，就是函数foo的this，所以t1、t2、t3都输出同样的结果。因为所有的内层函数都是箭头函数，都没有自己的this，它们的this其实都是最外层foo函数的this。
除了this，以下三个变量在箭头函数之中也是不存在的，指向外层函数的对应变量：arguments、super、new.target。
function foo() {&
setTimeout(() =& {&
console.log(‘args:’, arguments);&
foo(2, 4, 6, 8)&
// args: [2, 4, 6, 8]
上面代码中，箭头函数内部的变量arguments，其实是函数foo的arguments变量。
另外，由于箭头函数没有自己的this，所以当然也就不能用call()、apply()、bind()这些方法去改变this的指向。
(function() {&
}).call({ x: ‘outer’ });&
// [‘outer’]
上面代码中，箭头函数没有自己的this，所以bind方法无效，内部的this指向外部的this。
长期以来，语言的this对象一直是一个令人头痛的问题，在对象方法中使用this，必须非常小心。箭头函数”绑定”this，很大程度上解决了这个困扰。&
嵌套的箭头函数
箭头函数内部，还可以再使用箭头函数。
下面是一个ES5语法的多重嵌套函数。
function insert(value) {&
return {into: function (array) {&
return {after: function (afterValue) {&
array.splice(array.indexOf(afterValue) + 1, 0, value);&
insert(2).into([1, 3]).after(1); //[1, 2, 3]
上面这个函数，可以使用箭头函数改写。
let insert = (value) =& ({into: (array) =& ({after: (afterValue) =& {&
array.splice(array.indexOf(afterValue) + 1, 0, value);&
insert(2).into([1, 3]).after(1); //[1, 2, 3]
下面是一个部署管道机制（pipeline）的例子，即前一个函数的输出是后一个函数的输入。
const pipeline = (…funcs) =&&
val =& funcs.reduce((a, b) =& b(a), val);
const plus1 = a =& a + 1;&
const mult2 = a =& a * 2;&
const addThenMult = pipeline(plus1, mult2);
addThenMult(5)&
如果觉得上面的写法可读性比较差，也可以采用下面的写法。
const plus1 = a =& a + 1;&
const mult2 = a =& a * 2;
mult2(plus1(5))&
箭头函数还有一个功能，就是可以很方便地改写λ演算。
// λ演算的写法&
fix = λf.(λx.f(λv.x(x)(v)))(λx.f(λv.x(x)(v)))
// ES6的写法&
var fix = f =& (x =& f(v =& x(x)(v)))&
(x =& f(v =& x(x)(v)));
上面两种写法，几乎是一一对应的。由于λ演算对于计算机科学非常重要，这使得我们可以用ES6作为替代工具，探索计算机科学。&
箭头函数可以绑定this对象，大大减少了显式绑定this对象的写法（call、apply、bind）。但是，箭头函数并不适用于所有场合，所以ES7提出了“函数绑定”（function bind）运算符，用来取代call、apply、bind调用。虽然该语法还是ES7的一个提案，但是Babel转码器已经支持。
函数绑定运算符是并排的两个双冒号（::），双冒号左边是一个对象，右边是一个函数。该运算符会自动将左边的对象，作为上下文环境（即this对象），绑定到右边的函数上面。
// 等同于&
bar.bind(foo);
foo::bar(…arguments);&
// 等同于&
bar.apply(foo, arguments);
const hasOwnProperty = Object.prototype.hasOwnP&
function hasOwn(obj, key) {&
return obj::hasOwnProperty(key);&
如果双冒号左边为空，右边是一个对象的方法，则等于将该方法绑定在该对象上面。
var method = obj::obj.&
// 等同于&
var method = ::obj.
let log = ::console.&
// 等同于&
var log = console.log.bind(console);
由于双冒号运算符返回的还是原对象，因此可以采用链式写法。
import { map, takeWhile, forEach } from “iterlib”;
getPlayers()&
::map(x =& x.character())&
::takeWhile(x =& x.strength & 100)&
::forEach(x =& console.log(x));
let { find, html } =
document.querySelectorAll(“div.myClass”)&
::find(“p”)&
::html(“hahaha”);
尾调用优化
什么是尾调用？
尾调用（Tail Call）是函数式编程的一个重要概念，本身非常简单，一句话就能说清楚，就是指某个函数的最后一步是调用另一个函数。
function f(x){&
return g(x);&
上面代码中，函数f的最后一步是调用函数g，这就叫尾调用。
以下三种情况，都不属于尾调用。
// 情况一&
function f(x){&
let y = g(x);&
// 情况二&
function f(x){&
return g(x) + 1;&
// 情况三&
function f(x){&
上面代码中，情况一是调用函数g之后，还有赋值操作，所以不属于尾调用，即使语义完全一样。情况二也属于调用后还有操作，即使写在一行内。情况三等同于下面的代码。
function f(x){&
尾调用不一定出现在函数尾部，只要是最后一步操作即可。
function f(x) {&
if (x & 0) {&
return m(x)&
return n(x);&
上面代码中，函数m和n都属于尾调用，因为它们都是函数f的最后一步操作。&
尾调用优化
尾调用之所以与其他调用不同，就在于它的特殊的调用位置。
我们知道，函数调用会在内存形成一个“调用记录”，又称“调用帧”（call frame），保存调用位置和内部变量等信息。如果在函数A的内部调用函数B，那么在A的调用帧上方，还会形成一个B的调用帧。等到B运行结束，将结果返回到A，B的调用帧才会消失。如果函数B内部还调用函数C，那就还有一个C的调用帧，以此类推。所有的调用帧，就形成一个“调用栈”（call stack）。
尾调用由于是函数的最后一步操作，所以不需要保留外层函数的调用帧，因为调用位置、内部变量等信息都不会再用到了，只要直接用内层函数的调用帧，取代外层函数的调用帧就可以了。
function f() {&
let m = 1;&
let n = 2;&
return g(m + n);&
// 等同于&
function f() {&
return g(3);&
// 等同于&
上面代码中，如果函数g不是尾调用，函数f就需要保存内部变量m和n的值、g的调用位置等信息。但由于调用g之后，函数f就结束了，所以执行到最后一步，完全可以删除 f(x) 的调用帧，只保留 g(3) 的调用帧。
这就叫做“尾调用优化”（Tail call optimization），即只保留内层函数的调用帧。如果所有函数都是尾调用，那么完全可以做到每次执行时，调用帧只有一项，这将大大节省内存。这就是“尾调用优化”的意义。
注意，只有不再用到外层函数的内部变量，内层函数的调用帧才会取代外层函数的调用帧，否则就无法进行“尾调用优化”。
function addOne(a){&
var one = 1;&
function inner(b){&
return b +&
return inner(a);&
上面的函数不会进行尾调用优化，因为内层函数inner用到了外层函数addOne的内部变量one。
&&相关文章推荐
* 以上用户言论只代表其个人观点，不代表CSDN网站的观点或立场
访问：1892301次
积分：20802
积分：20802
排名：第394名
原创：117篇
转载：1777篇
评论：89条
(4)(109)(98)(101)(99)(137)(209)(392)(324)(117)(150)(5)(25)(88)(86)
(window.slotbydup = window.slotbydup || []).push({
id: '4740887',
container: s,
size: '250,250',
display: 'inlay-fix'这家伙很懒，什么个性签名都没有留下。
本文作者：IMWeb ShiJianwen
原文出处：
未经同意，禁止转载
原文链接：
众成翻译地址：
最近在重构一个用 Vue1.0 写的项目，我通过使用 ES6 的箭头函数来让代码在不升级 Vue2.0 的情况下变得更加简洁和统一。在这个过程中我也遇到了很多坑，所以想借此机会分享一下我从中学到的东西以及总结出来的一些规范，这些规范以后都将会落实到我的 Vue 项目中。
&!-- more --&
我们最好还是通过代码示例来讲解，下面给出一段代码，我们一步一步来分析它
title: '',
description: '',
methods: {
saveItem: function() {
let vm = this;
this.$http.post('item', this.item)
function (response) {
vm.item.title = '';
vm.item.description = '';
function (response) {
console.log('error', response);
上面给出的这段代码实现了一个表单提交逻辑，用户提交表单之后发送请求在数据库新建一个数据项。但即使是这么简单的逻辑，其中也还有很多可以优化的地方。
箭头函数和 this 关键字
先来看一下代码中的 saveItem 方法：
saveItem: function() {
this.$http.post('item', this.item)
function (response) {
vm.item.title = '';
vm.item.description = '';
function (response) {
console.log('error', response);
开发中我经常很不爽的就是总是要把 this 关键字存起来，像上面的 vm = this 这个变量定义就是为了待会我们能够不受函数执行上下文影响地获取到 Vue 实例对象。假如有一种方法能够让我们彻底摆脱这种声明并且函数能够自动继承 this 关键字，岂不美哉？幸运的是，现在我们完全可以实现这个想法，因为有。
在使用箭头函数的时候，this 是一个常量，这意味着现在的 this 不再动态指向当前的执行上下文了，而是继承了外围作用域。这意味着我们可以把上面代码中的 promise 回调函数用一种更加简洁的方法来重写并且不需要用临时变量来存储 this 就能取到 Vue 实例对象：
saveItem: function() {
// let vm =
this.$http.post('item', this.item)
//function (response) =& {
response =& {
this.item.title = '';
this.item.description = '';
//function (response) =& {
response =& {
console.log('error', response);
看起来很不错吧！
滥用箭头函数
使用箭头函数的确很酷，但是不是每个地方用它都这么好呢？有些人可能不喜欢每次都声明一个 function() {} 所以把它们都用箭头函数的 () =& {} 来简写。所以刚刚的 saveItem() 方法还可以改写成这样：
methods: {
saveItem: () =& {
this.$http.post('item', this.item)
// callbacks in here
你会觉得这样改写后简直完美，整个代码都变得特别简洁，但是这样你将会踩到一个坑。
现在 saveItem() 方法里面的 this 指向的是 window 而不是我们希望的 Vue 实例对象（因为是继承外围作用域的this），当我们想要在给函数传递 this.item 整个参数的时候，你会发现它获取的是 window.item。
约定了一种新的函数定义方式，可以直接把函数名当成函数的声明，像下面这样：
var obj = {
foo: function() {},
bar: function() {}
// with ES6 method definitions, this becomes
var obj = {
所以我们可以用这种方法来简写我们的 saveItem() 方法，同时也不会出现刚刚箭头函数带来的 this 继承的问题。
methods: {
saveItem() {
this.$http.post('item', this.item)
// callbacks in here
如果你觉得还不够简洁的话，可以按照这个方法改写所有 Vue 实例对象里面的顶级方法（data 和 created 这些）
在我们的代码里，我们的 data 是一个对象字面量。如果你熟悉 Vue 的话你会发现我们在真正开发的时候会把 data 这个对象当做闭包 return 回来。官方文档和有解释为什么这样做（译者注：这里要返回闭包是为了保证组件内部的状态独立，避免多个相同组件共用一个 data）。
我们刚刚了解到了很多优化的点，还知道了箭头函数里面的 this 是一个常量，它继承自外围作用域，除此之外，箭头函数还有一些的新特性，前面的例子中我们定义函数体的时候用的是传统的块级结构方法（花括号包裹），箭头函数中我们可以使用一种更加简洁的代码结构来定义函数体，看下面的两段代码：
var sum = (a,b) =& {return a+b;}
var sum = (a,b) =& a+b;
var sum = (a,b) =& ({sum: a+b});
当你的函数只返回一个值的时候，可以直接把值写上，不再需要以往的花括号和 return 了，但如果需要返回一个对象字面量的话，就必须把你要返回的对象用括号包裹起来（译者注：花括号是运算符，声明这是一个计算值，否则会把对象字面量的花括号认为是箭头函数的函数体声明）。
我很喜欢这个小改动，另外你也可以使用 ES6 的函数定义方法来写
// method definition style
title: '',
description: '',
Vue ES6 规范
踩过那么多坑之后，我总结出了以下几条 Vue 模块定义规范：
使用 来定义所有顶层方法
使用定义所有在顶层方法里面的回调函数
使用来定义 data 的函数体
希望这些规范能够让你的 Vue 模块代码和组件更加吸引人并且更加可读，Thx！
Originally published at .
一个IMWeb账号或者
才能进行评论。
已有账号，立即登录
通过以下账号登录：
IMWeb是真人前端社区，填写公司信息能帮助你更好的提升业内影响力。
公司邮箱仅作一次性的验证使用，您不必担心信息泄露与垃圾邮件。
如今，他们已入驻IMWeb：
填写公司信息
自由职业者，学生，或待业中?
返回上一步
IMWEB团队正式成立是时间是日，目前主要负责腾讯在线教育战略产品腾讯课堂，多人社交互动视频以及活动组织类项目的研发工作。