Как объяснить конструкцию return this?

Question

[Muranx]

НЕрабочий вариант кода:

var Person = {
    constructor: function(name,age){
    this.name=name;
    this.age=age;
    //return this
  }
};

var One = Object.create(Person).constructor("Alex", 32);


console.log(One.name);
console.log(One.age);

Код начинает работать только в том случае, если в методе constructor прописан return this, объясните если можно детально, как это происходит? Т.к. this определяется во время вызова функции, то по идее this в методе constructor должен указывать на объект One! Но выходит что не должен! Что означает конструкция return this?

Comments

[nike4192]

Person - это простой объект, в котором constructor - это метод ( функция не превращает Person в конструктор) и чтобы создать объект, можно так написать
var One = new Person.constructor("Alex", 32)
Ключевое слово new создаёт объект
Но в вашем случае, обычно сразу пишут конструктор:

function Person(name, age) {
  this.name = name;
  this.age = age;
}
var One = new Person("Bob", 20); //создание именно таким образом

[Muranx]

Спасибо конечно за то, что откликнулись, но ответ дан уже давно, и способы создания объектов я знаю, в том числе и описанный вами, меня интересовала лишь конструкция return this, а точнее логика интерпритатора при выполнении данной функции!

Answer 1

[alex]

все банально. смотрите на эту строчку кода:

var One = Object.create(Person).constructor("Alex", 32);

чему будет равна переменная One? она будет равна тому, что вернет метод .constructor(). а что он возвращает? ничего. а точнее undefined. когда функция явно ничего не возвращает, она возвращает undefined. поэтому строчка кода выше, эквивалента строчке:
var One = undefined
а ваш метод constructor на самом деле сейчас выглядит вот так:

constructor: function(name,age){
    this.name=name;
    this.age=age;
    
    return undefined
  }

Что означает конструкция return this?

означет, что функция возвращает текущий контекст. контекстом в данном случае будет являтся объект, созданный с помощью Object.create()

Comments

[Muranx]

Если я вас правильно понял, то под контекстом вы подразумеваете объект, который (грубо говоря) стоит до точки при вызове метода constructor?, то-есть получается, если перевести на человеческий, во время Object.create( Person ) создаётся новый пустой объект, ссылкой [[prototype]] ему присваивается объект Person, т.к. объект создан, можно сразу вызвать его метод constructor, поэтому управление переходит в функцию constructor, НО она не возвращает значение, т.е. undefined, и именно это значение присваивается переменной One? Так ведь?

[alex]

Muranx, да, все верно.

[Muranx]

Я так понимаю (только что накидал):

var MDF={
    a:100,
    foo: function(){
      return this
    }
};

var AGS=Object.create(MDF).foo();

document.write(AGS.a); //100

Это из той же "оперы" , ведь так?

[alex]

Muranx, да

[Muranx]

Ок, спасибо за оперативный , и полноценный ответ! За ваше терпение, и "разжёвывание"! Очень удивлён (офк, приятно удивлён)!

[Muranx]

Кстати, интересен ещё один нюанс, Object.create( Person ).constructor( ) это же пустой объект, получается функцияconstructor вызывается делегированием через цепочку[[prototype]] до объекта, где эта функция находится, то-есть объекта Person???

[alex]

Muranx, да. Object.create( Person )это пустой объект. когда вы вызываете .constructor(), его нет в объекте. поэтому интрпретатор ищет его в прототипе(ах) этого объекта. самым близким протоитпом в цепочке протоитпов с таким методом, является Person

[Muranx]

Всё, удачи вам, ещё раз спасибо!

Answer 2

[Антон Швец]

constructor работает как конструктор только в составе es6 класса.
А у вас тут это просто обычная функция, если вы ничего из нее не возвращаете, то она ничего и не вернет.
Т.е. вы создаете объект, присваиваете ему прототип Person и обращаетесь к свойству constructor этого объекта.
В объекте такого свойства нет, ищется в цепочке прототипов, находится и вызывается функция на которую указывает One.__proto__.constructor

А правильно будет так

class Person {
  constructor(name,age) {
    this.name=name;
    this.age=age;
  }
};

var One = new Person("Alex", 32);

другой вариант

var Person = {
    constructor: function(name,age){
    this.name=name;
    this.age=age;
  }
};

var One = Object.create(new Person.constructor("Alex", 32));
console.log(One.name);

но в этом случае One будет иметь прототипом не Person, а новый объект, созданный через Person.constructor

Comments

[Muranx]

var Person = {
    constructor: function(name,age){
    this.name=name;
    this.age=age;
    return this
  }
};

var One = Object.create(Person)
One.constructor("Alex", 32);

Вот я ничего и не возвращал из функции constructor и всё работает, и это лишь один из вариантов обхода реальной проблемы, ответа на которую вы мне к сожалению так и не предоставили, а представив лишь доступные способы обхода без объяснения!

[Антон Швец]

Muranx, я вам объяснил что происходит.
В вашем коде Person.constructor() return this вернет вам Person конечно же.

Это не варианты обхода проблемы, это как корректно сделать. Проблемы тут никакой нет.

[Антон Швец]

Muranx,

var Person = {
    myMethod: function(name,age){
    this.name=name;
    this.age=age;
    return this
  }
};

var One = Object.create(Person)
One.myMethod("Alex", 32);

[alex]

Антон Швец, по-моему автор понимает что constructor это не конструктор, а просто метод. у автора проблемы с пониманием работы контекста я так понял

[Антон Швец]

Alex, ну можно тогда сказать автору, что хоть constructor и берется из прототипа, контекстом для него является объект, в котором метод вызван, т.е. Object.create(Person)

[Muranx]

Вы извините за оффтоп конечно, но я просто в шоке от того, какое тут отзывчивое комьюнити! Оо

Answer 3

[Андрей]

Ну, в js constructor - это соглашение, в отличие от того же php, где конструктор возвращает созданный объект

Comments

[Антон Швец]

Свойство constructor указывает на функцию-конструктор объекта, но его может и не быть.

Answer 4

[AleksMedovnik]

Вот так работает

function Person(name,age){
    this.name=name;
    this.age=age;
};

var One = new Person("Alex", 32);


console.log(One.name);
console.log(One.age);

потому что THIS передается в качестве контекста через функцию-конструктор. А в твоем случае идет обращение к методу объекта

Person

Здесь необходимо вернуть контекст, чтобы интерпретатор понимал, где искать метод