이 제안 에 따르면 , 화살표는 “전통적인 몇 가지 일반적인 문제점을 해결하고 해결하는 것”을 목표로 삼았습니다 Function Expression. 그들은 this어휘 적 으로 바인딩 하고 간결한 구문을 제공 하여 문제를 개선하려고했습니다 .

하나,

• this어휘 적으로 일관되게 묶을 수 없다
• 화살표 함수 구문은 섬세하고 모호합니다

따라서 화살표 함수는 혼동과 오류의 기회를 제공하며 JavaScript 프로그래머의 어휘에서 제외되고 function독점적으로 대체되어야 합니다.

어휘에 대하여 this

this 문제가있다 :

function Book(settings) {
    this.settings = settings;
    this.pages = this.createPages();
}
Book.prototype.render = function () {
    this.pages.forEach(function (page) {
        page.draw(this.settings);
    }, this);
};

화살표 함수 this는 콜백 내부의 속성에 액세스해야하는 문제를 해결하려고합니다 . 이미 여러 가지 방법이 있습니다 this. 변수에 할당하거나을 사용 bind하거나 Array집계 메소드 에서 사용 가능한 세 번째 인수를 사용할 수 있습니다 . 그러나 화살표가 가장 간단한 해결 방법 인 것처럼 보이므로 방법을 다음과 같이 리팩터링 할 수 있습니다.

this.pages.forEach(page => page.draw(this.settings));

그러나 코드가 jQuery와 같은 라이브러리를 사용했는지 여부를 고려하십시오 this. 이 메소드는 특별히 바인딩 됩니다. 이제 this다루어야 할 두 가지 값이 있습니다.

Book.prototype.render = function () {
    var book = this;
    this.$pages.each(function (index) {
        var $page = $(this);
        book.draw(book.currentPage + index, $page);
    });
};

우리는 사용해야합니다 function순서를 each결합하는 this동적. 여기서는 화살표 기능을 사용할 수 없습니다.

여러 this값을 다루는 것은 혼란 스러울 수 있습니다 this. 저자가 누구 에 대해 이야기 했는지 알기가 어렵 기 때문입니다 .

function Reader() {
    this.book.on('change', function () {
        this.reformat();
    });
}

저자는 실제로 전화하려고 했습니까 Book.prototype.reformat? 아니면 묶는 것을 잊고 this전화를 걸려 고 Reader.prototype.reformat했습니까? 핸들러를 화살표 함수로 변경하면 저자가 dynamic을 원했는지 궁금 this하지만 한 줄에 맞는 화살표를 선택했을 것입니다.

function Reader() {
    this.book.on('change', () => this.reformat());
}

“화살표가 때때로 사용하기에 잘못된 기능 일 수 있다는 것은 예외적인가? 아마도 우리가 동적 this값을 거의 필요로하지 않는다면 , 대부분의 시간에 화살표를 사용하는 것이 여전히 좋을 것이다.”

그러나 스스로에게 다음과 같이 질문하십시오. “코드를 디버깅하고 오류 결과가 ‘가장자리가 생긴 것’이라는 것을 알게 되었습니까?”대부분의 시간뿐만 아니라 문제를 피하는 것이 좋습니다. 시간의 100 %

더 나은 방법이 있습니다. 항상 사용하고 function( this항상 동적으로 바인딩 할 수 있음) 항상 this변수를 통해 참조 하십시오. 변수는 어휘이며 많은 이름을 가정합니다. this변수에 할당 하면 의도가 명확 해집니다.

function Reader() {
    var reader = this;
    reader.book.on('change', function () {
        var book = this;
        book.reformat();
        reader.reformat();
    });
}

또한, 항상this 변수에 할당 하면 (단일 this기능이 있거나없는 경우에도) 코드를 변경 한 후에도 의도를 명확하게 유지할 수 있습니다.

또한 동적 this은 거의 예외적입니다. jQuery는 5 천만 개가 넘는 웹 사이트에서 사용됩니다 (2016 년 2 월 현재 작성). this동적으로 바인딩하는 다른 API는 다음과 같습니다 .

• Mocha (어제 최대 120k 다운로드)는을 통해 테스트 방법을 공개합니다 this.
• Grunt (어제 ~ 63k 다운로드)는를 통해 빌드 작업을위한 메소드를 노출합니다 this.
• 백본 (어제 ~ 22,000 회 다운로드)은 액세스하는 메소드를 정의합니다 this.
• DOM과 같은 이벤트 API는 EventTargetwith를 참조하십시오 this.
• 패치되거나 확장 된 프로토 타입 API는로 인스턴스를 참조합니다 this.

( http://trends.builtwith.com/javascript/jQuery 및 https://www.npmjs.com을 통한 통계 )

this이미 동적 바인딩이 필요할 수 있습니다 .

어휘 this는 때때로 예상되지만 때로는 그렇지 않습니다. this때로는 역학 이 예상 되듯 이 때로는 그렇지 않습니다. 고맙게도 예상되는 바인딩을 항상 생성하고 전달하는 더 좋은 방법이 있습니다.

간결한 구문에 대하여

화살표 함수는 함수에 대한 “더 짧은 구문 형태”를 제공하는 데 성공했습니다. 그러나이 짧은 기능으로 더 성공할 수 있습니까?

인가 x => x * x보다 “읽기 쉽게” function (x) { return x * x; }? 아마도 한 줄의 짧은 코드를 생성 할 가능성이 높기 때문일 수 있습니다. 다이슨의 독서 속도와 선 길이가 화면 에서 읽는 효과에 미치는 영향 ,

보통 및 빠른 속도에서 효과적인 판독을 지원하는 중간 줄 길이 (한 줄에 55 자)가 나타납니다. 이것은 최고 수준의 이해력을 만들어 냈습니다. . .

조건부 (삼항) 연산자와 단일 행 if명령문에 대해서도 비슷한 근거가 있습니다.

그러나 실제로 제안서에 광고 된 간단한 수학 함수를 작성 하고 있습니까? 내 도메인은 수학적이지 않으므로 서브 루틴이 그렇게 우아하지는 않습니다. 오히려 화살표 함수가 열 제한을 깨고 편집기 또는 스타일 가이드로 인해 다른 줄로 줄 바꿈되어 다이슨의 정의에 따라 “가독성”이 무효화되는 것을 볼 수 있습니다.

“가능한 경우 짧은 기능을 위해 짧은 버전을 사용하는 것은 어떻습니까?” 그러나 이제는 문체 규칙이 언어 제약 조건과 모순됩니다. “가장 짧은 표기법 만 사용하고 때로는 가장 긴 표기법 만 this예상대로 묶는다는 점을 명심하십시오 .” 이러한 혼란은 화살을 특히 오용하기 쉽다.

화살표 함수 구문에는 여러 가지 문제가 있습니다.

const a = x =>
    doSomething(x);

const b = x =>
    doSomething(x);
    doSomethingElse(x);

이 두 기능은 구문 상 유효합니다. 그러나 doSomethingElse(x);의 본문에 있지는 않지만 b들여 쓰기가 잘 안된 최상위 문장 일뿐입니다.

블록 형식으로 확장하면 더 이상 암시 적이 없으므로 return복원하는 것을 잊을 수 있습니다. 그러나 그 표현은 부작용을 일으키기위한 것일 뿐이 므로 return앞으로 명시적인 것이 필요한지 누가 알 수 있습니까?

const create = () => User.create();

const create = () => {
    let user;
    User.create().then(result => {
        user = result;
        return sendEmail();
    }).then(() => user);
};

const create = () => {
    let user;
    return User.create().then(result => {
        user = result;
        return sendEmail();
    }).then(() => user);
};

rest 매개 변수로 의도 된 것은 스프레드 연산자로 구문 분석 될 수 있습니다.

processData(data, ...results => {}) // Spread
processData(data, (...results) => {}) // Rest

할당은 기본 인수와 혼동 될 수 있습니다.

const a = 1;
let x;
const b = x => {}; // No default
const b = x = a => {}; // "Adding a default" instead creates a double assignment
const b = (x = a) => {}; // Remember to add parens

블록은 객체처럼 보입니다 :

(id) => id // Returns `id`
(id) => {name: id} // Returns `undefined` (it's a labeled statement)
(id) => ({name: id}) // Returns an object

이것은 무엇을 의미 하는가?

() => {}

작성자가 no-op 또는 빈 객체를 반환하는 함수를 만들려고 했습니까? (염두에두고, 우리는 지금까지 배치해야합니다 {후 =>우리는 표현의 문법에 자신을 제한? 것이 더 화살표 ‘빈도를 줄일 것인가?.)

=>모양 <=과 >=:

x => 1 ? 2 : 3
x <= 1 ? 2 : 3

if (x => 1) {}
if (x >= 1) {}

화살표 함수 표현식을 즉시 호출하려면 ()외부에 배치 해야 하지만 ()내부에 배치 하는 것은 유효하며 의도적 일 수 있습니다.

(() => doSomething()()) // Creates function calling value of `doSomething()`
(() => doSomething())() // Calls the arrow function

그러나 (() => doSomething()());즉시 호출되는 함수 표현식을 작성하려는 의도로 작성 하더라도 아무 일도 일어나지 않습니다.

위의 모든 경우를 고려하여 화살표 기능이 “더 이해하기 쉽다”고 주장하기는 어렵습니다. 하나는 수 이 구문을 사용하는 데 필요한 모든 특별한 규칙을 배운다. 정말 가치가 있습니까?

의 구문 function은 예외적으로 일반화됩니다. function독점적으로 사용 한다는 것은 언어 자체가 혼란스러운 코드를 작성하지 못하게한다는 것을 의미합니다. 모든 경우에 구문 적으로 이해해야하는 절차를 작성하려면을 선택합니다 function.

지침에 대하여

“명확하고”일관성이 있어야하는 지침을 요청하십시오. 화살표 함수를 사용하면 구문 적으로 유효하고 논리적으로 유효하지 않은 코드가 생겨 두 함수 형태가 의미 있고 임의로 서로 얽혀 있습니다. 따라서 다음을 제공합니다.

ES6의 기능 표기법에 대한 지침 :

• 로 절차를 작성하십시오 function.
• 항상 this변수에 할당 하십시오. 사용하지 마십시오 () => {}.

답변

var Actor = {
  name: 'RajiniKanth',
  getName: function() {
     console.log(this.name);
  }
};
Actor.getName();

var Actor = {
  name: 'RajiniKanth',
  movies: ['Kabali', 'Sivaji', 'Baba'],
  showMovies: function() {
   this.movies.forEach(function(movie) {
     alert(this.name + " has acted in " + movie);
   });
  }
};

Actor.showMovies();

var fn = function(){
  alert(this);
}

fn(); // [object Window]

var Actor = {
  name: 'RajiniKanth',
  movies: ['Kabali', 'Sivaji', 'Baba'],
  showMovies: function() {
   var _this = this;
   this.movies.forEach(function(movie) {
     alert(_this.name + " has acted in " + movie);
   });
  }
};

Actor.showMovies();

var Actor = {
  name: 'RajiniKanth',
  movies: ['Kabali', 'Sivaji', 'Baba'],
  showMovies: function() {
   this.movies.forEach(function(movie) {
     alert(this.name + " has acted in " + movie);
   }.bind(this));
  }
};

Actor.showMovies();

var Actor = {
  name: 'RajiniKanth',
  movies: ['Kabali', 'Sivaji', 'Baba'],
  showMovies: function() {
   this.movies.forEach((movie) => {
     alert(this.name + " has acted in " + movie);
   });
  }
};

Actor.showMovies();

var asyncFunction = (param, callback) => {
  window.setTimeout(() => {
  callback(param);
  }, 1);
};

// With a traditional function if we don't control
// the context then can we lose control of `this`.
var o = {
  doSomething: function () {
  // Here we pass `o` into the async function,
  // expecting it back as `param`
  asyncFunction(o, function (param) {
  // We made a mistake of thinking `this` is
  // the instance of `o`.
  console.log('param === this?', param === this);
  });
  }
};

o.doSomething(); // param === this? false

var asyncFunction = (param, callback) => {
  window.setTimeout(() => {
  callback(param);
  }, 1);
};

var o = {
  doSomething: function () {
  // Here we pass `o` into the async function,
  // expecting it back as `param`.
  //
  // Because this arrow function is created within
  // the scope of `doSomething` it is bound to this
  // lexical scope.
  asyncFunction(o, (param) => {
  console.log('param === this?', param === this);
  });
  }
};

o.doSomething(); // param === this? true

var Actor = {
  name: 'RajiniKanth',
  movies: ['Kabali', 'Sivaji', 'Baba'],
  getName: () => {
     alert(this.name);
  }
};

Actor.getName();

function Actor(name) {
  this.name = name;
}
Actor.prototype.getName = () => {
  console.log(this === window); // => true
  return this.name;
};
var act = new Actor('RajiniKanth');
act.getName(); // => undefined

var Message = (text) => {
  this.text = text;
};
// Throws "TypeError: Message is not a constructor"
var helloMessage = new Message('Hello World!');

var button = document.getElementById('myButton');
button.addEventListener('click', () => {
  console.log(this === window); // => true
  this.innerHTML = 'Clicked button';
});

var button = document.getElementById('myButton');
button.addEventListener('click', function() {
  console.log(this === button); // => true
  this.innerHTML = 'Clicked button';
});

var multiply = function (a,b) {
    return a*b;
};
console.log(multiply(5,6)); //30

var multiplyArrow = (a,b) => a*b;
console.log(multiplyArrow(5,6)); //30

var double = function(a) {
    return a*2;
};
console.log(double(2)); //4

var doubleArrow  = a => a*2;
console.log(doubleArrow(2)); //4

var sayHello = function() {
    console.log("Hello");
};
sayHello(); //Hello

var sayHelloArrow = () => {console.log("sayHelloArrow");}
sayHelloArrow(); //sayHelloArrow

var increment = x => {
  return x + 1;
};
console.log(increment(1)); //2

var returnObject = () => ({a:5});
console.log(returnObject());

function foo() {
  var abc = i => arguments[0];
  console.log(abc(1));
};
foo(2); // 2

var obj5 = {
  greet: "Hi, Welcome ",
  greetUser : function(user) {
        setTimeout(function(){
        console.log(this.greet + ": " +  user); // "this" here is undefined.
        });
     }
};

obj5.greetUser("Katty"); //undefined: Katty

undefined: Katty

var obj6 = {
  greet: "Hi, Welcome ",
  greetUser : function(user) {
    setTimeout(() => console.log(this.greet + ": " +  user));
      // this here refers to outer context
   }
};

obj6.greetUser("Katty"); //Hi, Welcome: Katty

Hi, Welcome: Katty

export class C {
  n : number;
  f1: number => number;
  f2: number => number;

  constructor(){
    this.n = 42;
    this.f1 = (x:number) => x + this.n;
    this.f2 = function (x:number) { return  x + this.n;};
  }
}

let o = { f1: new C().f1, f2: new C().f2, n: "foo" };
let n1: number = o.f1(1); // n1 = 43
console.log(n1 === 43); // true
let n2: number = o.f2(1); // n2 = "1foo"
console.log(n2 === "1foo"); // true, not a string!

class C {
    constructor() {
        this.n = 42;
        this.f1 = x => x + this.n;
        this.f2 = function (x) { return x + this.n; };
    }
}

let o = { f1: new C().f1, f2: new C().f2, n: "foo" };
let n1 = o.f1(1); // n1 = 43
console.log(n1 === 43); // true
let n2 = o.f2(1); // n2 = "1foo"
console.log(n2 === "1foo"); // true, not a string!