javaScript - передать объект в качестве аргумента функции

1

Я хочу использовать объект как аргумент функции. Когда я определяю объект за пределами fucntion, а затем передаю его как аргумент, он отлично работает:

var obj = {
  a: 0
}

function foo(obj){
  console.log(this.obj.a); 
}

foo() //0

Но когда я передаю объект напрямую, он не работает:

function bar({a: 0}){
  console.log(this.arguments.a)
}
// Uncaught SyntaxError: Unexpected number

Представление предмета представляется юридическим аргументом. Как это исправить?

  • 1
    это только контекст !!! Не используйте его для доступа к переменным.
  • 0
    Вы смешиваете вызов функции и определение функции. Аргументы передаются при вызове функции, они не получают свои значения в списке аргументов определения функции.
Показать ещё 5 комментариев
Теги:
object
function

4 ответа

1
Лучший ответ

ES6 поддерживает деструктурирование параметров. Ты можешь использовать:

function bar({a}){
    console.log(a)
}

Однако обычно это полезно, когда у вас есть несколько параметров:

// you pass option to a function old way
function oldOps(option){
    var protocol = option.protocol;
    var method = option.method;
    var port = option.port;
    console.log(port);
}
// new and more readable way
function newOps({protocol, method, port}){
    console.log(port)
}

Только старый IE не поддерживает его.

Но когда я передаю объект напрямую, он не работает:

function bar({a: 0}){
  console.log(this.arguments.a)
}

Вы не можете передавать параметры таким образом или инициализировать параметр по умолчанию. Кроме того, this в вашем случае относится к родительскому объекту, поэтому this.arguments.a не имеет смысла.

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

function bar({a = 0}){
    console.log(a)
}
bar({}) // 0

Тем не менее, любые попытки вызвать его без параметра приведут к ошибке, поскольку JS попытается разрешить свойство undefined

Вы можете использовать другое назначение параметров по умолчанию для решения проблемы. Когда вы действительно хотите вызывать bar() без параметров и иметь значение по умолчанию для деструктурированного параметра, вы должны использовать что-то вроде:

function bar({a = 0} = {a:0}){/*...*/}

Просто не забывайте, что браузеры широко не поддерживаются браузерами, поэтому вам придется использовать transpiler для преобразования вашего кода ES6, поддерживаемого браузером.

Наиболее популярными транспилерами являются Babel и Typcript.

Поделиться
  • 0
    Хотя это правильно, я не вижу, как это помогает ОП.
  • 0
    @FelixKling Я добавил детали
Показать ещё 12 комментариев
3

Потому что это не имеет ничего общего с переданными переменными. Не используйте его здесь. Просто выполните:

     function bar({a = 0} = {}){
       console.log(a)
     }

     bar({});//0
     bar();//0
     bar({a:10});//10
Поделиться
  • 0
    И в фф. Джонас, ты должен это проверить.
  • 0
    @ и да, я должен. Тем не менее, я AFK 90% моего дня, поэтому я не всегда могу это сделать.
2

Ни один из ответов на самом деле не попытался решить проблему здесь, поэтому я подумал, что я мог бы пойти.

Вы спрашиваете: "Я хочу использовать объект как аргумент функции". И все же ваш первый пример не показывает, что вы это делаете. Вы не передаете объект как аргумент функции. Что вы делаете, это объявление переменной под window (при условии, что это код браузера), а затем запись этой переменной в консоль. Поскольку this контекст, и this определяется тем, как вызывается функция, в этом случае контекст является window поэтому ваш код работает.

Второй пример кода объединяет ошибки, которые вы делаете в первом примере. arguments локально привязаны к функции. Он не нуждается в this перед ним. И вы не можете получить к нему доступ, как объект, потому что arguments представляют собой структуру, подобную массиву. Вы бы получили доступ к нему следующим образом: arguments[0].a Предполагая, что вы передаете объект в свою функцию следующим образом: bar({a: 1}).

Контекст JavaScript и область видимости могут быть очень сложной концепцией, чтобы окутать голову. Я довольно опытный разработчик JS, и он все равно ловит меня изредка, поэтому не унывайте. Эта статья очень хорошо объясняет контекст (и область действия), и я думаю, вам будет полезно прочитать его.

Поделиться
1

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

function bar({a: 0}){
  console.log(this.arguments.a)
}

Затем, при доступе к аргументам, просто используйте имя параметра, а не this. this используется для ссылки на объект контекста вызова, а не на параметры функции. Объект контекста вызова - это, по сути, объект, который отвечал за то, что вызывал функцию в первую очередь. Он также может указывать на объект, который явно установлен для замены нативного объекта, который был бы объектом контекста. И в правильных обстоятельствах он может указывать на объект Global (window) или быть undefined. this как правило, запутывает множество разработчиков JavaScript. Здесь ссылка на дополнительную информацию об this.

Таким образом, ваш код должен быть:

// Declare the function and set up a named parameter
function bar(someObj){
  console.log(someObj)
}

// Call the function and pass an object literal:
bar({a: 0});

Теперь на самом деле вы можете указать значение по умолчанию для функции, и это будет так:

// Establish an object with an 'a' property with a value of "Hello"
// as the default value of the function argument
function bar(obj = {a: "Hello"}){
  console.log(obj);
}

bar();  // Default value of parameter will be used
bar({a:"Goodbye"}); // Passed value will be used
Поделиться

Ещё вопросы

Сообщество Overcoder
Наверх
Меню