Javascript 如何将此ES6代码重写为与Safari兼容？

我有一些使用ES6 arrow函数的Vue.js代码。然而，Safari显然不喜欢这样（有一次它在OSX上出现了Chrome）。代码如下：

fetchItemCount: function(){
                this.$http.get('/api/fetchItemCount')
                    .then(response => {
                        this.itemCount = response.data;
                    })
                    .catch(response => {

                    });
            },

我有几个使用箭头语法的函数。我如何重写它们以避免使用它，但仍然执行相同的工作

---

我曾尝试使用Babel来传输代码，但这似乎会引入错误（无法设置未定义或空引用的属性“Vue”）

正如其他人所指出的那样，使用Babel这样的传输程序可以做到这一点，但由于这并不总是可能，因此在没有箭头函数的情况下，它看起来是这样的

fetchItemCount: function(){
    var that = this;
    this.$http.get('/api/fetchItemCount')
        .then(function(response) {
            that.itemCount = response.data;
        })
        .catch(function(response) {

        });
},

arrow函数提供的本质上是一个函数，它保留了声明它的

this

范围，因此，为了重现，我们只需要将外部范围中的

this

分配给一个新变量，并在函数内部使用它

---

正如LinusBorg在评论中指出的，当使用时，您不必执行

var=this部分，因为库将在回调到外部作用域中为您更改
此
。但这是特定于资源的，而不是承诺通常是如何实现的，因此它通常不会与其他库一起工作。
正如其他人所指出的，使用诸如babel之类的transpiler可以做到这一点，但由于这并不总是可能的，因此在没有箭头功能的情况下，它的外观就是这样

fetchItemCount: function(){
    var that = this;
    this.$http.get('/api/fetchItemCount')
        .then(function(response) {
            that.itemCount = response.data;
        })
        .catch(function(response) {

        });
},

arrow函数提供的本质上是一个函数，它保留了声明它的
this
范围，因此，为了重现，我们只需要将外部范围中的
this
分配给一个新变量，并在函数内部使用它

正如LinusBorg在评论中指出的，当使用时，您不必执行
var=this部分，因为库将在回调到外部作用域中为您更改
此
。但这是特定于资源的，而不是通常使用Promissions的方式，因此它通常不会与其他库一起工作。
实际上，您需要重写代码，至少不需要手动重写。你能做的就是继续像你给出的例子那样编写代码，并使用transpiler，比如，将你的ES6代码重写为ES5

您可以使用任务管理器（如或）使其对自己几乎透明

如果您需要了解如何使用任务管理器，请参阅。它为您提供了一个关于如何使用Gulp的简短而集中的概述

阅读后，您将看到自动观看文件并通过一些吞咽脚本简化其内容是多么容易。因此，只需使用自动为您执行此传输任务

例如：

const gulp = require('gulp');
const babel = require('gulp-babel');

gulp.task('transpile', () => {
    return gulp.src('src/MY-VUE-SOURCE.js')
        .pipe(babel({
            presets: ['es2015']
        }))
        .pipe(gulp.dest('SOME_DESTINATION'));
});

gulp.task('watch', function() {
    gulp.watch(['src/**/*'], ['transpile']);
});

在运行gulp watch（一直运行到您手动停止它）之后，您对MY-VUE-SOURCE.js所做的任何更改都将自动传输给您。
实际上，您需要重写代码，至少不需要手动。你能做的就是继续像你给出的例子那样编写代码，并使用transpiler，比如，将你的ES6代码重写为ES5

您可以使用任务管理器（如或）使其对自己几乎透明

如果您需要了解如何使用任务管理器，请参阅。它为您提供了一个关于如何使用Gulp的简短而集中的概述

阅读后，您将看到自动观看文件并通过一些吞咽脚本简化其内容是多么容易。因此，只需使用自动为您执行此传输任务

例如：

const gulp = require('gulp');
const babel = require('gulp-babel');

gulp.task('transpile', () => {
    return gulp.src('src/MY-VUE-SOURCE.js')
        .pipe(babel({
            presets: ['es2015']
        }))
        .pipe(gulp.dest('SOME_DESTINATION'));
});

gulp.task('watch', function() {
    gulp.watch(['src/**/*'], ['transpile']);
});

在运行gulp watch（一直运行到您手动停止它）之后，您对MY-VUE-SOURCE.js所做的任何更改都将自动传输给您。
您可以使用它将代码传输到ES5下一版本的Safari（10）也将支持箭头功能和ES6的所有其他部分。但是，较旧的浏览器仍然需要ES5代码，可以使用诸如babel（在上面的评论中提到）之类的transpiler进行传输。请参阅我的编辑-我尝试使用babel，但它引入了错误。您遇到了什么错误？@OskarSzura我已将其添加到我的问题中。您可以使用它将代码传输到下一版本的Safari中（10） 也将支持箭头函数和ES6的所有其他部分。但是，较旧的浏览器仍然需要ES5代码，可以使用诸如babel（在上面的评论中提到）之类的transpiler进行传输。请查看我的编辑-我尝试过使用Babel，但它引入了错误。您遇到了什么错误？@OskarSzura我已将其添加到我的问题中。我确实使用Gulp并尝试使用Bower。但是，当我切换到使用Babelified代码时，我开始出现错误，错误发生在Vue.js库代码的开头：
无法设置未定义或空引用的属性“Vue”
。这是使用ES2015 Babel预设。我确实使用Gulp并尝试使用Bower。但是，当我切换到使用Babelified代码时，我开始出现错误，错误发生在Vue.js库代码的开头：
无法设置未定义或空引用的属性“Vue”ce
。这是在使用ES2015 Babel预设。虽然您的解释通常是正确的，但在使用vue资源时，
that=This
闭包是不必要的，因为它为您将回调函数绑定到vm的作用域。很高兴知道，尽管我将保留我的答案，因为这不是绑定承诺的正常行为虽然您的解释通常是正确的，但在使用vue资源时，
that=this
闭包是不必要的，因为它将回调函数绑定到vm的作用域。很高兴知道，尽管我会保持我的回答，因为这不是向bin承诺的正常行为d到外部上下文。不过我会记下来的！