Я хочу использовать объект как аргумент функции. Когда я определяю объект за пределами 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
Представление предмета представляется юридическим аргументом. Как это исправить?
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.
Потому что это не имеет ничего общего с переданными переменными. Не используйте его здесь. Просто выполните:
function bar({a = 0} = {}){
console.log(a)
}
bar({});//0
bar();//0
bar({a:10});//10
Ни один из ответов на самом деле не попытался решить проблему здесь, поэтому я подумал, что я мог бы пойти.
Вы спрашиваете: "Я хочу использовать объект как аргумент функции". И все же ваш первый пример не показывает, что вы это делаете. Вы не передаете объект как аргумент функции. Что вы делаете, это объявление переменной под window
(при условии, что это код браузера), а затем запись этой переменной в консоль. Поскольку this
контекст, и this
определяется тем, как вызывается функция, в этом случае контекст является window
поэтому ваш код работает.
Второй пример кода объединяет ошибки, которые вы делаете в первом примере. arguments
локально привязаны к функции. Он не нуждается в this
перед ним. И вы не можете получить к нему доступ, как объект, потому что arguments
представляют собой структуру, подобную массиву. Вы бы получили доступ к нему следующим образом: arguments[0].a
Предполагая, что вы передаете объект в свою функцию следующим образом: bar({a: 1})
.
Контекст JavaScript и область видимости могут быть очень сложной концепцией, чтобы окутать голову. Я довольно опытный разработчик JS, и он все равно ловит меня изредка, поэтому не унывайте. Эта статья очень хорошо объясняет контекст (и область действия), и я думаю, вам будет полезно прочитать его.
Во-первых, кажется, что вы комбинируете, как объявить параметр функции, как вызвать функцию и передать ей параметр с помощью этого кода:
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