화살표의 기능 ES6 깊이 이해

차이의 통상의 기능에 관해서

쓰기의 새로운 방법

이 변경

하지 않을 경우 생성자

어떤 프로토 타입 재산권

인수는 반대하지

쓰기의 새로운 방법

쓰기는 매우 간단합니다! 직접 그림 참조,

함수를 작성하는 기존의 방법

CONST 재미 = 함수 (번호) {
     반환 번호 * 2 
}

화살표 기능을 사용하여

CONST 재미 = (수) => {
     반환 번호 * 2 
}

하나의 파라미터는 괄호 앞에 생략 될 수도 있다면

CONST 재미 = 수 => {
     반환 번호 * 2 
}

하나의 실행 문 경우, 또는 다시 괄호를 생략하지만, 수익을 쓸 수 없습니다

CONST 재미 = 수 => 수 * 2

또한 즉시 기능을 수행하기 위해 쓸 수 있습니다

CONST 재미 = (() => 3 * 2) ()   // 6

이 변경

실행 컨텍스트

화살표의 기능이 논의하기 전에,하지만 선택의 여지가 익숙해 없습니다 실행 컨텍스트 이 포인터 (이 값이) 실행 컨텍스트에 저장되어 있기 때문에, (실행 컨텍스트).

실행 컨텍스트 세 속성이 중요한 기능을 수행하는 데 필요한 정보를 보유하고있다 : 변수 객체 (가변 객체) 범위 체인 (사슬 alberghiera 범위) this 포인터 (이 값)가 파싱 변수에 영향을 미치는 변수 범위 이 함수의 포인트. 에 실행 컨텍스트 글로벌 실행 컨텍스트 및 함수 실행 컨텍스트 .

글로벌 코드는 실행 전에 대상 창이 창은 다음 글로벌 코드를 수행하기 시작했다 때 포인트입니다 미리 컴파일 된 코드를 시작, 글로벌 실행 컨텍스트를 생성합니다.

실행에 앞서 함수 코드 함수는 목표 함수의 실행 컨텍스트 이때 함수 코드를 실행하기 시작 후 (아래에서 설명) 여러 점의 경우에 관한, 및 프리 컴파일 된 기능의 개시, 기능 코드 실행 종료를 생성 할 때 이후 함수 실행 컨텍스트가 삭제되었다. 상기 복수의 기능을 실행하는 다수 개의 콘텍스트를 생성한다.

상기 언급 된, 세부 기능은 다음의 네 가지 케이스를 미리 컴파일 :

첫째 자율적 재미 () 또는 일반 함수 (함수에서 다른 화살표 기능 모드가 즉시 실행된다), 즉시 실행되는 함수 호출 은이 점 창 ;

둘째, 호출 된 함수는, 함수가 호출 될 때 개체에서 생성 기능 실행 콘텍스트 객체의 시점 ;

셋째, ()를 적용 () 결합 ( ) 이 호출 변경 방법은, 이 첫 번째 파라미터가 전달되는 점 ;

넷째 : 생성자에서 다음은이 인스턴스가 생성된다 포인팅

由于箭头函数是不能通过 call() apply() bind() 方法改变 this，也不能当做构造函数，所以接下来只演示第一和第二种情况的代码

var a = {
    origin: 'a',
    b: {
        origin: 'b',
        show: function(){
　　　       var origin = 'show';
            console.log(this.origin);
　      }
    }
}
var origin = 'window'
a.b.show();      // 因为 b 对象调用了 show 函数，所以 show 函数的执行上下文中的 this 指针指向 b 对象
var fun = a.b.show;     // 注意这里是将 show 函数赋值给fun，相当于 var fun = function(){console.log(this)}
fun();      // 因为 fun 是自主调用，所以 this 指针指向 window，自然就打印 window 对象了

可能有人会有这个疑惑：a.b.show() 中，a 调用了 b，是不是 b 的 this 指向 a 了？

前面也说到了，this 储存在执行上下文中，而只有全局和函数才会产生执行上下文，在执行上下文里记录着 this，而 b 是全局中 a 对象里面的一个对象，不存在谁调用它，它的 this 就是谁的说法。

接下来理解箭头函数中的 this 就非常容易了。

箭头函数中的 this

首先，箭头函数不会创建自己的 this，它只会从自己的作用域链上找父级执行上下文的 this，而不是谁调用它，它的 this 就是谁。所以箭头函数中的 this，取决于你上层执行上下文的 this 。

下例中，

obj 分别调用了 show1 和 show2 两个方法，所以show1 和 show2 中的 this 都是指向 obj，

show1 中， setTimeout 里面是箭头函数，从作用域链中找到 show1 中的 this，所以它的 this 就是 obj 对象；

show2 中，setTimeout 里面的函数换成普通函数，函数自主调用，所以他的 this 就是 window 对象

var id = 0;
var obj = {
    id: 1,
    show1: function(){
        setTimeout(() => {
            console.log(this.id)
        }, 1000)
    },

　　show2: function(){
　　　　setTimeout(function(){
　　　　　　console.log(this.id)
　　　　}, 2000)
　　}
}

obj.show1();    // 打印 1
obj.show2();    // 打印 0

不能当成构造函数

var Foo = () => {};
var foo = new Foo(); // TypeError: Foo is not a constructor

没有 prototype 属性

var Foo = () => {};
console.log(Foo.prototype); // undefined

没有 arguments 对象

在大多数情况下，使用' ... ' 运算符是比使用 arguments 对象的更好选择。

function foo(...arg) { 
  return arg; 
}
foo(1, 2, 3, 4); // 1

function foo(...numbers) { 
    numbers.forEach((number)=>{
        console.log(number);
    })
} 
foo(1, 2, 3, 4);  // 1 2 3 4