What is the difference between the two arrow functions?

I understand 'this' in the arrow function points to this in the upper excution context.

var name = 'aaa';

const person = {

    name: 'bbb',

    getName: () => {return console.log(this.name)}

}

person.getName();

so I understand that getName() is logging the name of the global object in the code above.

const name = 'aaa';

const Person = function() {

    this.name = 'bbb';

    this.getName = () => {return console.log(this.name)}

}

const test = new Person();

test.getName();

However, the test object in this code is an object that is created as a Person constructor. Therefore, I think getName() of test object is the same as this used in method in object as above code. What did I understand wrong?

edited Nov 23 '18 at 7:01

Akber Iqbal

2,23731125

asked Nov 23 '18 at 4:39

김종현

184

add a comment |

I understand 'this' in the arrow function points to this in the upper excution context.

var name = 'aaa';

const person = {

    name: 'bbb',

    getName: () => {return console.log(this.name)}

}

person.getName();

so I understand that getName() is logging the name of the global object in the code above.

const name = 'aaa';

const Person = function() {

    this.name = 'bbb';

    this.getName = () => {return console.log(this.name)}

}

const test = new Person();

test.getName();

edited Nov 23 '18 at 7:01

Akber Iqbal

2,23731125

asked Nov 23 '18 at 4:39

김종현

184

add a comment |

I understand 'this' in the arrow function points to this in the upper excution context.

var name = 'aaa';

const person = {

    name: 'bbb',

    getName: () => {return console.log(this.name)}

}

person.getName();

so I understand that getName() is logging the name of the global object in the code above.

const name = 'aaa';

const Person = function() {

    this.name = 'bbb';

    this.getName = () => {return console.log(this.name)}

}

const test = new Person();

test.getName();

edited Nov 23 '18 at 7:01

Akber Iqbal

2,23731125

asked Nov 23 '18 at 4:39

김종현

184

I understand 'this' in the arrow function points to this in the upper excution context.

var name = 'aaa';

const person = {

    name: 'bbb',

    getName: () => {return console.log(this.name)}

}

person.getName();

so I understand that getName() is logging the name of the global object in the code above.

const name = 'aaa';

const Person = function() {

    this.name = 'bbb';

    this.getName = () => {return console.log(this.name)}

}

const test = new Person();

test.getName();

var name = 'aaa';

const person = {

    name: 'bbb',

    getName: () => {return console.log(this.name)}

}

person.getName();

var name = 'aaa';

const person = {

    name: 'bbb',

    getName: () => {return console.log(this.name)}

}

person.getName();

const name = 'aaa';

const Person = function() {

    this.name = 'bbb';

    this.getName = () => {return console.log(this.name)}

}

const test = new Person();

test.getName();

const name = 'aaa';

const Person = function() {

    this.name = 'bbb';

    this.getName = () => {return console.log(this.name)}

}

const test = new Person();

test.getName();

javascript ecmascript-6 arrow-functions

edited Nov 23 '18 at 7:01

Akber Iqbal

2,23731125

asked Nov 23 '18 at 4:39

김종현

184

edited Nov 23 '18 at 7:01

Akber Iqbal

2,23731125

asked Nov 23 '18 at 4:39

김종현

184

edited Nov 23 '18 at 7:01

Akber Iqbal

2,23731125

edited Nov 23 '18 at 7:01

Akber Iqbal

2,23731125

edited Nov 23 '18 at 7:01

Akber Iqbal

2,23731125

asked Nov 23 '18 at 4:39

김종현

184

asked Nov 23 '18 at 4:39

김종현

184

asked Nov 23 '18 at 4:39

김종현

184

add a comment |

2 Answers
2

active

oldest

votes

this in arrow functions is defined by the enclosing lexical context. A regular object doesn't define a this local to the object. So the lookup continues outward and you get the global object. On the other hand when you use the new operator with a function it creates an object and explicitly sets this to point to that object. That is the value of this the arrow function will see because that is the value of this in the immediate lexical context.

It's confusing because a regular function uses different rules to define this. For example, this works with a plain object:

const person = {

    name: 'bbb',

    // non-arrow function

    getName() { console.log(this.name)}

}

person.getName();

You can see the way an arrow function will define this by looking outward to enclosing contexts by combing your examples:

const Person = function() {

    this.fname = 'Bob';

    this.obj = {

      getName: () => { console.log(this.fname)}

    }

   

}

const test = new Person();

test.obj.getName();

edited Nov 23 '18 at 5:25

answered Nov 23 '18 at 5:19

Mark Meyer

38.4k33159

1

very very very thank you.I learned one thanks to you. :)

– 김종현
Nov 23 '18 at 5:25

If I understand you @김종현, then yes, the object created by the constructor is just and object. The arrow function created by the object literal is a function.

– Mark Meyer
Nov 23 '18 at 5:27

add a comment |

const person = {

    name: 'bbb',

    getName: () => {return console.log(this.name)}

}

By this way, you have defined an object name person with 2 properties name and getName. The type of name is a string while the type of getName is a function (arrow function). One of the differences between a normal function and an arrow function is the way to use this keyword.

Since person is an object and NOT a function, you cannot create new instanceof this object:

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

Otherwise, if Person is a function

const Person = function() {

    this.name = 'bbb';

    this.getName = () => {return console.log(this.name)}

}

then, you could create new instance of it:

const test = new Person();

This function has 2 properties, too. The type of both properties are same to the first's.

For your question, I suggest you to check this object inside the functions:

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();

edited Nov 23 '18 at 5:23

answered Nov 23 '18 at 5:11

Foo

add a comment |

Your Answer

StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");

StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});

function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});

}
});

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53440725%2fwhat-is-the-difference-between-the-two-arrow-functions%23new-answer', 'question_page');
}
);

Post as a guest

Name

Required, but never shown

2 Answers
2

active

oldest

votes

2 Answers
2

active

oldest

votes

It's confusing because a regular function uses different rules to define this. For example, this works with a plain object:

const person = {

    name: 'bbb',

    // non-arrow function

    getName() { console.log(this.name)}

}

person.getName();

You can see the way an arrow function will define this by looking outward to enclosing contexts by combing your examples:

const Person = function() {

    this.fname = 'Bob';

    this.obj = {

      getName: () => { console.log(this.fname)}

    }

   

}

const test = new Person();

test.obj.getName();

edited Nov 23 '18 at 5:25

answered Nov 23 '18 at 5:19

Mark Meyer

38.4k33159

1

very very very thank you.I learned one thanks to you. :)

– 김종현
Nov 23 '18 at 5:25

If I understand you @김종현, then yes, the object created by the constructor is just and object. The arrow function created by the object literal is a function.

– Mark Meyer
Nov 23 '18 at 5:27

add a comment |

It's confusing because a regular function uses different rules to define this. For example, this works with a plain object:

const person = {

    name: 'bbb',

    // non-arrow function

    getName() { console.log(this.name)}

}

person.getName();

You can see the way an arrow function will define this by looking outward to enclosing contexts by combing your examples:

const Person = function() {

    this.fname = 'Bob';

    this.obj = {

      getName: () => { console.log(this.fname)}

    }

   

}

const test = new Person();

test.obj.getName();

edited Nov 23 '18 at 5:25

answered Nov 23 '18 at 5:19

Mark Meyer

38.4k33159

1

very very very thank you.I learned one thanks to you. :)

– 김종현
Nov 23 '18 at 5:25

If I understand you @김종현, then yes, the object created by the constructor is just and object. The arrow function created by the object literal is a function.

– Mark Meyer
Nov 23 '18 at 5:27

add a comment |

It's confusing because a regular function uses different rules to define this. For example, this works with a plain object:

const person = {

    name: 'bbb',

    // non-arrow function

    getName() { console.log(this.name)}

}

person.getName();

You can see the way an arrow function will define this by looking outward to enclosing contexts by combing your examples:

const Person = function() {

    this.fname = 'Bob';

    this.obj = {

      getName: () => { console.log(this.fname)}

    }

   

}

const test = new Person();

test.obj.getName();

edited Nov 23 '18 at 5:25

answered Nov 23 '18 at 5:19

Mark Meyer

38.4k33159

It's confusing because a regular function uses different rules to define this. For example, this works with a plain object:

const person = {

    name: 'bbb',

    // non-arrow function

    getName() { console.log(this.name)}

}

person.getName();

You can see the way an arrow function will define this by looking outward to enclosing contexts by combing your examples:

const Person = function() {

    this.fname = 'Bob';

    this.obj = {

      getName: () => { console.log(this.fname)}

    }

   

}

const test = new Person();

test.obj.getName();

const person = {

    name: 'bbb',

    // non-arrow function

    getName() { console.log(this.name)}

}

person.getName();

const person = {

    name: 'bbb',

    // non-arrow function

    getName() { console.log(this.name)}

}

person.getName();

const Person = function() {

    this.fname = 'Bob';

    this.obj = {

      getName: () => { console.log(this.fname)}

    }

   

}

const test = new Person();

test.obj.getName();

const Person = function() {

    this.fname = 'Bob';

    this.obj = {

      getName: () => { console.log(this.fname)}

    }

   

}

const test = new Person();

test.obj.getName();

edited Nov 23 '18 at 5:25

answered Nov 23 '18 at 5:19

Mark Meyer

38.4k33159

edited Nov 23 '18 at 5:25

answered Nov 23 '18 at 5:19

Mark Meyer

38.4k33159

answered Nov 23 '18 at 5:19

Mark Meyer

38.4k33159

answered Nov 23 '18 at 5:19

Mark Meyer

38.4k33159

1

very very very thank you.I learned one thanks to you. :)

– 김종현
Nov 23 '18 at 5:25

If I understand you @김종현, then yes, the object created by the constructor is just and object. The arrow function created by the object literal is a function.

– Mark Meyer
Nov 23 '18 at 5:27

add a comment |

1

very very very thank you.I learned one thanks to you. :)

– 김종현
Nov 23 '18 at 5:25

If I understand you @김종현, then yes, the object created by the constructor is just and object. The arrow function created by the object literal is a function.

– Mark Meyer
Nov 23 '18 at 5:27

very very very thank you.I learned one thanks to you. :)

– 김종현
Nov 23 '18 at 5:25

If I understand you @김종현, then yes, the object created by the constructor is just and object. The arrow function created by the object literal is a function.

– Mark Meyer
Nov 23 '18 at 5:27

add a comment |

const person = {

    name: 'bbb',

    getName: () => {return console.log(this.name)}

}

Since person is an object and NOT a function, you cannot create new instanceof this object:

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

Otherwise, if Person is a function

const Person = function() {

    this.name = 'bbb';

    this.getName = () => {return console.log(this.name)}

}

then, you could create new instance of it:

const test = new Person();

This function has 2 properties, too. The type of both properties are same to the first's.

For your question, I suggest you to check this object inside the functions:

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();

edited Nov 23 '18 at 5:23

answered Nov 23 '18 at 5:11

Foo

add a comment |

const person = {

    name: 'bbb',

    getName: () => {return console.log(this.name)}

}

Since person is an object and NOT a function, you cannot create new instanceof this object:

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

Otherwise, if Person is a function

const Person = function() {

    this.name = 'bbb';

    this.getName = () => {return console.log(this.name)}

}

then, you could create new instance of it:

const test = new Person();

This function has 2 properties, too. The type of both properties are same to the first's.

For your question, I suggest you to check this object inside the functions:

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();

edited Nov 23 '18 at 5:23

answered Nov 23 '18 at 5:11

Foo

add a comment |

const person = {

    name: 'bbb',

    getName: () => {return console.log(this.name)}

}

Since person is an object and NOT a function, you cannot create new instanceof this object:

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

Otherwise, if Person is a function

const Person = function() {

    this.name = 'bbb';

    this.getName = () => {return console.log(this.name)}

}

then, you could create new instance of it:

const test = new Person();

This function has 2 properties, too. The type of both properties are same to the first's.

For your question, I suggest you to check this object inside the functions:

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();

edited Nov 23 '18 at 5:23

answered Nov 23 '18 at 5:11

Foo

const person = {

    name: 'bbb',

    getName: () => {return console.log(this.name)}

}

Since person is an object and NOT a function, you cannot create new instanceof this object:

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

Otherwise, if Person is a function

const Person = function() {

    this.name = 'bbb';

    this.getName = () => {return console.log(this.name)}

}

then, you could create new instance of it:

const test = new Person();

This function has 2 properties, too. The type of both properties are same to the first's.

For your question, I suggest you to check this object inside the functions:

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();

const person = {

    name: 'bbb',

    getName: () => {console.log(this)}

}



person.getName();

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();

const Person = function() {

    this.name = 'bbb';

    this.getName = () => {console.log(this)}

}

const test = new Person();

test.getName();

edited Nov 23 '18 at 5:23

answered Nov 23 '18 at 5:11

Foo

edited Nov 23 '18 at 5:23

answered Nov 23 '18 at 5:11

Foo

answered Nov 23 '18 at 5:11

Foo

answered Nov 23 '18 at 5:11

Foo

add a comment |

draft saved

draft discarded

Thanks for contributing an answer to Stack Overflow!

Please be sure to answer the question. Provide details and share your research!

But avoid …

Asking for help, clarification, or responding to other answers.

Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Name

Required, but never shown

Name

Required, but never shown

This page is only for reference, If you need detailed information, please check here

搜尋此網誌

Nsryjdtyk