相关疑难解决方法(0)

以不同的方式在ES6/ES2015中创建顶级功能有哪些优点/缺点？或者这仅仅是品味/风格指南等问题？

选项1:

function square(n) {
   return n * n;
}

选项2:

var square = function(n) {
  return n * n;
};

选项3:

var square = (n) => {
   return n * n;
};

选项4:

const square = (n) => {
   return n * n;
};

首先我尝试了这个 -

const profile = {
    name: 'Alex',
    getName: function(){
      return this.name;
    }
};

哪个工作正常.现在我用胖箭尝试了同样的事情.在那种情况下,"这个"未定义.

const profile = {
    name: 'Alex',
    getName: () => {
      return this.name;
    }
};

这给了我一个错误

TypeError:无法读取未定义的属性"name"

我学到的是,胖箭头语法更好地处理隐含的"this".请解释为什么会发生这种情况.

我发现'this'关键字似乎始终指向global在嵌套对象文字中使用箭头函数.

根据其他问题,下面的代码片段可以解释为箭头函数的'this'在词汇上下文中定义.

var c = 100;
var a = {c:5 , fn: () => {return this.c;} };
console.log(a.c); //100

但是,我无法理解以下代码(嵌套对象文字):

var c = 100;

var a = {
    c: 5,
    b: {
        c: 10,
        fn: ()=> {return this.c;}
    }
}

console.log(a.b.fn());// still 100, why not 5?

我的意思是,如果从词汇语境方面考虑,不应该在abfn中的'this'指向一个？

为什么,无论对象嵌套多少级别,所有'this'实例都指向窗口还是全局？

首先,我创建一个ES5函数,然后创建它的原型:

var Person = function() {};

Person.prototype.city = function() {return 'New York'}

我在这里没有错误.但是当我用ES6胖箭头功能创建相同的时候,我得到Cannot set property 'city' of undefined:

let Person = () => {};

Person.prototype.city = () => {return 'New York'}

为什么是这样？

我理解箭头函数在ES6中是如何工作的,以及词汇这个,但是我想知道是否有人知道如何将参数传递给箭头函数？

在ES5中,您可以简单地执行以下操作:

function foo( bar, baz ){
    console.log('Args:', arguments.join(', '))
}

但是,在ES6中,如果使用箭头功能,如下所示:

const foo = ( bar, baz ) => {
    console.log('Args:', arguments.join(', '))
}

该arguments变量返回一个对象,该对象与参数无关.

所以,我想知道是否有人有办法将参数传递给箭头函数？

编辑

我想也许我应该提供一些关于我想要完成的事情的信息,也许如果以上是不可能的,有人有更好的主意.

基本上,我正在向BluebirdJS asCallback方法添加一个IIEF ,它将确定是否实际提供了回调,如果没有,则返回promise.

下面是ES5中的一个工作示例:

var _ = require('lodash')
var Promise = require('bluebird')

function testFunc( foo, callback ) {
    return new Promise( function ( res, rej ){
        res('You Said: ' + (_.isString( foo ) ? foo : 'NOTHING') )
    })
        .asCallback((function ( args ) {
            return _.findLast(args, function(a) { …

据我所知,箭头功能类似于普通功能.我这样使用时没有问题:

let X = () => {};
let Y = function() {};
X();
Y();

但是,当我使用它时发生错误 new

let X = () => {};
let Y = function() {};
x = new X();
y = new Y();

Uncaught TypeError: X is not a constructor

你能解释一下为什么吗？非常感谢.

let a = () => (
  {
    name:"Anna",
    func: () => console.log(this.name)
  }
)

let b = () => (
  {
    name:"Brian",
    func: function(){ console.log(this.name) }
  }
)

let c = function(){
  return(
    {
      name:"Charlie",
      func: function(){ console.log(this.name) }
    }
  )
}

let d = function(){
  return(
    {
      name:"Denny",
      func: () => console.log(this.name)
    }
  )
}

这4个函数具有混合和匹配的函数语法.调用嵌套函数时,func:with arrow函数返回空白.

a().func() // returns blank
b().func() // returns "Brian"
c().func() // returns "Charlie"
d().func() // returns blank

我认为箭头功能保留了"这个"的范围？这种行为似乎与我的想法相反.箭头功能何时超出范围？

我有一个工具提示的bootstrap修改.并使用webpack/babel处理我的js

我的代码的简化可以是:

    $('[data-toggle="tooltip"]').tooltip({
        title: () => {
            return $(this).children('.tooltip-html-content').html();
        }
    });

这应该是元素,bootstrap将调用此函数:

   getTitle: function () {
      var title
        , $e = this.$element
        , o = this.options

      title = $e.attr('data-original-title')
        || (typeof o.title == 'function' ? o.title.call($e[0]) :  o.title)

      return title
    }

重要的是:

 o.title.call($e[0])

其中$ e [0]是工具提示dom元素.

好吧,当我用babel处理这个结果时,结果会改变this为_thisa,然后他将_this分配给他认为真实的值.

问题:我可以在babel中避免这种特定功能的转换吗？

=====

基于响应的最终解决方案:

   getTitle: function getTitle() {

我有一个JavaScript对象:

var methods = {

  classStyle() {
    console.log('Class style function');
  },

  traditionalStyle: function() {
    console.log('Traditional style function');
  },

  arrowStyle: () => {
    console.log('Arrow style function');
  }

};

methods.classStyle();
methods.traditionalStyle();
methods.arrowStyle();

输出如预期:

(index):70 Class style function
(index):74 Traditional style function
(index):78 Arrow style function

我的问题是:

1. 这些不同的宣告方法之间是否有任何区别？
2. 这取决于个人喜好吗？或者内部运作会改变吗？
3. 使用不同风格时是否需要考虑？

此问题旨在作为有关由于将单行/表达式箭头函数体语法与自动返回与其多行/块版本混淆而产生的问题的规范重复目标。

我有一个箭头函数来添加两个数字，但是当我调用它时，它返回undefined。为什么？

const add = (a, b) => {
  a + b
}

console.log(add(1, 2)) // expected: 3, actually: undefined

替代问题：

我的 React 组件应该使用 渲染列表项map，但列表仍为空。为什么？

<ul>
  {list.map(item => {
    <li>
      <a href="{item.url}">{item.name}</a>
    </li>
  })}
</ul>