Что делает оператор new?

Question

[BB 8]

Понятно, что это конструктор, который создает пустой объект и присваивает его this; присваивает свойства и методы и возвращает this.

Но что происходит когда мы в этот самый конструктор вписываем переменные, другие объекты и оперируем ими:

function Human() {
  let body = {
    legs: 2,
    arms: 2
  }

  this.go = function() {
    this.steps = 0;
    if(body.legs === 2) {
         this.steps += 2;
    }
    this.steps += 1;
    
  }
  
}

??

Правильно ли я понимаю, что создается область видимости ограниченная конструктором, в которой доступны оные переменные/объекты ?

Answer 1

[Антон Спирин]

Добавлю к вышенаписанному, что работу оператора new можно симитировать следующей функцией:

function newExpression(constructor) {
  if ( typeof constructor !== 'function') {
    throw new TypeError(constructor + 'is not a constructor');
  }

  var args = Array.prototype.slice.call(arguments, 1);
  var obj = Object.create(constructor.prototype);
  
  return constructor.apply(obj, args) || obj;
}

Демо.
В отличии такой имитации настоящий оператор new успешно создаст экземпляр даже по забинженому на другой контекст конструктору (по факту, возвращенной привязанной функции), так как оператор new игнорирует преданное значение this. Аргументы же будут применены из [[BoundArguments]]:

var User = function(name) {
  this.name = name;
}

User.prototype.getName = function() {
  return this.name;
}

const obj = {};

User = User.bind(obj, "Sarah");

var john = new User('John');

console.log(john.getName()); // 'Sarah'

Спецификации new и [[Construct]]

Answer 2

[Stalker_RED]

Когда исполняется new Foo(...) , происходит следующее:

1. Создается новый объект, наследующий Foo.prototype.
2. Вызывается конструктор — функция Foo с указанными аргументами и this, привязанным к только что созданному объекту. new Foo эквивалентно new Foo(), то есть если аргументы не указаны, Foo вызывается без аргументов.
3. Результатом выражения new становится объект, возвращенный конструктором. Если конструктор не возвращет объект явно, используется объект из п. 1. (Обычно конструкторы не возвращают значение, но они могут делать это, если нужно переопределить обычный процесс создания объектов.)

https://developer.mozilla.org/ru/docs/Web/JavaScri...

И да, new - это не конструктор. Конструктор обычно объявлен внутри класса или прототипа.

Comments

[BB 8]

Да, опечатался. new - это оператор. И да, то что Вы скинули ссылку - это хорошо, но я выше описал то же самое. Главный вопрос в самом низу - "Правильно ли я понимаю, что создается область видимости ограниченная конструктором, в которой доступны оные переменные/объекты ? "

[Stalker_RED]

BB 8, Область видимости конечно создается, но она ограничена не конструктором, а объектом.

function Автомобиль(цвет, скорость) {
  this.цвет = цвет;  // это конструктор автомобиля
  this.скорость = скорость;
}

let тачка1 = new Автомобиль('красный', 'быстрый')
let тачка2 = new Автомобиль('синий', 'супербыстрый')
console.log(тачка2.цвет)
Область видимости переменной "цвет" внутри объектов "тачка1" и "тачка2" а не внутри конструктора.
Конструктор у них один и тот-же, а объекты разные, и разный цвет.

[BB 8]

function Автомобиль(цвет, скорость) {
  let details = {
    det1 = smth;
    det2 = smth;
    ...................
    detn = smth;
  }
  this.цвет = цвет;  // это конструктор автомобиля
  this.скорость = скорость;
}

что такое в данном случае let details ??

[Stalker_RED]

BB 8, внутри объекта может быть множество свойств и методов.
https://learn.javascript.ru/objects-more
Вот прямо с первого пункта и начинайте, там как-раз это подробно описывается.

[Кирилл Несмеянов]

BB 8, только не конструктором, а контекстом.

let User = (function() {
    function User(name) {
        this.name = name;
    }

    User.prototype.render() {
        return `My name is ${this.name}`;
    }
    
    return User;
})();


///

let user = new User('Vasya');
let user2 = new User('Petya');
console.log(user.render()); // My name is Vasya
console.log(user2.render()); // My name is Petya

Как видно из примера, function User является конструктором, но при этом у функции рендера, что в прототипе есть прямой доступ к нему. В данном случае при new контекст смещается конкретно в область видимости функции User, а весь её прототип становится виден напрямую. Если же написать просто "User('Vasya')", то this будет ссылаться на window/global.

Т.е. если ещё повториться, то new просто перемещает this в область видимости непосредственного объекта.

[Антон Спирин]

Кирилл Несмеянов,

Как видно из примера, function User является конструктором, но при этом у функции рендера, что в прототипе есть прямой доступ к нему.
В данном случае при new контекст смещается конкретно в область видимости функции User, а весь её прототип становится виден напрямую. Если же написать просто "User('Vasya')", то this будет ссылаться на window/global.
Т.е. если ещё повториться, то new просто перемещает this в область видимости непосредственного объекта.

Глупости. Вам стоит почитать это.

[Stalker_RED]

Кирилл Несмеянов, перемещает this, серьезно? И так чехарда из-за разных переводов, а вы еще и свою терминологию выдумываете.

[Кирилл Несмеянов]

Stalker_RED, this - это контекст, так? Перемещение (смена) this означает как раз "смену контекста" или привязку "this к объекту, над которым произвели операцию new". Можно как угодно, кажется, выражаться. Пусть не по чёткой терминологии, но если объяснять простыми словами, то так понятнее, разве нет?

[Кирилл Несмеянов]

Антон Спирин, давайте по пунктам, где именно глупость?

[Stalker_RED]

Кирилл Несмеянов, this - это ключевое слово, ссылающееся на контекст, а не сам контекст.
Это может быть глобальный контекст, контекст созданного объекта, либо какой-то другой, привязаный при помощи bind при создании объекта. И его нельзя менять во время исполнения. И нет у него никакого "перемещения" или "смены". Если я не прав, прошу привести пример.

https://developer.mozilla.org/ru/docs/Web/JavaScri...
https://learn.javascript.ru/object-methods
javascript.ru/tutorial/object/thiskeyword
https://habrahabr.ru/post/149516/

[Кирилл Несмеянов]

Stalker_RED, ну это бы бесспорно имело смысл, если бы к контексту можно было бы обратиться ещё как-то, кроме как через this. Но т.к. других инструментов нет, то определение "ребинд this" и "смена контекста" вполне равноправны. А во время исполнения можно сменить только глобальный контекст (window/global) через оператор with (тут я опять использую термин "смена контекста", вместо "ребиндинга window/global", но я всё же думаю, что сумел аргументировать утверждение, что в рамках JS эти определения равноправны).

[Антон Спирин]

Кирилл Несмеянов, как просили, по пунктам:
1.

Как видно из примера, function User является конструктором, но при этом у функции рендера, что в прототипе есть прямой доступ к нему.

Нет никакого "прямого доступа":


2.

В данном случае при new контекст смещается конкретно в область видимости функции User, а весь её прототип становится виден напрямую.

Нет никаких "смещений" и "видных напрямую прототипов". При вызове new лишь создается объект наследующий прототип и на нем вызывается конструктор с переданными аргументами. Затем созданный объект возвращается:

var obj = Object.create(constructor.prototype);
constructor.apply(obj, arguments);

return obj;

3.

Если же написать просто "User('Vasya')", то this будет ссылаться на window/global.

Если написать "User('Vasya')", то вам, как минимум, не вернется новый объект, наследующий прототип конструктора.

4.

Т.е. если ещё повториться, то new просто перемещает this в область видимости непосредственного объекта

Смотрите ответ к пункту 2 и спецификацию..