В чем разница между двумя функциями стрелок? - PullRequest
Новая
       12

В чем разница между двумя функциями стрелок?

0 голосов
/ 23 ноября 2018

Я понимаю, что 'this' в функции стрелки указывает на это в контексте верхнего исключения. 

var name = 'aaa';
const person = {
    name: 'bbb',
    getName: () => {return console.log(this.name)}
}
person.getName();

, поэтому я понимаю, что getName () регистрирует имя глобального объекта в приведенном выше коде. 

const name = 'aaa';
const Person = function() {
    this.name = 'bbb';
    this.getName = () => {return console.log(this.name)}
}
const test = new Person();
test.getName();

Однако тестовый объект в этом коде - это объект, который создается как конструктор Person.Поэтому я думаю, что getName () тестового объекта - это то же самое, что используется в методе в объекте, как в приведенном выше коде.Что я не так понял?

Ответы [ 2 ]

0 голосов
/ 23 ноября 2018

this в функциях со стрелками определяется окружающим лексическим контекстом.Обычный объект не определяет this локально для объекта.Таким образом, поиск продолжается наружу, и вы получаете глобальный объект.С другой стороны, когда вы используете оператор new с функцией, он создает объект и явно устанавливает this для указания на этот объект.Это значение this, которое будет видеть функция стрелки, потому что это значение this в непосредственном лексическом контексте.

Это сбивает с толку, потому что обычная функция использует разные правила для определения this.Например, это работает с простым объектом: 

const person = {
    name: 'bbb',
    // non-arrow function
    getName() { console.log(this.name)}
}
person.getName();

Вы можете увидеть, как функция стрелки будет определять this, взглянув наружу на окружающие контексты, комбинируя ваши примеры: 

const Person = function() {
    this.fname = 'Bob';
    this.obj = {
      getName: () => { console.log(this.fname)}
    }
   
}
const test = new Person();
test.obj.getName();
0 голосов
/ 23 ноября 2018 
const person = {
    name: 'bbb',
    getName: () => {return console.log(this.name)}
}

Таким образом, вы определили имя объекта person с 2 свойствами name и getName.Тип name является строкой, а тип getName является функцией ( функция стрелки ).Одним из различий между обычной функцией и функцией со стрелкой является способ использования ключевого слова this.

Поскольку person является объектом, а НЕ функцией, вы не можете создать новый экземпляр этого объекта: 

var p = new person(); // Error: person is not a constructor

В противном случае, если Person является функцией 

const Person = function() {
    this.name = 'bbb';
    this.getName = () => {return console.log(this.name)}
}

, вы можете создать ее новый экземпляр: 

const test = new Person();

Эта функция имеет 2 свойства,тоже.Тип обоих свойств аналогичен первому.

На ваш вопрос я предлагаю вам проверить this объект внутри функций: 

const person = {
    name: 'bbb',
    getName: () => {console.log(this)}
}

person.getName();

const Person = function() {
    this.name = 'bbb';
    this.getName = () => {console.log(this)}
}
const test = new Person();
test.getName();
...