From 4ab365b110f2f1f2b736326b7059244a32115089 Mon Sep 17 00:00:00 2001 From: Florian Merz Date: Thu, 11 Feb 2021 14:45:38 +0100 Subject: unslug de: move --- .../a_re-introduction_to_javascript/index.html | 909 +++++++++++++++++++ .../index.html" | 340 -------- files/de/web/javascript/data_structures/index.html | 271 ++++++ files/de/web/javascript/datenstrukturen/index.html | 271 ------ .../index.html | 909 ------------------- .../index.html" | 411 --------- .../index.html | 340 ++++++++ .../equality_comparisons_and_sameness/index.html | 424 +++++++++ .../guide/ausdruecke_und_operatoren/index.html | 965 --------------------- .../control_flow_and_error_handling/index.html | 430 +++++++++ .../guide/details_of_the_object_model/index.html | 721 +++++++++++++++ .../javascript/guide/einf\303\274hrung/index.html" | 140 --- .../guide/expressions_and_operators/index.html | 965 +++++++++++++++++++++ .../guide/feinheiten_des_objektmodells/index.html | 721 --------------- files/de/web/javascript/guide/functions/index.html | 657 ++++++++++++++ .../de/web/javascript/guide/funktionen/index.html | 657 -------------- .../javascript/guide/grammar_and_types/index.html | 699 +++++++++++++++ .../guide/grammatik_und_typen/index.html | 699 --------------- .../web/javascript/guide/introduction/index.html | 140 +++ .../kontrollfluss_und_fehlerbehandlung/index.html | 430 --------- .../guide/loops_and_iteration/index.html | 337 +++++++ .../guide/mit_objekten_arbeiten/index.html | 506 ----------- .../guide/schleifen_und_iterationen/index.html | 337 ------- .../javascript/guide/text_formatting/index.html | 257 ++++++ .../javascript/guide/textformatierung/index.html | 257 ------ .../guide/working_with_objects/index.html | 506 +++++++++++ .../index.html | 390 --------- .../javascript_technologies_overview/index.html | 87 ++ .../javascript_technologieuebersicht/index.html | 87 -- .../de/web/javascript/memory_management/index.html | 184 ++++ .../reference/classes/constructor/index.html | 165 ++++ .../reference/classes/extends/index.html | 172 ++++ .../de/web/javascript/reference/classes/index.html | 376 ++++++++ .../javascript/reference/classes/static/index.html | 136 +++ .../deprecated_and_obsolete_features/index.html | 291 +++++++ .../the_legacy_iterator_protocol/index.html | 78 ++ .../reference/errors/already_has_pragma/index.html | 42 + .../errors/array_sort_argument/index.html | 47 + .../reference/errors/bad_octal/index.html | 54 ++ .../reference/errors/bad_radix/index.html | 61 ++ .../reference/errors/bad_regexp_flag/index.html | 105 +++ .../errors/bad_return_or_yield/index.html | 55 ++ .../errors/called_on_incompatible_type/index.html | 64 ++ .../index.html | 60 ++ .../errors/cant_access_property/index.html | 59 ++ .../index.html | 64 ++ .../reference/errors/cant_delete/index.html | 58 ++ .../errors/cant_redefine_property/index.html | 51 ++ .../errors/cyclic_object_value/index.html | 67 ++ .../reference/errors/dead_object/index.html | 50 ++ .../errors/delete_in_strict_mode/index.html | 70 ++ .../index.html | 75 ++ .../deprecated_expression_closures/index.html | 78 ++ .../reference/errors/deprecated_octal/index.html | 67 ++ .../errors/deprecated_source_map_pragma/index.html | 58 ++ .../errors/deprecated_string_generics/index.html | 104 +++ .../errors/deprecated_tolocaleformat/index.html | 90 ++ .../reference/errors/equal_as_assign/index.html | 54 ++ .../for-each-in_loops_are_deprecated/index.html | 168 ++++ .../reference/errors/getter_only/index.html | 83 ++ .../errors/identifier_after_number/index.html | 53 ++ .../reference/errors/illegal_character/index.html | 80 ++ .../errors/in_operator_no_object/index.html | 72 ++ .../de/web/javascript/reference/errors/index.html | 29 + .../errors/invalid_array_length/index.html | 77 ++ .../invalid_assignment_left-hand_side/index.html | 53 ++ .../errors/invalid_const_assignment/index.html | 90 ++ .../reference/errors/invalid_date/index.html | 54 ++ .../errors/invalid_for-in_initializer/index.html | 74 ++ .../errors/invalid_for-of_initializer/index.html | 63 ++ .../index.html | 62 ++ .../reference/errors/is_not_iterable/index.html | 103 +++ .../reference/errors/json_bad_parse/index.html | 112 +++ .../errors/malformed_formal_parameter/index.html | 61 ++ .../reference/errors/malformed_uri/index.html | 66 ++ .../errors/missing_bracket_after_list/index.html | 56 ++ .../missing_colon_after_property_id/index.html | 77 ++ .../missing_curly_after_function_body/index.html | 67 ++ .../missing_curly_after_property_list/index.html | 51 ++ .../errors/missing_formal_parameter/index.html | 80 ++ .../errors/missing_initializer_in_const/index.html | 58 ++ .../missing_name_after_dot_operator/index.html | 68 ++ .../index.html | 42 + .../missing_parenthesis_after_condition/index.html | 70 ++ .../missing_semicolon_before_statement/index.html | 67 ++ .../errors/more_arguments_needed/index.html | 48 + .../errors/negative_repetition_count/index.html | 44 + .../reference/errors/no_non-null_object/index.html | 66 ++ .../reference/errors/no_properties/index.html | 40 + .../reference/errors/no_variable_name/index.html | 84 ++ .../non_configurable_array_element/index.html | 83 ++ .../reference/errors/not_a_codepoint/index.html | 55 ++ .../reference/errors/not_a_constructor/index.html | 97 +++ .../reference/errors/not_a_function/index.html | 124 +++ .../reference/errors/not_defined/index.html | 70 ++ .../reference/errors/precision_range/index.html | 96 ++ .../errors/property_access_denied/index.html | 47 + .../reference/errors/read-only/index.html | 78 ++ .../errors/redeclared_parameter/index.html | 61 ++ .../index.html | 88 ++ .../errors/reserved_identifier/index.html | 80 ++ .../errors/resulting_string_too_large/index.html | 49 ++ .../reference/errors/stmt_after_return/index.html | 77 ++ .../errors/strict_non_simple_params/index.html | 111 +++ .../reference/errors/too_much_recursion/index.html | 54 ++ .../typed_array_invalid_arguments/index.html | 77 ++ .../reference/errors/undeclared_var/index.html | 67 ++ .../reference/errors/undefined_prop/index.html | 63 ++ .../reference/errors/unexpected_token/index.html | 47 + .../reference/errors/unexpected_type/index.html | 67 ++ .../errors/unnamed_function_statement/index.html | 115 +++ .../errors/unterminated_string_literal/index.html | 67 ++ .../reference/errors/var_hides_argument/index.html | 56 ++ .../reference/fehler/already_has_pragma/index.html | 42 - .../fehler/array_sort_argument/index.html | 47 - .../reference/fehler/bad_octal/index.html | 54 -- .../reference/fehler/bad_radix/index.html | 61 -- .../reference/fehler/bad_regexp_flag/index.html | 105 --- .../fehler/bad_return_or_yield/index.html | 55 -- .../fehler/called_on_incompatible_type/index.html | 64 -- .../index.html | 60 -- .../fehler/cant_access_property/index.html | 59 -- .../index.html | 64 -- .../reference/fehler/cant_delete/index.html | 58 -- .../fehler/cant_redefine_property/index.html | 51 -- .../fehler/cyclic_object_value/index.html | 67 -- .../reference/fehler/dead_object/index.html | 50 -- .../fehler/delete_in_strict_mode/index.html | 70 -- .../index.html | 75 -- .../deprecated_expression_closures/index.html | 78 -- .../reference/fehler/deprecated_octal/index.html | 67 -- .../fehler/deprecated_source_map_pragma/index.html | 58 -- .../fehler/deprecated_string_generics/index.html | 104 --- .../fehler/deprecated_tolocaleformat/index.html | 90 -- .../reference/fehler/equal_as_assign/index.html | 54 -- .../for-each-in_loops_are_deprecated/index.html | 168 ---- .../reference/fehler/getter_only/index.html | 83 -- .../fehler/identifier_after_number/index.html | 53 -- .../reference/fehler/illegal_character/index.html | 80 -- .../fehler/in_operator_no_object/index.html | 72 -- .../de/web/javascript/reference/fehler/index.html | 29 - .../fehler/invalid_array_length/index.html | 77 -- .../invalid_assignment_left-hand_side/index.html | 53 -- .../fehler/invalid_const_assignment/index.html | 90 -- .../reference/fehler/invalid_date/index.html | 54 -- .../fehler/invalid_for-in_initializer/index.html | 74 -- .../fehler/invalid_for-of_initializer/index.html | 63 -- .../index.html | 62 -- .../reference/fehler/is_not_iterable/index.html | 103 --- .../reference/fehler/json_bad_parse/index.html | 112 --- .../fehler/malformed_formal_parameter/index.html | 61 -- .../reference/fehler/malformed_uri/index.html | 66 -- .../fehler/missing_bracket_after_list/index.html | 56 -- .../missing_colon_after_property_id/index.html | 77 -- .../missing_curly_after_function_body/index.html | 67 -- .../missing_curly_after_property_list/index.html | 51 -- .../fehler/missing_formal_parameter/index.html | 80 -- .../fehler/missing_initializer_in_const/index.html | 58 -- .../missing_name_after_dot_operator/index.html | 68 -- .../index.html | 42 - .../missing_parenthesis_after_condition/index.html | 70 -- .../missing_semicolon_before_statement/index.html | 67 -- .../fehler/more_arguments_needed/index.html | 48 - .../fehler/negative_repetition_count/index.html | 44 - .../reference/fehler/no_non-null_object/index.html | 66 -- .../reference/fehler/no_properties/index.html | 40 - .../reference/fehler/no_variable_name/index.html | 84 -- .../non_configurable_array_element/index.html | 83 -- .../reference/fehler/not_a_codepoint/index.html | 55 -- .../reference/fehler/not_a_constructor/index.html | 97 --- .../reference/fehler/not_a_function/index.html | 124 --- .../reference/fehler/not_defined/index.html | 70 -- .../reference/fehler/precision_range/index.html | 96 -- .../fehler/property_access_denied/index.html | 47 - .../reference/fehler/read-only/index.html | 78 -- .../fehler/redeclared_parameter/index.html | 61 -- .../index.html | 88 -- .../fehler/reserved_identifier/index.html | 80 -- .../fehler/resulting_string_too_large/index.html | 49 -- .../reference/fehler/stmt_after_return/index.html | 77 -- .../fehler/strict_non_simple_params/index.html | 111 --- .../reference/fehler/too_much_recursion/index.html | 54 -- .../typed_array_invalid_arguments/index.html | 77 -- .../reference/fehler/undeclared_var/index.html | 67 -- .../reference/fehler/undefined_prop/index.html | 63 -- .../reference/fehler/unexpected_token/index.html | 47 - .../reference/fehler/unexpected_type/index.html | 67 -- .../fehler/unnamed_function_statement/index.html | 115 --- .../fehler/unterminated_string_literal/index.html | 67 -- .../reference/fehler/var_hides_argument/index.html | 56 -- .../reference/functions/arrow_functions/index.html | 360 ++++++++ .../functions/method_definitions/index.html | 230 +++++ .../functions/methoden_definitionen/index.html | 230 ----- .../reference/functions/pfeilfunktionen/index.html | 360 -------- .../reference/functions/rest_parameter/index.html | 167 ---- .../reference/functions/rest_parameters/index.html | 167 ++++ .../global_objects/array/prototypen/index.html | 183 ---- .../arraybuffer/prototype/index.html | 69 -- .../asyncfunction/prototype/index.html | 61 -- .../global_objects/atomics/notify/index.html | 93 ++ .../global_objects/atomics/wake/index.html | 93 -- .../global_objects/boolean/prototype/index.html | 84 -- .../global_objects/dataview/prototype/index.html | 110 --- .../global_objects/date/prototype/index.html | 183 ---- .../global_objects/error/prototype/index.html | 114 --- .../global_objects/evalerror/prototype/index.html | 90 -- .../global_objects/function/prototype/index.html | 100 --- .../generatorfunction/prototype/index.html | 67 -- .../internalerror/prototype/index.html | 62 -- .../intl/collator/prototype/index.html | 80 -- .../intl/datetimeformat/prototype/index.html | 84 -- .../intl/numberformat/prototype/index.html | 82 -- .../global_objects/map/prototype/index.html | 87 -- .../global_objects/math/math.random/index.html | 112 --- .../global_objects/math/random/index.html | 112 +++ .../global_objects/number/prototype/index.html | 90 -- .../global_objects/object/prototype/index.html | 220 ----- .../global_objects/rangeerror/prototype/index.html | 129 --- .../global_objects/string/prototype/index.html | 190 ---- .../global_objects/string/search/index.html | 105 +++ .../global_objects/string/suchen/index.html | 105 --- .../global_objects/string/trimend/index.html | 58 ++ .../global_objects/string/trimleft/index.html | 58 -- .../global_objects/string/trimright/index.html | 58 -- .../global_objects/string/trimstart/index.html | 58 ++ .../syntaxerror/prototype/index.html | 89 -- .../global_objects/typeerror/prototype/index.html | 89 -- .../reference/klassen/constructor/index.html | 165 ---- .../reference/klassen/extends/index.html | 172 ---- .../de/web/javascript/reference/klassen/index.html | 376 -------- .../javascript/reference/klassen/static/index.html | 136 --- .../operators/bitwise_operatoren/index.html | 575 ------------ .../reference/operators/decrement/index.html | 82 ++ .../reference/operators/dekrement/index.html | 82 -- .../operators/destructuring_assignment/index.html | 404 +++++++++ .../destrukturierende_zuweisung/index.html | 404 --------- .../reference/operators/increment/index.html | 80 ++ .../reference/operators/inkrement/index.html | 80 -- .../operators/logische_operatoren/index.html | 247 ------ .../reference/operators/modulo/index.html | 78 -- .../operators/object_initializer/index.html | 315 +++++++ .../operators/objekt_initialisierer/index.html | 315 ------- .../operators/optional_chaining/index.html | 194 +++++ .../operators/optionale_verkettung/index.html | 194 ----- .../reference/operators/remainder/index.html | 78 ++ .../reference/operators/spread_operator/index.html | 220 ----- .../operators/vergleichsoperatoren/index.html | 244 ------ .../operators/zuweisungsoperator/index.html | 413 --------- .../reference/statements/default/index.html | 121 --- .../reference/statements/function/index.html | 190 ++++ .../reference/statements/funktion/index.html | 190 ---- .../reference/template_literals/index.html | 219 +++++ .../reference/template_strings/index.html | 219 ----- .../veraltete_und_abgeschaffte_features/index.html | 291 ------- .../the_legacy_iterator_protocol/index.html | 78 -- .../web/javascript/speicherverwaltung/index.html | 184 ---- .../index.html | 424 --------- 257 files changed, 16270 insertions(+), 21154 deletions(-) create mode 100644 files/de/web/javascript/a_re-introduction_to_javascript/index.html delete mode 100644 "files/de/web/javascript/aufz\303\244hlbarkeit_und_zugeh\303\266rigkeit_von_eigenschaften/index.html" create mode 100644 files/de/web/javascript/data_structures/index.html delete mode 100644 files/de/web/javascript/datenstrukturen/index.html delete mode 100644 files/de/web/javascript/eine_wiedereinfuehrung_in_javascript/index.html delete mode 100644 "files/de/web/javascript/einf\303\274hrung_in_den_gebrauch_von_xpath_in_javascript/index.html" create mode 100644 files/de/web/javascript/enumerability_and_ownership_of_properties/index.html create mode 100644 files/de/web/javascript/equality_comparisons_and_sameness/index.html delete mode 100644 files/de/web/javascript/guide/ausdruecke_und_operatoren/index.html create mode 100644 files/de/web/javascript/guide/control_flow_and_error_handling/index.html create mode 100644 files/de/web/javascript/guide/details_of_the_object_model/index.html delete mode 100644 "files/de/web/javascript/guide/einf\303\274hrung/index.html" create mode 100644 files/de/web/javascript/guide/expressions_and_operators/index.html delete mode 100644 files/de/web/javascript/guide/feinheiten_des_objektmodells/index.html create mode 100644 files/de/web/javascript/guide/functions/index.html delete mode 100644 files/de/web/javascript/guide/funktionen/index.html create mode 100644 files/de/web/javascript/guide/grammar_and_types/index.html delete mode 100644 files/de/web/javascript/guide/grammatik_und_typen/index.html create mode 100644 files/de/web/javascript/guide/introduction/index.html delete mode 100644 files/de/web/javascript/guide/kontrollfluss_und_fehlerbehandlung/index.html create mode 100644 files/de/web/javascript/guide/loops_and_iteration/index.html delete mode 100644 files/de/web/javascript/guide/mit_objekten_arbeiten/index.html delete mode 100644 files/de/web/javascript/guide/schleifen_und_iterationen/index.html create mode 100644 files/de/web/javascript/guide/text_formatting/index.html delete mode 100644 files/de/web/javascript/guide/textformatierung/index.html create mode 100644 files/de/web/javascript/guide/working_with_objects/index.html delete mode 100644 files/de/web/javascript/introduction_to_object-oriented_javascript/index.html create mode 100644 files/de/web/javascript/javascript_technologies_overview/index.html delete mode 100644 files/de/web/javascript/javascript_technologieuebersicht/index.html create mode 100644 files/de/web/javascript/memory_management/index.html create mode 100644 files/de/web/javascript/reference/classes/constructor/index.html create mode 100644 files/de/web/javascript/reference/classes/extends/index.html create mode 100644 files/de/web/javascript/reference/classes/index.html create mode 100644 files/de/web/javascript/reference/classes/static/index.html create mode 100644 files/de/web/javascript/reference/deprecated_and_obsolete_features/index.html create mode 100644 files/de/web/javascript/reference/deprecated_and_obsolete_features/the_legacy_iterator_protocol/index.html create mode 100644 files/de/web/javascript/reference/errors/already_has_pragma/index.html create mode 100644 files/de/web/javascript/reference/errors/array_sort_argument/index.html create mode 100644 files/de/web/javascript/reference/errors/bad_octal/index.html create mode 100644 files/de/web/javascript/reference/errors/bad_radix/index.html create mode 100644 files/de/web/javascript/reference/errors/bad_regexp_flag/index.html create mode 100644 files/de/web/javascript/reference/errors/bad_return_or_yield/index.html create mode 100644 files/de/web/javascript/reference/errors/called_on_incompatible_type/index.html create mode 100644 files/de/web/javascript/reference/errors/cant_access_lexical_declaration_before_init/index.html create mode 100644 files/de/web/javascript/reference/errors/cant_access_property/index.html create mode 100644 files/de/web/javascript/reference/errors/cant_define_property_object_not_extensible/index.html create mode 100644 files/de/web/javascript/reference/errors/cant_delete/index.html create mode 100644 files/de/web/javascript/reference/errors/cant_redefine_property/index.html create mode 100644 files/de/web/javascript/reference/errors/cyclic_object_value/index.html create mode 100644 files/de/web/javascript/reference/errors/dead_object/index.html create mode 100644 files/de/web/javascript/reference/errors/delete_in_strict_mode/index.html create mode 100644 files/de/web/javascript/reference/errors/deprecated_caller_or_arguments_usage/index.html create mode 100644 files/de/web/javascript/reference/errors/deprecated_expression_closures/index.html create mode 100644 files/de/web/javascript/reference/errors/deprecated_octal/index.html create mode 100644 files/de/web/javascript/reference/errors/deprecated_source_map_pragma/index.html create mode 100644 files/de/web/javascript/reference/errors/deprecated_string_generics/index.html create mode 100644 files/de/web/javascript/reference/errors/deprecated_tolocaleformat/index.html create mode 100644 files/de/web/javascript/reference/errors/equal_as_assign/index.html create mode 100644 files/de/web/javascript/reference/errors/for-each-in_loops_are_deprecated/index.html create mode 100644 files/de/web/javascript/reference/errors/getter_only/index.html create mode 100644 files/de/web/javascript/reference/errors/identifier_after_number/index.html create mode 100644 files/de/web/javascript/reference/errors/illegal_character/index.html create mode 100644 files/de/web/javascript/reference/errors/in_operator_no_object/index.html create mode 100644 files/de/web/javascript/reference/errors/index.html create mode 100644 files/de/web/javascript/reference/errors/invalid_array_length/index.html create mode 100644 files/de/web/javascript/reference/errors/invalid_assignment_left-hand_side/index.html create mode 100644 files/de/web/javascript/reference/errors/invalid_const_assignment/index.html create mode 100644 files/de/web/javascript/reference/errors/invalid_date/index.html create mode 100644 files/de/web/javascript/reference/errors/invalid_for-in_initializer/index.html create mode 100644 files/de/web/javascript/reference/errors/invalid_for-of_initializer/index.html create mode 100644 files/de/web/javascript/reference/errors/invalid_right_hand_side_instanceof_operand/index.html create mode 100644 files/de/web/javascript/reference/errors/is_not_iterable/index.html create mode 100644 files/de/web/javascript/reference/errors/json_bad_parse/index.html create mode 100644 files/de/web/javascript/reference/errors/malformed_formal_parameter/index.html create mode 100644 files/de/web/javascript/reference/errors/malformed_uri/index.html create mode 100644 files/de/web/javascript/reference/errors/missing_bracket_after_list/index.html create mode 100644 files/de/web/javascript/reference/errors/missing_colon_after_property_id/index.html create mode 100644 files/de/web/javascript/reference/errors/missing_curly_after_function_body/index.html create mode 100644 files/de/web/javascript/reference/errors/missing_curly_after_property_list/index.html create mode 100644 files/de/web/javascript/reference/errors/missing_formal_parameter/index.html create mode 100644 files/de/web/javascript/reference/errors/missing_initializer_in_const/index.html create mode 100644 files/de/web/javascript/reference/errors/missing_name_after_dot_operator/index.html create mode 100644 files/de/web/javascript/reference/errors/missing_parenthesis_after_argument_list/index.html create mode 100644 files/de/web/javascript/reference/errors/missing_parenthesis_after_condition/index.html create mode 100644 files/de/web/javascript/reference/errors/missing_semicolon_before_statement/index.html create mode 100644 files/de/web/javascript/reference/errors/more_arguments_needed/index.html create mode 100644 files/de/web/javascript/reference/errors/negative_repetition_count/index.html create mode 100644 files/de/web/javascript/reference/errors/no_non-null_object/index.html create mode 100644 files/de/web/javascript/reference/errors/no_properties/index.html create mode 100644 files/de/web/javascript/reference/errors/no_variable_name/index.html create mode 100644 files/de/web/javascript/reference/errors/non_configurable_array_element/index.html create mode 100644 files/de/web/javascript/reference/errors/not_a_codepoint/index.html create mode 100644 files/de/web/javascript/reference/errors/not_a_constructor/index.html create mode 100644 files/de/web/javascript/reference/errors/not_a_function/index.html create mode 100644 files/de/web/javascript/reference/errors/not_defined/index.html create mode 100644 files/de/web/javascript/reference/errors/precision_range/index.html create mode 100644 files/de/web/javascript/reference/errors/property_access_denied/index.html create mode 100644 files/de/web/javascript/reference/errors/read-only/index.html create mode 100644 files/de/web/javascript/reference/errors/redeclared_parameter/index.html create mode 100644 files/de/web/javascript/reference/errors/reduce_of_empty_array_with_no_initial_value/index.html create mode 100644 files/de/web/javascript/reference/errors/reserved_identifier/index.html create mode 100644 files/de/web/javascript/reference/errors/resulting_string_too_large/index.html create mode 100644 files/de/web/javascript/reference/errors/stmt_after_return/index.html create mode 100644 files/de/web/javascript/reference/errors/strict_non_simple_params/index.html create mode 100644 files/de/web/javascript/reference/errors/too_much_recursion/index.html create mode 100644 files/de/web/javascript/reference/errors/typed_array_invalid_arguments/index.html create mode 100644 files/de/web/javascript/reference/errors/undeclared_var/index.html create mode 100644 files/de/web/javascript/reference/errors/undefined_prop/index.html create mode 100644 files/de/web/javascript/reference/errors/unexpected_token/index.html create mode 100644 files/de/web/javascript/reference/errors/unexpected_type/index.html create mode 100644 files/de/web/javascript/reference/errors/unnamed_function_statement/index.html create mode 100644 files/de/web/javascript/reference/errors/unterminated_string_literal/index.html create mode 100644 files/de/web/javascript/reference/errors/var_hides_argument/index.html delete mode 100644 files/de/web/javascript/reference/fehler/already_has_pragma/index.html delete mode 100644 files/de/web/javascript/reference/fehler/array_sort_argument/index.html delete mode 100644 files/de/web/javascript/reference/fehler/bad_octal/index.html delete mode 100644 files/de/web/javascript/reference/fehler/bad_radix/index.html delete mode 100644 files/de/web/javascript/reference/fehler/bad_regexp_flag/index.html delete mode 100644 files/de/web/javascript/reference/fehler/bad_return_or_yield/index.html delete mode 100644 files/de/web/javascript/reference/fehler/called_on_incompatible_type/index.html delete mode 100644 files/de/web/javascript/reference/fehler/cant_access_lexical_declaration_before_init/index.html delete mode 100644 files/de/web/javascript/reference/fehler/cant_access_property/index.html delete mode 100644 files/de/web/javascript/reference/fehler/cant_define_property_object_not_extensible/index.html delete mode 100644 files/de/web/javascript/reference/fehler/cant_delete/index.html delete mode 100644 files/de/web/javascript/reference/fehler/cant_redefine_property/index.html delete mode 100644 files/de/web/javascript/reference/fehler/cyclic_object_value/index.html delete mode 100644 files/de/web/javascript/reference/fehler/dead_object/index.html delete mode 100644 files/de/web/javascript/reference/fehler/delete_in_strict_mode/index.html delete mode 100644 files/de/web/javascript/reference/fehler/deprecated_caller_or_arguments_usage/index.html delete mode 100644 files/de/web/javascript/reference/fehler/deprecated_expression_closures/index.html delete mode 100644 files/de/web/javascript/reference/fehler/deprecated_octal/index.html delete mode 100644 files/de/web/javascript/reference/fehler/deprecated_source_map_pragma/index.html delete mode 100644 files/de/web/javascript/reference/fehler/deprecated_string_generics/index.html delete mode 100644 files/de/web/javascript/reference/fehler/deprecated_tolocaleformat/index.html delete mode 100644 files/de/web/javascript/reference/fehler/equal_as_assign/index.html delete mode 100644 files/de/web/javascript/reference/fehler/for-each-in_loops_are_deprecated/index.html delete mode 100644 files/de/web/javascript/reference/fehler/getter_only/index.html delete mode 100644 files/de/web/javascript/reference/fehler/identifier_after_number/index.html delete mode 100644 files/de/web/javascript/reference/fehler/illegal_character/index.html delete mode 100644 files/de/web/javascript/reference/fehler/in_operator_no_object/index.html delete mode 100644 files/de/web/javascript/reference/fehler/index.html delete mode 100644 files/de/web/javascript/reference/fehler/invalid_array_length/index.html delete mode 100644 files/de/web/javascript/reference/fehler/invalid_assignment_left-hand_side/index.html delete mode 100644 files/de/web/javascript/reference/fehler/invalid_const_assignment/index.html delete mode 100644 files/de/web/javascript/reference/fehler/invalid_date/index.html delete mode 100644 files/de/web/javascript/reference/fehler/invalid_for-in_initializer/index.html delete mode 100644 files/de/web/javascript/reference/fehler/invalid_for-of_initializer/index.html delete mode 100644 files/de/web/javascript/reference/fehler/invalid_right_hand_side_instanceof_operand/index.html delete mode 100644 files/de/web/javascript/reference/fehler/is_not_iterable/index.html delete mode 100644 files/de/web/javascript/reference/fehler/json_bad_parse/index.html delete mode 100644 files/de/web/javascript/reference/fehler/malformed_formal_parameter/index.html delete mode 100644 files/de/web/javascript/reference/fehler/malformed_uri/index.html delete mode 100644 files/de/web/javascript/reference/fehler/missing_bracket_after_list/index.html delete mode 100644 files/de/web/javascript/reference/fehler/missing_colon_after_property_id/index.html delete mode 100644 files/de/web/javascript/reference/fehler/missing_curly_after_function_body/index.html delete mode 100644 files/de/web/javascript/reference/fehler/missing_curly_after_property_list/index.html delete mode 100644 files/de/web/javascript/reference/fehler/missing_formal_parameter/index.html delete mode 100644 files/de/web/javascript/reference/fehler/missing_initializer_in_const/index.html delete mode 100644 files/de/web/javascript/reference/fehler/missing_name_after_dot_operator/index.html delete mode 100644 files/de/web/javascript/reference/fehler/missing_parenthesis_after_argument_list/index.html delete mode 100644 files/de/web/javascript/reference/fehler/missing_parenthesis_after_condition/index.html delete mode 100644 files/de/web/javascript/reference/fehler/missing_semicolon_before_statement/index.html delete mode 100644 files/de/web/javascript/reference/fehler/more_arguments_needed/index.html delete mode 100644 files/de/web/javascript/reference/fehler/negative_repetition_count/index.html delete mode 100644 files/de/web/javascript/reference/fehler/no_non-null_object/index.html delete mode 100644 files/de/web/javascript/reference/fehler/no_properties/index.html delete mode 100644 files/de/web/javascript/reference/fehler/no_variable_name/index.html delete mode 100644 files/de/web/javascript/reference/fehler/non_configurable_array_element/index.html delete mode 100644 files/de/web/javascript/reference/fehler/not_a_codepoint/index.html delete mode 100644 files/de/web/javascript/reference/fehler/not_a_constructor/index.html delete mode 100644 files/de/web/javascript/reference/fehler/not_a_function/index.html delete mode 100644 files/de/web/javascript/reference/fehler/not_defined/index.html delete mode 100644 files/de/web/javascript/reference/fehler/precision_range/index.html delete mode 100644 files/de/web/javascript/reference/fehler/property_access_denied/index.html delete mode 100644 files/de/web/javascript/reference/fehler/read-only/index.html delete mode 100644 files/de/web/javascript/reference/fehler/redeclared_parameter/index.html delete mode 100644 files/de/web/javascript/reference/fehler/reduce_of_empty_array_with_no_initial_value/index.html delete mode 100644 files/de/web/javascript/reference/fehler/reserved_identifier/index.html delete mode 100644 files/de/web/javascript/reference/fehler/resulting_string_too_large/index.html delete mode 100644 files/de/web/javascript/reference/fehler/stmt_after_return/index.html delete mode 100644 files/de/web/javascript/reference/fehler/strict_non_simple_params/index.html delete mode 100644 files/de/web/javascript/reference/fehler/too_much_recursion/index.html delete mode 100644 files/de/web/javascript/reference/fehler/typed_array_invalid_arguments/index.html delete mode 100644 files/de/web/javascript/reference/fehler/undeclared_var/index.html delete mode 100644 files/de/web/javascript/reference/fehler/undefined_prop/index.html delete mode 100644 files/de/web/javascript/reference/fehler/unexpected_token/index.html delete mode 100644 files/de/web/javascript/reference/fehler/unexpected_type/index.html delete mode 100644 files/de/web/javascript/reference/fehler/unnamed_function_statement/index.html delete mode 100644 files/de/web/javascript/reference/fehler/unterminated_string_literal/index.html delete mode 100644 files/de/web/javascript/reference/fehler/var_hides_argument/index.html create mode 100644 files/de/web/javascript/reference/functions/arrow_functions/index.html create mode 100644 files/de/web/javascript/reference/functions/method_definitions/index.html delete mode 100644 files/de/web/javascript/reference/functions/methoden_definitionen/index.html delete mode 100644 files/de/web/javascript/reference/functions/pfeilfunktionen/index.html delete mode 100644 files/de/web/javascript/reference/functions/rest_parameter/index.html create mode 100644 files/de/web/javascript/reference/functions/rest_parameters/index.html delete mode 100644 files/de/web/javascript/reference/global_objects/array/prototypen/index.html delete mode 100644 files/de/web/javascript/reference/global_objects/arraybuffer/prototype/index.html delete mode 100644 files/de/web/javascript/reference/global_objects/asyncfunction/prototype/index.html create mode 100644 files/de/web/javascript/reference/global_objects/atomics/notify/index.html delete mode 100644 files/de/web/javascript/reference/global_objects/atomics/wake/index.html delete mode 100644 files/de/web/javascript/reference/global_objects/boolean/prototype/index.html delete mode 100644 files/de/web/javascript/reference/global_objects/dataview/prototype/index.html delete mode 100644 files/de/web/javascript/reference/global_objects/date/prototype/index.html delete mode 100644 files/de/web/javascript/reference/global_objects/error/prototype/index.html delete mode 100644 files/de/web/javascript/reference/global_objects/evalerror/prototype/index.html delete mode 100644 files/de/web/javascript/reference/global_objects/function/prototype/index.html delete mode 100644 files/de/web/javascript/reference/global_objects/generatorfunction/prototype/index.html delete mode 100644 files/de/web/javascript/reference/global_objects/internalerror/prototype/index.html delete mode 100644 files/de/web/javascript/reference/global_objects/intl/collator/prototype/index.html delete mode 100644 files/de/web/javascript/reference/global_objects/intl/datetimeformat/prototype/index.html delete mode 100644 files/de/web/javascript/reference/global_objects/intl/numberformat/prototype/index.html delete mode 100644 files/de/web/javascript/reference/global_objects/map/prototype/index.html delete mode 100644 files/de/web/javascript/reference/global_objects/math/math.random/index.html create mode 100644 files/de/web/javascript/reference/global_objects/math/random/index.html delete mode 100644 files/de/web/javascript/reference/global_objects/number/prototype/index.html delete mode 100644 files/de/web/javascript/reference/global_objects/object/prototype/index.html delete mode 100644 files/de/web/javascript/reference/global_objects/rangeerror/prototype/index.html delete mode 100644 files/de/web/javascript/reference/global_objects/string/prototype/index.html create mode 100644 files/de/web/javascript/reference/global_objects/string/search/index.html delete mode 100644 files/de/web/javascript/reference/global_objects/string/suchen/index.html create mode 100644 files/de/web/javascript/reference/global_objects/string/trimend/index.html delete mode 100644 files/de/web/javascript/reference/global_objects/string/trimleft/index.html delete mode 100644 files/de/web/javascript/reference/global_objects/string/trimright/index.html create mode 100644 files/de/web/javascript/reference/global_objects/string/trimstart/index.html delete mode 100644 files/de/web/javascript/reference/global_objects/syntaxerror/prototype/index.html delete mode 100644 files/de/web/javascript/reference/global_objects/typeerror/prototype/index.html delete mode 100644 files/de/web/javascript/reference/klassen/constructor/index.html delete mode 100644 files/de/web/javascript/reference/klassen/extends/index.html delete mode 100644 files/de/web/javascript/reference/klassen/index.html delete mode 100644 files/de/web/javascript/reference/klassen/static/index.html delete mode 100644 files/de/web/javascript/reference/operators/bitwise_operatoren/index.html create mode 100644 files/de/web/javascript/reference/operators/decrement/index.html delete mode 100644 files/de/web/javascript/reference/operators/dekrement/index.html create mode 100644 files/de/web/javascript/reference/operators/destructuring_assignment/index.html delete mode 100644 files/de/web/javascript/reference/operators/destrukturierende_zuweisung/index.html create mode 100644 files/de/web/javascript/reference/operators/increment/index.html delete mode 100644 files/de/web/javascript/reference/operators/inkrement/index.html delete mode 100644 files/de/web/javascript/reference/operators/logische_operatoren/index.html delete mode 100644 files/de/web/javascript/reference/operators/modulo/index.html create mode 100644 files/de/web/javascript/reference/operators/object_initializer/index.html delete mode 100644 files/de/web/javascript/reference/operators/objekt_initialisierer/index.html create mode 100644 files/de/web/javascript/reference/operators/optional_chaining/index.html delete mode 100644 files/de/web/javascript/reference/operators/optionale_verkettung/index.html create mode 100644 files/de/web/javascript/reference/operators/remainder/index.html delete mode 100644 files/de/web/javascript/reference/operators/spread_operator/index.html delete mode 100644 files/de/web/javascript/reference/operators/vergleichsoperatoren/index.html delete mode 100644 files/de/web/javascript/reference/operators/zuweisungsoperator/index.html delete mode 100644 files/de/web/javascript/reference/statements/default/index.html create mode 100644 files/de/web/javascript/reference/statements/function/index.html delete mode 100644 files/de/web/javascript/reference/statements/funktion/index.html create mode 100644 files/de/web/javascript/reference/template_literals/index.html delete mode 100644 files/de/web/javascript/reference/template_strings/index.html delete mode 100644 files/de/web/javascript/reference/veraltete_und_abgeschaffte_features/index.html delete mode 100644 files/de/web/javascript/reference/veraltete_und_abgeschaffte_features/the_legacy_iterator_protocol/index.html delete mode 100644 files/de/web/javascript/speicherverwaltung/index.html delete mode 100644 files/de/web/javascript/vergleiche_auf_gleichheit_und_deren_verwendung/index.html (limited to 'files/de/web/javascript') diff --git a/files/de/web/javascript/a_re-introduction_to_javascript/index.html b/files/de/web/javascript/a_re-introduction_to_javascript/index.html new file mode 100644 index 0000000000..a306d9fd16 --- /dev/null +++ b/files/de/web/javascript/a_re-introduction_to_javascript/index.html @@ -0,0 +1,909 @@ +--- +title: Eine Wiedereinführung in JavaScript +slug: Web/JavaScript/Eine_Wiedereinfuehrung_in_JavaScript +tags: + - Anleitung + - CodingScripting + - Einleitung + - Guide + - Intermediate + - JavaScript + - Lernen +translation_of: Web/JavaScript/A_re-introduction_to_JavaScript +--- +
{{jsSidebar}}
+ +

Warum eine "Wieder" - Einführung? Weil {{Glossary("JavaScript")}} als die am meisten missverstandene Programmiersprache der Welt bekannt ist. Obwohl die Sprache oft als Spielzeug abgewertet wird, besitzt sie neben ihrer Einfachheit einige mächtige Sprachfunktionen. Heutzutage wird JavaScript in einer Großzahl von wichtigen Anwendungen verwendet, was zeigt, dass Wissen über diese Technologie eine wichtige Eigenschaft für jeden Web- und Mobil-Entwickler ist.

+ +

Es ist sinnvoll mit einem Überblick über die Sprachgeschichte zu beginnen. JavaScript wurde im Jahr 1995 von Brendan Eich entworfen, der Ingenieur bei Netscape war. JavaScript wurde erstmals 1996 mit Netscape 2 veröffentlicht. Ursprünglich hieß die Sprache LiveScript, wurde aber wegen unglücklichen Marketingentscheidung umbenannt, die sich die Popularität der Java-Sprache von Sun Microsystem zunutze machen wollte - obwohl beide wenig gemeinsam hatten. Dies ist seither eine Quelle für Verwirrung.

+ +

Einige Monate später veröffentlichte Microsoft JScript mit dem Internet Explorer 3. Diese war eine weitgehend zu JavaScript kompatibele Sprache. Einige Monate später übergab Netscape JavaScript an Ecma International, einer Europäischen Standardisierungsorganisation, welche noch im selben Jahr die ersten Edition des {{Glossary("ECMAScript")}} Standards veröffentlichten. Der Standard bekam 1999 ein bedeutendes Update mit ECMAScript Edition 3 und hält sich seither sehr stabil. Die vierte Edition des Standards wurde aufgrund von politischen Meinungsverschiedenheiten zur Komplexität der Sprache fallen gelassen. Viele Teile der vieren Edition bildeten die Basis der fünften und sechsten Edition des Standards, welche im Dezember 2009 bzw. im Juni 2015 veröffentlicht wurden.

+ +
+

Aus Gründen der Vertrautheit verwenden wir ab hier die Bezeichnung "JavaScript" anstatt "ECMAScript".

+
+ +

Anders als viele andere Programmiersprachen, gibt es bei JavaScript kein Konzept für Eingabe und Ausgabe. JavaScript wurde als Skriptsprache in eine Hostumgebung entworfen und es ist die Aufgabe dieser Umgebung Mechanismen für die Kommunikation mit der Außenwelt bereitzustellen. Die hierfür am meisten genutzte Hostumgebung ist der Browser, jedoch findet man Interpreter auch in vielen anderen Anwendungen, zum Beispiel Adobe Acrobat, Photoshop, SVG Bilder, Yahoo! Widget Umgebung, serverseitigen Applikationen wie node.js, NoSQL-Datenbanken wie die Open Source-Datenbank Apache CouchDB, integrierte Computer, Desktopumgebungen wie GNOME (eine der beliebtesten Desktopumgebungen für GNU/Linux Betriebssysteme) und vielen mehr.

+ +

Überblick

+ +

JavaScript ist eine dynamische Multi-Paradigmen-Sprache mit Typen und Operatoren, Standardobjekten und Methoden. Die Syntax basiert auf den Sprachen Java und C — viele Strukturen aus diesen Sprachen wurden in JavaScript übernommen. JavaScript unterstützt Objektorientierung mit Prototypobjekten statt Klassen (mehr darüber in Vererbung mit Prototypen und ES2015 Klassen). JavaScript unterstützt auch funktionale Programmierung — Funktionen sind Objekte, die Funktionen ermöglichen, ausführbaren Code zu speichern und wie jedes andere Objekt weitergegeben zu werden.

+ +

Beginnen wir mit einer Betrachtung der Sprachbausteine. JavaScript Programme manipulieren Werte und jeder Wert ist von einem bestimmten Typ. JavaScript Typen sind:

+ + + +

... und {{jsxref("undefined")}} und {{jsxref("null")}}, die ein wenig speziell sind. Und {{jsxref("Array")}} , die eine besonere Art von Objekt ist. Und {{jsxref("Date")}} und {{jsxref("RegExp")}}, welche man quasi mitgeliefert bekommt. Wenn man genau sein will, sind Funktionen ebenfalls eine spezielle Art von Objekten. Also sieht das Typdiagramm eher so aus:

+ + + +

Zusätzlich gibt es noch einige vordefinierte {{jsxref("Error")}} Typen. Der Einfachheit halber beschränken wir uns im Folgenden erst einmal auf die Typen aus dem ersten Diagramm.

+ +

Numbers

+ +

Numbers sind in JavaScript laut der Spezifikation "doppeltpräzise 64-bit Werte im IEEE 754 Format". Das hat einige interessante Konsequenzen. Es gibt in JavaScript nichts vergleichbares wie Integer, weshalb man vorsichtig mit Arithmetik umgehen muss, wenn man Mathematik wie in C oder Java nutzt.

+ +

Achte auch auf Dinge wie:

+ +
0.1 + 0.2 == 0.30000000000000004
+ +

In der Praxis werden Integer-Werte wie 32-Bit-Integer behandelt und einige Implementierungen speichern sie sogar so, bis sie einen Befehl ausführen sollen, der für eine Number, aber nicht für eine 32-Bit Integer gültig ist. Das kann z.B. für Bitoperationen wichtig sein.

+ +

Unterstützt werden die arithmetischen Standardoperationen, inklusive Addition, Subtraktion, Modulo (oder Rest) Arithmetik und so weiter. Außerdem existiert noch ein Objekt Math für die Anwendung von mathematischen Funktionen und Konstanten, welches oben noch nicht genannt wurde:

+ +
Math.sin(3.5);
+var umfang = 2 * Math.PI * r;
+ +

Man kann Strings mit der eingebauten {{jsxref("Global_Objects/parseInt", "parseInt()")}} Funktion nach Integer konvertieren. Die Funktion enthält die Basis des Zahlensystems für die Konvertierung als zweiten optionalen Parameter, welcher immer angegeben werden sollte:

+ +
parseInt("123", 10); // 123
+parseInt("010", 10); // 10
+
+ +

In älteren Browsern werden Strings, die mit "0" anfangen als Oktalzahlen (Basis 8) interpretiert, seit 2013 ist das aber nicht mehr so. Wenn man sich bei dem Stringformat nicht sicher ist, kann das in den älteren Browsern zu überraschenden Ergebnissen führen:

+ +
parseInt("010");  //  8
+parseInt("0x10"); // 16
+ +

Hier sieht man, dass die {{jsxref("Global_Objects/parseInt", "parseInt()")}} Funktion den ersten String als Oktalzahl, wegen der führenden 0, und den zweiten String als Hexadezimalzahl, wegen des führenden "0x", interpretiert. Die Hexadezimalnotation ist immernoch zulässig; nur die Oktalnotation wurde entfernt, weil sie praktisch nicht mehr verwendet wird.

+ +

Um eine Binärzahl in ein Integer zu ändern, verwendet man einfach die Basis 2:

+ +
parseInt("11", 2); // 3
+ +

Auf die gleiche Weise lassen sich auch Gleitkommazahlen mit Hilfe der Funktion {{jsxref("Global_Objects/parseFloat", "parseFloat()")}} konvertieren. Anders als bei der {{jsxref("Global_Objects/parseInt", "parseInt()")}} Funktion nutzt parseFloat() immer die Basis 10.

+ +

Auch der unäre + Operator kann eingesetzt werden, um zu einer Zahl zu konvertieren:

+ +
+ "42";   // 42
++ "010";  // 10
++ "0x10"; // 16
+ +

Ein spezieller Wert mit der Bezeichnung {{jsxref("NaN")}} (für "Not a Number") wird zurückgegeben, wenn der String keinen numerischen Wert enthält:

+ +
parseInt("hello", 10); // NaN
+ +

NaN ist gefährlich: Wenn es als Operand in eine mathematische Operation benutzt wird, wird das Ergebnis ebenfalls NaN sein;

+ +
NaN + 5; // NaN
+ +

Mit der eingebauten  {{jsxref("Global_Objects/isNaN", "isNaN()")}} Funktion kann man auf NaN testen:

+ +
isNaN(NaN); // true
+ +

JavaScript kennt außerdem die speziellen Werte {{jsxref("Infinity")}} und -Infinity:

+ +
 1 / 0; //  Infinity
+-1 / 0; // -Infinity
+ +

Man kann auf Infinity, -Infinity und NaN Werte mit der eingebauten Funktion {{jsxref("Global_Objects/isFinite", "isFinite()")}} testen:

+ +
isFinite(1 / 0);     // false
+isFinite(-Infinity); // false
+isFinite(NaN);       // false
+ +
+

Die {{jsxref("Global_Objects/parseInt", "parseInt()")}} und {{jsxref("Global_Objects/parseFloat", "parseFloat()")}} Funktionen lesen einen String, bis ein Zeichen erreicht wird, welches für das Zahlensystem unzulässig ist und geben die Zahl bis zu dieser Stelle zurück. Der unäre + Operator konvertiert den String einfach zu NaN, wenn dieser ein unerlaubtes Zeichen enthält. Probiere mal aus, den String "10.2abc" mit jeder der Methoden in der Console zu konvertieren, um die Unterschiede besser zu verstehen.

+
+ +

Strings

+ +

Strings sind in JavaScript eine Folge von Unicode-Zeichen. Das sollte für alle erfreulich sein, die mit Internationalisierung arbeiten. Genauer gesagt sind Strings Folgen von UTF-16 Codeeinheit; jeder Codeeinheit ist durch eine 16-Bit Zahl repräsentiert. Jedes Unicode-Zeichen besteht aus 1 oder 2 Codeeinheiten.

+ +

Für ein einzelnes Zeichen, verwendet man einfach einen String mit einem Zeichen.

+ +

Um die Länge eines Strings (in Codeeinheiten) herauszufinden, nutzt man die length Eigenschaft:

+ +
'hello'.length; // 5
+ +

Da ist die erster Begegnung mit JavaScript Objekten! Haben wir schon erwähnt, dass man auch Strings wie {{jsxref("Object", "Objekte", "", 1)}} verwenden kann? Sie haben auch {{jsxref("String", "Methoden", "#Methoden", 1)}}, um den Strings zu verändern und Informationen zu erhalten.

+ +
'hello'.charAt(0); // "h"
+'hello, world'.replace('hello', 'goodbye'); // "goodbye, world"
+'hello'.toUpperCase(); // "HELLO"
+ +

Andere Datentypen

+ +

JavaScript unterscheidet zwischen {{jsxref("null")}}, wobei es sich um einen Wert handelt, der einen "nicht Wert" repräsentiert (und nur über das null Schlüsselwort erreichbar ist) und {{jsxref("undefined")}}, wobei es sich um einen Wert vom Typ undefined handelt, welcher für einen nicht initialisierten Wert steht - also, dass noch kein Wert zugewiesen wurde. Variablen werden später besprochen, aber in JavaScript ist es möglich Variablen zu deklarieren, ohne ihnen eine Wert zuzuweisen. Wenn das gemacht wird ist die Variable vom Typ undefined. undefined ist sogar eine Konstante.

+ +

JavaScript hat einen Boolean Typ mit den möglichen Werten true und false (beide sind Schlüsselwörter). Jeder Wert kann mit den folgenden Regeln zu einem Boolean konvertiert werden:

+ +
    +
  1. false, 0, leere Strings (""), NaN, null, und undefined werden false.
  2. +
  3. Alle anderen Werte werden true.
  4. +
+ +

Die Konvertierung kann explizit mit der Boolean() Funktion durchgeführt werden:

+ +
Boolean('');  // false
+Boolean(234); // true
+ +

Das ist jedoch kaum nötig, da JavaScript die Konvertierung automatisch vornimmt, wenn ein Boolean erwartet wird, wie z.B. bei einer if-Anweisung (siehe unten). Aus diesem Grund ist oft von "true Werten" und "false Werten" die Rede, womit Werte gemeint sind, die zu true oder false werden, nachdem sie zu einem Boolean konvertiert wurden. Alternativ können diese Werte auch "truthy" und "falsy" genannt werden.

+ +

Boolesche Operationen wie beispielsweise && (logisches und), || (logisches oder) und ! (logisches nicht) werden ebenfalls unterstützt (siehe unten).

+ +

Variablen

+ +

Neue Variablen werden in JavaScript mit einem der drei Schlüsselwort let, const oder var deklariert.

+ +

let erlaubt es Variablen auf Blockebene zu deklarieren. Die deklarierte Variable ist in dem Block gültig, von dem sie umschlossen wird.

+ +
let a;
+let name = "Simon";
+ +

Im folgenden ist ein Beispiel für den Gültigkeitsbereich einer mit let deklarierten Variablen:

+ +
// myLetVariable ist hier *nicht* sichtbar
+
+for (let myLetVariable = 0; myLetVariable < 5; myLetVariable++) {
+  // myLetVariable ist nur hier sichtbar
+}
+
+// myLetVariable ist hier *nicht* sichtbar
+
+ +

const erlaubt es Variablen zu deklarieren, dessen Wert nie wieder geändert wird. Die Variable ist in dem Block sichtbar, von dem sie umschlossen wird.

+ +
const Pi = 3.14;  // Variable Pi wird initialisiert
+Pi = 1;  // Führt zu einem Fehler, weil konstante (const) Variablen nicht geändert werden können.
+
+ +

var ist das gebräuchlichste deklarative Schlüsselwort. Es hat nicht die Restriktionen, die die anderen beiden Schlüsselwörter haben. Das liegt daran, dass das traditionell der einzige Weg war, um eine Variable in JavaScript zu deklarieren. Eine Variable, die mit dem var Schlüsselwort definiert wird, ist in der Funktion, in der sie deklariert wird, erreichbar.

+ +
var a;
+var name = 'Simon';
+ +

Im folgenden ist ein Beispiel für den Gültigkeitsbereich einer mit var deklarierten Variablen:

+ +
// myVarVariable *ist* hier sichtbar
+
+for (var myVarVariable = 0; myVarVariable < 5; myVarVariable++) {
+// myVarVariable ist in der ganzen Funktion sichtbar
+}
+
+// myVarVariable *ist* hier sichtbar
+ +

Deklariert man eine Variable, ohne ihr einen Wert zuzuweisen, ist ihr Typ undefined.

+ +

Ein sehr wichtiger Unterschied zu anderen Programmiersprachen wie Java besteht darin, dass bei JavaScript keine Blöckegültigkeitsbereiche hat, sondern nur Funktionsgültigkeitsbereiche. Wird eine Variable mit dem var Schlüsselwort in einer zusammengesetzten Statement (z.B. if-Anweisung) definiert, so ist diese Variable innerhalb der ganzen Funktion sichtbar. Jedoch ist es ab ECMAScript 2015 mit let und const Deklarationen möglich, Variablen mit Blocksichtbarkeitsbereich zu erstellen.

+ +

Operatoren

+ +

JavaScripts numerische Operatoren sind +, -, *, / und % welches der Divisionsrestoperator ist (nicht dasselbe wie Modulo). Werte werden mit = zugewiesen und es gibt zusammengesetzte Zuweisungsstatement wie += und -=. Diese werden als x = x Operator y interpretiert.

+ +
x += 5
+x = x + 5
+ +

Zum Inkrementieren und Dekrementieren kann ++ und -- verwendet werden. Diese können als Prefix oder Postfix Operatoren benutzt werden.

+ +

Mit dem + Operator ist es auch möglich, Strings zu verbinden:

+ +
'hello' + ' world'; // "hello world"
+ +

Addiert man einen String mit einer Zahl (oder einem anderen Wert), wird alles zuerst zu einem String konvertiert. Dies bereitet manchmal Probleme:

+ +
"3" + 4 + 5;  // "345"
+3 + 4 + "5"; // "75"
+ +

Das Addieren eines leeren Strings zu einem Wert ist eine hilfreiche Methode, den Wert in einen String zu konvertieren.

+ +

Vergleiche können in JavaScript mit <, >, <= und >= durchgeführt werden. Dieses funktionieren bei Strings und Zahlen. Gleichheit ist etwas komplizierter. Der Doppelgleichoperator hat einen Typzwang, was zu überraschend Ergebnissen führen kann:

+ +
123 == "123"; // true
+1 == true;    // true
+ +

Um den Typzwang zu vermeiden, benutzt man den Dreifachgleichoperator:

+ +
123 === "123"; // false
+1 === true;    // false
+ +

Des Weiteren gibt es die Operatoren != und !== für das Testen auf Ungleichheit.

+ +

Außerdem gibt es in JavaScript noch bitweise Operationen.

+ +

Kontrollstrukturen

+ +

JavaScript hat eine ähnliche Menge an Kontrollstrukturen wie andere Sprachen aus der C Familie. Bedingte Statements sind durch if und else unterstützt; man kann sie auch verketten:

+ +
var name = 'kittens';
+if (name == 'puppies') {
+  name += ' woof';
+} else if (name == 'kittens') {
+  name += ' neow';
+} else {
+  name += '!';
+}
+name == 'kittens neow';
+
+ +

JavaScript hat while- und do-while-Schleifen. Die erste ist gut für normale Schleifen. Die zweite ist für Schleifen geeignet, bei denen sichergestellt werden soll, dass der Schleifeninhalt mindestens einmal ausgeführt wird:

+ +
while (true) {
+  // Endlosschleife!
+}
+
+var input;
+do {
+  input = get_input();
+} while (inputIsNotValid(input))
+
+ +

JavaScripts for-Schleife ist die selbe wie in C und Java: Die Kontrollinformationen können in einer einzigen Zeile angegeben werden.

+ +
for (var i = 0; i < 5; i++) {
+  // Wird 5-Mal ausgeführt
+}
+
+ +

JavaScript hat zudem zwei weitere bekannte for Schleifen: for...of

+ +
for (let value of array) {
+  // Tue etwas mit value
+}
+ +

und for...in:

+ +
for (let property in object) {
+  // Tue etwas mit dem objects property
+}
+ +

Die Operatoren && und || benutzen Kurzschlusslogik, was bedeutet, dass die Ausführung des zweiten Operanden abhängig von dem ersten ist. Dieses ist nützlich für die Überprüfung auf null, bevor auf Objektattribute zugegriffen wird:

+ +
var name = o && o.getName();
+
+ +

Oder für das Abfangen von Werten (wenn falsy Werte nicht valide sind):

+ +
var name = cachedName || (cachedName = getName());
+
+ +

JavaScript besitzt einen ternären Operator für bedingte Ausdrücke:

+ +
var allowed = (age > 18) ? 'yes' : 'no';
+
+ +

Das switch Statement kann führ mehrere Zweige abhängig von einer Zahl oder einem String eingesetzt werden:

+ +
switch(action) {
+    case 'draw':
+        drawIt();
+        break;
+    case 'eat':
+        eatIt();
+        break;
+    default:
+        doNothing();
+}
+
+ +

Lässt man das break Statement weg, werden auch der folgezweig ausgeführt. Dieses Verhalten ist selten gewollt — es lohnt sich in solchen Fällen explizite Kommentare hinzuzufügen, um späteres Debugging zu unterstützen:

+ +
switch(a) {
+    case 1: // fallthrough
+    case 2:
+        eatit();
+        break;
+    default:
+        donothing();
+}
+
+ +

Die default Klausel ist optional. Wenn gewünscht, können Ausdrücke im switch und im case eingesetzt werden. Der Vergleiche zwischen beiden wird mit dem === Operator durchgeführt:

+ +
switch(1 + 3) {
+    case 2 + 2:
+        yay();
+        break;
+    default:
+        neverhappens();
+}
+
+ +

Objekte

+ +

JavaScript Objekte setzen sich aus einfachen Name-Wert-Paaren zusammen. Sie sind ähnlich wie:

+ + + +

Der Fakt, dass diese Datenstruktur so oft eingesetzt wird, zeigt seine Vielseitigkeit. Da alles (reine Kerntypen) in JavaScript ein Objekt ist, beinhaltet jedes JavaScript-Programm natürlich eine große Menge von Suchoperationen in Hashtabellen. Gut, dass diese so schnell sind!

+ +

Der "Name"-Teil ist ein JavaScript String, während als Wert jeder JavaScript Wert in Frage kommt — auch andere Objekte. Dies ermöglicht das Erstellen von beliebig komplexen Datenstrukturen.

+ +

Es gibt zwei grundlegende Möglichkeiten, ein leeres Objekt zu erstellen:

+ +
var obj = new Object();
+
+ +

Und:

+ +
var obj = {};
+
+ +

Beide sind semantisch äquivalent. Die zweite wird "Objektliteral Syntax" genannt und ist verbreiteter. Diese Syntax ist zudem der Kern des JSON Formates und sollte immer bevorzugt genutzt werden.

+ +

"Objektliteral Syntax" kann eingesetzt werden, um ein umfassendes Objekt zu erstellen:

+ +
var obj = {
+    name: "Carrot",
+    "for": "Max",
+    details: {
+        color: "orange",
+        size: 12
+    }
+}
+
+ +

Der Zugriff auf Eigenschaften kann verkettet werden:

+ +
obj.details.color; // orange
+obj["details"]["size"]; // 12
+ +

Das folgende Beispiel erstellt einen Prototyp Person und eine Instanz dieses Prototyps you.

+ +
function Person(name, age) {
+  this.name = name;
+  this.age = age;
+}
+
+// Definiere ein Objekt
+var you = new Person('You', 24);
+// Wir erstellen eine Person mit dem Namen "You" und dem Alter 24
+ +

Nach der Erstellung kann eine Objekteigenschaft über einem von zwei möglichen Wegen erreicht werden:

+ +
obj.name = "Simon";
+var name = obj.name;
+
+ +

Und...

+ +
// Klammernotation
+obj['name'] = 'Simon';
+var name = obj['name'];
+// man kann eine Variable benutzen, um einen Schlüssel zu definieren
+var user = prompt('was ist dein Schlüssel?');
+obj[user] = prompt('was ist dein Schlüssel?');
+
+ +

Beide sind wieder semantisch äquivalent. Die zweite Methode hat den Vorteil, dass der Name der Eigenschaft als String zur Verfügung gestellt wird, was bedeutet, dass dieser zur Laufzeit berechnet werden kann. Jedoch verhindert diese Methode, dass einige JavaScript-Engines "Minifier Optimierungen" durchführen können. Sie kann außerdem eingesetzt werden, um Eigenschaften zu erreichen, die ein reservierte Schlüsselwörter als Namen haben:

+ +
obj.for = "Simon"; // Syntaxfehler, da 'for' ein reserviertes Schlüsselwort ist
+obj["for"] = "Simon"; // funktioniert
+
+ +
+

Ab ECMAScript 5 können reservierte Wörter bei Objektliteralen verwendet werden. Das bedeutet, dass keine Anführungszeichen und eckige Klammern mehr nötig sind. Siehe ES5 Spec.

+
+ +

Weitere Informationen zu Objekten und Prototypen gibt es im Artikel Object.prototype. Für eine Erklärung von Objektprototypen und die Objektprototypenkette siehe in den Artikel Vererbung und die Prototypenkette.

+ +
+

Ab ECMAScript 2015 können Schlüssel mit Variablen definiert werden, indem eckige Klammern verwendet werden. {[phoneType]: 12345} ist möglich, statt var userPhone = {}; userPhone[phoneType] = 12345 zu verwenden.

+
+ +

Arrays

+ +

Arrays sind in JavaScript ein spezieller Typ von Objekten. Sie funktionieren weitgehend wie normale Objekte (numerische Eigenschaften können nur über die []-Syntax erreicht werden), besitzen jedoch eine zusätzliche Eigenschaft length. Der Wert dieser Eigenschaft ist immer der höchsten Index des Arrays + 1.

+ +

Eine Möglichkeit ein Array zu erstellen ist die folgende:

+ +
var a = new Array();
+a[0] = 'dog';
+a[1] = 'cat';
+a[2] = 'hen';
+a.length; // 3
+ +

Eine praktischere Möglichkeit  ist die Erstellung über ein Array-Literal.

+ +
var a = ['dog', 'cat', 'hen'];
+a.length; // 3
+ +

Zu beachten ist, dass array.length nicht unbedingt der Anzahl der Elemente des Arrays entspricht. Siehe das folgende Beispiel:

+ +
var a = ['dog', 'cat', 'hen'];
+a[100] = 'fox';
+a.length; // 101
+ +

Zur Erinnerung: Der Wert von length entspricht immer dem höchsten Index + 1.

+ +

Versucht man auf einen nicht-existenten Array-Index zuzugreifen, erhält man undefined:

+ +
typeof a[90]; // undefined
+ +

Wenn Sie die obigen Angaben über [] und Länge (array.length) berücksichtigen, können Sie über ein Array iterieren, indem Sie die folgende for-Schleife verwenden:

+ +
for (var i = 0; i < a.length; i++) {
+    // Verarbeitung von a[i]
+}
+
+ +

ECMAScript (ES2015) empfiehlt die wesentlich kürzer gefasste for...of-Schleife, um über Objekte und Arrays zu iterieren:

+ +
for (const currentValue of a) {
+  // Tue etwas mit currentValue
+}
+ +

Man kann auch mit einer for...in Schleife über ein Array iterieren, wobei diese nicht über die Arrayelemente, sondern die Arrayindizes iteriert. Zudem wird bei einer solchen Schleife auch über Eigenschaften iteriert, die evtl. später in Array.prototype hinzugefügt werden. Deshalb wird diese Methode für Arrays nicht empfohlen.

+ +

In ECMAScript (ES2015) wurde mit forEach() eine weitere Schleife zur Iteration über Arrays eingeführt:

+ +
['dog', 'cat', 'hen'].forEach(function(currentValue, index, array) {
+  // Verarbeite currentValue oder array[index]
+});
+ +

Das Anhängen eines neuen Elements zu einem Array funktioniert folgendermaßen:

+ +
a.push(item);
+ +

Arrays besitzen viele Methoden. Hier findet man die Dokumentation für alle Array Methoden.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
MethodennameBeschreibung
a.toString()Gibt einen String zurück, bei dem toString() jedes Objektes getrennt mit Komma ist.
a.toLocaleString()Gibt einen String zurück, bei dem toLocaleString() jedes Objektes getrennt mit Komma ist.
a.concat(item1[, item2[, ...[, itemN]]])Erstellt eine Kopie mit den neu hinzugefügten Elemente.
a.join(sep)Wandelt das Array in einen String um. Die Elemente werden durch sep getrennt.
a.pop()Entfernt das letzte Element und gibt es zurück.
a.push(item1, ..., itemN)Fügt ein oder mehrere Elemente am Ende hinzu.
a.reverse()Kehrt die Reihenfolge des Arrays um.
a.shift()Entfernt das erste Element und gibt es zurück.
a.slice(start, end)Gibt einen Teil eines Arrays zurück.
a.sort([cmpfn])Sortiert das Array. Ein Vergleichsfunktion kann optional angegeben werden.
a.splice(start, delcount[, item1[, ...[, itemN]]])Modifiziert ein Array, indem ein Teil gelöscht und durch mehrere Elemente ersetzt wird.
a.unshift(item1[, item2[, ...[, itemN]]])Fügt Elemente am Anfang des Arrays hinzu.
+ +

Funktionen

+ +

Neben Objekten gehören Funktionen zu den Kernkomponenten von JavaScript. Die Syntax für eine einfache Funktion könnte kaum einfacher sein:

+ +
function add(x, y) {
+    var total = x + y;
+    return total;
+}
+
+ +

Das Beispiel demonstriert eine einfache Funktion. Einer JavaScript-Funktion können 0 oder mehr benannte Parameter übergeben werden. Der Funktionsrumpf kann beliebig viele Anweisungen enthalten und kann seine eigene lokalen Variablen definieren, die nur in der Funktion erreichbar sind. Das return Statement kann dazu benutzt werden, um jederzeit einen Rückgabewert festzulegen und die Funktion zu beenden. Wird kein return-Statement angegeben (oder ein leeres return-Statement ohne Wert), gibt JavaScript undefined zurück.

+ +

Die benannten Parameter sind eher als Richtlinie zu verstehen, weniger als eine Pflichtangabe. Eine Funktion kann also auch ohne Angabe der Parameter aufgerufen werden, wobei die Parameter dann den Wert undefined bekommen.

+ +
add() //NaN
+// Addition mit undefined ist nicht möglich
+
+ +

Mann kann der Funktion auch mehr Parameter übergeben, als erwartet werden:

+ +
add(2, 3, 4) // 5
+// Addition der ersten beiden Parameter; 4 wird ignoriert
+
+ +

Auf den ersten Blick wirkt das komisch, jedoch haben Funktionen innerhalb des Funktionsrumpfes Zugriff auf eine zusätzliche Variable namens arguments, welche ein arrayähnliches Objekt ist, das alle der Funktion übergebenen Werte enthält. Hier eine überarbeitete add-Funktion, die beliebig viele Parameter verarbeitet:

+ +
function add() {
+    var sum = 0;
+    for (var i = 0, j = arguments.length; i < j; i++) {
+        sum += arguments[i];
+    }
+    return sum;
+}
+
+add(2, 3, 4, 5); // 14
+
+ +

Das ist jedoch nicht nützlicher als 2 + 3 + 4 + 5 zu schreiben. Deswegen erstellen wir eine Funktion, welche den Durchschnitt aller Werte in unserem Array berechnet:

+ +
function avg() {
+  var sum = 0;
+  for (var i = 0, j = arguments.length; i < j; i++) {
+    sum += arguments[i];
+  }
+  return sum / arguments.length;
+}
+
+avg(2, 3, 4, 5); // 3.5
+ +

Das ist wirklich nützlich, jedoch wirkt es noch ein bisschen lang. Um den Code ein wenig zu reduzieren, kann man den Einsatz des arguments-Arrays durch eine Rest Parameter Syntax ersetzen. Damit können beliebig viele Argumente übergeben werden und der Code bleibt minimal. Der Rest Parameter Operator wird in der Funktionsparameterliste mit dem Format ...variable geschrieben und enthält alle nicht benannten, der Funktion übergebenen Argumente in der Variable. Zudem kann man die for-Schleife durch eine for...of-Schleife ersetzen, um die Werte in der Variablen direkt verwenden zu können.

+ +
function avg(...args) {
+  var sum = 0;
+  for (let value of args) {
+    sum += value;
+  }
+  return sum / args.length;
+}
+
+avg(2, 3, 4, 5); // 3.5
+ +
+

Die Variable args in der oberen Funktion enthält alle an die Funktion übergebenen Werte.

+ +

Es ist wichtig zu beachten, dass der Einsatz des Rest Parameter Operators in einer Funktionsdeklaration alle Argumente nach der Deklaration enthält, jedoch nicht die davor. Z. B. wird bei function avg(firstValue, ...args) der erste der Funktion übergebene Wert in der Variable firstValue gespeichert und alle folgenden Werte werden in der Variable args gespeichert. Das ist eine sehr nützliche Sprachfunktion, die jedoch ein neues Problem aufwirft. Die Funktion avg() nimmt eine mit Kommata getrennte Liste von Argumenten entgegen — was ist jedoch, wenn man den Durchschnitt eines Arrays haben möchte? Man kann die Funktion folgendermaßen umschreiben:

+
+ +
function avgArray(arr) {
+  var sum = 0;
+  for (var i = 0, j =  arr.length; i < j; i++) {
+    sum += arr[i];
+  }
+  return sum / arr.length;
+}
+
+avgArray([2, 3, 4, 5]); // 3.5
+ +

Es wäre jedoch schöner, wenn man die erste Funktion wiederverwenden könnten. Glücklicherweise ist es bei JavaScript möglich, eine Funktion mit einem Array von Argumenten aufzurufen, indem man die Methode apply() benutzt, die alle Function-Objekte besitzen:

+ +
avg.apply(null, [2, 3, 4, 5]); // 3.5
+ +

Das zweite Argument der apply()-Funktion ist das Array mit den Argumenten; das erste Argument wird später bzw. weiter unten näher erklärt. Das betont noch einmal die Tatsache, dass Funktionen auch Objekte sind.

+ +
+

Man kann das gleiche Ergebnis mit dem Einsatz des Spread operator im Funktionsaufruf erreichen.

+ +

Zum Beispiel: avg(...numbers);

+
+ +

JavaScript erlaubt es, anonyme Funktionen zu erstellen:

+ +
var avg = function() {
+    var sum = 0;
+    for (var i = 0, j = arguments.length; i < j; i++) {
+        sum += arguments[i];
+    }
+    return sum / arguments.length;
+}
+
+ +

Die Semantik ist äquivalent zu function avg() Form. Es ist extrem mächtig, weil es erlaubt, an bestimmten Stellen vollständige Funktionsdefinition zu schreiben, wo normalerweise ein Ausdruck verwendet wird. Das ermöglicht allerlei klevere Tricks. Hier eine Möglichkeit, eine Variable zu verbergen — wie Variablen mit Blocksichtbarkeit in C:

+ +
var a = 1;
+var b = 2;
+
+(function() {
+  var b = 3;
+  a += b;
+})();
+
+a; // 4
+b; // 2
+ +

JavaScript erlaubt den rekursiven Aufruf von Funktionen. Das ist praktisch beim Verarbeiten von Baumstrukturen, wie es beim Browser-DOM der Fall ist.

+ +
function countChars(elm) {
+    if (elm.nodeType == 3) { // TEXT_NODE
+        return elm.nodeValue.length;
+    }
+    var count = 0;
+    for (var i = 0, child; child = elm.childNodes[i]; i++) {
+        count += countChars(child);
+    }
+    return count;
+}
+
+ +

Das hebt ein potentielles Problem mit anonymen Funktionen hervor: Wie ruft man sie rekursiv auf, wenn sie keinen Namen haben? JavaScript erlaubt hierfür die Benennung von Funktionsausdrücken. Man kann dazu benannte "IIFEs" (Immediately Invoked Function Expressions) wie unten beschrieben benutzen:

+ +
var charsInBody = (function counter(elm) {
+    if (elm.nodeType == 3) { // TEXT_NODE
+        return elm.nodeValue.length;
+    }
+    var count = 0;
+    for (var i = 0, child; child = elm.childNodes[i]; i++) {
+        count += counter(child);
+    }
+    return count;
+})(document.body);
+
+ +

Der angegebene Name im Funktionsausdruck ist nur innerhalb der selben Funktion verfügbar. Das erlaubt der JavaScript-Engine, den Code besser zu optimieren und fördert die Lesbarkeit des Codes. Der Name wird zudem im Debugger und einigen Stack Traces angezeigt, was beim Debuggen viel Zeit sparen kann.

+ +

Zu beachten ist auch hier wieder, dass JavaScript-Funktionen ebenfalls Objekte sind — wie alles andere in JavaScript. Und man kann Eigenschaften ändern und hinzufügen, wie es im oberen Abschnitt über Objekte bereits gezeigt wurde.

+ +

Benutzerdefinierte Objekte

+ +
Detaillierte Informationen zum objektorientiertem Programmieren in JavaScript finden Sie in der Einführung zu objektorientiertem Programmieren in JavaScript.
+ +

In klassischen objektorientierten Programmiersprachen sind Objekte Zusammenstellungen von Daten und Methoden, die mit den Daten arbeiten. JavaScript ist eine Prototypenbasierte Sprache, die anders als in Java oder C++ kein Klassen-Statement besitzt (was manchmal verwirrend für Programmierer ist, die bisher nur mit Sprachen mit Klassen-Statements gearbeitet haben). Stattdessen benutzt JavaScript Funktionen als Klassen. Angenommen es gibt ein Objekt person mit Feldern für Vor- und Nachnamen. Es gibt zwei Wege den Namen zu schreiben: als "Vorname Nachname" oder "Nachname, Vorname". Nutzt man die vorher beschriebenen Funktionen und Objekte, lässt sich dies z. B. so umsetzen:

+ +
function makePerson(first, last) {
+  return {
+    first: first,
+    last: last
+  };
+}
+function personFullName(person) {
+  return person.first + ' ' + person.last;
+}
+function personFullNameReversed(person) {
+  return person.last + ', ' + person.first;
+}
+
+s = makePerson("Simon", "Willison");
+personFullName(s); // "Simon Willison"
+personFullNameReversed(s); // "Willison, Simon"
+ +

Das funktioniert zwar, ist aber keine schöne Lösung. Man hat am Ende dutzende unnötiger Funktionen im globalen Namensraum. Was man braucht ist die Möglichkeit, eine Funktion an ein Objekt anzuhängen. Weil Funktionen Objekte sind, lässt sich dies einfach realisieren:

+ +
function makePerson(first, last) {
+  return {
+    first: first,
+    last: last,
+    fullName: function() {
+      return this.first + ' ' + this.last;
+    },
+    fullNameReversed: function() {
+      return this.last + ', ' + this.first;
+    }
+  };
+}
+
+s = makePerson("Simon", "Willison")
+s.fullName(); // "Simon Willison"
+s.fullNameReversed(); // "Willison, Simon"
+ +

Hier sehen Sie etwas, was vorher noch nicht eingesetzt wurde: Das this-Schlüsselwort. Wird es innerhalb einer Funktion benutzt, verweist this auf das aktuelle Objekt. Was das tatsächlich bedeutet, hängt davon ab, wie die Funktion aufgerufen wird. Wenn die Funktion mit der Punkt- oder Klammer-Notation auf einem Objekt aufgerufen wird, repräsentiert this dieses Objekt. Wird die Punkt-Notation nicht verwendet, dann verweist this auf das globale Objekt.

+ +

Zu beachten ist, dass this ein häufiger Grund für Fehler ist. Zum Beispiel:

+ +
s = makePerson("Simon", "Willison");
+var fullName = s.fullName;
+fullName(); // undefined undefined
+ +

Wenn fullName() alleine und ohne den Einsatz von s.fullName() aufgerufen wird, referenziert this das globale Objekt. Dort gibt es keine globalen Variablen first oder last, weshalb man als Rückgabewert undefined erhält.

+ +

Man kann Vorteile des this-Schlüsselwortes nutzen, um die makePerson-Funktion zu optimieren:

+ +
function Person(first, last) {
+    this.first = first;
+    this.last = last;
+    this.fullName = function() {
+        return this.first + ' ' + this.last;
+    }
+    this.fullNameReversed = function() {
+        return this.last + ', ' + this.first;
+    }
+}
+var s = new Person("Simon", "Willison");
+
+ +

Hier wird ein neues Schlüsselwort aufgeführt: new. new steht in starker Beziehung zu this. Es erstellt ein neues Objekt und ruft die nachstehende Funktion auf, wobei this dann das neue Objekt ist. Zu beachten ist, dass die Funktion keinen Wert zurückgibt, sondern das this-Objekt modifiziert. Das new gibt dann das this-Objekt an den Aufrufer zurück. Funktionen die für den Aufruf mit new konzipiert sind, nennt man Konstruktoren. Gängige Praxis ist es, diese Funktionen mit einem großen Anfangsbuchstaben zu versehen, um an den Einsatz von new zu erinnern.

+ +

Die nun optimiertere Funktion hat jedoch immernoch eine Fehlerquelle mit dem Aufruf von fullName().

+ +

Das person-Objekt wird besser, weist jedoch noch immer einige unangenehme Effekte auf: Bei jedem Erstellen eines person-Objekts werden zwei neue Funktionen erzeugt — wäre es nicht besser, wenn dieser Code wiederverwendet werden könnte?

+ +
function personFullName() {
+    return this.first + ' ' + this.last;
+}
+function personFullNameReversed() {
+    return this.last + ', ' + this.first;
+}
+function Person(first, last) {
+    this.first = first;
+    this.last = last;
+    this.fullName = personFullName;
+    this.fullNameReversed = personFullNameReversed;
+}
+
+
+ +

Das ist besser: Man erstellt die Methodenfunktionen nur einmal und referenziert zu diesen im Konstruktor. Geht das noch besser? Die Antwort ist auch hier wieder ja:

+ +
function Person(first, last) {
+  this.first = first;
+  this.last = last;
+}
+Person.prototype.fullName = function() {
+  return this.first + ' ' + this.last;
+}
+Person.prototype.fullNameReversed = function() {
+  return this.last + ', ' + this.first;
+}
+ +

Person.prototype ist ein Objekt, das sich alle Person-Instanzen teilen. Dies ist ein Teil einer Prototypen-Suchkette (mit dem speziellen Namen Prototypenkette (prototype chain)): Bei jedem Versuch, auf eine Eigenschaft von Person zuzugreifen, die nicht gesetzt ist, prüft JavaScript ob diese Eigenschaft stattdessen in Person.prototype vorhanden ist. Als Ergebnis wird alles in Person.prototype für alle Instanzen eines Konstruktors über this verfügbar.

+ +

Das ist ein unglaublich mächtiges Werkzeug. JavaScript erlaubt es Prototypen irgendwo innerhalb des Programmes zu verändern, was bedeutet, dass man Methoden zur Laufzeit zu existierenden Objekten hinzufügen kann:

+ +
s = new Person("Simon", "Willison");
+s.firstNameCaps(); // TypeError on line 1: s.firstNameCaps is not a function
+
+Person.prototype.firstNameCaps = function firstNameCaps() {
+  return this.first.toUpperCase()
+};
+s.firstNameCaps(); // "SIMON"
+ +

Interessanterweise können auch neue Eigenschaften zu Prototypen von JavaScript-Objekten hinzugefügt werden. So kann z. B. dem String-Objekt eine neue Methode hinzugefügt werden, welche den String in umgekehrter Reihenfolge zurückgibt:

+ +
var s = "Simon";
+s.reversed(); // TypeError on line 1: s.reversed is not a function
+
+String.prototype.reversed = function reversed() {
+  var r = "";
+  for (var i = this.length - 1; i >= 0; i--) {
+    r += this[i];
+  }
+  return r;
+};
+
+s.reversed(); // nomiS
+ +

Die neue Methode funktioniert sogar mit String-Literalen!

+ +
"This can now be reversed".reversed(); // desrever eb won nac sihT
+ +

Wie schon vorher erwähnt, ist der Prototyp ein Teil einer Kette. Der Anfang dieser Kette ist Object.prototype, welcher die Methode toString() enthält — das ist die Methode die aufgerufen wird, wenn ein Objekt als String repräsentiert werden soll. Das ist für das Debuggen des Person-Objekts nützlich:

+ +
var s = new Person("Simon", "Willison");
+s; // [object Object]
+
+Person.prototype.toString = function() {
+  return '<Person: ' + this.fullName() + '>';
+};
+
+s.toString(); // "<Person: Simon Willison>"
+ +

Erinnern Sie sich an die Stelle weiter oben, als avg.apply() als erstes Argument null übergeben bekommen hat? Diese Stelle können wir uns zur genaueren Betrachtung wieder heranziehen. Mit diesem ersten übergebenen Argument von apply() wird das Objekt festgelegt, welches this repräsentiert. Hier ist z. B. eine einfache Implementierung von new:

+ +
function trivialNew(constructor, ...args) {
+  var o = {}; // Create an object
+  constructor.apply(o, args);
+  return o;
+}
+ +

Das ist keine exakte Replikation von new, weil die Prototypenkette nicht angelegt wird (es wäre schwer, hier vollständig darzustellen). Das ist nichts, was man häufig benötigt, jedoch ist es nützlich darüber Bescheid zu wissen. In diesem Codeteil nennt man ...args (mit den Punkten) das sogenannte Restargument — wie der Name impliziert, enthält dieser alle restlichen Argumente.

+ +

Der Aufruf von

+ +
var bill = trivialNew(Person, "William", "Orange");
+ +

ist somit fast äquivalent zu

+ +
var bill = new Person("William", "Orange");
+ +

apply() hat eine Schwesterfunktion namens call, die ebenfalls das Setzen von this erlaubt, jedoch statt eines Arrays nimmt sie eine erweiterte Liste mit Argumenten entgegen.

+ +
function lastNameCaps() {
+  return this.last.toUpperCase();
+}
+var s = new Person("Simon", "Willison");
+lastNameCaps.call(s);
+// Das gleiche wie:
+s.lastNameCaps = lastNameCaps;
+s.lastNameCaps();
+ +

Innere Funktionen

+ +

Funktionsdeklarationen sind in JavaScript auch innerhalb von Funktionen erlaubt. Das lies sich bei der weiter oben verwendeten makePerson()-Funktion schon erkennen. Ein wichtige Eigenschaft von verschachtelten Funktionen in JavaScript ist der Zugriff auf Variablen aus der Elternfunktion:

+ +
function betterExampleNeeded() {
+    var a = 1;
+    function oneMoreThanA() {
+        return a + 1;
+    }
+    return oneMoreThanA();
+}
+
+ +

Dies bietet einen großen Nutzen beim Schreiben von einfacher wartbarem Code. Wenn eine Funktion ein oder zwei andere Funktionen benutzt, diese aber im Code nirgendwo anders benötigt werden, kann man diese Hilfsfunktionen in die Funktion schachteln, die diese schlussendlich eigentlich aufruft. Das hällt die Anzahl der globalen Funktionen niedrig, was immer gut ist.

+ +

Dieses ist ein Gegenpool zum oft verlockenden Einsatz von globalen Variablen. Wenn komplexer Code geschrieben wird, ist es oft verlockend und einfach, globale Variablen für das Teilen von Werten zwischen mehreren Funktionen zu benutzen — was aber zu einem unwartbaren Code führen kann. Geschachtelte Funktionen teilen sich Variablen aus der Elternfunktion, weshalb dieser Mechanismus gut für das Koppeln von Funktionen geeignet ist, wenn es Sinn ergibt, ohne dabei den globalen Namensraum zu verunreinigen — "lokal global" wenn man so will. Diese Technik sollte mit Vorsicht eingesetzt werden, ist jedoch eine nützliche Möglichkeit.

+ +

Closures

+ +

Nun wird einer der mächtigsten Abstraktionsmechanismen vorgestellt, den JavaScript mit sich bringt —  der jedoch oft auch für Verwirrung sorgt. Was passiert im nachfolgenden Codeschnipsel?

+ +
function makeAdder(a) {
+  return function(b) {
+    return a + b;
+  };
+}
+var x = makeAdder(5);
+var y = makeAdder(20);
+x(6); // ?
+y(7); // ?
+ +

Der Name der makeAdder-Funktion lässt es schon vermuten, was diese bewirken soll: sie erstellt neue adder-Funktionen, welche dann mit einem Argument aufgerufen werden, welches zu dem Argument addiert wird, mit dem sie erstellt wurden.

+ +

Was hier passiert ist das gleiche wie das, was vorab mit den inneren Funktionen geschehen ist: eine Funktion, die in einer anderen Funktion definiert ist, hat Zugriff auf die Variable der äußeren Funktion. Hier jedoch mit dem Unterschied, dass die äußere Funktion etwas zurückgibt und vortäuscht, dass die lokalen Variablen nicht mehr existieren. Doch bleiben diese bestehen — andernfalls könnte die adder-Funktion nicht funktionieren. Außerdem gibt es zwei verschiedene Kopien der lokalen Variablen der makeAdder()-Funktion — eine, wo a den Wert 5 hat und eine wo a den Wert 20 hat. Die Ergebnisse der beiden Funktionsaufrufe ist deswegen folgendes:

+ +
x(6) // ergibt 11
+y(7) // ergibt 27
+
+ +

Hier ist, was tatsächlich passiert. Immer, wenn JavaScript eine Funktion ausführt, wird ein Scopeobjekt erstellt, welches die lokalen Variablen enthält, die in der Funktion erstellt werden. Es wird mit jeder Variablen initialisiert, die als Funktionsparameter übergeben wird. Das ist wie mit dem globalen Objekt, welches alle globalen Variablen und Funktionen in sich vorhält, jedoch mit einigen wichtigen Unterschieden: erstens wird immer ein neues Scopeobjekt für jeden Aufruf einer Funktion erstellt und zweitens (anders als bei globalen Objekten, welche als this und in Browsern als window erreichbar sind), sind diese Scopeobjekte nicht direkt im JavaScript Code erreichbar. Es gibt zum Beispiel keinen Mechanismus zum Iterieren aller Eigenschaften eines Scopeobjekts.

+ +

Beim Aufruf der makeAdder()-Funktion wird ein Scope-Objekt erstellt, das eine Eigenschaft besitzt: a, welche das übergebene Argument der makeAdder() Funktion ist. makeAdder() gibt dann eine neu erstellte Funktion zurück. Normalerweise würde der Garbage Collector von JavaScript das für makeAdder() erstellte Scopeobjekt an dieser Stelle entsorgen, doch die zurückgegebene Funktion enthält noch immer eine Referenz auf das Scopeobjekt. Als Resultat wird das Scopeobjekt nicht entsorgt, bis es keine Referenzen mehr auf die von makeAdder() zurückgegebene Funktion gibt.

+ +

Scopeobjekte bilden eine Scopekette, die ähnlich funktioniert wie die Prototypenkette von JavaScripts Objektsystem.

+ +

Eine Closure ist eine Kombination aus einer Funktion und dem Scopeobjekt, in dem die Funktion erstellt wurde. Closures sind in der Lage, einen Status zu speichern — als solches können sie oft an Stellen von Objekten eingesetzt werden. Hier sind einige gute Einführungen zu Closures zu finden.

diff --git "a/files/de/web/javascript/aufz\303\244hlbarkeit_und_zugeh\303\266rigkeit_von_eigenschaften/index.html" "b/files/de/web/javascript/aufz\303\244hlbarkeit_und_zugeh\303\266rigkeit_von_eigenschaften/index.html" deleted file mode 100644 index 70c769be5a..0000000000 --- "a/files/de/web/javascript/aufz\303\244hlbarkeit_und_zugeh\303\266rigkeit_von_eigenschaften/index.html" +++ /dev/null @@ -1,340 +0,0 @@ ---- -title: Aufzählbarkeit und Zugehörigkeit von Eigenschaften -slug: Web/JavaScript/Aufzählbarkeit_und_Zugehörigkeit_von_Eigenschaften -tags: - - Eigenschaft - - JavaScript - - Objekt - - enumerable -translation_of: Web/JavaScript/Enumerability_and_ownership_of_properties ---- -
{{JsSidebar("More")}}
- -

Aufzählbare Eigenschaften sind jene, deren internes Statusfeld enumerable gesetzt ist.

- -

Alle aufzählbaren Eigenschaften eines Objektes sind mit for...in-Schleifen zu durchlaufen (sofern der Name der Eigenschaft kein Symbol ist), daher die Bezeichnung „aufzählbar“.
- Neben for…in gibt es weitere Möglichkeiten, die Existenz einer Eigenschaft zu erkennen, Eigenschaften aufzuzählen oder abzurufen. Siehe dazu nachfolgende Tabellen.

- -

Standardmäßig aufzählbar sind Eigenschaften, die durch einfache Zuweisung oder Initialisierung entstanden sind, nicht jedoch Eigenschaften, die durch Object.defineProperty oder ähnliche Mechanismen erzeugt wurden.

- -

Die Zugehörigkeit einer Eigenschaft ergibt sich aus dem Ort seiner Definition; dies ist entweder das Objekt selbst oder einer seiner Prototypen. Eine Eigenschaft, die im Objekt definiert wurde, gehört zu diesem Objekt.

- -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Aufzählbarkeit und Zugehörigkeit – Eingebaute Methoden zur Erkennung, zum Abruf und zur Aufzählung
FunktionObjektObjekt und geerbt aus Prototypenkettenur geerbt aus Prototypenkette
Erkennung - - - - - - - - - - - - - - - -
aufzählbarnicht aufzählbaraufzählbar und nicht aufzählbar
-

propertyIsEnumerable

- -

hasOwnProperty

-
-

hasOwnProperty – aufzählbare Eigenschaften mit propertyIsEnumerable entfernt

-
hasOwnProperty
-
- - - - - - - - - - - - - - - -
aufzählbarnicht aufzählbaraufzählbar und nicht aufzählbar
nur mit eigenem Code möglichnur mit eigenem Code möglichin
-
nur mit eigenem Code möglich
Abruf - - - - - - - - - - - - - - - -
aufzählbarnicht aufzählbaraufzählbar und nicht aufzählbar
-

Object.keys

- -

getOwnPropertyNames 

- -

getOwnPropertySymbols

-
getOwnPropertyNames, getOwnPropertySymbols – aufzählbare Eigenschaften mit propertyIsEnumerable entfernt -

getOwnPropertyNames

- -

getOwnPropertySymbols

-
-
nur mit eigenem Code möglichnur mit eigenem Code möglich
Aufzählung - - - - - - - - - - - - - - - -
aufzählbarnicht aufzählbaraufzählbar und nicht aufzählbar
-

Object.keys

- -

getOwnPropertyNames 

- -

getOwnPropertySymbols

-
getOwnPropertyNames, getOwnPropertySymbols – aufzählbare Eigenschaften mit propertyIsEnumerable entfernt -

getOwnPropertyNames

- -

getOwnPropertySymbols

-
-
- - - - - - - - - - - - - - - -
aufzählbarnicht aufzählbaraufzählbar und nicht aufzählbar
-

for..in

- -

(ohne Symbole)

-
nur mit eigenem Code möglichnur mit eigenem Code möglich
-
nur mit eigenem Code möglich
-
- -

Sichtbarkeit von Eigenschaften

- -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
infor..inobj.hasOwnPropertyobj.propertyIsEnumerableObject.keysObject.getOwnPropertyNamesObject.getOwnPropertyDescriptorsReflect.ownKeys()
Aufzählbarjajajajajajajaja
Nicht aufzählbarjaneinjaneinneinjajaja
Symbol als Namejaneinjajaneinneinjaja
Aufzählbar, geerbtjajaneinneinneinneinneinnein
Nicht aufzählbar, geerbtjaneinneinneinneinneinneinnein
Symbol als Name, geerbtjaneinneinneinneinneinneinnein
-
- -

Eigenschaften nach Aufzählbarkeit oder Zugehörigkeit abrufen

- -

Der nachfolgende Code ist nicht immer der effizienteste Weg, aber als einfaches Beispiel gut geeignet.

- - - -
var SimplePropertyRetriever = {
-    getOwnEnumerables: function(obj) {
-        return this._getPropertyNames(obj, true, false, this._enumerable);
-         // Or could use for..in filtered with hasOwnProperty or just this: return Object.keys(obj);
-    },
-    getOwnNonenumerables: function(obj) {
-        return this._getPropertyNames(obj, true, false, this._notEnumerable);
-    },
-    getOwnEnumerablesAndNonenumerables: function(obj) {
-        return this._getPropertyNames(obj, true, false, this._enumerableAndNotEnumerable);
-        // Or just use: return Object.getOwnPropertyNames(obj);
-    },
-    getPrototypeEnumerables: function(obj) {
-        return this._getPropertyNames(obj, false, true, this._enumerable);
-    },
-    getPrototypeNonenumerables: function(obj) {
-        return this._getPropertyNames(obj, false, true, this._notEnumerable);
-    },
-    getPrototypeEnumerablesAndNonenumerables: function(obj) {
-        return this._getPropertyNames(obj, false, true, this._enumerableAndNotEnumerable);
-    },
-    getOwnAndPrototypeEnumerables: function(obj) {
-        return this._getPropertyNames(obj, true, true, this._enumerable);
-        // Or could use unfiltered for..in
-    },
-    getOwnAndPrototypeNonenumerables: function(obj) {
-        return this._getPropertyNames(obj, true, true, this._notEnumerable);
-    },
-    getOwnAndPrototypeEnumerablesAndNonenumerables: function(obj) {
-        return this._getPropertyNames(obj, true, true, this._enumerableAndNotEnumerable);
-    },
-    // Private static property checker callbacks
-    _enumerable: function(obj, prop) {
-        return obj.propertyIsEnumerable(prop);
-    },
-    _notEnumerable: function(obj, prop) {
-        return !obj.propertyIsEnumerable(prop);
-    },
-    _enumerableAndNotEnumerable: function(obj, prop) {
-        return true;
-    },
-    // Inspired by http://stackoverflow.com/a/8024294/271577
-    _getPropertyNames: function getAllPropertyNames(obj, iterateSelfBool, iteratePrototypeBool, includePropCb) {
-        var props = [];
-
-        do {
-            if (iterateSelfBool) {
-                Object.getOwnPropertyNames(obj).forEach(function(prop) {
-                    if (props.indexOf(prop) === -1 && includePropCb(obj, prop)) {
-                        props.push(prop);
-                    }
-                });
-            }
-            if (!iteratePrototypeBool) {
-                break;
-            }
-            iterateSelfBool = true;
-        } while (obj = Object.getPrototypeOf(obj));
-
-        return props;
-    }
-};
- -

Siehe auch

- - diff --git a/files/de/web/javascript/data_structures/index.html b/files/de/web/javascript/data_structures/index.html new file mode 100644 index 0000000000..d918cd7a0e --- /dev/null +++ b/files/de/web/javascript/data_structures/index.html @@ -0,0 +1,271 @@ +--- +title: JavaScript Datentypen und Datenstrukturen +slug: Web/JavaScript/Datenstrukturen +tags: + - Beginner + - JavaScript + - Types +translation_of: Web/JavaScript/Data_structures +--- +
{{jsSidebar("More")}}
+ +

Alle Programmiersprachen besitzen eingebaute Datenstrukturen. Diese unterschieden sich aber je nach Programmiersprache. Dieser Artikel versucht, die in JavaScript verfügbaren Datenstrukturen und ihre Eigenschaften zu erläutern. Außerdem werden an passenden Stellen Vergleiche zu anderen Programmiersprachen gezogen.

+ +

Dynamische Typisierung

+ +

JavaScript ist eine schwach typisierte oder dynamische Programmiersprache. Datentypen werden bei einer Variable nicht explizit deklariert und jede Variable kann mit Werten jedes Typen beschrieben (überschrieben) werden:

+ +
var foo = 42;    // foo ist jetzt eine number
+var foo = "bar"; // foo ist jetzt ein string
+var foo = true;  // foo ist jetzt ein boolean
+
+ +

Datentypen

+ +

Der aktuelle ECMAScript Standard definiert sieben Datentypen:

+ + + +

Primitive Werte

+ +

Alle Datentypen, bis auf Object, definieren unveränderbare Werte (Werte, die nicht verändert werden können). Zum Beispiel im Gegensatz zu C sind Strings unveränderbar. Die Werte dieser Datentypen werden als "primitive Werte" bezeichnet.

+ +

Boolean Datentyp

+ +

Boolean repräsentiert eine logische Einheit und kann zwei Werte annehmen: true und false.

+ +

Null Datentyp

+ +

Der Null Typ hat genau einen Wert: null. Siehe {{jsxref("null")}} und {{Glossary("Null")}} für mehr Details.

+ +

Undefined Datentyp

+ +

Eine Variable, der noch kein Wert zugewiesen wurde, hat den Wert undefined. Siehe {{jsxref("undefined")}} und {{Glossary("Undefined")}} für mehr Details.

+ +

Number Datentyp

+ +

Laut dem ECMAScript Standard gibt es nur einen Datentyp für Zahlen: double-precision 64-bit binary format IEEE 754 value (Zahlen zwischen -(263) und +263-1). Es gibt keinen spezifischen Datentyp für Ganzzahlen. Neben Gleitkommazahlen kann der Datentyp für Zahlen auch drei symbolische Werte annehmen: +Infinity, -Infinity und NaN (not-a-number = keine Zahl).

+ +

Um auf größere oder kleinere Werte als +/-Infinity zu prüfen, können die Konstanten {{jsxref("Number.MAX_VALUE")}} oder {{jsxref("Number.MIN_VALUE")}} verwendet werden. Ab ECMAScript 2015 kann auch geprüft werden, ob sich eine Zahl innerhalb des Bereichs der Gleitkommazahlen mit doppelter Präzision befindet. Die ist mit {{jsxref("Number.isSafeInteger()")}} als auch {{jsxref("Number.MAX_SAFE_INTEGER")}} und {{jsxref("Number.MIN_SAFE_INTEGER")}} möglich. Zahlen außerhalb diesen Bereichs sind in JavaScript nicht mehr sicher.

+ +

Der Datentyp für Zahlen hat eine Ganzzahl mit zwei Repräsentationen: 0 kann als -0 und +0 repräsentiert werden. ("0" ist ein Alias für +0). In der Praxis hat dies fast keinen Einfluss. +0 === -0 ist zum Beispiel true. Eine Division ergibt aber zwei unterschiedliche Werte:

+ +
> 42 / +0
+Infinity
+> 42 / -0
+-Infinity
+
+ +

Obwohl eine Zahl oft ihren Wert repräsentiert, bietet JavaScript einige binäre Operatoren an. Mit ihnen können zum Beispiel mehrere Boolean Werte innerhalb einer einzigen Zahl mittels Bitmaskierung repräsentiert werden. Das gilt generell als schlechte Praxis, da JavaScript andere Wege anbietet, um eine Menge von Booleans zu repräsentierten (wie zum Beispiel ein Array von Booleans oder ein Objekt mit Boolean Werten als benannte Eigenschaften). Bitmaskierung führt außerdem dazu, dass Code schwerer zu lesen, zu verstehen und zu warten ist. In sehr speziellen Anwendungsgebiete kann eine Bitmaskierung aber notwendig sein. Zum Beispiel wenn nur geringe Speichermengen verfügbar sind oder in extremen Fällen, wenn jedes übertragene Bit im Netzwerk zählt. Diese Technik sollte aber als letzter Ausweg gesehen werden, um die Größe zu optimieren.

+ +

String Datentyp

+ +

Der Datentyp String wird in JavaScript für die Repräsentation von textuellen Daten verwendet. Er ist eine Menge von "Elementen" aus 16-Bit vorzeichenlosen Ganzzahlenwerten. Jedes Element im String nimmt eine Position im String ein. Das erste Element befindet sich an der Position mit dem Index 0, das nächste beim Index 1 und so weiter. Die Länge eines String ist die Anzahl der sich darin befindenden Elemente.

+ +

In Gegensatz zu anderen Programmiersprachen wie C kann ein String in JavaScript nicht verändert werden. Das bedeutet, dass ein String nicht mehr verändert werden kann, nachdem er erstellt wurde. Es ist aber möglich einen anderen String mit der Hilfe von Operationen aus dem ursprünglichen String zu erstellen:

+ + + +

Vermeiden Sie "stringly-typing" in Ihrem Code!

+ +

Es kann verlockend sein mit String komplexe Daten zu repräsentieren. Es bringt kurzfristige Vorteile mit sich:

+ + + +

Ohne Konventionen kann jede Datenstruktur als String repräsentiert werden. Das ist aber keine gute Idee. Es könnte zum Beispiel eine Liste emuliert werden, indem die Listenelemente im String durch einen Separator getrennt werden. In diesem Fall ist ein JavaScript Array aber geeigneter, denn die Liste kann zerstört werden sobald ein Listenelement den Separator enthält. Ein Escape-Zeichen oder Ähnliches müsste verwendet werden. Dafür sind aber zusätzliche Konventionen nötig und die Wartung des Codes nimmt an Komplexität zu.

+ +

Strings sollten nur für textuelle Daten verwendet werden. Wenn komplexe Daten repräsentiert werden sollen, parsen Sie den String und verwenden Sie eine geeignete Abstraktion.

+ +

Symbol Datentyp

+ +

Symbole in JavaScript sind mit ECMAScript 2015 eingeführt worden. Ein Symbol ist ein eindeutiger und unveränderbarer primitiver Wert. Er kann als Schlüssel einer Eigenschaft eines Objekts (siehe unten) verwendet werden. In manchen Programmiersprachen werden Symbole auch Atoms genannt. Details dazu sind unter {{Glossary("Symbol")}} und dem {{jsxref("Symbol")}} Object Wrapper in JavaScript zu finden.

+ +

Objekte

+ +

Objekte sind in der Informatik Werte im Speicher, die möglicherweise über einen {{Glossary("Identifier", "identifier")}} referenziert werden.

+ +

Eigenschaften

+ +

In JavaScript können Objekte als eine Sammlung von Eigenschaften (Properties) angesehen werden. Mit der Object Literal Syntax werden die nötigsten Eigenschaften initialisiert. Danach können Eigenschaften hinzugefügt oder wieder entfernt werden. Der Wert einer Eigenschaft kann von jedem Datentyp sein. Darunter können sich auch andere Objekte befinden. Dadurch können komplexe Datenstrukturen realisiert werden. Eigenschaften werden mit einem Key identifiziert. Ein Key ist entweder ein String oder ein Symbol.

+ +

Es gibt zwei Arten von Eigenschaften, die bestimmte Attribute haben: Die Dateneigenachften und Zugriffseigenschaften.

+ +

Dateneigenschaften

+ +

Assoziiert einen Key mit einem Wert und besitzt die folgenden Attribute:

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Attribute einer Dateneigenschaft
AttributDatentypBeschreibungStandardwert
[[Value]]beliebiger JavaScript DatentypDer Wert, der bei einem Get-Zugriff auf die Eigenschaft zurückgegeben wirdundefined
[[Writable]]Booleanfalse, wenn [[Value]] der Eigenschaft nicht verändert werden kann.false
[[Enumerable]]Booleantrue, wenn die Eigenschaft in for...in Schleifen aufgelistet wird. Siehe dazu auch Aufzählbarkeit und Eigentum von Eigenschaften.false
[[Configurable]]Booleanfalse, wenn die Eigenschaft nicht gelöscht und die Attribute [[Value]] und [[Writable]] nicht verändert werden können.false
+ +

Zugriffseigenschaften

+ +

Assoziiert einen Key mit einer oder zwei Accessor-Funktionen (get und set), um einen Wert zu erhalten oder zu speichern. Es besitzt die folgenden Attribute:

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Attribute eines Zugriffseigenschaft
AttributDatentypBeschreibungStandardwert
[[Get]]Funktionsobjekt oder undefinedDie Funktion wird ohne ein Argument aufgerufen und gibt den Wert der Eigenschaft zurück, sobald ein Get-Zugriff auf den Wert ausgeführt wird. Siehe auch get.undefined
[[Set]]Funktionsobjekt oder undefinedDie Funktion wird mit einem Argument aufgerufen, das den Wert für die Zuweisung enthält. Sie wird immer aufgerufen, sobald eine bestimmte Eigenschaft verändert werden soll. Siehe auch set.undefined
[[Enumerable]]Booleantrue, wenn die Eigenschaft in for...in Schleifen aufgelistet wird.false
[[Configurable]]Booleanfalse, wenn die Eigenschaft nicht gelöscht und nicht zu einer Dateneigenschaft verändert werden kann.false
+ +
+

Hinweis: Attribut wird normalerweise von der JavaScript-Umgebung genutzt und man kann nicht direkt zugreifen (mehr darüber: Object.defineProperty()). Deswegen sind die Attribute in doppelten eckigen Klammern statt in einfachen.

+
+ +

"Normale" Objekte und Funktionen

+ +

Ein Objekt in JavaScript ist ein Mapping zwischen Keys und Werten. Keys sind Strings oder Symbole und Werte können von jedem Datentyp sein. Dadurch sind Objekte eine Art Hashtabelle.

+ +

Funktionen sind reguläre Objekte mit der Fähigkeit direkt aufgerufen werden zu können.

+ +

Datum

+ +

Mit der in JavaScript eingebauten Date Utility kann ein Datum repräsentiert werden.

+ +

Indizierte Collections: Arrays und typisierte Arrays

+ +

Arrays sind reguläre Objekte bei denen eine Beziehung zwischen Eigenschaften, die über Ganzzahlen indiziert werden, und der Eigenschaft 'length' besteht. Zusätzlich erben Arrays von Array.prototype, einer Helfermethoden, die die Manipulation von Arrays anbietet, wie zum Beispiel indexOf (zur Suche eines Werts im Array) oder push (um Elemente zu einem Array hinzufügen). Dadurch können Listen und Mengen über ein Array repräsentiert werden.

+ +

Typisierte Arrays sind in JavaScript mit ECMAScript Edition 2015 eingeführt worden. Sie bieten eine Array-ähnliche Sicht auf einen darunterliegenden binären Datenpuffer an. Die folgende Tabelle stellt äquivalente C Datentypen dar:

+ +

{{page("/en-US/docs/Web/JavaScript/Reference/Global_Objects/TypedArray", "TypedArray_objects", "", 0, 3)}}

+ +

Keyed Collections: Maps, Sets, WeakMaps, WeakSets

+ +

Diese Datenstrukturen verwenden Objektreferenzen als Keys. Sie wurden mit ECMAScript Edition 6 eingeführt. {{jsxref("Set")}} und {{jsxref("WeakSet")}} repräsentieren eine Menge von Objekten, während {{jsxref("Map")}} und {{jsxref("WeakMap")}} einen Wert mit einem Objekt assoziieren. Der Unterschied zwischen Maps und WeakMaps ist, dass bei Maps über Objekt-Keys iteriert werden kann. Das erlaubt eine spätere Optimierung der Garbage Collection.

+ +

Maps und Sets könnten in reinem ECMAScript 5 implementiert werden. Da Objekte aber nicht verglichen werden können (im Sinne von zum Beispiel "kleiner gleich"), wäre die Performance für einen Look-Up linear. Native Implementierungen (inklusive WeakMaps) können eine ungefähr logarithmische Look-Up Performance haben.

+ +

Um Daten an einen DOM-Knoten zu binden, werden normalerweise die Eigenschaften direkt auf dem Objekt gesetzt oder es werden data-* Attribute verwendet. Das hat aber den Nachteil, dass die Daten für jedes Skript in demselben Kontext verfügbar sind. Mit Maps und WeakMaps können Daten einfach privat an ein Objekt gebunden werden.

+ +

Strukturierte Daten: JSON

+ +

JSON (JavaScript Object Notation) ist ein leichtgewichtges Format zum Datenaustausch, das von JavaScript abgeleitet aber auch von vielen anderen Programmiersprachen verwendet wird. Mit JSON können universelle Datenstrukturen aufgebaut werden. Siehe {{Glossary("JSON")}} und {{jsxref("JSON")}} für mehr Details.

+ +

Mehr Objekte in der Standardbibliothek

+ +

JavaScript hat eine Standardbibliothek mit zahlreichen eingebauten Objekten. Details darüber sind unter Referenz zu finden.

+ +

Datentypen mit dem typeof Operator bestimmen

+ +

Der typeof Operator kann den Datentyp einer Variablen herausfinden. Unter der Referenzseite sind mehr Details und Grenzfälle zu finden.

+ +

Spezifikationen

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpezifikationStatusKommentar
{{SpecName('ES1')}}{{Spec2('ES1')}}initiale Definition
{{SpecName('ES5.1', '#sec-8', 'Types')}}{{Spec2('ES5.1')}} 
{{SpecName('ES2015', '#sec-ecmascript-data-types-and-values', 'ECMAScript Data Types and Values')}}{{Spec2('ES2015')}} 
{{SpecName('ESDraft', '#sec-ecmascript-data-types-and-values', 'ECMAScript Data Types and Values')}}{{Spec2('ESDraft')}} 
+ +

Siehe auch

+ + diff --git a/files/de/web/javascript/datenstrukturen/index.html b/files/de/web/javascript/datenstrukturen/index.html deleted file mode 100644 index d918cd7a0e..0000000000 --- a/files/de/web/javascript/datenstrukturen/index.html +++ /dev/null @@ -1,271 +0,0 @@ ---- -title: JavaScript Datentypen und Datenstrukturen -slug: Web/JavaScript/Datenstrukturen -tags: - - Beginner - - JavaScript - - Types -translation_of: Web/JavaScript/Data_structures ---- -
{{jsSidebar("More")}}
- -

Alle Programmiersprachen besitzen eingebaute Datenstrukturen. Diese unterschieden sich aber je nach Programmiersprache. Dieser Artikel versucht, die in JavaScript verfügbaren Datenstrukturen und ihre Eigenschaften zu erläutern. Außerdem werden an passenden Stellen Vergleiche zu anderen Programmiersprachen gezogen.

- -

Dynamische Typisierung

- -

JavaScript ist eine schwach typisierte oder dynamische Programmiersprache. Datentypen werden bei einer Variable nicht explizit deklariert und jede Variable kann mit Werten jedes Typen beschrieben (überschrieben) werden:

- -
var foo = 42;    // foo ist jetzt eine number
-var foo = "bar"; // foo ist jetzt ein string
-var foo = true;  // foo ist jetzt ein boolean
-
- -

Datentypen

- -

Der aktuelle ECMAScript Standard definiert sieben Datentypen:

- - - -

Primitive Werte

- -

Alle Datentypen, bis auf Object, definieren unveränderbare Werte (Werte, die nicht verändert werden können). Zum Beispiel im Gegensatz zu C sind Strings unveränderbar. Die Werte dieser Datentypen werden als "primitive Werte" bezeichnet.

- -

Boolean Datentyp

- -

Boolean repräsentiert eine logische Einheit und kann zwei Werte annehmen: true und false.

- -

Null Datentyp

- -

Der Null Typ hat genau einen Wert: null. Siehe {{jsxref("null")}} und {{Glossary("Null")}} für mehr Details.

- -

Undefined Datentyp

- -

Eine Variable, der noch kein Wert zugewiesen wurde, hat den Wert undefined. Siehe {{jsxref("undefined")}} und {{Glossary("Undefined")}} für mehr Details.

- -

Number Datentyp

- -

Laut dem ECMAScript Standard gibt es nur einen Datentyp für Zahlen: double-precision 64-bit binary format IEEE 754 value (Zahlen zwischen -(263) und +263-1). Es gibt keinen spezifischen Datentyp für Ganzzahlen. Neben Gleitkommazahlen kann der Datentyp für Zahlen auch drei symbolische Werte annehmen: +Infinity, -Infinity und NaN (not-a-number = keine Zahl).

- -

Um auf größere oder kleinere Werte als +/-Infinity zu prüfen, können die Konstanten {{jsxref("Number.MAX_VALUE")}} oder {{jsxref("Number.MIN_VALUE")}} verwendet werden. Ab ECMAScript 2015 kann auch geprüft werden, ob sich eine Zahl innerhalb des Bereichs der Gleitkommazahlen mit doppelter Präzision befindet. Die ist mit {{jsxref("Number.isSafeInteger()")}} als auch {{jsxref("Number.MAX_SAFE_INTEGER")}} und {{jsxref("Number.MIN_SAFE_INTEGER")}} möglich. Zahlen außerhalb diesen Bereichs sind in JavaScript nicht mehr sicher.

- -

Der Datentyp für Zahlen hat eine Ganzzahl mit zwei Repräsentationen: 0 kann als -0 und +0 repräsentiert werden. ("0" ist ein Alias für +0). In der Praxis hat dies fast keinen Einfluss. +0 === -0 ist zum Beispiel true. Eine Division ergibt aber zwei unterschiedliche Werte:

- -
> 42 / +0
-Infinity
-> 42 / -0
--Infinity
-
- -

Obwohl eine Zahl oft ihren Wert repräsentiert, bietet JavaScript einige binäre Operatoren an. Mit ihnen können zum Beispiel mehrere Boolean Werte innerhalb einer einzigen Zahl mittels Bitmaskierung repräsentiert werden. Das gilt generell als schlechte Praxis, da JavaScript andere Wege anbietet, um eine Menge von Booleans zu repräsentierten (wie zum Beispiel ein Array von Booleans oder ein Objekt mit Boolean Werten als benannte Eigenschaften). Bitmaskierung führt außerdem dazu, dass Code schwerer zu lesen, zu verstehen und zu warten ist. In sehr speziellen Anwendungsgebiete kann eine Bitmaskierung aber notwendig sein. Zum Beispiel wenn nur geringe Speichermengen verfügbar sind oder in extremen Fällen, wenn jedes übertragene Bit im Netzwerk zählt. Diese Technik sollte aber als letzter Ausweg gesehen werden, um die Größe zu optimieren.

- -

String Datentyp

- -

Der Datentyp String wird in JavaScript für die Repräsentation von textuellen Daten verwendet. Er ist eine Menge von "Elementen" aus 16-Bit vorzeichenlosen Ganzzahlenwerten. Jedes Element im String nimmt eine Position im String ein. Das erste Element befindet sich an der Position mit dem Index 0, das nächste beim Index 1 und so weiter. Die Länge eines String ist die Anzahl der sich darin befindenden Elemente.

- -

In Gegensatz zu anderen Programmiersprachen wie C kann ein String in JavaScript nicht verändert werden. Das bedeutet, dass ein String nicht mehr verändert werden kann, nachdem er erstellt wurde. Es ist aber möglich einen anderen String mit der Hilfe von Operationen aus dem ursprünglichen String zu erstellen:

- - - -

Vermeiden Sie "stringly-typing" in Ihrem Code!

- -

Es kann verlockend sein mit String komplexe Daten zu repräsentieren. Es bringt kurzfristige Vorteile mit sich:

- - - -

Ohne Konventionen kann jede Datenstruktur als String repräsentiert werden. Das ist aber keine gute Idee. Es könnte zum Beispiel eine Liste emuliert werden, indem die Listenelemente im String durch einen Separator getrennt werden. In diesem Fall ist ein JavaScript Array aber geeigneter, denn die Liste kann zerstört werden sobald ein Listenelement den Separator enthält. Ein Escape-Zeichen oder Ähnliches müsste verwendet werden. Dafür sind aber zusätzliche Konventionen nötig und die Wartung des Codes nimmt an Komplexität zu.

- -

Strings sollten nur für textuelle Daten verwendet werden. Wenn komplexe Daten repräsentiert werden sollen, parsen Sie den String und verwenden Sie eine geeignete Abstraktion.

- -

Symbol Datentyp

- -

Symbole in JavaScript sind mit ECMAScript 2015 eingeführt worden. Ein Symbol ist ein eindeutiger und unveränderbarer primitiver Wert. Er kann als Schlüssel einer Eigenschaft eines Objekts (siehe unten) verwendet werden. In manchen Programmiersprachen werden Symbole auch Atoms genannt. Details dazu sind unter {{Glossary("Symbol")}} und dem {{jsxref("Symbol")}} Object Wrapper in JavaScript zu finden.

- -

Objekte

- -

Objekte sind in der Informatik Werte im Speicher, die möglicherweise über einen {{Glossary("Identifier", "identifier")}} referenziert werden.

- -

Eigenschaften

- -

In JavaScript können Objekte als eine Sammlung von Eigenschaften (Properties) angesehen werden. Mit der Object Literal Syntax werden die nötigsten Eigenschaften initialisiert. Danach können Eigenschaften hinzugefügt oder wieder entfernt werden. Der Wert einer Eigenschaft kann von jedem Datentyp sein. Darunter können sich auch andere Objekte befinden. Dadurch können komplexe Datenstrukturen realisiert werden. Eigenschaften werden mit einem Key identifiziert. Ein Key ist entweder ein String oder ein Symbol.

- -

Es gibt zwei Arten von Eigenschaften, die bestimmte Attribute haben: Die Dateneigenachften und Zugriffseigenschaften.

- -

Dateneigenschaften

- -

Assoziiert einen Key mit einem Wert und besitzt die folgenden Attribute:

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Attribute einer Dateneigenschaft
AttributDatentypBeschreibungStandardwert
[[Value]]beliebiger JavaScript DatentypDer Wert, der bei einem Get-Zugriff auf die Eigenschaft zurückgegeben wirdundefined
[[Writable]]Booleanfalse, wenn [[Value]] der Eigenschaft nicht verändert werden kann.false
[[Enumerable]]Booleantrue, wenn die Eigenschaft in for...in Schleifen aufgelistet wird. Siehe dazu auch Aufzählbarkeit und Eigentum von Eigenschaften.false
[[Configurable]]Booleanfalse, wenn die Eigenschaft nicht gelöscht und die Attribute [[Value]] und [[Writable]] nicht verändert werden können.false
- -

Zugriffseigenschaften

- -

Assoziiert einen Key mit einer oder zwei Accessor-Funktionen (get und set), um einen Wert zu erhalten oder zu speichern. Es besitzt die folgenden Attribute:

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Attribute eines Zugriffseigenschaft
AttributDatentypBeschreibungStandardwert
[[Get]]Funktionsobjekt oder undefinedDie Funktion wird ohne ein Argument aufgerufen und gibt den Wert der Eigenschaft zurück, sobald ein Get-Zugriff auf den Wert ausgeführt wird. Siehe auch get.undefined
[[Set]]Funktionsobjekt oder undefinedDie Funktion wird mit einem Argument aufgerufen, das den Wert für die Zuweisung enthält. Sie wird immer aufgerufen, sobald eine bestimmte Eigenschaft verändert werden soll. Siehe auch set.undefined
[[Enumerable]]Booleantrue, wenn die Eigenschaft in for...in Schleifen aufgelistet wird.false
[[Configurable]]Booleanfalse, wenn die Eigenschaft nicht gelöscht und nicht zu einer Dateneigenschaft verändert werden kann.false
- -
-

Hinweis: Attribut wird normalerweise von der JavaScript-Umgebung genutzt und man kann nicht direkt zugreifen (mehr darüber: Object.defineProperty()). Deswegen sind die Attribute in doppelten eckigen Klammern statt in einfachen.

-
- -

"Normale" Objekte und Funktionen

- -

Ein Objekt in JavaScript ist ein Mapping zwischen Keys und Werten. Keys sind Strings oder Symbole und Werte können von jedem Datentyp sein. Dadurch sind Objekte eine Art Hashtabelle.

- -

Funktionen sind reguläre Objekte mit der Fähigkeit direkt aufgerufen werden zu können.

- -

Datum

- -

Mit der in JavaScript eingebauten Date Utility kann ein Datum repräsentiert werden.

- -

Indizierte Collections: Arrays und typisierte Arrays

- -

Arrays sind reguläre Objekte bei denen eine Beziehung zwischen Eigenschaften, die über Ganzzahlen indiziert werden, und der Eigenschaft 'length' besteht. Zusätzlich erben Arrays von Array.prototype, einer Helfermethoden, die die Manipulation von Arrays anbietet, wie zum Beispiel indexOf (zur Suche eines Werts im Array) oder push (um Elemente zu einem Array hinzufügen). Dadurch können Listen und Mengen über ein Array repräsentiert werden.

- -

Typisierte Arrays sind in JavaScript mit ECMAScript Edition 2015 eingeführt worden. Sie bieten eine Array-ähnliche Sicht auf einen darunterliegenden binären Datenpuffer an. Die folgende Tabelle stellt äquivalente C Datentypen dar:

- -

{{page("/en-US/docs/Web/JavaScript/Reference/Global_Objects/TypedArray", "TypedArray_objects", "", 0, 3)}}

- -

Keyed Collections: Maps, Sets, WeakMaps, WeakSets

- -

Diese Datenstrukturen verwenden Objektreferenzen als Keys. Sie wurden mit ECMAScript Edition 6 eingeführt. {{jsxref("Set")}} und {{jsxref("WeakSet")}} repräsentieren eine Menge von Objekten, während {{jsxref("Map")}} und {{jsxref("WeakMap")}} einen Wert mit einem Objekt assoziieren. Der Unterschied zwischen Maps und WeakMaps ist, dass bei Maps über Objekt-Keys iteriert werden kann. Das erlaubt eine spätere Optimierung der Garbage Collection.

- -

Maps und Sets könnten in reinem ECMAScript 5 implementiert werden. Da Objekte aber nicht verglichen werden können (im Sinne von zum Beispiel "kleiner gleich"), wäre die Performance für einen Look-Up linear. Native Implementierungen (inklusive WeakMaps) können eine ungefähr logarithmische Look-Up Performance haben.

- -

Um Daten an einen DOM-Knoten zu binden, werden normalerweise die Eigenschaften direkt auf dem Objekt gesetzt oder es werden data-* Attribute verwendet. Das hat aber den Nachteil, dass die Daten für jedes Skript in demselben Kontext verfügbar sind. Mit Maps und WeakMaps können Daten einfach privat an ein Objekt gebunden werden.

- -

Strukturierte Daten: JSON

- -

JSON (JavaScript Object Notation) ist ein leichtgewichtges Format zum Datenaustausch, das von JavaScript abgeleitet aber auch von vielen anderen Programmiersprachen verwendet wird. Mit JSON können universelle Datenstrukturen aufgebaut werden. Siehe {{Glossary("JSON")}} und {{jsxref("JSON")}} für mehr Details.

- -

Mehr Objekte in der Standardbibliothek

- -

JavaScript hat eine Standardbibliothek mit zahlreichen eingebauten Objekten. Details darüber sind unter Referenz zu finden.

- -

Datentypen mit dem typeof Operator bestimmen

- -

Der typeof Operator kann den Datentyp einer Variablen herausfinden. Unter der Referenzseite sind mehr Details und Grenzfälle zu finden.

- -

Spezifikationen

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SpezifikationStatusKommentar
{{SpecName('ES1')}}{{Spec2('ES1')}}initiale Definition
{{SpecName('ES5.1', '#sec-8', 'Types')}}{{Spec2('ES5.1')}} 
{{SpecName('ES2015', '#sec-ecmascript-data-types-and-values', 'ECMAScript Data Types and Values')}}{{Spec2('ES2015')}} 
{{SpecName('ESDraft', '#sec-ecmascript-data-types-and-values', 'ECMAScript Data Types and Values')}}{{Spec2('ESDraft')}} 
- -

Siehe auch

- - diff --git a/files/de/web/javascript/eine_wiedereinfuehrung_in_javascript/index.html b/files/de/web/javascript/eine_wiedereinfuehrung_in_javascript/index.html deleted file mode 100644 index a306d9fd16..0000000000 --- a/files/de/web/javascript/eine_wiedereinfuehrung_in_javascript/index.html +++ /dev/null @@ -1,909 +0,0 @@ ---- -title: Eine Wiedereinführung in JavaScript -slug: Web/JavaScript/Eine_Wiedereinfuehrung_in_JavaScript -tags: - - Anleitung - - CodingScripting - - Einleitung - - Guide - - Intermediate - - JavaScript - - Lernen -translation_of: Web/JavaScript/A_re-introduction_to_JavaScript ---- -
{{jsSidebar}}
- -

Warum eine "Wieder" - Einführung? Weil {{Glossary("JavaScript")}} als die am meisten missverstandene Programmiersprache der Welt bekannt ist. Obwohl die Sprache oft als Spielzeug abgewertet wird, besitzt sie neben ihrer Einfachheit einige mächtige Sprachfunktionen. Heutzutage wird JavaScript in einer Großzahl von wichtigen Anwendungen verwendet, was zeigt, dass Wissen über diese Technologie eine wichtige Eigenschaft für jeden Web- und Mobil-Entwickler ist.

- -

Es ist sinnvoll mit einem Überblick über die Sprachgeschichte zu beginnen. JavaScript wurde im Jahr 1995 von Brendan Eich entworfen, der Ingenieur bei Netscape war. JavaScript wurde erstmals 1996 mit Netscape 2 veröffentlicht. Ursprünglich hieß die Sprache LiveScript, wurde aber wegen unglücklichen Marketingentscheidung umbenannt, die sich die Popularität der Java-Sprache von Sun Microsystem zunutze machen wollte - obwohl beide wenig gemeinsam hatten. Dies ist seither eine Quelle für Verwirrung.

- -

Einige Monate später veröffentlichte Microsoft JScript mit dem Internet Explorer 3. Diese war eine weitgehend zu JavaScript kompatibele Sprache. Einige Monate später übergab Netscape JavaScript an Ecma International, einer Europäischen Standardisierungsorganisation, welche noch im selben Jahr die ersten Edition des {{Glossary("ECMAScript")}} Standards veröffentlichten. Der Standard bekam 1999 ein bedeutendes Update mit ECMAScript Edition 3 und hält sich seither sehr stabil. Die vierte Edition des Standards wurde aufgrund von politischen Meinungsverschiedenheiten zur Komplexität der Sprache fallen gelassen. Viele Teile der vieren Edition bildeten die Basis der fünften und sechsten Edition des Standards, welche im Dezember 2009 bzw. im Juni 2015 veröffentlicht wurden.

- -
-

Aus Gründen der Vertrautheit verwenden wir ab hier die Bezeichnung "JavaScript" anstatt "ECMAScript".

-
- -

Anders als viele andere Programmiersprachen, gibt es bei JavaScript kein Konzept für Eingabe und Ausgabe. JavaScript wurde als Skriptsprache in eine Hostumgebung entworfen und es ist die Aufgabe dieser Umgebung Mechanismen für die Kommunikation mit der Außenwelt bereitzustellen. Die hierfür am meisten genutzte Hostumgebung ist der Browser, jedoch findet man Interpreter auch in vielen anderen Anwendungen, zum Beispiel Adobe Acrobat, Photoshop, SVG Bilder, Yahoo! Widget Umgebung, serverseitigen Applikationen wie node.js, NoSQL-Datenbanken wie die Open Source-Datenbank Apache CouchDB, integrierte Computer, Desktopumgebungen wie GNOME (eine der beliebtesten Desktopumgebungen für GNU/Linux Betriebssysteme) und vielen mehr.

- -

Überblick

- -

JavaScript ist eine dynamische Multi-Paradigmen-Sprache mit Typen und Operatoren, Standardobjekten und Methoden. Die Syntax basiert auf den Sprachen Java und C — viele Strukturen aus diesen Sprachen wurden in JavaScript übernommen. JavaScript unterstützt Objektorientierung mit Prototypobjekten statt Klassen (mehr darüber in Vererbung mit Prototypen und ES2015 Klassen). JavaScript unterstützt auch funktionale Programmierung — Funktionen sind Objekte, die Funktionen ermöglichen, ausführbaren Code zu speichern und wie jedes andere Objekt weitergegeben zu werden.

- -

Beginnen wir mit einer Betrachtung der Sprachbausteine. JavaScript Programme manipulieren Werte und jeder Wert ist von einem bestimmten Typ. JavaScript Typen sind:

- - - -

... und {{jsxref("undefined")}} und {{jsxref("null")}}, die ein wenig speziell sind. Und {{jsxref("Array")}} , die eine besonere Art von Objekt ist. Und {{jsxref("Date")}} und {{jsxref("RegExp")}}, welche man quasi mitgeliefert bekommt. Wenn man genau sein will, sind Funktionen ebenfalls eine spezielle Art von Objekten. Also sieht das Typdiagramm eher so aus:

- - - -

Zusätzlich gibt es noch einige vordefinierte {{jsxref("Error")}} Typen. Der Einfachheit halber beschränken wir uns im Folgenden erst einmal auf die Typen aus dem ersten Diagramm.

- -

Numbers

- -

Numbers sind in JavaScript laut der Spezifikation "doppeltpräzise 64-bit Werte im IEEE 754 Format". Das hat einige interessante Konsequenzen. Es gibt in JavaScript nichts vergleichbares wie Integer, weshalb man vorsichtig mit Arithmetik umgehen muss, wenn man Mathematik wie in C oder Java nutzt.

- -

Achte auch auf Dinge wie:

- -
0.1 + 0.2 == 0.30000000000000004
- -

In der Praxis werden Integer-Werte wie 32-Bit-Integer behandelt und einige Implementierungen speichern sie sogar so, bis sie einen Befehl ausführen sollen, der für eine Number, aber nicht für eine 32-Bit Integer gültig ist. Das kann z.B. für Bitoperationen wichtig sein.

- -

Unterstützt werden die arithmetischen Standardoperationen, inklusive Addition, Subtraktion, Modulo (oder Rest) Arithmetik und so weiter. Außerdem existiert noch ein Objekt Math für die Anwendung von mathematischen Funktionen und Konstanten, welches oben noch nicht genannt wurde:

- -
Math.sin(3.5);
-var umfang = 2 * Math.PI * r;
- -

Man kann Strings mit der eingebauten {{jsxref("Global_Objects/parseInt", "parseInt()")}} Funktion nach Integer konvertieren. Die Funktion enthält die Basis des Zahlensystems für die Konvertierung als zweiten optionalen Parameter, welcher immer angegeben werden sollte:

- -
parseInt("123", 10); // 123
-parseInt("010", 10); // 10
-
- -

In älteren Browsern werden Strings, die mit "0" anfangen als Oktalzahlen (Basis 8) interpretiert, seit 2013 ist das aber nicht mehr so. Wenn man sich bei dem Stringformat nicht sicher ist, kann das in den älteren Browsern zu überraschenden Ergebnissen führen:

- -
parseInt("010");  //  8
-parseInt("0x10"); // 16
- -

Hier sieht man, dass die {{jsxref("Global_Objects/parseInt", "parseInt()")}} Funktion den ersten String als Oktalzahl, wegen der führenden 0, und den zweiten String als Hexadezimalzahl, wegen des führenden "0x", interpretiert. Die Hexadezimalnotation ist immernoch zulässig; nur die Oktalnotation wurde entfernt, weil sie praktisch nicht mehr verwendet wird.

- -

Um eine Binärzahl in ein Integer zu ändern, verwendet man einfach die Basis 2:

- -
parseInt("11", 2); // 3
- -

Auf die gleiche Weise lassen sich auch Gleitkommazahlen mit Hilfe der Funktion {{jsxref("Global_Objects/parseFloat", "parseFloat()")}} konvertieren. Anders als bei der {{jsxref("Global_Objects/parseInt", "parseInt()")}} Funktion nutzt parseFloat() immer die Basis 10.

- -

Auch der unäre + Operator kann eingesetzt werden, um zu einer Zahl zu konvertieren:

- -
+ "42";   // 42
-+ "010";  // 10
-+ "0x10"; // 16
- -

Ein spezieller Wert mit der Bezeichnung {{jsxref("NaN")}} (für "Not a Number") wird zurückgegeben, wenn der String keinen numerischen Wert enthält:

- -
parseInt("hello", 10); // NaN
- -

NaN ist gefährlich: Wenn es als Operand in eine mathematische Operation benutzt wird, wird das Ergebnis ebenfalls NaN sein;

- -
NaN + 5; // NaN
- -

Mit der eingebauten  {{jsxref("Global_Objects/isNaN", "isNaN()")}} Funktion kann man auf NaN testen:

- -
isNaN(NaN); // true
- -

JavaScript kennt außerdem die speziellen Werte {{jsxref("Infinity")}} und -Infinity:

- -
 1 / 0; //  Infinity
--1 / 0; // -Infinity
- -

Man kann auf Infinity, -Infinity und NaN Werte mit der eingebauten Funktion {{jsxref("Global_Objects/isFinite", "isFinite()")}} testen:

- -
isFinite(1 / 0);     // false
-isFinite(-Infinity); // false
-isFinite(NaN);       // false
- -
-

Die {{jsxref("Global_Objects/parseInt", "parseInt()")}} und {{jsxref("Global_Objects/parseFloat", "parseFloat()")}} Funktionen lesen einen String, bis ein Zeichen erreicht wird, welches für das Zahlensystem unzulässig ist und geben die Zahl bis zu dieser Stelle zurück. Der unäre + Operator konvertiert den String einfach zu NaN, wenn dieser ein unerlaubtes Zeichen enthält. Probiere mal aus, den String "10.2abc" mit jeder der Methoden in der Console zu konvertieren, um die Unterschiede besser zu verstehen.

-
- -

Strings

- -

Strings sind in JavaScript eine Folge von Unicode-Zeichen. Das sollte für alle erfreulich sein, die mit Internationalisierung arbeiten. Genauer gesagt sind Strings Folgen von UTF-16 Codeeinheit; jeder Codeeinheit ist durch eine 16-Bit Zahl repräsentiert. Jedes Unicode-Zeichen besteht aus 1 oder 2 Codeeinheiten.

- -

Für ein einzelnes Zeichen, verwendet man einfach einen String mit einem Zeichen.

- -

Um die Länge eines Strings (in Codeeinheiten) herauszufinden, nutzt man die length Eigenschaft:

- -
'hello'.length; // 5
- -

Da ist die erster Begegnung mit JavaScript Objekten! Haben wir schon erwähnt, dass man auch Strings wie {{jsxref("Object", "Objekte", "", 1)}} verwenden kann? Sie haben auch {{jsxref("String", "Methoden", "#Methoden", 1)}}, um den Strings zu verändern und Informationen zu erhalten.

- -
'hello'.charAt(0); // "h"
-'hello, world'.replace('hello', 'goodbye'); // "goodbye, world"
-'hello'.toUpperCase(); // "HELLO"
- -

Andere Datentypen

- -

JavaScript unterscheidet zwischen {{jsxref("null")}}, wobei es sich um einen Wert handelt, der einen "nicht Wert" repräsentiert (und nur über das null Schlüsselwort erreichbar ist) und {{jsxref("undefined")}}, wobei es sich um einen Wert vom Typ undefined handelt, welcher für einen nicht initialisierten Wert steht - also, dass noch kein Wert zugewiesen wurde. Variablen werden später besprochen, aber in JavaScript ist es möglich Variablen zu deklarieren, ohne ihnen eine Wert zuzuweisen. Wenn das gemacht wird ist die Variable vom Typ undefined. undefined ist sogar eine Konstante.

- -

JavaScript hat einen Boolean Typ mit den möglichen Werten true und false (beide sind Schlüsselwörter). Jeder Wert kann mit den folgenden Regeln zu einem Boolean konvertiert werden:

- -
    -
  1. false, 0, leere Strings (""), NaN, null, und undefined werden false.
  2. -
  3. Alle anderen Werte werden true.
  4. -
- -

Die Konvertierung kann explizit mit der Boolean() Funktion durchgeführt werden:

- -
Boolean('');  // false
-Boolean(234); // true
- -

Das ist jedoch kaum nötig, da JavaScript die Konvertierung automatisch vornimmt, wenn ein Boolean erwartet wird, wie z.B. bei einer if-Anweisung (siehe unten). Aus diesem Grund ist oft von "true Werten" und "false Werten" die Rede, womit Werte gemeint sind, die zu true oder false werden, nachdem sie zu einem Boolean konvertiert wurden. Alternativ können diese Werte auch "truthy" und "falsy" genannt werden.

- -

Boolesche Operationen wie beispielsweise && (logisches und), || (logisches oder) und ! (logisches nicht) werden ebenfalls unterstützt (siehe unten).

- -

Variablen

- -

Neue Variablen werden in JavaScript mit einem der drei Schlüsselwort let, const oder var deklariert.

- -

let erlaubt es Variablen auf Blockebene zu deklarieren. Die deklarierte Variable ist in dem Block gültig, von dem sie umschlossen wird.

- -
let a;
-let name = "Simon";
- -

Im folgenden ist ein Beispiel für den Gültigkeitsbereich einer mit let deklarierten Variablen:

- -
// myLetVariable ist hier *nicht* sichtbar
-
-for (let myLetVariable = 0; myLetVariable < 5; myLetVariable++) {
-  // myLetVariable ist nur hier sichtbar
-}
-
-// myLetVariable ist hier *nicht* sichtbar
-
- -

const erlaubt es Variablen zu deklarieren, dessen Wert nie wieder geändert wird. Die Variable ist in dem Block sichtbar, von dem sie umschlossen wird.

- -
const Pi = 3.14;  // Variable Pi wird initialisiert
-Pi = 1;  // Führt zu einem Fehler, weil konstante (const) Variablen nicht geändert werden können.
-
- -

var ist das gebräuchlichste deklarative Schlüsselwort. Es hat nicht die Restriktionen, die die anderen beiden Schlüsselwörter haben. Das liegt daran, dass das traditionell der einzige Weg war, um eine Variable in JavaScript zu deklarieren. Eine Variable, die mit dem var Schlüsselwort definiert wird, ist in der Funktion, in der sie deklariert wird, erreichbar.

- -
var a;
-var name = 'Simon';
- -

Im folgenden ist ein Beispiel für den Gültigkeitsbereich einer mit var deklarierten Variablen:

- -
// myVarVariable *ist* hier sichtbar
-
-for (var myVarVariable = 0; myVarVariable < 5; myVarVariable++) {
-// myVarVariable ist in der ganzen Funktion sichtbar
-}
-
-// myVarVariable *ist* hier sichtbar
- -

Deklariert man eine Variable, ohne ihr einen Wert zuzuweisen, ist ihr Typ undefined.

- -

Ein sehr wichtiger Unterschied zu anderen Programmiersprachen wie Java besteht darin, dass bei JavaScript keine Blöckegültigkeitsbereiche hat, sondern nur Funktionsgültigkeitsbereiche. Wird eine Variable mit dem var Schlüsselwort in einer zusammengesetzten Statement (z.B. if-Anweisung) definiert, so ist diese Variable innerhalb der ganzen Funktion sichtbar. Jedoch ist es ab ECMAScript 2015 mit let und const Deklarationen möglich, Variablen mit Blocksichtbarkeitsbereich zu erstellen.

- -

Operatoren

- -

JavaScripts numerische Operatoren sind +, -, *, / und % welches der Divisionsrestoperator ist (nicht dasselbe wie Modulo). Werte werden mit = zugewiesen und es gibt zusammengesetzte Zuweisungsstatement wie += und -=. Diese werden als x = x Operator y interpretiert.

- -
x += 5
-x = x + 5
- -

Zum Inkrementieren und Dekrementieren kann ++ und -- verwendet werden. Diese können als Prefix oder Postfix Operatoren benutzt werden.

- -

Mit dem + Operator ist es auch möglich, Strings zu verbinden:

- -
'hello' + ' world'; // "hello world"
- -

Addiert man einen String mit einer Zahl (oder einem anderen Wert), wird alles zuerst zu einem String konvertiert. Dies bereitet manchmal Probleme:

- -
"3" + 4 + 5;  // "345"
-3 + 4 + "5"; // "75"
- -

Das Addieren eines leeren Strings zu einem Wert ist eine hilfreiche Methode, den Wert in einen String zu konvertieren.

- -

Vergleiche können in JavaScript mit <, >, <= und >= durchgeführt werden. Dieses funktionieren bei Strings und Zahlen. Gleichheit ist etwas komplizierter. Der Doppelgleichoperator hat einen Typzwang, was zu überraschend Ergebnissen führen kann:

- -
123 == "123"; // true
-1 == true;    // true
- -

Um den Typzwang zu vermeiden, benutzt man den Dreifachgleichoperator:

- -
123 === "123"; // false
-1 === true;    // false
- -

Des Weiteren gibt es die Operatoren != und !== für das Testen auf Ungleichheit.

- -

Außerdem gibt es in JavaScript noch bitweise Operationen.

- -

Kontrollstrukturen

- -

JavaScript hat eine ähnliche Menge an Kontrollstrukturen wie andere Sprachen aus der C Familie. Bedingte Statements sind durch if und else unterstützt; man kann sie auch verketten:

- -
var name = 'kittens';
-if (name == 'puppies') {
-  name += ' woof';
-} else if (name == 'kittens') {
-  name += ' neow';
-} else {
-  name += '!';
-}
-name == 'kittens neow';
-
- -

JavaScript hat while- und do-while-Schleifen. Die erste ist gut für normale Schleifen. Die zweite ist für Schleifen geeignet, bei denen sichergestellt werden soll, dass der Schleifeninhalt mindestens einmal ausgeführt wird:

- -
while (true) {
-  // Endlosschleife!
-}
-
-var input;
-do {
-  input = get_input();
-} while (inputIsNotValid(input))
-
- -

JavaScripts for-Schleife ist die selbe wie in C und Java: Die Kontrollinformationen können in einer einzigen Zeile angegeben werden.

- -
for (var i = 0; i < 5; i++) {
-  // Wird 5-Mal ausgeführt
-}
-
- -

JavaScript hat zudem zwei weitere bekannte for Schleifen: for...of

- -
for (let value of array) {
-  // Tue etwas mit value
-}
- -

und for...in:

- -
for (let property in object) {
-  // Tue etwas mit dem objects property
-}
- -

Die Operatoren && und || benutzen Kurzschlusslogik, was bedeutet, dass die Ausführung des zweiten Operanden abhängig von dem ersten ist. Dieses ist nützlich für die Überprüfung auf null, bevor auf Objektattribute zugegriffen wird:

- -
var name = o && o.getName();
-
- -

Oder für das Abfangen von Werten (wenn falsy Werte nicht valide sind):

- -
var name = cachedName || (cachedName = getName());
-
- -

JavaScript besitzt einen ternären Operator für bedingte Ausdrücke:

- -
var allowed = (age > 18) ? 'yes' : 'no';
-
- -

Das switch Statement kann führ mehrere Zweige abhängig von einer Zahl oder einem String eingesetzt werden:

- -
switch(action) {
-    case 'draw':
-        drawIt();
-        break;
-    case 'eat':
-        eatIt();
-        break;
-    default:
-        doNothing();
-}
-
- -

Lässt man das break Statement weg, werden auch der folgezweig ausgeführt. Dieses Verhalten ist selten gewollt — es lohnt sich in solchen Fällen explizite Kommentare hinzuzufügen, um späteres Debugging zu unterstützen:

- -
switch(a) {
-    case 1: // fallthrough
-    case 2:
-        eatit();
-        break;
-    default:
-        donothing();
-}
-
- -

Die default Klausel ist optional. Wenn gewünscht, können Ausdrücke im switch und im case eingesetzt werden. Der Vergleiche zwischen beiden wird mit dem === Operator durchgeführt:

- -
switch(1 + 3) {
-    case 2 + 2:
-        yay();
-        break;
-    default:
-        neverhappens();
-}
-
- -

Objekte

- -

JavaScript Objekte setzen sich aus einfachen Name-Wert-Paaren zusammen. Sie sind ähnlich wie:

- - - -

Der Fakt, dass diese Datenstruktur so oft eingesetzt wird, zeigt seine Vielseitigkeit. Da alles (reine Kerntypen) in JavaScript ein Objekt ist, beinhaltet jedes JavaScript-Programm natürlich eine große Menge von Suchoperationen in Hashtabellen. Gut, dass diese so schnell sind!

- -

Der "Name"-Teil ist ein JavaScript String, während als Wert jeder JavaScript Wert in Frage kommt — auch andere Objekte. Dies ermöglicht das Erstellen von beliebig komplexen Datenstrukturen.

- -

Es gibt zwei grundlegende Möglichkeiten, ein leeres Objekt zu erstellen:

- -
var obj = new Object();
-
- -

Und:

- -
var obj = {};
-
- -

Beide sind semantisch äquivalent. Die zweite wird "Objektliteral Syntax" genannt und ist verbreiteter. Diese Syntax ist zudem der Kern des JSON Formates und sollte immer bevorzugt genutzt werden.

- -

"Objektliteral Syntax" kann eingesetzt werden, um ein umfassendes Objekt zu erstellen:

- -
var obj = {
-    name: "Carrot",
-    "for": "Max",
-    details: {
-        color: "orange",
-        size: 12
-    }
-}
-
- -

Der Zugriff auf Eigenschaften kann verkettet werden:

- -
obj.details.color; // orange
-obj["details"]["size"]; // 12
- -

Das folgende Beispiel erstellt einen Prototyp Person und eine Instanz dieses Prototyps you.

- -
function Person(name, age) {
-  this.name = name;
-  this.age = age;
-}
-
-// Definiere ein Objekt
-var you = new Person('You', 24);
-// Wir erstellen eine Person mit dem Namen "You" und dem Alter 24
- -

Nach der Erstellung kann eine Objekteigenschaft über einem von zwei möglichen Wegen erreicht werden:

- -
obj.name = "Simon";
-var name = obj.name;
-
- -

Und...

- -
// Klammernotation
-obj['name'] = 'Simon';
-var name = obj['name'];
-// man kann eine Variable benutzen, um einen Schlüssel zu definieren
-var user = prompt('was ist dein Schlüssel?');
-obj[user] = prompt('was ist dein Schlüssel?');
-
- -

Beide sind wieder semantisch äquivalent. Die zweite Methode hat den Vorteil, dass der Name der Eigenschaft als String zur Verfügung gestellt wird, was bedeutet, dass dieser zur Laufzeit berechnet werden kann. Jedoch verhindert diese Methode, dass einige JavaScript-Engines "Minifier Optimierungen" durchführen können. Sie kann außerdem eingesetzt werden, um Eigenschaften zu erreichen, die ein reservierte Schlüsselwörter als Namen haben:

- -
obj.for = "Simon"; // Syntaxfehler, da 'for' ein reserviertes Schlüsselwort ist
-obj["for"] = "Simon"; // funktioniert
-
- -
-

Ab ECMAScript 5 können reservierte Wörter bei Objektliteralen verwendet werden. Das bedeutet, dass keine Anführungszeichen und eckige Klammern mehr nötig sind. Siehe ES5 Spec.

-
- -

Weitere Informationen zu Objekten und Prototypen gibt es im Artikel Object.prototype. Für eine Erklärung von Objektprototypen und die Objektprototypenkette siehe in den Artikel Vererbung und die Prototypenkette.

- -
-

Ab ECMAScript 2015 können Schlüssel mit Variablen definiert werden, indem eckige Klammern verwendet werden. {[phoneType]: 12345} ist möglich, statt var userPhone = {}; userPhone[phoneType] = 12345 zu verwenden.

-
- -

Arrays

- -

Arrays sind in JavaScript ein spezieller Typ von Objekten. Sie funktionieren weitgehend wie normale Objekte (numerische Eigenschaften können nur über die []-Syntax erreicht werden), besitzen jedoch eine zusätzliche Eigenschaft length. Der Wert dieser Eigenschaft ist immer der höchsten Index des Arrays + 1.

- -

Eine Möglichkeit ein Array zu erstellen ist die folgende:

- -
var a = new Array();
-a[0] = 'dog';
-a[1] = 'cat';
-a[2] = 'hen';
-a.length; // 3
- -

Eine praktischere Möglichkeit  ist die Erstellung über ein Array-Literal.

- -
var a = ['dog', 'cat', 'hen'];
-a.length; // 3
- -

Zu beachten ist, dass array.length nicht unbedingt der Anzahl der Elemente des Arrays entspricht. Siehe das folgende Beispiel:

- -
var a = ['dog', 'cat', 'hen'];
-a[100] = 'fox';
-a.length; // 101
- -

Zur Erinnerung: Der Wert von length entspricht immer dem höchsten Index + 1.

- -

Versucht man auf einen nicht-existenten Array-Index zuzugreifen, erhält man undefined:

- -
typeof a[90]; // undefined
- -

Wenn Sie die obigen Angaben über [] und Länge (array.length) berücksichtigen, können Sie über ein Array iterieren, indem Sie die folgende for-Schleife verwenden:

- -
for (var i = 0; i < a.length; i++) {
-    // Verarbeitung von a[i]
-}
-
- -

ECMAScript (ES2015) empfiehlt die wesentlich kürzer gefasste for...of-Schleife, um über Objekte und Arrays zu iterieren:

- -
for (const currentValue of a) {
-  // Tue etwas mit currentValue
-}
- -

Man kann auch mit einer for...in Schleife über ein Array iterieren, wobei diese nicht über die Arrayelemente, sondern die Arrayindizes iteriert. Zudem wird bei einer solchen Schleife auch über Eigenschaften iteriert, die evtl. später in Array.prototype hinzugefügt werden. Deshalb wird diese Methode für Arrays nicht empfohlen.

- -

In ECMAScript (ES2015) wurde mit forEach() eine weitere Schleife zur Iteration über Arrays eingeführt:

- -
['dog', 'cat', 'hen'].forEach(function(currentValue, index, array) {
-  // Verarbeite currentValue oder array[index]
-});
- -

Das Anhängen eines neuen Elements zu einem Array funktioniert folgendermaßen:

- -
a.push(item);
- -

Arrays besitzen viele Methoden. Hier findet man die Dokumentation für alle Array Methoden.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
MethodennameBeschreibung
a.toString()Gibt einen String zurück, bei dem toString() jedes Objektes getrennt mit Komma ist.
a.toLocaleString()Gibt einen String zurück, bei dem toLocaleString() jedes Objektes getrennt mit Komma ist.
a.concat(item1[, item2[, ...[, itemN]]])Erstellt eine Kopie mit den neu hinzugefügten Elemente.
a.join(sep)Wandelt das Array in einen String um. Die Elemente werden durch sep getrennt.
a.pop()Entfernt das letzte Element und gibt es zurück.
a.push(item1, ..., itemN)Fügt ein oder mehrere Elemente am Ende hinzu.
a.reverse()Kehrt die Reihenfolge des Arrays um.
a.shift()Entfernt das erste Element und gibt es zurück.
a.slice(start, end)Gibt einen Teil eines Arrays zurück.
a.sort([cmpfn])Sortiert das Array. Ein Vergleichsfunktion kann optional angegeben werden.
a.splice(start, delcount[, item1[, ...[, itemN]]])Modifiziert ein Array, indem ein Teil gelöscht und durch mehrere Elemente ersetzt wird.
a.unshift(item1[, item2[, ...[, itemN]]])Fügt Elemente am Anfang des Arrays hinzu.
- -

Funktionen

- -

Neben Objekten gehören Funktionen zu den Kernkomponenten von JavaScript. Die Syntax für eine einfache Funktion könnte kaum einfacher sein:

- -
function add(x, y) {
-    var total = x + y;
-    return total;
-}
-
- -

Das Beispiel demonstriert eine einfache Funktion. Einer JavaScript-Funktion können 0 oder mehr benannte Parameter übergeben werden. Der Funktionsrumpf kann beliebig viele Anweisungen enthalten und kann seine eigene lokalen Variablen definieren, die nur in der Funktion erreichbar sind. Das return Statement kann dazu benutzt werden, um jederzeit einen Rückgabewert festzulegen und die Funktion zu beenden. Wird kein return-Statement angegeben (oder ein leeres return-Statement ohne Wert), gibt JavaScript undefined zurück.

- -

Die benannten Parameter sind eher als Richtlinie zu verstehen, weniger als eine Pflichtangabe. Eine Funktion kann also auch ohne Angabe der Parameter aufgerufen werden, wobei die Parameter dann den Wert undefined bekommen.

- -
add() //NaN
-// Addition mit undefined ist nicht möglich
-
- -

Mann kann der Funktion auch mehr Parameter übergeben, als erwartet werden:

- -
add(2, 3, 4) // 5
-// Addition der ersten beiden Parameter; 4 wird ignoriert
-
- -

Auf den ersten Blick wirkt das komisch, jedoch haben Funktionen innerhalb des Funktionsrumpfes Zugriff auf eine zusätzliche Variable namens arguments, welche ein arrayähnliches Objekt ist, das alle der Funktion übergebenen Werte enthält. Hier eine überarbeitete add-Funktion, die beliebig viele Parameter verarbeitet:

- -
function add() {
-    var sum = 0;
-    for (var i = 0, j = arguments.length; i < j; i++) {
-        sum += arguments[i];
-    }
-    return sum;
-}
-
-add(2, 3, 4, 5); // 14
-
- -

Das ist jedoch nicht nützlicher als 2 + 3 + 4 + 5 zu schreiben. Deswegen erstellen wir eine Funktion, welche den Durchschnitt aller Werte in unserem Array berechnet:

- -
function avg() {
-  var sum = 0;
-  for (var i = 0, j = arguments.length; i < j; i++) {
-    sum += arguments[i];
-  }
-  return sum / arguments.length;
-}
-
-avg(2, 3, 4, 5); // 3.5
- -

Das ist wirklich nützlich, jedoch wirkt es noch ein bisschen lang. Um den Code ein wenig zu reduzieren, kann man den Einsatz des arguments-Arrays durch eine Rest Parameter Syntax ersetzen. Damit können beliebig viele Argumente übergeben werden und der Code bleibt minimal. Der Rest Parameter Operator wird in der Funktionsparameterliste mit dem Format ...variable geschrieben und enthält alle nicht benannten, der Funktion übergebenen Argumente in der Variable. Zudem kann man die for-Schleife durch eine for...of-Schleife ersetzen, um die Werte in der Variablen direkt verwenden zu können.

- -
function avg(...args) {
-  var sum = 0;
-  for (let value of args) {
-    sum += value;
-  }
-  return sum / args.length;
-}
-
-avg(2, 3, 4, 5); // 3.5
- -
-

Die Variable args in der oberen Funktion enthält alle an die Funktion übergebenen Werte.

- -

Es ist wichtig zu beachten, dass der Einsatz des Rest Parameter Operators in einer Funktionsdeklaration alle Argumente nach der Deklaration enthält, jedoch nicht die davor. Z. B. wird bei function avg(firstValue, ...args) der erste der Funktion übergebene Wert in der Variable firstValue gespeichert und alle folgenden Werte werden in der Variable args gespeichert. Das ist eine sehr nützliche Sprachfunktion, die jedoch ein neues Problem aufwirft. Die Funktion avg() nimmt eine mit Kommata getrennte Liste von Argumenten entgegen — was ist jedoch, wenn man den Durchschnitt eines Arrays haben möchte? Man kann die Funktion folgendermaßen umschreiben:

-
- -
function avgArray(arr) {
-  var sum = 0;
-  for (var i = 0, j =  arr.length; i < j; i++) {
-    sum += arr[i];
-  }
-  return sum / arr.length;
-}
-
-avgArray([2, 3, 4, 5]); // 3.5
- -

Es wäre jedoch schöner, wenn man die erste Funktion wiederverwenden könnten. Glücklicherweise ist es bei JavaScript möglich, eine Funktion mit einem Array von Argumenten aufzurufen, indem man die Methode apply() benutzt, die alle Function-Objekte besitzen:

- -
avg.apply(null, [2, 3, 4, 5]); // 3.5
- -

Das zweite Argument der apply()-Funktion ist das Array mit den Argumenten; das erste Argument wird später bzw. weiter unten näher erklärt. Das betont noch einmal die Tatsache, dass Funktionen auch Objekte sind.

- -
-

Man kann das gleiche Ergebnis mit dem Einsatz des Spread operator im Funktionsaufruf erreichen.

- -

Zum Beispiel: avg(...numbers);

-
- -

JavaScript erlaubt es, anonyme Funktionen zu erstellen:

- -
var avg = function() {
-    var sum = 0;
-    for (var i = 0, j = arguments.length; i < j; i++) {
-        sum += arguments[i];
-    }
-    return sum / arguments.length;
-}
-
- -

Die Semantik ist äquivalent zu function avg() Form. Es ist extrem mächtig, weil es erlaubt, an bestimmten Stellen vollständige Funktionsdefinition zu schreiben, wo normalerweise ein Ausdruck verwendet wird. Das ermöglicht allerlei klevere Tricks. Hier eine Möglichkeit, eine Variable zu verbergen — wie Variablen mit Blocksichtbarkeit in C:

- -
var a = 1;
-var b = 2;
-
-(function() {
-  var b = 3;
-  a += b;
-})();
-
-a; // 4
-b; // 2
- -

JavaScript erlaubt den rekursiven Aufruf von Funktionen. Das ist praktisch beim Verarbeiten von Baumstrukturen, wie es beim Browser-DOM der Fall ist.

- -
function countChars(elm) {
-    if (elm.nodeType == 3) { // TEXT_NODE
-        return elm.nodeValue.length;
-    }
-    var count = 0;
-    for (var i = 0, child; child = elm.childNodes[i]; i++) {
-        count += countChars(child);
-    }
-    return count;
-}
-
- -

Das hebt ein potentielles Problem mit anonymen Funktionen hervor: Wie ruft man sie rekursiv auf, wenn sie keinen Namen haben? JavaScript erlaubt hierfür die Benennung von Funktionsausdrücken. Man kann dazu benannte "IIFEs" (Immediately Invoked Function Expressions) wie unten beschrieben benutzen:

- -
var charsInBody = (function counter(elm) {
-    if (elm.nodeType == 3) { // TEXT_NODE
-        return elm.nodeValue.length;
-    }
-    var count = 0;
-    for (var i = 0, child; child = elm.childNodes[i]; i++) {
-        count += counter(child);
-    }
-    return count;
-})(document.body);
-
- -

Der angegebene Name im Funktionsausdruck ist nur innerhalb der selben Funktion verfügbar. Das erlaubt der JavaScript-Engine, den Code besser zu optimieren und fördert die Lesbarkeit des Codes. Der Name wird zudem im Debugger und einigen Stack Traces angezeigt, was beim Debuggen viel Zeit sparen kann.

- -

Zu beachten ist auch hier wieder, dass JavaScript-Funktionen ebenfalls Objekte sind — wie alles andere in JavaScript. Und man kann Eigenschaften ändern und hinzufügen, wie es im oberen Abschnitt über Objekte bereits gezeigt wurde.

- -

Benutzerdefinierte Objekte

- -
Detaillierte Informationen zum objektorientiertem Programmieren in JavaScript finden Sie in der Einführung zu objektorientiertem Programmieren in JavaScript.
- -

In klassischen objektorientierten Programmiersprachen sind Objekte Zusammenstellungen von Daten und Methoden, die mit den Daten arbeiten. JavaScript ist eine Prototypenbasierte Sprache, die anders als in Java oder C++ kein Klassen-Statement besitzt (was manchmal verwirrend für Programmierer ist, die bisher nur mit Sprachen mit Klassen-Statements gearbeitet haben). Stattdessen benutzt JavaScript Funktionen als Klassen. Angenommen es gibt ein Objekt person mit Feldern für Vor- und Nachnamen. Es gibt zwei Wege den Namen zu schreiben: als "Vorname Nachname" oder "Nachname, Vorname". Nutzt man die vorher beschriebenen Funktionen und Objekte, lässt sich dies z. B. so umsetzen:

- -
function makePerson(first, last) {
-  return {
-    first: first,
-    last: last
-  };
-}
-function personFullName(person) {
-  return person.first + ' ' + person.last;
-}
-function personFullNameReversed(person) {
-  return person.last + ', ' + person.first;
-}
-
-s = makePerson("Simon", "Willison");
-personFullName(s); // "Simon Willison"
-personFullNameReversed(s); // "Willison, Simon"
- -

Das funktioniert zwar, ist aber keine schöne Lösung. Man hat am Ende dutzende unnötiger Funktionen im globalen Namensraum. Was man braucht ist die Möglichkeit, eine Funktion an ein Objekt anzuhängen. Weil Funktionen Objekte sind, lässt sich dies einfach realisieren:

- -
function makePerson(first, last) {
-  return {
-    first: first,
-    last: last,
-    fullName: function() {
-      return this.first + ' ' + this.last;
-    },
-    fullNameReversed: function() {
-      return this.last + ', ' + this.first;
-    }
-  };
-}
-
-s = makePerson("Simon", "Willison")
-s.fullName(); // "Simon Willison"
-s.fullNameReversed(); // "Willison, Simon"
- -

Hier sehen Sie etwas, was vorher noch nicht eingesetzt wurde: Das this-Schlüsselwort. Wird es innerhalb einer Funktion benutzt, verweist this auf das aktuelle Objekt. Was das tatsächlich bedeutet, hängt davon ab, wie die Funktion aufgerufen wird. Wenn die Funktion mit der Punkt- oder Klammer-Notation auf einem Objekt aufgerufen wird, repräsentiert this dieses Objekt. Wird die Punkt-Notation nicht verwendet, dann verweist this auf das globale Objekt.

- -

Zu beachten ist, dass this ein häufiger Grund für Fehler ist. Zum Beispiel:

- -
s = makePerson("Simon", "Willison");
-var fullName = s.fullName;
-fullName(); // undefined undefined
- -

Wenn fullName() alleine und ohne den Einsatz von s.fullName() aufgerufen wird, referenziert this das globale Objekt. Dort gibt es keine globalen Variablen first oder last, weshalb man als Rückgabewert undefined erhält.

- -

Man kann Vorteile des this-Schlüsselwortes nutzen, um die makePerson-Funktion zu optimieren:

- -
function Person(first, last) {
-    this.first = first;
-    this.last = last;
-    this.fullName = function() {
-        return this.first + ' ' + this.last;
-    }
-    this.fullNameReversed = function() {
-        return this.last + ', ' + this.first;
-    }
-}
-var s = new Person("Simon", "Willison");
-
- -

Hier wird ein neues Schlüsselwort aufgeführt: new. new steht in starker Beziehung zu this. Es erstellt ein neues Objekt und ruft die nachstehende Funktion auf, wobei this dann das neue Objekt ist. Zu beachten ist, dass die Funktion keinen Wert zurückgibt, sondern das this-Objekt modifiziert. Das new gibt dann das this-Objekt an den Aufrufer zurück. Funktionen die für den Aufruf mit new konzipiert sind, nennt man Konstruktoren. Gängige Praxis ist es, diese Funktionen mit einem großen Anfangsbuchstaben zu versehen, um an den Einsatz von new zu erinnern.

- -

Die nun optimiertere Funktion hat jedoch immernoch eine Fehlerquelle mit dem Aufruf von fullName().

- -

Das person-Objekt wird besser, weist jedoch noch immer einige unangenehme Effekte auf: Bei jedem Erstellen eines person-Objekts werden zwei neue Funktionen erzeugt — wäre es nicht besser, wenn dieser Code wiederverwendet werden könnte?

- -
function personFullName() {
-    return this.first + ' ' + this.last;
-}
-function personFullNameReversed() {
-    return this.last + ', ' + this.first;
-}
-function Person(first, last) {
-    this.first = first;
-    this.last = last;
-    this.fullName = personFullName;
-    this.fullNameReversed = personFullNameReversed;
-}
-
-
- -

Das ist besser: Man erstellt die Methodenfunktionen nur einmal und referenziert zu diesen im Konstruktor. Geht das noch besser? Die Antwort ist auch hier wieder ja:

- -
function Person(first, last) {
-  this.first = first;
-  this.last = last;
-}
-Person.prototype.fullName = function() {
-  return this.first + ' ' + this.last;
-}
-Person.prototype.fullNameReversed = function() {
-  return this.last + ', ' + this.first;
-}
- -

Person.prototype ist ein Objekt, das sich alle Person-Instanzen teilen. Dies ist ein Teil einer Prototypen-Suchkette (mit dem speziellen Namen Prototypenkette (prototype chain)): Bei jedem Versuch, auf eine Eigenschaft von Person zuzugreifen, die nicht gesetzt ist, prüft JavaScript ob diese Eigenschaft stattdessen in Person.prototype vorhanden ist. Als Ergebnis wird alles in Person.prototype für alle Instanzen eines Konstruktors über this verfügbar.

- -

Das ist ein unglaublich mächtiges Werkzeug. JavaScript erlaubt es Prototypen irgendwo innerhalb des Programmes zu verändern, was bedeutet, dass man Methoden zur Laufzeit zu existierenden Objekten hinzufügen kann:

- -
s = new Person("Simon", "Willison");
-s.firstNameCaps(); // TypeError on line 1: s.firstNameCaps is not a function
-
-Person.prototype.firstNameCaps = function firstNameCaps() {
-  return this.first.toUpperCase()
-};
-s.firstNameCaps(); // "SIMON"
- -

Interessanterweise können auch neue Eigenschaften zu Prototypen von JavaScript-Objekten hinzugefügt werden. So kann z. B. dem String-Objekt eine neue Methode hinzugefügt werden, welche den String in umgekehrter Reihenfolge zurückgibt:

- -
var s = "Simon";
-s.reversed(); // TypeError on line 1: s.reversed is not a function
-
-String.prototype.reversed = function reversed() {
-  var r = "";
-  for (var i = this.length - 1; i >= 0; i--) {
-    r += this[i];
-  }
-  return r;
-};
-
-s.reversed(); // nomiS
- -

Die neue Methode funktioniert sogar mit String-Literalen!

- -
"This can now be reversed".reversed(); // desrever eb won nac sihT
- -

Wie schon vorher erwähnt, ist der Prototyp ein Teil einer Kette. Der Anfang dieser Kette ist Object.prototype, welcher die Methode toString() enthält — das ist die Methode die aufgerufen wird, wenn ein Objekt als String repräsentiert werden soll. Das ist für das Debuggen des Person-Objekts nützlich:

- -
var s = new Person("Simon", "Willison");
-s; // [object Object]
-
-Person.prototype.toString = function() {
-  return '<Person: ' + this.fullName() + '>';
-};
-
-s.toString(); // "<Person: Simon Willison>"
- -

Erinnern Sie sich an die Stelle weiter oben, als avg.apply() als erstes Argument null übergeben bekommen hat? Diese Stelle können wir uns zur genaueren Betrachtung wieder heranziehen. Mit diesem ersten übergebenen Argument von apply() wird das Objekt festgelegt, welches this repräsentiert. Hier ist z. B. eine einfache Implementierung von new:

- -
function trivialNew(constructor, ...args) {
-  var o = {}; // Create an object
-  constructor.apply(o, args);
-  return o;
-}
- -

Das ist keine exakte Replikation von new, weil die Prototypenkette nicht angelegt wird (es wäre schwer, hier vollständig darzustellen). Das ist nichts, was man häufig benötigt, jedoch ist es nützlich darüber Bescheid zu wissen. In diesem Codeteil nennt man ...args (mit den Punkten) das sogenannte Restargument — wie der Name impliziert, enthält dieser alle restlichen Argumente.

- -

Der Aufruf von

- -
var bill = trivialNew(Person, "William", "Orange");
- -

ist somit fast äquivalent zu

- -
var bill = new Person("William", "Orange");
- -

apply() hat eine Schwesterfunktion namens call, die ebenfalls das Setzen von this erlaubt, jedoch statt eines Arrays nimmt sie eine erweiterte Liste mit Argumenten entgegen.

- -
function lastNameCaps() {
-  return this.last.toUpperCase();
-}
-var s = new Person("Simon", "Willison");
-lastNameCaps.call(s);
-// Das gleiche wie:
-s.lastNameCaps = lastNameCaps;
-s.lastNameCaps();
- -

Innere Funktionen

- -

Funktionsdeklarationen sind in JavaScript auch innerhalb von Funktionen erlaubt. Das lies sich bei der weiter oben verwendeten makePerson()-Funktion schon erkennen. Ein wichtige Eigenschaft von verschachtelten Funktionen in JavaScript ist der Zugriff auf Variablen aus der Elternfunktion:

- -
function betterExampleNeeded() {
-    var a = 1;
-    function oneMoreThanA() {
-        return a + 1;
-    }
-    return oneMoreThanA();
-}
-
- -

Dies bietet einen großen Nutzen beim Schreiben von einfacher wartbarem Code. Wenn eine Funktion ein oder zwei andere Funktionen benutzt, diese aber im Code nirgendwo anders benötigt werden, kann man diese Hilfsfunktionen in die Funktion schachteln, die diese schlussendlich eigentlich aufruft. Das hällt die Anzahl der globalen Funktionen niedrig, was immer gut ist.

- -

Dieses ist ein Gegenpool zum oft verlockenden Einsatz von globalen Variablen. Wenn komplexer Code geschrieben wird, ist es oft verlockend und einfach, globale Variablen für das Teilen von Werten zwischen mehreren Funktionen zu benutzen — was aber zu einem unwartbaren Code führen kann. Geschachtelte Funktionen teilen sich Variablen aus der Elternfunktion, weshalb dieser Mechanismus gut für das Koppeln von Funktionen geeignet ist, wenn es Sinn ergibt, ohne dabei den globalen Namensraum zu verunreinigen — "lokal global" wenn man so will. Diese Technik sollte mit Vorsicht eingesetzt werden, ist jedoch eine nützliche Möglichkeit.

- -

Closures

- -

Nun wird einer der mächtigsten Abstraktionsmechanismen vorgestellt, den JavaScript mit sich bringt —  der jedoch oft auch für Verwirrung sorgt. Was passiert im nachfolgenden Codeschnipsel?

- -
function makeAdder(a) {
-  return function(b) {
-    return a + b;
-  };
-}
-var x = makeAdder(5);
-var y = makeAdder(20);
-x(6); // ?
-y(7); // ?
- -

Der Name der makeAdder-Funktion lässt es schon vermuten, was diese bewirken soll: sie erstellt neue adder-Funktionen, welche dann mit einem Argument aufgerufen werden, welches zu dem Argument addiert wird, mit dem sie erstellt wurden.

- -

Was hier passiert ist das gleiche wie das, was vorab mit den inneren Funktionen geschehen ist: eine Funktion, die in einer anderen Funktion definiert ist, hat Zugriff auf die Variable der äußeren Funktion. Hier jedoch mit dem Unterschied, dass die äußere Funktion etwas zurückgibt und vortäuscht, dass die lokalen Variablen nicht mehr existieren. Doch bleiben diese bestehen — andernfalls könnte die adder-Funktion nicht funktionieren. Außerdem gibt es zwei verschiedene Kopien der lokalen Variablen der makeAdder()-Funktion — eine, wo a den Wert 5 hat und eine wo a den Wert 20 hat. Die Ergebnisse der beiden Funktionsaufrufe ist deswegen folgendes:

- -
x(6) // ergibt 11
-y(7) // ergibt 27
-
- -

Hier ist, was tatsächlich passiert. Immer, wenn JavaScript eine Funktion ausführt, wird ein Scopeobjekt erstellt, welches die lokalen Variablen enthält, die in der Funktion erstellt werden. Es wird mit jeder Variablen initialisiert, die als Funktionsparameter übergeben wird. Das ist wie mit dem globalen Objekt, welches alle globalen Variablen und Funktionen in sich vorhält, jedoch mit einigen wichtigen Unterschieden: erstens wird immer ein neues Scopeobjekt für jeden Aufruf einer Funktion erstellt und zweitens (anders als bei globalen Objekten, welche als this und in Browsern als window erreichbar sind), sind diese Scopeobjekte nicht direkt im JavaScript Code erreichbar. Es gibt zum Beispiel keinen Mechanismus zum Iterieren aller Eigenschaften eines Scopeobjekts.

- -

Beim Aufruf der makeAdder()-Funktion wird ein Scope-Objekt erstellt, das eine Eigenschaft besitzt: a, welche das übergebene Argument der makeAdder() Funktion ist. makeAdder() gibt dann eine neu erstellte Funktion zurück. Normalerweise würde der Garbage Collector von JavaScript das für makeAdder() erstellte Scopeobjekt an dieser Stelle entsorgen, doch die zurückgegebene Funktion enthält noch immer eine Referenz auf das Scopeobjekt. Als Resultat wird das Scopeobjekt nicht entsorgt, bis es keine Referenzen mehr auf die von makeAdder() zurückgegebene Funktion gibt.

- -

Scopeobjekte bilden eine Scopekette, die ähnlich funktioniert wie die Prototypenkette von JavaScripts Objektsystem.

- -

Eine Closure ist eine Kombination aus einer Funktion und dem Scopeobjekt, in dem die Funktion erstellt wurde. Closures sind in der Lage, einen Status zu speichern — als solches können sie oft an Stellen von Objekten eingesetzt werden. Hier sind einige gute Einführungen zu Closures zu finden.

diff --git "a/files/de/web/javascript/einf\303\274hrung_in_den_gebrauch_von_xpath_in_javascript/index.html" "b/files/de/web/javascript/einf\303\274hrung_in_den_gebrauch_von_xpath_in_javascript/index.html" deleted file mode 100644 index 6af0ba9e0e..0000000000 --- "a/files/de/web/javascript/einf\303\274hrung_in_den_gebrauch_von_xpath_in_javascript/index.html" +++ /dev/null @@ -1,411 +0,0 @@ ---- -title: Einführung in den Gebrauch von XPath in JavaScript -slug: Web/JavaScript/Einführung_in_den_Gebrauch_von_XPath_in_JavaScript -translation_of: Web/XPath/Introduction_to_using_XPath_in_JavaScript ---- -

Dieses Dokument beschreibt die Schnittstelle zu XPath in JavaScript intern, in Erweiterungen und in Webseiten. Mozilla implementiert einen großen Teil von DOM 3 XPath, sodass XPath auf HTML- und XML-Dokumente angewendet werden kann.

- -

Die Hauptschnittstelle für die Anwendung von XPath ist die evaluate-Methode des document-Objekts.

- -

document.evaluate

- -

Diese Methode wertet  XPath Ausdrücke in Bezug auf ein XML basierendes Dokument (einschließlich HTML-Documente) aus und gibt ein XPathResult-Objekt zurück, das ein Einzelknoten oder eine Zusammenstellung mehrerer Knoten sein kann. Die vorhandene Dokumentation dieser Methode ist unter document.evaluate zu finden, sie ist jedoch für unseren jetzigen Bedarf ziemlich knapp gehalten. Eine umfangreichere Betrachtung wird nachfolgend beschrieben.

- -
var xpathResult = document.evaluate( xpathExpression, contextNode, namespaceResolver, resultType, result );
-
- -

Parameter

- -

Die evaluate Funktion nimmt insgesamt fünf Parameter entgegen:

- - - -

Rückgabewert

- -

Returns xpathResult, which is an XPathResult object of the type specified in the resultType parameter. The XPathResult Interface is defined {{ Source("dom/interfaces/xpath/nsIDOMXPathResult.idl", "here") }}.

- -

Einen Standard-Namensraumauflöser (Default Namespace Resolver) implementieren

- -

Wir erstellen einen Namensraumauflöser mit Hilfe der createNSResolver-Methode des document-Objekts.

- -
var nsResolver = document.createNSResolver( contextNode.ownerDocument == null ? contextNode.documentElement : contextNode.ownerDocument.documentElement );
-
- -

Or alternatively by using the <code>createNSResolver</code> method of a <code>XPathEvaluator</code> object. <pre> var xpEvaluator = new XPathEvaluator(); var nsResolver = xpEvaluator.createNSResolver( contextNode.ownerDocument == null ? contextNode.documentElement : contextNode.ownerDocument.documentElement ); </pre> And then pass document.evaluate, the nsResolver variable as the namespaceResolver parameter.

- -

Note: XPath defines QNames without a prefix to match only elements in the null namespace. There is no way in XPath to pick up the default namespace as applied to a regular element reference (e.g., p[@id='_myid'] for xmlns='http://www.w3.org/1999/xhtml'). To match default elements in a non-null namespace, you either have to refer to a particular element using a form such as ['namespace-uri()='http://www.w3.org/1999/xhtml' and name()='p' and @id='_myid'] (this approach works well for dynamic XPath's where the namespaces might not be known) or use prefixed name tests, and create a namespace resolver mapping the prefix to the namespace. Read more on how to create a user defined namespace resolver, if you wish to take the latter approach.

- -

Anmerkungen

- -

Adapts any DOM node to resolve namespaces so that an XPath expression can be easily evaluated relative to the context of the node where it appeared within the document. This adapter works like the DOM Level 3 method lookupNamespaceURI on nodes in resolving the namespaceURI from a given prefix using the current information available in the node's hierarchy at the time lookupNamespaceURI is called. Also correctly resolves the implicit xml prefix.

- -

Festlegung des Rückgabetyps

- -

The returned variable xpathResult from document.evaluate can either be composed of individual nodes (simple types), or a collection of nodes (node-set types).

- -

Simple Types

- -

When the desired result type in resultType is specified as either:

- - - -

We obtain the returned value of the expression by accessing the following properties respectively of the XPathResult object.

- - - -
Beispiel
- -

The following uses the XPath expression count(//p) to obtain the number of <p> elements in a HTML document:

- -
var paragraphCount = document.evaluate( 'count(//p)', document, null, XPathResult.ANY_TYPE, null );
-
-alert( 'This document contains ' + paragraphCount.numberValue + ' paragraph elements' );
-
- -

Although JavaScript allows us to convert the number to a string for display, the XPath interface will not automatically convert the numerical result if the stringValue property is requested, so the following code will not work:

- -
var paragraphCount = document.evaluate('count(//p)', document, null, XPathResult.ANY_TYPE, null );
-
-alert( 'This document contains ' + paragraphCount.stringValue + ' paragraph elements' );
-
- -

Instead it will return an exception with the code NS_DOM_TYPE_ERROR.

- -

Node-Set-Typen

- -

The XPathResult object allows node-sets to be returned in 3 principal different types:

- - - -
Iteratoren
- -

When the specified result type in the resultType parameter is either:

- - - -

The XPathResult object returned is a node-set of matched nodes which will behave as an iterator, allowing us to access the individual nodes contained by using the iterateNext() method of the XPathResult.

- -

Once we have iterated over all of the individual matched nodes, iterateNext() will return null.

- -

Note however, that if the document is mutated (the document tree is modified) between iterations that will invalidate the iteration and the invalidIteratorState property of XPathResult is set to true, and a NS_ERROR_DOM_INVALID_STATE_ERR exception is thrown.

- -
Iterator Example
- -
var iterator = document.evaluate('//phoneNumber', documentNode, null, XPathResult.UNORDERED_NODE_ITERATOR_TYPE, null );
-
-try {
-  var thisNode = iterator.iterateNext();
-
-  while (thisNode) {
-    alert( thisNode.textContent );
-    thisNode = iterator.iterateNext();
-  }
-}
-catch (e) {
-  dump( 'Error: Document tree modified during iteration ' + e );
-}
-
- -
Momentabbilder (Snapshots)
- -

When the specified result type in the resultType parameter is either:

- - - -

The XPathResult object returned is a static node-set of matched nodes, which allows us to access each node through the snapshotItem(itemNumber) method of the XPathResult object, where itemNumber is the index of the node to be retrieved. The total number of nodes contained can be accessed through the snapshotLength property.

- -

Snapshots do not change with document mutations, so unlike the iterators the snapshot does not become invalid, but it may not correspond to the current document, for example the nodes may have been moved, it might contain nodes that no longer exist, or new nodes could have been added.

- -
Snapshot Example
- -
var nodesSnapshot = document.evaluate('//phoneNumber', documentNode, null, XPathResult.ORDERED_NODE_SNAPSHOT_TYPE, null );
-
-for ( var i=0 ; i < nodesSnapshot.snapshotLength; i++ )
-{
-  dump( nodesSnapshot.snapshotItem(i).textContent );
-}
-
- -
Erster Knoten
- -

When the specified result type in the resultType parameter is either:

- - - -

The XPathResult object returned is only the first found node that matched the XPath expression. This can be accessed through the singleNodeValue property of the XPathResult object. This will be null if the node set is empty.

- -

Note that, for the unordered subtype the single node returned might not be the first in document order, but for the ordered subtype you are guaranteed to get the first matched node in the document order.

- -
First Node Example
- -
var firstPhoneNumber = document.evaluate('//phoneNumber', documentNode, null, XPathResult.FIRST_ORDERED_NODE_TYPE, null );
-
-dump( 'The first phone number found is ' + firstPhoneNumber.singleNodeValue.textContent );
-
- -

Die Konstante ANY_TYPE

- -

When the result type in the resultType parameter is specified as ANY_TYPE, the XPathResult object returned, will be whatever type that naturally results from the evaluation of the expression.

- -

It could be any of the simple types (NUMBER_TYPE, STRING_TYPE, BOOLEAN_TYPE), but, if the returned result type is a node-set then it will only be an UNORDERED_NODE_ITERATOR_TYPE.

- -

To determine that type after evaluation, we use the resultType property of the XPathResult object. The constant values of this property are defined in the appendix. None Yet =====Any_Type Example===== <pre> </pre>

- -

Beispiele

- -

Innerhalb eines HTML-Dokuments

- -

The following code is intended to be placed in any JavaScript fragment within or linked to the HTML document against which the XPath expression is to be evaluated.

- -

To extract all the <h2> heading elements in an HTML document using XPath, the xpathExpression is simply '//h2'. Where, // is the Recursive Descent Operator that matches elements with the nodeName h2 anywhere in the document tree. The full code for this is: link to introductory xpath doc

- -
var headings = document.evaluate('//h2', document, null, XPathResult.ANY_TYPE, null );
-
- -

Notice that, since HTML does not have namespaces, we have passed null for the namespaceResolver parameter.

- -

Since we wish to search over the entire document for the headings, we have used the document object itself as the contextNode.

- -

The result of this expression is an XPathResult object. If we wish to know the type of result returned, we may evaluate the resultType property of the returned object. In this case, that will evaluate to 4, an UNORDERED_NODE_ITERATOR_TYPE. This is the default return type when the result of the XPath expression is a node set. It provides access to a single node at a time and may not return nodes in a particular order. To access the returned nodes, we use the iterateNext() method of the returned object:

- -
var thisHeading = headings.iterateNext();
-
-var alertText = 'Level 2 headings in this document are:\n'
-
-while (thisHeading) {
-  alertText += thisHeading.textContent + '\n';
-  thisHeading = headings.iterateNext();
-}
-
- -

Once we iterate to a node, we have access to all the standard DOM interfaces on that node. After iterating through all the h2 elements returned from our expression, any further calls to iterateNext() will return null.

- -

Auswertung an einem XML-Dokument innerhalb einer Erweiterung

- -

The following uses an XML document located at chrome://yourextension/content/peopleDB.xml as an example.

- -
<?xml version="1.0"?>
-<people xmlns:xul = "http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" >
-  <person>
-	<name first="george" last="bush" />
-	<address street="1600 pennsylvania avenue" city="washington" country="usa"/>
-	<phoneNumber>202-456-1111</phoneNumber>
-  </person>
-  <person>
-	<name first="tony" last="blair" />
-	<address street="10 downing street" city="london" country="uk"/>
-	<phoneNumber>020 7925 0918</phoneNumber>
-  </person>
-</people>
-
- -

To make the contents of the XML document available within the extension, we create an XMLHttpRequest object to load the document synchronously, the variable xmlDoc will contain the document as an XMLDocument object against which we can use the evaluate method

- -

JavaScript used in the extensions xul/js documents.

- -
var req = new XMLHttpRequest();
-
-req.open("GET", "chrome://yourextension/content/peopleDB.xml", false);
-req.send(null);
-
-var xmlDoc = req.responseXML;
-
-var nsResolver = xmlDoc.createNSResolver( xmlDoc.ownerDocument == null ? xmlDoc.documentElement : xmlDoc.ownerDocument.documentElement);
-
-var personIterator = xmlDoc.evaluate('//person', xmlDoc, nsResolver, XPathResult.ANY_TYPE, null );
-
- -

Anmerkung

- -

When the XPathResult object is not defined, the constants can be retreived in privileged code using Components.interfaces.nsIDOMXPathResult.ANY_TYPE (CI.nsIDOMXPathResult). Similarly, an XPathEvaluator can be created using:

- -
Components.classes["@mozilla.org/dom/xpath-evaluator;1"].createInstance(Components.interfaces.nsIDOMXPathEvaluator)
- -

Anhang

- -

Einen benutzerdefinierten Namensauflöser implementieren

- -

This is an example for illustration only. This function will need to take namespace prefixes from the xpathExpression and return the URI that corresponds to that prefix. For example, the expression:

- -
'//xhtml:td/mathml:math'
-
- -

will select all MathML expressions that are the children of (X)HTML table data cell elements.

- -

In order to associate the 'mathml:' prefix with the namespace URI 'http://www.w3.org/1998/Math/MathML' and 'xhtml:' with the URI 'http://www.w3.org/1999/xhtml' we provide a function:

- -
function nsResolver(prefix) {
-  var ns = {
-    'xhtml' : 'http://www.w3.org/1999/xhtml',
-    'mathml': 'http://www.w3.org/1998/Math/MathML'
-  };
-  return ns[prefix] || null;
-}
-
- -

Our call to document.evaluate would then looks like:

- -
document.evaluate( '//xhtml:td/mathml:math', document, nsResolver, XPathResult.ANY_TYPE, null );
-
- -

Einen Standard-Namensrauf für XML-Dokumente implementieren

- -

As noted in the Implementing a Default Namespace Resolver previously, the default resolver does not handle the default namespace for XML documents. For example with this document:

- -
<?xml version="1.0" encoding="UTF-8"?>
-<feed xmlns="http://www.w3.org/2005/Atom">
-    <entry />
-    <entry />
-    <entry />
-</feed>
-
- -

doc.evaluate('//entry', doc, nsResolver, XPathResult.ANY_TYPE, null) will return an empty set, where nsResolver is the resolver returned by createNSResolver. Passing a null resolver doesn't work any better, either.

- -

One possible workaround is to create a custom resolver that returns the correct default namespace (the Atom namespace in this case). Note that you still have to use some namespace prefix in your XPath expression, so that the resolver function will be able to change it to your required namespace. E.g.:

- -
function resolver() {
-    return 'http://www.w3.org/2005/Atom';
-}
-doc.evaluate('//myns:entry', doc, resolver, XPathResult.ANY_TYPE, null)
-
- -

Note that a more complex resolver will be required if the document uses multiple namespaces.

- -

An approach which might work better (and allow namespaces not to be known ahead of time) is described in the next section.

- -

Using XPath functions to reference elements with a default namespace

- -

Another approach to match default elements in a non-null namespace (and one which works well for dynamic XPath expressions where the namespaces might not be known), involves referring to a particular element using a form such as [namespace-uri()='http://www.w3.org/1999/xhtml' and name()='p' and @id='_myid']. This circumvents the problem of an XPath query not being able to detect the default namespace on a regularly labeled element.

- -

Getting specifically namespaced elements and attributes regardless of prefix

- -

If one wishes to provide flexibility in namespaces (as they are intended) by not necessarily requiring a particular prefix to be used when finding a namespaced element or attribute, one must use special techniques.

- -

While one can adapt the approach in the above section to test for namespaced elements regardless of the prefix chosen (using local-name() in combination with namespace-uri() instead of name()), a more challenging situation occurs, however, if one wishes to grab an element with a particular namespaced attribute in a predicate (given the absence of implementation-independent variables in XPath 1.0).

- -

For example, one might try (incorrectly) to grab an element with a namespaced attribute as follows: var xpathlink = someElements[local-name(@*)="href" and namespace-uri(@*)='http://www.w3.org/1999/xlink'];

- -

This could inadvertently grab some elements if one of its attributes existed that had a local name of "href", but it was a different attribute which had the targeted (XLink) namespace (instead of @href).

- -

In order to accurately grab elements with the XLink @href attribute (without also being confined to predefined prefixes in a namespace resolver), one could obtain them as follows:

- -
var xpathEls = 'someElements[@*[local-name() = "href" and namespace-uri() = "http://www.w3.org/1999/xlink"]]'; // Grabs elements with any single attribute that has both the local name 'href' and the XLink namespace
-var thislevel = xml.evaluate(xpathEls, xml, null, XPathResult.ANY_TYPE, null);
-var thisitemEl = thislevel.iterateNext();
-
- -

In XPathResult definierte Konstanten

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Result Type Defined ConstantValueDescription
ANY_TYPE0A result set containing whatever type naturally results from evaluation of the expression. Note that if the result is a node-set then UNORDERED_NODE_ITERATOR_TYPE is always the resulting type.
NUMBER_TYPE1A result containing a single number. This is useful for example, in an XPath expression using the count() function.
STRING_TYPE2A result containing a single string.
BOOLEAN_TYPE3A result containing a single boolean value. This is useful for example, in an XPath expression using the not() function.
UNORDERED_NODE_ITERATOR_TYPE4A result node-set containing all the nodes matching the expression. The nodes may not necessarily be in the same order that they appear in the document.
ORDERED_NODE_ITERATOR_TYPE5A result node-set containing all the nodes matching the expression. The nodes in the result set are in the same order that they appear in the document.
UNORDERED_NODE_SNAPSHOT_TYPE6A result node-set containing snapshots of all the nodes matching the expression. The nodes may not necessarily be in the same order that they appear in the document.
ORDERED_NODE_SNAPSHOT_TYPE7A result node-set containing snapshots of all the nodes matching the expression. The nodes in the result set are in the same order that they appear in the document.
ANY_UNORDERED_NODE_TYPE8A result node-set containing any single node that matches the expression. The node is not necessarily the first node in the document that matches the expression.
FIRST_ORDERED_NODE_TYPE9A result node-set containing the first node in the document that matches the expression.
- -

Siehe auch

- - - -
-

Original Document Information

- - -
diff --git a/files/de/web/javascript/enumerability_and_ownership_of_properties/index.html b/files/de/web/javascript/enumerability_and_ownership_of_properties/index.html new file mode 100644 index 0000000000..70c769be5a --- /dev/null +++ b/files/de/web/javascript/enumerability_and_ownership_of_properties/index.html @@ -0,0 +1,340 @@ +--- +title: Aufzählbarkeit und Zugehörigkeit von Eigenschaften +slug: Web/JavaScript/Aufzählbarkeit_und_Zugehörigkeit_von_Eigenschaften +tags: + - Eigenschaft + - JavaScript + - Objekt + - enumerable +translation_of: Web/JavaScript/Enumerability_and_ownership_of_properties +--- +
{{JsSidebar("More")}}
+ +

Aufzählbare Eigenschaften sind jene, deren internes Statusfeld enumerable gesetzt ist.

+ +

Alle aufzählbaren Eigenschaften eines Objektes sind mit for...in-Schleifen zu durchlaufen (sofern der Name der Eigenschaft kein Symbol ist), daher die Bezeichnung „aufzählbar“.
+ Neben for…in gibt es weitere Möglichkeiten, die Existenz einer Eigenschaft zu erkennen, Eigenschaften aufzuzählen oder abzurufen. Siehe dazu nachfolgende Tabellen.

+ +

Standardmäßig aufzählbar sind Eigenschaften, die durch einfache Zuweisung oder Initialisierung entstanden sind, nicht jedoch Eigenschaften, die durch Object.defineProperty oder ähnliche Mechanismen erzeugt wurden.

+ +

Die Zugehörigkeit einer Eigenschaft ergibt sich aus dem Ort seiner Definition; dies ist entweder das Objekt selbst oder einer seiner Prototypen. Eine Eigenschaft, die im Objekt definiert wurde, gehört zu diesem Objekt.

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Aufzählbarkeit und Zugehörigkeit – Eingebaute Methoden zur Erkennung, zum Abruf und zur Aufzählung
FunktionObjektObjekt und geerbt aus Prototypenkettenur geerbt aus Prototypenkette
Erkennung + + + + + + + + + + + + + + + +
aufzählbarnicht aufzählbaraufzählbar und nicht aufzählbar
+

propertyIsEnumerable

+ +

hasOwnProperty

+
+

hasOwnProperty – aufzählbare Eigenschaften mit propertyIsEnumerable entfernt

+
hasOwnProperty
+
+ + + + + + + + + + + + + + + +
aufzählbarnicht aufzählbaraufzählbar und nicht aufzählbar
nur mit eigenem Code möglichnur mit eigenem Code möglichin
+
nur mit eigenem Code möglich
Abruf + + + + + + + + + + + + + + + +
aufzählbarnicht aufzählbaraufzählbar und nicht aufzählbar
+

Object.keys

+ +

getOwnPropertyNames 

+ +

getOwnPropertySymbols

+
getOwnPropertyNames, getOwnPropertySymbols – aufzählbare Eigenschaften mit propertyIsEnumerable entfernt +

getOwnPropertyNames

+ +

getOwnPropertySymbols

+
+
nur mit eigenem Code möglichnur mit eigenem Code möglich
Aufzählung + + + + + + + + + + + + + + + +
aufzählbarnicht aufzählbaraufzählbar und nicht aufzählbar
+

Object.keys

+ +

getOwnPropertyNames 

+ +

getOwnPropertySymbols

+
getOwnPropertyNames, getOwnPropertySymbols – aufzählbare Eigenschaften mit propertyIsEnumerable entfernt +

getOwnPropertyNames

+ +

getOwnPropertySymbols

+
+
+ + + + + + + + + + + + + + + +
aufzählbarnicht aufzählbaraufzählbar und nicht aufzählbar
+

for..in

+ +

(ohne Symbole)

+
nur mit eigenem Code möglichnur mit eigenem Code möglich
+
nur mit eigenem Code möglich
+
+ +

Sichtbarkeit von Eigenschaften

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
infor..inobj.hasOwnPropertyobj.propertyIsEnumerableObject.keysObject.getOwnPropertyNamesObject.getOwnPropertyDescriptorsReflect.ownKeys()
Aufzählbarjajajajajajajaja
Nicht aufzählbarjaneinjaneinneinjajaja
Symbol als Namejaneinjajaneinneinjaja
Aufzählbar, geerbtjajaneinneinneinneinneinnein
Nicht aufzählbar, geerbtjaneinneinneinneinneinneinnein
Symbol als Name, geerbtjaneinneinneinneinneinneinnein
+
+ +

Eigenschaften nach Aufzählbarkeit oder Zugehörigkeit abrufen

+ +

Der nachfolgende Code ist nicht immer der effizienteste Weg, aber als einfaches Beispiel gut geeignet.

+ + + +
var SimplePropertyRetriever = {
+    getOwnEnumerables: function(obj) {
+        return this._getPropertyNames(obj, true, false, this._enumerable);
+         // Or could use for..in filtered with hasOwnProperty or just this: return Object.keys(obj);
+    },
+    getOwnNonenumerables: function(obj) {
+        return this._getPropertyNames(obj, true, false, this._notEnumerable);
+    },
+    getOwnEnumerablesAndNonenumerables: function(obj) {
+        return this._getPropertyNames(obj, true, false, this._enumerableAndNotEnumerable);
+        // Or just use: return Object.getOwnPropertyNames(obj);
+    },
+    getPrototypeEnumerables: function(obj) {
+        return this._getPropertyNames(obj, false, true, this._enumerable);
+    },
+    getPrototypeNonenumerables: function(obj) {
+        return this._getPropertyNames(obj, false, true, this._notEnumerable);
+    },
+    getPrototypeEnumerablesAndNonenumerables: function(obj) {
+        return this._getPropertyNames(obj, false, true, this._enumerableAndNotEnumerable);
+    },
+    getOwnAndPrototypeEnumerables: function(obj) {
+        return this._getPropertyNames(obj, true, true, this._enumerable);
+        // Or could use unfiltered for..in
+    },
+    getOwnAndPrototypeNonenumerables: function(obj) {
+        return this._getPropertyNames(obj, true, true, this._notEnumerable);
+    },
+    getOwnAndPrototypeEnumerablesAndNonenumerables: function(obj) {
+        return this._getPropertyNames(obj, true, true, this._enumerableAndNotEnumerable);
+    },
+    // Private static property checker callbacks
+    _enumerable: function(obj, prop) {
+        return obj.propertyIsEnumerable(prop);
+    },
+    _notEnumerable: function(obj, prop) {
+        return !obj.propertyIsEnumerable(prop);
+    },
+    _enumerableAndNotEnumerable: function(obj, prop) {
+        return true;
+    },
+    // Inspired by http://stackoverflow.com/a/8024294/271577
+    _getPropertyNames: function getAllPropertyNames(obj, iterateSelfBool, iteratePrototypeBool, includePropCb) {
+        var props = [];
+
+        do {
+            if (iterateSelfBool) {
+                Object.getOwnPropertyNames(obj).forEach(function(prop) {
+                    if (props.indexOf(prop) === -1 && includePropCb(obj, prop)) {
+                        props.push(prop);
+                    }
+                });
+            }
+            if (!iteratePrototypeBool) {
+                break;
+            }
+            iterateSelfBool = true;
+        } while (obj = Object.getPrototypeOf(obj));
+
+        return props;
+    }
+};
+ +

Siehe auch

+ + diff --git a/files/de/web/javascript/equality_comparisons_and_sameness/index.html b/files/de/web/javascript/equality_comparisons_and_sameness/index.html new file mode 100644 index 0000000000..2b9be0a283 --- /dev/null +++ b/files/de/web/javascript/equality_comparisons_and_sameness/index.html @@ -0,0 +1,424 @@ +--- +title: Vergleiche auf Gleichheit und deren Verwendung +slug: Web/JavaScript/Vergleiche_auf_Gleichheit_und_deren_Verwendung +translation_of: Web/JavaScript/Equality_comparisons_and_sameness +--- +
{{jsSidebar("Intermediate")}}
+ +
+

JavaScript bietet drei verschiedene Operationen an, um Werte zu vergleichen:

+ + + +

Die Wahl der Operation hängt von der Art des gewünschten Vergleichs auf Gleichheit ab.

+
+ +

Kurz gesagt nimmt double equals eine Typkonvertierung der Operanden vor, bevor der Vergleich der Werte gemacht wird. Bei triple equals werden die Werte ohne vorherige Typkonvertierung miteinander verglichen. Wenn sich die Datentypen der beiden Operanden unterscheiden liefert triple equals immer false zurück. Object.is verhält sich wie triple equals und bietet darüber hinaus eine spezielle Behandlung für NaN und -0 und +0 an. -0 und +0 sind für Object.is ungleich während Object.is(NaN, NaN) true ist. Laut IEEE 754 ergibt ein Vergleich von zwei NaN mit double equals oder triple equals false. Diese drei Operationen unterscheiden sich ihrere Behandlung von primitiven Datentypen. Es wird nicht geprüft, ob die beiden Operanden konzeptionell diesselbe Struktur besitzen. Für die nichtprimitiven Objekte x und y, welche diesselbe Struktur besitzen aber zwei unterschiedliche Objekte sind, ergeben die drei Operationen false.

+ +

Strikte Gleichheit mit ===

+ +

Strikte Gleichheit prüft zwei Werte auf Gleichheit. Keiner der Werte wird vor dem Vergleich implizit konvertiert. Wenn die Werte verschiedene Datentypen haben, werden die Werte als ungleich betrachtet. Anderenfalls, wenn die Werte denselben Datentyp haben und keine Zahlen sind, werden sie als gleich betrachtet, solange sie denselben Wert haben. Wenn beide Werte Zahlen sind, werden sie als gleich betrachtet, solange beide nicht NaN sind und denselben Wert haben oder der eine Wert +0 und der andere Wert -0 ist.

+ +
var num = 0;
+var obj = new String("0");
+var str = "0";
+var b = false;
+
+console.log(num === num); // true
+console.log(obj === obj); // true
+console.log(str === str); // true
+
+console.log(num === obj); // false
+console.log(num === str); // false
+console.log(obj === str); // false
+console.log(null === undefined); // false
+console.log(obj === null); // false
+console.log(obj === undefined); // false
+
+ +

Strikte Gleichheit ist fast immer die am meisten geeignete Vergleichsoperation. Für alle Werte, die keine Zahlen sind, verwendet sie die naheliegende Semantik: ein Wert ist nur mit sich selbst gleich. Für Zahlen kommt eine leicht unterschiedliche Semantik zum Einsatz, da zwei Grenzfälle berücksichtigt werden müssen.  Im ersten Grenzfall kann die Zahl 0 als Gleitkommazahl ein positives oder negatives Vorzeichen haben. Dies kann zur Repräsentation von bestimmten mathematischen Lösungen nützlich sein. Da aber in den meisten Situationen nicht zwischen +0 und -0 unterschieden wird, behandelt die strikte Gleichheit diese zwei Werte als gleich. Der zweite Grenzfall ergibt sich dadruch, dass Gleitkommazahlen einen keine-Zahl Wert haben, NaN (not-a-number). Dadurch können Lösungen für schlecht definierte mathematische Probleme dargestellt werden (z.B.: negativ unendlich plus positiv undendlich). Strikte Gleichheit behandelt NaN als ungleich zu jedem anderen Wert und sich selbst. Der einzige Fall, in dem (x !== x) true ergibt, ist, wenn x den Wert NaN hat.

+ +

Lose Gleichheit mit ==

+ +

Lose Gleichheit vergleicht zwei Werte auf deren Gleichheit, nachdem beide zu demselben Datentyp konvertiert wurden. Nach der Konvertierung (ein oder beide Werte können konvertiert werden) wird der finale Vergleich wie bei === ausgeführt.  Lose Gleichheit ist symmetrisch: A == B hat immer dieselbe Semantik wie B == A für alle Werte von A und B.

+ +

Der Vergleich auf Gleichheit wird wie folgt für Operanden mit den verschiedenen Datentypen ausgeführt:

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
 Operand B
  UndefinedNullNumberStringBooleanObject
Operand AUndefinedtruetruefalsefalsefalseIsFalsy(B)
NulltruetruefalsefalsefalseIsFalsy(B)
NumberfalsefalseA === BA === ToNumber(B)ToNumber(B) === AToPrimitive(B) == A
StringfalsefalseB === ToNumber(A)A === BToNumber(A) === ToNumber(B)ToPrimitive(B) == A
BooleanfalsefalseToNumber(A) === BToNumber(A) === ToNumber(B)A === Bfalse
ObjectIsFalsy(A)IsFalsy(A)ToPrimitive(A) == BToPrimitive(A) == Bfalse +

A === B

+
+ +

In der oberen Tabelle versucht ToNumber(A) sein Argument vor dem Vergleich in eine Zahl zu konvertieren. Das Verhalten ist äquivalent zu +A (der unäre + Operator).  ToPrimitive(A) versucht sein Argument, das ein Objekt ist, in einen primitiven Wert zu konvertieren. Dazu wird eine unterschiedliche Sequenz von A.toString und A.valueOf Methoden von A aufzurufen.

+ +

Traditionell und laut ECMAScript sind alle Objekte lose ungleich zu undefined und null. Aber die meisten Webbbrowser erlauben einer sehr kleinen Menge von Objekten (speziell das document.all Objekt für jede Seite), dass sie sich in bestimmten Kontexten so verhalten, als ob sie den Wert undefined emulieren.  Lose Gleichheit ist ein derartiger Kontext. Daher ergibt die Methode IsFalsy(A) genau dann true, wenn A ein Objekt ist, das undefined emuliert. In allen anderen Fällen ist ein Objekt nie lose gleich zu undefined oder null.

+ +
var num = 0;
+var obj = new String("0");
+var str = "0";
+var b = false;
+
+console.log(num == num); // true
+console.log(obj == obj); // true
+console.log(str == str); // true
+
+console.log(num == obj); // true
+console.log(num == str); // true
+console.log(obj == str); // true
+console.log(null == undefined); // true
+
+// both false, except in rare cases
+console.log(obj == null);
+console.log(obj == undefined);
+
+ +

Manche Entwickler haben die Ansicht, dass die Verwendung der losen Gleichheit fast nie eine gute Idee ist. Das Resultat des Vergleichs mit strikter Gleichheit ist einfacher vorherzusagen und die Auswertung ist schneller, da keine Konvertierung der Werte stattfindet.

+ +

Same-value Gleichheit

+ +

Same-value Gleichheit adressiert den dritten Fall: Bestimmung, ob zwei Werte in allen Kontexten funktional identisch sind. Dieser Anwendungsfall demonstriert eine Instanz des Liskovschen Substitutionsprinzip. Eine Instanz tritt auf, wenn versucht wird ein nicht veränderbares Property zu verändern:

+ +
// Add an immutable NEGATIVE_ZERO property to the Number constructor.
+Object.defineProperty(Number, "NEGATIVE_ZERO",
+                      { value: -0, writable: false, configurable: false, enumerable: false });
+
+function attemptMutation(v)
+{
+  Object.defineProperty(Number, "NEGATIVE_ZERO", { value: v });
+}
+
+ +

Object.defineProperty wird eine Exception werfen, wenn ein Versuch zum Verändern eines unveränderbares Property es verändern würde. Es passiert nichts, solange keine Veränderung stattfinden soll.  Wenn v -0 ist, wurde keine Veränderung angefragt und somit wird keine Exception geworfen. Wenn v aber +0 ist, hätte Number.NEGATIVE_ZERO nicht länger seinen unveränderbaren Wert. Wenn ein unveränderbares Property neudefiniert wird, wird der neu spezifizierte Wert intern mittels der Same-value Gleichheit mit dem aktuellen Wert verglichen.

+ +

Die Same-value Gleichheit wird von der Object.is Methode angeboten.

+ +

Abstrakte Gleichheit, strikte Gleichheit und same-value Gleichheit in der Spezifikation

+ +

In ECMAScript 5 wird der Vergleich mit == in Section 11.9.3, The Abstract Equality Algorithm beschrieben. Der === Vergleich ist in 11.9.6, The Strict Equality Algorithm zu finden. (Diese beiden Abschnitte sind kurz und verständlich. Hinweis: zuerst den Abschnitt Strict Equality Algorithm lesen) ECMAScript 5 beschreibt auch die same-value Gleichheit in Section 9.12, The SameValue Algorithm für die interne Verwendung in der JavaScript Engine. Dieser Abschnitt ist hauptsächlich derselbe wie Strict Equality Algorithm mit der Ausnahme, dass sich 11.9.6.4 und 9.12.4 in der Behandlung von Zahlen (Number) unterscheiden. ECMAScript 2015 schlägt vor, dass dieser Algorithmus über Object.is angeboten wird.

+ +

Wir können erkennen, dass mit double und triple equals, mit der Ausnahme der vorhergehenden Typkonvertierung in 11.9.6.1, der Strict Equality Algorithm eine Teilmenge des Abstract Equality Algorithm ist, weil 11.9.6.2–7 dem Abschnitt 11.9.3.1.a–f entspricht.

+ +

A model for understanding equality comparisons?

+ +

Prior to ES2015, you might have said of double equals and triple equals that one is an "enhanced" version of the other. For example, someone might say that double equals is an extended version of triple equals, because the former does everything that the latter does, but with type conversion on its operands. E.g., 6 == "6". (Alternatively, someone might say that double equals is the baseline, and triple equals is an enhanced version, because it requires the two operands to be the same type, so it adds an extra constraint. Which one is the better model for understanding depends on how you choose to view things.)

+ +

However, this way of thinking about the built-in sameness operators is not a model that can be stretched to allow a place for ES2015's Object.is on this "spectrum". Object.is isn't simply "looser" than double equals or "stricter" than triple equals, nor does it fit somewhere in between (i.e., being both stricter than double equals, but looser than triple equals). We can see from the sameness comparisons table below that this is due to the way that Object.is handles NaN. Notice that if Object.is(NaN, NaN) evaluated to false, we could say that it fits on the loose/strict spectrum as an even stricter form of triple equals, one that distinguishes between -0 and +0. The NaN handling means this is untrue, however. Unfortunately, Object.is simply has to be thought of in terms of its specific characteristics, rather than its looseness or strictness with regard to the equality operators.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Sameness Comparisons
xy=====Object.is
undefinedundefinedtruetruetrue
nullnulltruetruetrue
truetruetruetruetrue
falsefalsetruetruetrue
"foo""foo"truetruetrue
{ foo: "bar" }xtruetruetrue
00truetruetrue
+0-0truetruefalse
0falsetruefalsefalse
""falsetruefalsefalse
""0truefalsefalse
"0"0truefalsefalse
"17"17truefalsefalse
[1,2]"1,2"truefalsefalse
new String("foo")"foo"truefalsefalse
nullundefinedtruefalsefalse
nullfalsefalsefalsefalse
undefinedfalsefalsefalsefalse
{ foo: "bar" }{ foo: "bar" }falsefalsefalse
new String("foo")new String("foo")falsefalsefalse
0nullfalsefalsefalse
0NaNfalsefalsefalse
"foo"NaNfalsefalsefalse
NaNNaNfalsefalsetrue
+ +

When to use Object.is versus triple equals

+ +

Aside from the way it treats NaN, generally, the only time Object.is's special behavior towards zeros is likely to be of interest is in the pursuit of certain meta-programming schemes, especially regarding property descriptors when it is desirable for your work to mirror some of the characteristics of Object.defineProperty. If your use case does not require this, it is suggested to avoid Object.is and use === instead. Even if your requirements involve having comparisons between two NaN values evaluate to true, generally it is easier to special-case the NaN checks (using the isNaN method available from previous versions of ECMAScript) than it is to work out how surrounding computations might affect the sign of any zeros you encounter in your comparison.

+ +

Here's an in-exhaustive list of built-in methods and operators that might cause a distinction between -0 and +0 to manifest itself in your code:

+ +
+
- (unary negation)
+
+ +
+
+

It's obvious that negating 0 produces -0. But the abstraction of an expression can cause -0 to creep in when you don't realize it. For example, consider:

+ +
let stoppingForce = obj.mass * -obj.velocity
+ +

If obj.velocity is 0 (or computes to 0), a -0 is introduced at that place and propogates out into stoppingForce.

+
+
+ +
+
Math.atan2
+
Math.ceil
+
Math.pow
+
Math.round
+
+ +
+
It's possible for a -0 to be introduced into an expression as a return value of these methods in some cases, even when no -0 exists as one of the parameters. E.g., using Math.pow to raise -Infinity to the power of any negative, odd exponent evaluates to -0. Refer to the documentation for the individual methods.
+
+ +
+
Math.floor
+
Math.max
+
Math.min
+
Math.sin
+
Math.sqrt
+
Math.tan
+
+ +
+
It's possible to get a -0 return value out of these methods in some cases where a -0 exists as one of the parameters. E.g., Math.min(-0, +0) evalutes to -0. Refer to the documentation for the individual methods.
+
+ +
+
~
+
<<
+
>>
+
Each of these operators uses the ToInt32 algorithm internally. Since there is only one representation for 0 in the internal 32-bit integer type, -0 will not survive a round trip after an inverse operation. E.g., both Object.is(~~(-0), -0) and Object.is(-0 << 2 >> 2, -0) evaluate to false.
+
+ +

Relying on Object.is when the signedness of zeros is not taken into account can be hazardous. Of course, when the intent is to distinguish between -0 and +0, it does exactly what's desired.

+ +

Siehe auch

+ + diff --git a/files/de/web/javascript/guide/ausdruecke_und_operatoren/index.html b/files/de/web/javascript/guide/ausdruecke_und_operatoren/index.html deleted file mode 100644 index 7a0e723c6c..0000000000 --- a/files/de/web/javascript/guide/ausdruecke_und_operatoren/index.html +++ /dev/null @@ -1,965 +0,0 @@ ---- -title: Ausdrücke und Operatoren -slug: Web/JavaScript/Guide/Ausdruecke_und_Operatoren -tags: - - Beginner - - Extensions - - Guide - - JavaScript - - Operatoren - - 'l10n:priority' -translation_of: Web/JavaScript/Guide/Expressions_and_Operators ---- -
{{jsSidebar("JavaScript Guide")}} {{PreviousNext("Web/JavaScript/Guide/Funktionen", "Web/JavaScript/Guide/Numbers_and_dates")}}
- -

Dieses Kapitel beschreibt JavaScript Ausdrücke und Operatoren, Zuweisungsoperatoren, Vergleichsoperatoren, Rechenoperatoren, Bit-Operatoren, Logische Operatoren, Operator zur Zeichenkettenverknüpfung, Bedingte (ternäre) Operatoren und mehr.

- -

Eine vollständige und detaillierte Liste mit Operatoren und Ausdrücken ist in den Referenzen zu finden.

- -

Operatoren

- -

JavaScript besitzt verschiedene Operatortypen. Dieser Abschnitt beschreibt die einzelnen Operatoren und beinhaltet Informationen über die Operator-Prioritäten.

- - - -

JavaScript verfügt über beides, binäre als auch unäre Operatoren. Zudem existiert ein spezieller ternärer Operator - der Bedingungsoperator. Ein binärer Operator benötigt zwei Operanden, einen vor dem Operator und einen nach dem Operator:

- -
operand1 operator operand2
-
- -

Zum Beispiel: 3+4, oder x*y.

- -

Ein unärer Operator erwartet einen einzelnen Operanden, entweder vor, oder nach dem Operator:

- -
operator operand
-
- -

oder

- -
operand operator
-
- -

Zum Beispiel: x++, oder ++x.

- -

Zuweisungsoperatoren

- -

Ein Zuweisungsoperator weißt seinem linken Operanden einen Wert zu. Dieser Wert basiert auf dem Ergebnis des rechten Operanden. Der einfachste Zuweisungsoperator ist das "Gleich" (=), welches den Wert des rechten Operanden dem linken Operanden zuweist.

- -

Zum Beispiel: x = y (y wid der Wert von x zugewiesen).

- -

Es gibt auch zusammengesetzte Zuweisungsoperatoren, diese stellen Abkürzungen für die in der folgenden Tabelle aufgelisteten Operationen dar:

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Zusammengesetzte Zuweisungsoperatoren
NameAbgekürzter OperatorAusgeschriebener Operator
Zuweisungx = yx = y
Additionx += yx = x + y
Subraktionx -= yx = x - y
Multiplikationx *= yx = x * y
Divisionx /= yx = x / y
Modulo (Division mit Rest)x %= yx = x % y
Exponentiation assignment {{experimental_inline}}x **= yx = x ** y
Left shift assignmentx <<= yx = x << y
Right shift assignmentx >>= yx = x >> y
Unsigned right shift assignmentx >>>= yx = x >>> y
Bitwise AND assignmentx &= yx = x & y
Bitwise XOR assignmentx ^= yx = x ^ y
Bitwise OR assignmentx |= yx = x | y
- -

Destrukturierung

- -

Komplexere Zuweisungen ermöglicht Javascript über die sogenannte Destrukturierung. Diese ermöglicht es, Daten aus Arrays oder Objekten mithilfe einer Syntax zu extrahieren, die die Konstruktion von Array- und Objektliteralen widerspiegelt.

- -
var foo = ["eins", "zwei", "drei"];
-
-// Ohne Destrukturierung
-var eins   = foo[0];
-var zwei   = foo[1];
-var drei   = foo[2];
-
-// mit Destrukturierung
-var [eins, zwei, drei] = foo;
- -

Vergleichsoperatoren

- -

Ein Vergleichsoperator vergleicht seine Operanden und gibt einen logischen Wert zurück, der darauf basiert, ob der Vergleich wahr ist, oder nicht.

- -

Die Operanden können numerische-, string-, logische- oder Objektwerte sein. Zeichenfolgen werden basierend auf der lexikographischen Standardreihenfolge mit unicodewerten verglichen. Wenn die beiden Operanden nicht vom selben Typ sind, versucht JavaScript in den meisten Fällen, sie in einen geeigneten Typ für den Vergleich zu konvertieren. Dieses Verhalten führt im Allgemeinen dazu, dass die Operanden numerisch verglichen werden. Die einzigen Ausnahmen für die Typumwandlung innerhalb von Vergleichen sind die Operatoren === und !==, die strenge Vergleiche durchführen. Diese Operatoren versuchen nicht, die Operanden in kompatible Typen zu konvertieren, bevor sie die Gleichheit überprüfen.

- -

Die folgende Tabelle beschreibt die Vergleichsoperatoren in Bezug auf diesen Beispielcode:

- -
var var1 = 3;
-var var2 = 4;
-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Vergleichsoperatoren
OperatorBeschreibungBeispiele, die true zurückgeben
Equal (==)Gibt true zurück, wenn die Operanden gleich sind.3 == var1 -

"3" == var1

- 3 == '3'
Not equal (!=)Gibt true zurück, wenn die Operanden ungleich sind.var1 != 4
- var2 != "3"
Strict equal (===)Gibt true zurück, wenn die Operanden gleich sind und auch der Typ übereinstimmt. Weitere Informationen unter {{jsxref("Object.is")}} und sameness in JS.3 === var1
Strict not equal (!==)Gibt true zurück, wenn die Operanden vom selben Typ sind, doch nicht den selben Wert haben, oder wenn sie den selben Wert haben, doch nicht vom selben Typ sind.var1 !== "3"
- 3 !== '3'
Greater than (>)Gibt true zurück, wenn der linke Operand größer dem rechten Operanden ist.var2 > var1
- "12" > 2
Greater than or equal (>=)Gibt true zurück, wenn der linke Operand größer als, oder gleich dem linken Operanden ist.var2 >= var1
- var1 >= 3
Less than (<)Gibt true zurück, wenn der linke Operand kleiner dem rechten Operanden ist.var1 < var2
- "2" < 12
Less than or equal (<=)Gibt true zurück, wenn der linke Operand kleiner als, oder gleich dem rechten Operanden ist.var1 <= var2
- var2 <= 5
- -
-

Note: (=>) ist kein Operator, hiermit werden Arrow functions notiert.

-
- -

Arithmetische Operatoren (Rechenzeichen)

- -

Ein arithmetischer Operator nimmt numerische Werte (Literale oder Variablen) als Operanden entgegen und gibt einen einzelnen numerischen Wert zurück. Die arithmetischen Standardoperatoren sind Addition (+), Subtraktion (-), Multiplikation (*) und Division (/). Diese Operatoren funktionieren wie in den meisten anderen Programmiersprachen, wenn sie mit Fließkommazahlen verwendet werden (beachten Sie insbesondere, dass die Division durch Null {{jsxref ("Infinity")}} ergibt).

- -
1 / 2; // 0.5
-1 / 2 == 1.0 / 2.0; // this is true
-
- -

Neben den arithmetischen Standardoperatoren (+, -, * /), stellt JavaScript noch weitere Rechenzeichen zur Verfügung. Diese werden in der folgenden Tabelle aufgeführt:

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Arithmetische Operatoren
OperatorBeschreibungBeispiel
Remainder (%)Binärer Operator. Gibt den ganzzahligen Rest der Division beider Operanden zurück.12 % 5 gibt 2 zurück.
Increment (++) -

Unärer Operator. Addiert 1 zu seinem Operanden.

- -

Wenn der Operator vorangestellt wird (++x), gibt er den Wert seines Operanden zurück nachdem 1 addiert wurde; Wenn der Operator nachgestellt wird (x++), gibt er den Wert seines Operanden zurück, bevor 1 addiert wurde.

-
Wenn x gleich 3 ist, setzt ++x x auf 4 und gibt 4 zurück, wobei x++  3 zurückgibt und erst danach x auf 4 setzt.
Decrement (--) -

Unärer Operator. Subtrahiert 1 von seinem Operanden.

- -

Der Rückgabewert verhält sich analog zum increment Operator.

-
Wenn x gleich 3 ist, setzt --x x auf 2 und gibt 2 zurück, wobei x-- 3 zurückgibt und erst danach, x auf 2 setzt.
Unary negation (-)Unärer Operator. Gibt die Negierung seines Operanden zurück.Wenn x gleich 3 ist, gibt -x -3 zurück.
Unary plus (+)Versucht, den Operanden in eine Zahl umzuwandeln, wenn dies nicht bereits der Fall ist.+"3" gibt 3 zurück.
- +true gibt 1 zurück.
Exponentiation operator (**) {{experimental_inline}}Calculates the base to the exponent power, that is, baseexponent2 ** 3 gibt 8 zurück.
- 10 ** -1 gibt 0.1 zurück.
- -

Bitweise Operatoren

- -

Ein bitweiser Operator behandelt seine Operanden als eine Menge von 32 Bits (Nullen und Einsen) und nicht als dezimale, hexadezimale oder oktale Zahlen. Zum Beispiel hat die Dezimalzahl Neun eine binäre Darstellung von 1001. Bitweise Operatoren führen ihre Operationen mit solchen binären Darstellungen aus, doch sie geben standardmäßige numerische JavaScript-Werte zurück.

- -

Die folgende Tabelle fasst die bitweisen Operatoren von JavaScript zusammen.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Bitweise Operatoren
OperatorVerwendungBeschreibung
Bitwise ANDa & bReturns a one in each bit position for which the corresponding bits of both operands are ones.
Bitwise ORa | bReturns a zero in each bit position for which the corresponding bits of both operands are zeros.
Bitwise XORa ^ bReturns a zero in each bit position for which the corresponding bits are the same.
- [Returns a one in each bit position for which the corresponding bits are different.]
Bitwise NOT~ aInverts the bits of its operand.
Left shifta << bShifts a in binary representation b bits to the left, shifting in zeros from the right.
Sign-propagating right shifta >> bShifts a in binary representation b bits to the right, discarding bits shifted off.
Zero-fill right shifta >>> bShifts a in binary representation b bits to the right, discarding bits shifted off, and shifting in zeros from the left.
- -

Bitweise logische Operatoren

- -

Konzeptuell arbeiten bitweise logische Operatoren wie folgt:

- - - -

Zum Beispiel ist die binäre Darstellung der Zahl neun 1001, die binäre Darstellung der Zahl 15 ist 1111. Wenn die bitweisen logischen Operatoren auf diese Zahlen angewendet werden, ergeben sich folgende Ergebnisse:

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Beispiele für bitweise Operatoren
AusdruckErgebnisBinäre Darstellung
15 & 991111 & 1001 = 1001
15 | 9151111 | 1001 = 1111
15 ^ 961111 ^ 1001 = 0110
~15-16~00000000...00001111 = 11111111...11110000
~9-10~00000000...00001001 = 11111111...11110110
- -

Beachte, dass alle 32 Bits invertiert werden, wenn der bitweise NOT Operator benutzt wird. Wenn dabei das höchstwertigste (ganz linke) Bit auf 1 gesetzt wird, entsteht eine negative Zahl. Note that all 32 bits are inverted using the Bitwise NOT operator, and that values with the most significant (left-most) bit set to 1 represent negative numbers (Zweierkomplement). ~x wird also genauso ausgewertet wie -x - 1.

- -

Bitweise Schiebeoperatoren

- -

Die bitweisen Schiebeoperatoren erwarten zwei Operanden. Der erste ist der Wert, der geschoben werden soll, der zweite die Anzahl der Bits, um die geschoben werden soll. Die Richtung, in die geschoben wird, wird durch den verwendeten Operator bestimmt.

- -

Schiebeoperatoren konvertieren ihre Operanden in 32 Bit Integer Zahlen und liefern als Ergebnis einen Wert vom selben Typen wir der linke Operand.

- -

Die Schiebeoperatoren sind in der folgenden Tabelle aufgelistet.

- - - - - - - - - - - - - - - - - - - - - - - - - - - -
Bitwise shift operators
OperatorDescriptionExample
Left shift
- (<<)
This operator shifts the first operand the specified number of bits to the left. Excess bits shifted off to the left are discarded. Zero bits are shifted in from the right.9<<2 yields 36, because 1001 shifted 2 bits to the left becomes 100100, which is 36.
Sign-propagating right shift (>>)This operator shifts the first operand the specified number of bits to the right. Excess bits shifted off to the right are discarded. Copies of the leftmost bit are shifted in from the left.9>>2 yields 2, because 1001 shifted 2 bits to the right becomes 10, which is 2. Likewise, -9>>2 yields -3, because the sign is preserved.
Zero-fill right shift (>>>)This operator shifts the first operand the specified number of bits to the right. Excess bits shifted off to the right are discarded. Zero bits are shifted in from the left.19>>>2 yields 4, because 10011 shifted 2 bits to the right becomes 100, which is 4. For non-negative numbers, zero-fill right shift and sign-propagating right shift yield the same result.
- -

Logische Operatoren

- -

Logische Operatoren werden normalerweise mit boolesche (logischen) Werten verwendet - hierbei geben sie dann einen booleschen Wert zurück. Die Operatoren && und || geben den Wert von einem der Operatoren zurück, sodass sie im Falle der Verwendung mit einem nicht-booleschen Wert auch einen nicht-booleschen Wert zurückgeben können. Die logischen Operatoren werden in der folgenden Tabelle beschrieben: 

- - - - - - - - - - - - - - - - - - - - - - - - - - - -
Logische Operatoren
OperatorVerwendungBeschreibung
Logical AND (&&)expr1 && expr2Gibt expr1 zurück, sofern es zu false konvertiert werden kann; ansonsten wird expr2 zurückgegeben. Insofern mit booleschen Werten verwendet, && gibt true zurück, wenn beide Operanden wahr sind; ansonsten false.
Logical OR (||)expr1 || expr2 -

Gibt expr1 zurück, sofern er zu true konvertiert werden kann. Insofern mit booleschen Werten verwendet, gibt der Operator || true zurück, wenn einer von beiden Operanden true ist; wenn beide false sind, wird false zurückgegeben. 

-
Logical NOT (!)!expr -

Gibt false zurück, wenn sein einziger Operand in true konvertiert werden kann; andernfalls gibt er true zurück. 

-
- -

Beispiele von Ausdrücken, die in false umgewandelt werden können, sind solche, die null, 0, NaN, einen leeren String ("") oder undefined sind. 

- -

Die folgenden Zeilen zeigen Beispiele des && (logisches UND) Operators.

- -
var a1 =  true && true;     // t && t returns true
-var a2 =  true && false;    // t && f returns false
-var a3 = false && true;     // f && t returns false
-var a4 = false && (3 == 4); // f && f returns false
-var a5 = "Cat" && "Dog";    // t && t returns Dog
-var a6 = false && "Cat";    // f && t returns false
-var a7 = "Cat" && false;    // t && f returns false
-
- -

Die folgenden Zeilen zeigen Beispiele des || (logisches ODER) Operators:

- -
var o1 =  true || true;     // t || t returns true
-var o2 = false || true;     // f || t returns true
-var o3 =  true || false;    // t || f returns true
-var o4 = false || (3 == 4); // f || f returns false
-var o5 = "Cat" || "Dog";    // t || t returns Cat
-var o6 = false || "Cat";    // f || t returns Cat
-var o7 = "Cat" || false;    // t || f returns Cat
-
- -

Die folgenden Zeilen zeigen Beispiele des ! (logisches NICHT) Operators:

- -
var n1 = !true;  // !t returns false
-var n2 = !false; // !f returns true
-var n3 = !"Cat"; // !t returns false
-
- -

Short-circuit-Bewertung 

- -

Da logische Ausdrücke von links nach rechts bewertet werden, werden sie auf eine mögliche "Abkürzung" (short-circuit) hin gemäß den folgenden Regeln evaluiert:

- - - -

Die Regeln der Logik garantieren, dass diese Bewertungen immer korrekt sind. Der irgendwas-Operand werden in den o.g. Beispielen hierbei nicht bewertet. 

- -

String-Operatoren

- -

In addition to the comparison operators, which can be used on string values, the concatenation operator (+) concatenates two string values together, returning another string that is the union of the two operand strings.

- -

For example,

- -
console.log("my " + "string"); // console logs the string "my string".
- -

The shorthand assignment operator += can also be used to concatenate strings.

- -

For example,

- -
var mystring = "alpha";
-mystring += "bet"; // evaluates to "alphabet" and assigns this value to mystring.
- -

Conditional (ternary) operator

- -

The conditional operator is the only JavaScript operator that takes three operands. The operator can have one of two values based on a condition. The syntax is:

- -
condition ? val1 : val2
-
- -

If condition is true, the operator has the value of val1. Otherwise it has the value of val2. You can use the conditional operator anywhere you would use a standard operator.

- -

For example,

- -
var status = (age >= 18) ? "adult" : "minor";
-
- -

This statement assigns the value "adult" to the variable status if age is eighteen or more. Otherwise, it assigns the value "minor" to status.

- -

Comma operator

- -

The comma operator (,) simply evaluates both of its operands and returns the value of the last operand. This operator is primarily used inside a for loop, to allow multiple variables to be updated each time through the loop.

- -

For example, if a is a 2-dimensional array with 10 elements on a side, the following code uses the comma operator to update two variables at once. The code prints the values of the diagonal elements in the array:

- -
var x = [0,1,2,3,4,5,6,7,8,9];
-var a = [x, x, x, x, x]
-
-for (var i = 0, j = 9; i <= j; i++, j--)
-  console.log("a[" + i + "][" + j + "]= " + a[i][j]);
-
- -

Unary operators

- -

A unary operation is an operation with only one operand.

- -

delete

- -

The delete operator deletes an object, an object's property, or an element at a specified index in an array. The syntax is:

- -
delete objectName;
-delete objectName.property;
-delete objectName[index];
-delete property; // legal only within a with statement
-
- -

where objectName is the name of an object, property is an existing property, and index is an integer representing the location of an element in an array.

- -

The fourth form is legal only within a with statement, to delete a property from an object.

- -

You can use the delete operator to delete variables declared implicitly but not those declared with the var statement.

- -

If the delete operator succeeds, it sets the property or element to undefined. The delete operator returns true if the operation is possible; it returns false if the operation is not possible.

- -
x = 42;
-var y = 43;
-myobj = new Number();
-myobj.h = 4;    // create property h
-delete x;       // returns true (can delete if declared implicitly)
-delete y;       // returns false (cannot delete if declared with var)
-delete Math.PI; // returns false (cannot delete predefined properties)
-delete myobj.h; // returns true (can delete user-defined properties)
-delete myobj;   // returns true (can delete if declared implicitly)
-
- -
Deleting array elements
- -

When you delete an array element, the array length is not affected. For example, if you delete a[3], a[4] is still a[4] and a[3] is undefined.

- -

When the delete operator removes an array element, that element is no longer in the array. In the following example, trees[3] is removed with delete. However, trees[3] is still addressable and returns undefined.

- -
var trees = ["redwood", "bay", "cedar", "oak", "maple"];
-delete trees[3];
-if (3 in trees) {
-  // this does not get executed
-}
-
- -

If you want an array element to exist but have an undefined value, use the undefined keyword instead of the delete operator. In the following example, trees[3] is assigned the value undefined, but the array element still exists:

- -
var trees = ["redwood", "bay", "cedar", "oak", "maple"];
-trees[3] = undefined;
-if (3 in trees) {
-  // this gets executed
-}
-
- -

typeof

- -

The typeof operator is used in either of the following ways:

- -
typeof operand
-typeof (operand)
-
- -

The typeof operator returns a string indicating the type of the unevaluated operand. operand is the string, variable, keyword, or object for which the type is to be returned. The parentheses are optional.

- -

Suppose you define the following variables:

- -
var myFun = new Function("5 + 2");
-var shape = "round";
-var size = 1;
-var today = new Date();
-
- -

The typeof operator returns the following results for these variables:

- -
typeof myFun;     // returns "function"
-typeof shape;     // returns "string"
-typeof size;      // returns "number"
-typeof today;     // returns "object"
-typeof dontExist; // returns "undefined"
-
- -

For the keywords true and null, the typeof operator returns the following results:

- -
typeof true; // returns "boolean"
-typeof null; // returns "object"
-
- -

For a number or string, the typeof operator returns the following results:

- -
typeof 62;            // returns "number"
-typeof 'Hello world'; // returns "string"
-
- -

For property values, the typeof operator returns the type of value the property contains:

- -
typeof document.lastModified; // returns "string"
-typeof window.length;         // returns "number"
-typeof Math.LN2;              // returns "number"
-
- -

For methods and functions, the typeof operator returns results as follows:

- -
typeof blur;        // returns "function"
-typeof eval;        // returns "function"
-typeof parseInt;    // returns "function"
-typeof shape.split; // returns "function"
-
- -

For predefined objects, the typeof operator returns results as follows:

- -
typeof Date;     // returns "function"
-typeof Function; // returns "function"
-typeof Math;     // returns "object"
-typeof Option;   // returns "function"
-typeof String;   // returns "function"
-
- -

void

- -

The void operator is used in either of the following ways:

- -
void (expression)
-void expression
-
- -

The void operator specifies an expression to be evaluated without returning a value. expression is a JavaScript expression to evaluate. The parentheses surrounding the expression are optional, but it is good style to use them.

- -

You can use the void operator to specify an expression as a hypertext link. The expression is evaluated but is not loaded in place of the current document.

- -

The following code creates a hypertext link that does nothing when the user clicks it. When the user clicks the link, void(0) evaluates to undefined, which has no effect in JavaScript.

- -
Click here to do nothing
-
- -

The following code creates a hypertext link that submits a form when the user clicks it.

- -

-Click here to submit
- -

Relational operators

- -

A relational operator compares its operands and returns a Boolean value based on whether the comparison is true.

- -

in

- -

The in operator returns true if the specified property is in the specified object. The syntax is:

- -
propNameOrNumber in objectName
-
- -

where propNameOrNumber is a string or numeric expression representing a property name or array index, and objectName is the name of an object.

- -

The following examples show some uses of the in operator.

- -
// Arrays
-var trees = ["redwood", "bay", "cedar", "oak", "maple"];
-0 in trees;        // returns true
-3 in trees;        // returns true
-6 in trees;        // returns false
-"bay" in trees;    // returns false (you must specify the index number,
-                   // not the value at that index)
-"length" in trees; // returns true (length is an Array property)
-
-// built-in objects
-"PI" in Math;          // returns true
-var myString = new String("coral");
-"length" in myString;  // returns true
-
-// Custom objects
-var mycar = { make: "Honda", model: "Accord", year: 1998 };
-"make" in mycar;  // returns true
-"model" in mycar; // returns true
-
- -

instanceof

- -

The instanceof operator returns true if the specified object is of the specified object type. The syntax is:

- -
objectName instanceof objectType
-
- -

where objectName is the name of the object to compare to objectType, and objectType is an object type, such as {{jsxref("Date")}} or {{jsxref("Array")}}.

- -

Use instanceof when you need to confirm the type of an object at runtime. For example, when catching exceptions, you can branch to different exception-handling code depending on the type of exception thrown.

- -

For example, the following code uses instanceof to determine whether theDay is a Date object. Because theDay is a Date object, the statements in the if statement execute.

- -
var theDay = new Date(1995, 12, 17);
-if (theDay instanceof Date) {
-  // statements to execute
-}
-
- -

Operator precedence

- -

The precedence of operators determines the order they are applied when evaluating an expression. You can override operator precedence by using parentheses.

- -

The following table describes the precedence of operators, from highest to lowest.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Operator precedence
Operator typeIndividual operators
member. []
call / create instance() new
negation/increment! ~ - + ++ -- typeof void delete
multiply/divide* / %
addition/subtraction+ -
bitwise shift<< >> >>>
relational< <= > >= in instanceof
equality== != === !==
bitwise-and&
bitwise-xor^
bitwise-or|
logical-and&&
logical-or||
conditional?:
assignment= += -= *= /= %= <<= >>= >>>= &= ^= |=
comma,
- -

A more detailed version of this table, complete with links to additional details about each operator, may be found in JavaScript Reference.

- -

Expressions

- -

An expression is any valid unit of code that resolves to a value.

- -

Every syntactically valid expression resolves to some value but conceptually, there are two types of expressions: with side effects (for example: those that assign value to a variable) and those that in some sense evaluate and therefore resolve to a value.

- -

The expression x = 7 is an example of the first type. This expression uses the = operator to assign the value seven to the variable x. The expression itself evaluates to seven.

- -

The code 3 + 4 is an example of the second expression type. This expression uses the + operator to add three and four together without assigning the result, seven, to a variable.
-
- JavaScript has the following expression categories:

- - - -

Primary expressions

- -

Basic keywords and general expressions in JavaScript.

- -

this

- -

Use the this keyword to refer to the current object. In general, this refers to the calling object in a method. Use this either with the dot or the bracket notation:

- -
this["propertyName"]
-this.propertyName
-
- -

Suppose a function called validate validates an object's value property, given the object and the high and low values:

- -
function validate(obj, lowval, hival){
-  if ((obj.value < lowval) || (obj.value > hival))
-    console.log("Invalid Value!");
-}
-
- -

You could call validate in each form element's onChange event handler, using this to pass it the form element, as in the following example:

- -

-
-

Enter a number between 18 and 99:

- -

- -

Grouping operator

- -

The grouping operator ( ) controls the precedence of evaluation in expressions. For example, you can override multiplication and division first, then addition and subtraction to evaluate addition first.

- -
var a = 1;
-var b = 2;
-var c = 3;
-
-// default precedence
-a + b * c     // 7
-// evaluated by default like this
-a + (b * c)   // 7
-
-// now overriding precedence
-// addition before multiplication
-(a + b) * c   // 9
-
-// which is equivalent to
-a * c + b * c // 9
-
- -

Comprehensions

- -

Comprehensions are an experimental JavaScript feature, targeted to be included in a future ECMAScript version. There are two versions of comprehensions:

- -
-
{{experimental_inline}} {{jsxref("Operators/Array_comprehensions", "[for (x of y) x]")}}
-
Array comprehensions.
-
{{experimental_inline}} {{jsxref("Operators/Generator_comprehensions", "(for (x of y) y)")}}
-
Generator comprehensions.
-
- -

Comprehensions exist in many programming languages and allow you to quickly assemble a new array based on an existing one, for example.

- -
[for (i of [ 1, 2, 3 ]) i*i ];
-// [ 1, 4, 9 ]
-
-var abc = [ "A", "B", "C" ];
-[for (letter of abc) letter.toLowerCase()];
-// [ "a", "b", "c" ]
- -

Left-hand-side expressions

- -

Left values are the destination of an assignment.

- -

new

- -

You can use the new operator to create an instance of a user-defined object type or of one of the built-in object types. Use new as follows:

- -
var objectName = new objectType([param1, param2, ..., paramN]);
-
- -

super

- -

The super keyword is used to call functions on an object's parent. It is useful with classes to call the parent constructor, for example.

- -
super([arguments]); // calls the parent constructor.
-super.functionOnParent([arguments]);
-
- -

Spread operator

- -

The spread operator allows an expression to be expanded in places where multiple arguments (for function calls) or multiple elements (for array literals) are expected.

- -

Example: Today if you have an array and want to create a new array with the existing one being part of it, the array literal syntax is no longer sufficient and you have to fall back to imperative code, using a combination of push, splice, concat, etc. With spread syntax this becomes much more succinct:

- -
var parts = ['shoulder', 'knees'];
-var lyrics = ['head', ...parts, 'and', 'toes'];
- -

Similarly, the spread operator works with function calls:

- -
function f(x, y, z) { }
-var args = [0, 1, 2];
-f(...args);
- -
{{PreviousNext("Web/JavaScript/Guide/Funktionen", "Web/JavaScript/Guide/Numbers_and_dates")}}
diff --git a/files/de/web/javascript/guide/control_flow_and_error_handling/index.html b/files/de/web/javascript/guide/control_flow_and_error_handling/index.html new file mode 100644 index 0000000000..97dbba8b3e --- /dev/null +++ b/files/de/web/javascript/guide/control_flow_and_error_handling/index.html @@ -0,0 +1,430 @@ +--- +title: Kontrollfluss und Fehlerbehandlung +slug: Web/JavaScript/Guide/Kontrollfluss_und_Fehlerbehandlung +tags: + - Beginner + - Guide + - JavaScript + - 'l10n:priority' +translation_of: Web/JavaScript/Guide/Control_flow_and_error_handling +--- +
{{jsSidebar("JavaScript Guide")}} {{PreviousNext("Web/JavaScript/Guide/Grammatik_und_Typen", "Web/JavaScript/Guide/Schleifen_und_Iterationen")}}
+ +

JavaScript unterstützt eine Menge von Anweisungen, speziell um Verlaufs-Anweisungen zu kontrollieren, welches eine großartige Methode ist um Interaktivität in deine Anwendung einzuarbeiten. Dieses Kapitel liefert dir ein Überblick über diese Anweisungen.

+ +

Die JavaScript Referenzen beinhalten umfassende Details über die Anweisungen in diesem Kapitel. Das Semikolon (;) als Zeichen wird genutzt um Anweisungen im JavaScript Code einzuteilen.

+ +

Jeder JavaScript Ausdruck ist auch eine Anweisung. Schau ebenfalls in Ausdrücke und Operatoren, um komplette Informationen über Ausdrücke zu erhalten.

+ +

Block-Anweisungen

+ +

Das einfachste Statement ist das Block-Statement, welches genutzt wird um Anweisungen zu gruppieren. Dieser Block wird von einem Paar geschweiften Klammer umschlossen:

+ +
{
+  statement_1;
+  statement_2;
+  .
+  .
+  .
+  statement_n;
+}
+
+ +

Beispiele

+ +

Block-Statements werden meistens mit Kontrollfluss-Statements genutzt (z. B. if, for, while).

+ +
while (x < 10) {
+  x++;
+}
+
+ +

Hier ist, { x++; } das Block-Statement.

+ +

Wichtig: JavaScript hat vor ECMAScript2015 keine Block-Scopes. Variablen, die in einem Block deklariert werden, gehören zu der Funktion oder dem Skript und das Beschreiben der Variablen führt dazu, dass diese über den Block hinaus verfügbar ist. In anderen Worten, Block-Statements definieren keinen Scope. Alleinstehende Blöcke in JavaScript können komplett andere Ergebnisse erzeugen als in C oder Java. Zum Beispiel:

+ +
var x = 1;
+{
+  var x = 2;
+}
+console.log(x); // outputs 2
+
+ +

Hier wird 2 ausgegeben, weil var x innerhalb des Blocks im gleichen Scope ist wie das var x vor dem Block. In C oder Java hätte der selbe Code 1 ausgegeben.

+ +

Seit ECMAScript2015 sind let und const Variablendeklarationen, die an den Block gebunden sind. Siehe dazu auch die Referenzseiten {{jsxref("Statements/let", "let")}} und {{jsxref("Statements/const", "const")}} an.

+ +

Bedingte Statements

+ +

Ein bedingtes Statement ist eine Menge von Befehlen, die ausgeführt werden, wenn eine Bedingung wahr ist. JavaScript unterstützt zwei bedingte Statements: if...else und switch.

+ +

if...else Anweisungen

+ +

if wird eingesetzt um Statements auszuführen, wenn eine logische Bedingung wahr wird. Mit der optionalen else-Klausel werden Statements ausgeführt, wenn die Bedingung falsch ist. Ein if-Block sieht folgendermaßen aus:

+ +
if (bedingung) {
+  statement_1;
+} else {
+  statement_2;
+}
+ +

Hier kann die Bedingung ein Ausdruck sein, der zu true oder false ausgewertet wird. Siehe Boolean nach, um zu erfahren, was zu true und was zu false ausgewertet wird. Wenn bedingung zu true ausgewertet wird, wird statement_1 ausgeführt. Andernfalls wird statement_2 ausgeführt. statement_1 und statement_2 können beliebige Statements sein, auch weitere if-Statements.

+ +

Man kann zudem Statements mit else if konstruieren, um mehrere Bedingungen sequentiell zu testen:

+ +
if (bedingung_1) {
+  statement_1;
+} else if (bedingung_2) {
+  statement_2;
+} else if (bedingung_n) {
+  statement_n;
+} else {
+  statement_last;
+}
+
+ +

Um mehrere Statements auszuführen, werden diese in Blockstatements gruppiert ({ ... }). Generell ist es guter Stil immer Block-Statements zu benutzen, besonders bei verschachtelten if-Statements.

+ +
if (bedingung) {
+  statement_1_runs_if_condition_is_true;
+  statement_2_runs_if_condition_is_true;
+} else {
+  statement_3_runs_if_condition_is_false;
+  statement_4_runs_if_condition_is_false;
+}
+
+ +

Es ist ratsam, keine einfachen Zuweisungen in Bedingungen zu verwenden, da die Zuordnung mit der Prüfung auf Gleichheit verwechselt werden kann, wenn man über den Code schaut. Verwenden Sie zum Beispiel den folgenden Code nicht:

+ +
if (x = y) {
+  /* statements here */
+}
+
+ +

Wenn eine Zuweisung in einer Bedingung benötigt wird, ist es verbreitet diese in weitere runde Klammeren zu schreiben. Zum Beispiel:

+ +
if ((x = y)) {
+  /* statements here */
+}
+
+ +

Falsy Werte

+ +

Die folgenden Werte werden zu false ausgewertet (auch bekannt als {{Glossary("Falsy")}} Werte):

+ + + +

Alle anderen Werte, auch alle Objekte, werden zu true ausgewertet, wenn sie als Bedingung eingesetzt werden.

+ +

Es ist jedoch etwas verwirrend mit den primitiven boolean Werten true und false und den Werten des {{jsxref("Boolean")}}-Objektes, wie folgendes Beispiel zeigt:

+ +
var b = new Boolean(false);
+if (b)          // Die Bedingung wird zu true ausgewertet.
+if (b == true)  // Die Bedingung wird zu false ausgewertet.
+ +

Beispiel

+ +

Im folgenden Beispiel gibt die Funktion checkData true zurück, wenn die Anzahl der Zeichen in einem Text Objekt drei ist. Andernfalls wird ein Alert angezeigt, und false zurückgegeben.

+ +
function checkData() {
+  if (document.form1.threeChar.value.length == 3) {
+    return true;
+  } else {
+    alert("Enter exactly three characters. " +
+    document.form1.threeChar.value + " is not valid.");
+    return false;
+  }
+}
+
+ +

switch Statement

+ +

Ein switch Statement erlaubt es einen Ausdruck auszuwerten und das Resultat zu einem passenden Fall-Label (case-Label ) zuzuordnen. Wenn ein passendes Fall-Label gefunden wird, werden die zugehörigen Statements ausgeführt. Ein switch Statement sieht wie folgt aus:

+ +
switch (ausdruck) {
+  case label_1:
+    statements_1
+    [break;]
+  case label_2:
+    statements_2
+    [break;]
+    ...
+  default:
+    statements_def
+    [break;]
+}
+
+ +

Das Programm sucht als erstes nach eine case-Klausel mit einem Label, welches mit dem Wert des Ausgewerteten Ausdrucks übereinstimmt und gibt die Kontrolle zu dieser Klausel, was bedeutet, dass die zugehörigen Statements ausgeführt werden. Wenn kein passendes Label gefunden wird, sucht das Programm nach der optionalen default-Klausel und gibt die Kontrolle an diese, was bedeutet, dass die zugehörigen Statements ausgeführt werden. Wenn keine default-Klausel vorhanden ist, wird das switch beendet und das nächste Statement wird ausgeführt. Laut Konventionen ist die default-Klausel die letzte Klausel, das muss aber nicht immer so sein.

+ +

Das optionale break Statement, welches in jeder case-Klausel eingesetzt ist, sorgt daführ, dass nach der Klausel das switch Statement beendet wird und das Programm mit dem nachfolgenden Statement weiter macht. Wenn break weggelassen wird, wird das Programm mit dem nächsten Statement im switch weitermachen, was dazu führt, dass alle nachlogenden case-Klauseln und die optionale default-Klausel mit ausgeführt werden.

+ +

Beispiel

+ +

Im folgenden Beispiel wird der case "Bananas" ausgeführt, wenn fruittype zu "Bananas" ausgewertet wird. Die break Statements bewirken, dass das switch beendet wird und das nach switch stehende Statement ausgeführt wird. Wird break im case "Bananas" weggelassen, so wird der case "Cherries" mit ausgeführt.

+ +
switch (fruittype) {
+  case 'Oranges':
+    console.log('Oranges are $0.59 a pound.');
+    break;
+  case 'Apples':
+    console.log('Apples are $0.32 a pound.');
+    break;
+  case 'Bananas':
+    console.log('Bananas are $0.48 a pound.');
+    break;
+  case 'Cherries':
+    console.log('Cherries are $3.00 a pound.');
+    break;
+  case 'Mangoes':
+    console.log('Mangoes are $0.56 a pound.');
+    break;
+  case 'Papayas':
+    console.log('Mangoes and papayas are $2.79 a pound.');
+    break;
+  default:
+   console.log('Sorry, we are out of ' + fruittype + '.');
+}
+console.log("Is there anything else you'd like?");
+ +

Statements zur Fehler- bzw. Ausnahmebehandlung

+ +

Man kann mit dem throw Statement Fehler werfen (erzeugen) und diese mit dem Einsatz des try...catch Statements auffangen und verarbeiten.

+ + + +

Ausnahmetypen

+ +

Jedes Objekt in JavaScript kann als Fehler bzw. Ausnahme geworfen werden. Nicht alle Fehlerobjekte müssen auf die gleiche Art und Weise erstellt worden sein. Trotz des häufig Einsatzes von Zahlen oder Strings als Ausnahmen ist es deutlich effektiver die speziell für Ausnahmen erstellten Typen zu benutzen:

+ + + +

throw Statement

+ +

Das throw Statement wird benutzt, um eine Exception (Ausnahme / Fehler) zu werfen. Wenn eine Exception geworfen wird, so wird ein Ausdruck spezifiziert, welcher den Wert, welcher geworfen wird, spezifiziert:

+ +
throw ausdruck;
+
+ +

Man kann jeden Ausdruck werfen, nicht nur Ausdrücke eines bestimmten Typs. Der folgende Code wirft mehrere Ausnahmen verschiedenen Typs:

+ +
throw "Error2";   // String type
+throw 42;         // Number type
+throw true;       // Boolean type
+throw {toString: function() { return "I'm an object!"; } };
+
+ +
Notiz: Man kann ein Objekt beim Werfen einer Exception spezifizieren. Im catch Block können die Eigenschaften des Objektes referenziert werden.
+ +
// Erstellt ein Objekt vom Typ UserException
+function UserException (message){
+  this.message=message;
+  this.name="UserException";
+}
+
+// Macht die Konvertierung der Exception in einen schönen String, wenn die Exception
+// als String genutzt werden soll.
+// (z. B. in der Fehlerconsole)
+UserException.prototype.toString = function () {
+  return this.name + ': "' + this.message + '"';
+}
+
+// Erstellt eine Instanz der UserException und wirft diese
+throw new UserException("Value too high");
+ +

try...catch Statement

+ +

Das try...catch Statement markiert einen Block von Statements, welcher versucht wird auszuführen, und einen oder mehrere Blöcke welche auf geworfene Exceptions abfangen. Wenn eine Exception geworfen wird, fängt das try...catch Statements diese ab.

+ +

Das try...catch Statement besteht aus einem try Block, welcher ein oder mehrere Statements enthält, und null oder mehr catch Blöcken, welche Statements spezifizieren, welche eine im try Block geworfene Exception abfangen und behandeln. Das Statement versucht den try Block erfolgreich abzuarbeiten und wenn dieser nicht erfolgreich ist, wird die Kontrolle an den catch Block gegeben. Wenn ein Statement in dem try Block (oder eine im try Block aufgerufene Funktion) eine Exception wirft, wird der Kontrollfluss sofort an den catch Block übergeben. Wenn keine Exception im try Block geworfen wird, wird der catch Block übersprungen. Der optionale finally Block wird nach dem try und nach dem catch Block ausgeführt, bevor das auf das try...catch Statement folgenden Statement ausgeführt wird.

+ +

Das Folgende Beispiel benutzt ein try...catch Statement. Das Beispiel ruft eine Funktion auf, welche einen Monatsnamen aus einen Array zurückgibt, je nachdem, welcher Wert übergeben wurde. Wenn der übergebene Wert keine korrekte Monatsnummer ist (1 - 12), dann wird eine Exception mit dem Wert "InvalidMonthNo" geworfen und die Statements im catch Block setzen die monthName Variable auf unknown.

+ +
function getMonthName (mo) {
+  mo = mo-1; // Justiert Monatsnummer zu Arrayindex (1=Jan, 12=Dec)
+  var months = ["Jan","Feb","Mar","Apr","May","Jun","Jul",
+                "Aug","Sep","Oct","Nov","Dec"];
+  if (months[mo] != null) {
+    return months[mo];
+  } else {
+    throw "InvalidMonthNo"; // throw Schlüsselwort wird hier benutzt
+  }
+}
+
+try { // statements to try
+  monthName = getMonthName(myMonth); // Funktion die Exceptions werfen kann
+}
+catch (e) {
+  monthName = "unknown";
+  logMyErrors(e); // Gibt Exception Objekt weiter für Fehlerbehandlung
+}
+
+ +

Der catch Block

+ +

Man kann einen catch Block einsetzen, um alle Exceptions, die im try Block generiert werden, zu verarbeiten.

+ +
catch (catchID) {
+  statements
+}
+
+ +

Der catch Block spezifiziert einen Variable (catchID im voranstehenden Syntaxbeispiel), welcher den Wert des throw Statements enthält. Man kann über diese Variable Informationen über die geworfene Exception abfragen. JavaScript erstellt diese Variable, wenn der Programmfluss in den catch Block geht. Die Variable existiert nur in dem catch Block. Nach dem beenden des catch Blocks ist die Variable nicht mehr verfügbar.

+ +

Im nächsten Beispeil wird eine Exception geworfen. Wenn die Exception geworfen wird, wird der Programmfluss in den catch Block gegeben.

+ +
try {
+  throw "myException" // Erstellt eine Exception
+}
+catch (e) {
+  // Statements, die die Exception verarbeiten
+  logMyErrors(e) // Verarbeitet Exception Objekt zur Fehlerbehandlung
+}
+
+ +

Der finally Block

+ +

Der finally Block enthält Statements, welche nach dem try und catch Block ausgeführt werden, bevor das Statement nach dem try...catch Statement ausgeführt wird. Der finally Block wird ausgeführt, egal ob eine Exception geworfen wird oder nicht. Wenn eine Exception geworfen wird, wird der finally auch ausgeführt, wenn kein catch die Exception abfängt.

+ +

Man kann den finally Block benutzen, um Skripte fehlertoleranter zu gestalten. Zum Beispiel kann eine Ressource im finally Block geschlossen werden. Das Folgende Beispiel öffnet eine Datei und führt Statements aus, um die Datei zu benutzen (Serverseitiges JavaScript erlaubt Zugriffe auf Dateien). Wenn eine Exception geworfen wird, während die Datei geöffnet ist, sorgt der finally Block dafür, dass die Datei wieder geschlossen wird.

+ +
openMyFile();
+try {
+  writeMyFile(theData); //Das kann Exceptions werfen
+} catch(e) {
+  handleError(e); // Wenn eine Exception geworfen wird, wird sie hier verarbeitet
+} finally {
+  closeMyFile(); // Schließt immer die Ressource
+}
+
+ +

Wenn der finally Block einen Rückgabewert definiert, ist dieser der Rückgabewert des try-catch-finally Prozedur, unabhängig davon, ob return Statements im try und catch Block verwendet werden.

+ +
function f() {
+  try {
+    console.log(0);
+    throw "bogus";
+  } catch(e) {
+    console.log(1);
+    return true; // Dieses return Statement is überflüssig
+                 // weil im finally Block ebenfalls eins vorhanden ist
+    console.log(2); // wird niemals erreicht
+  } finally {
+    console.log(3);
+    return false; // überschreibt früheres return Statements
+    console.log(4); // wird niemals erreicht
+  }
+  // false wird jetzt zurückgegeben
+  console.log(5); // wird niemals erreicht
+}
+f(); // alerts 0, 1, 3; returns false
+
+ +

Das Überschreiben des Rückgabewertes durch den finally Block überschreibt auch geworfene Exceptions, wenn diese im catch geworfen werden.

+ +
function f() {
+  try {
+    throw "bogus";
+  } catch(e) {
+    console.log('caught inner "bogus"');
+    throw e; // Dieses throw Statement is überflüssig
+             // weil im finally Block ein return vorkommt
+  } finally {
+    return false; // Überschreibt das vorherige "throw"
+  }
+  // false wird zurückgegeben
+}
+
+try {
+  f();
+} catch(e) {
+  // Dieser bereich wird nie erreicht, weil
+  // die Exception durch das return im
+  // finally block überschrieben wird.
+  console.log('caught outer "bogus"');
+}
+
+// OUTPUT
+// caught inner "bogus"
+ +

Verschachtelte try...catch Statements

+ +

Man kann mehrere try...catch Statements ineinander verschachteln. Wenn ein inneres try...catch Statements keinen catch Block hat, wird ein äußeres try...catch Statement mit einem catch Block eine Exception auffangen. Mehr Informationen gibt es im Kapitel Verschachtelte try-Blöcke auf der try...catch Seite.

+ +

Nützliche Verwendung des Error Objekts

+ +

Abhängig vom der Art des Fehlers, möchte man die Möglichkeit haben einen Namen und eine Fehlernachricht zu vergeben. 'name' und 'message' Eigenschaften sind generell durch die Klasse Error (z. B. DOMException oder Error) unterstützt. Die 'message' Eigenschaft ist dabei eine String-Repräsentation des Fehlers, so wie sie bei der Konvertierung des Objektes zu einem String benötigt wird.

+ +

Wenn man beim Werfen von eigenen Exceptions die Vorteile dieser Eigenschaften nutzen möchte (wenn zum Beipsiel der catch Block nicht zwischen eigenen und System Exceptions unterscheidet), kann der Konstruktor von Error benutzt werden. Zum Beispiel:

+ +
function doSomethingErrorProne () {
+  if (ourCodeMakesAMistake()) {
+    throw (new Error('The message'));
+  } else {
+    doSomethingToGetAJavascriptError();
+  }
+}
+....
+try {
+  doSomethingErrorProne();
+}
+catch (e) {
+  console.log(e.name); // logs 'Error'
+  console.log(e.message); // logs 'The message' or a JavaScript error message)
+}
+ +

Promises

+ +

Mit ECMAScript 6 hat JavaScript die Unterstützung für {{jsxref("Promise")}} Objekte bekommen, welche zum Steuern von asynchronen Operationen genutzt wird.

+ +

Ein Promise ist in einem der folgenen Status:

+ + + +

+ +

Ein Bild mit XHR laden

+ +

Ein einfaches Beispiel für den Einsatz von Promise und XMLHttpRequest ist das Laden eines Bildes (Siehe MDN GitHub js-examples Repository; man kann es hier auch in Aktion sehen). Jeder Schritt ist Kommentiert und erlaubt es der Architektur des Promise und XHR zu folgen. Hier ist die unkommentierte Version, welche den Promise Ablauf zeigt, zu sehen, so dass man eine Idee davon bekommt.

+ +
function imgLoad(url) {
+  return new Promise(function(resolve, reject) {
+    var request = new XMLHttpRequest();
+    request.open('GET', url);
+    request.responseType = 'blob';
+    request.onload = function() {
+      if (request.status === 200) {
+        resolve(request.response);
+      } else {
+        reject(Error('Image didn\'t load successfully; error code:'
+                     + request.statusText));
+      }
+    };
+    request.onerror = function() {
+      reject(Error('There was a network error.'));
+    };
+    request.send();
+  });
+}
+ +

Für deteiliertere Informationen, kann man sich die {{jsxref("Promise")}} Referenz Seite und den Using Promises Guide anschauen.

+ +
{{PreviousNext("Web/JavaScript/Guide/Grammatik_und_Typen", "Web/JavaScript/Guide/Schleifen_und_Iterationen")}}
diff --git a/files/de/web/javascript/guide/details_of_the_object_model/index.html b/files/de/web/javascript/guide/details_of_the_object_model/index.html new file mode 100644 index 0000000000..4d5e46ac26 --- /dev/null +++ b/files/de/web/javascript/guide/details_of_the_object_model/index.html @@ -0,0 +1,721 @@ +--- +title: Feinheiten des Objektmodells +slug: Web/JavaScript/Guide/Feinheiten_des_Objektmodells +tags: + - Guide + - Intermediate + - JavaScript + - Object + - 'l10n:priority' +translation_of: Web/JavaScript/Guide/Details_of_the_Object_Model +--- +
{{jsSidebar("JavaScript Guide")}} {{PreviousNext("Web/JavaScript/Guide/Mit_Objekten_arbeiten", "Web/JavaScript/Guide/Using_promises")}}
+ +

JavaScript ist eine Objektbasierte Programmiersprache, die auf Prototypen, statt auf Klassen basiert. Aufgrund dieser Tatsache ist es u. U. schwieriger zu erkennen, wie in JavaScript Objekthierarchien erstellt werden und die Vererbung von Eigenschaften und deren Werten erfolgt. Dieses Kapitel versucht diese Situation zu klären.

+ +

Dieses Kapitel geht davon aus, dass bereits Erfahrungen mit JavaScript vorhanden sind und man einfache Objekte mit Funktionen schon erstellt hat.

+ +

Klassenbasierte vs. Prototypbasierte Sprachen

+ +

Klassenbasierte, Objektorientierte Sprachen wie Java und C++ bauen auf dem Konzept von Klassen und Instanzen auf.

+ + + +

Eine Prototypbasierte Sprache wie JavaScript hat diese Unterscheidung nicht: es gibt einfach Objekte. Eine Prototypbasierte Sprache hat die Notation eines prototypischen Objektes, ein Objekt welches als Template genutzt wird und die initialen Eigenschaften für ein neues Objekt vorgibt. Jedes Objekt kann seine eigenen Eigenschaften spezifizieren, entweder beim Erstellen oder zur Laufzeit. Zudem kann jedes Objekt als Prototyp für ein anderes Objekt verwendet werden, was es auch dem zweiten Objekt erlaubt seine Eigenschaften mit dem ersten Objekt zu teilen.

+ +

Eine Klasse definieren

+ +

In einer Klassenbasierten Sprache definiert man Klassen in separaten Klassendefinitionen. In diesen Definitionen spezifiziert man spezielle Methoden, Konstruktoren genannt, um eine Instanz der Klasse zu erstellen. Eine Konstruktormethode spezifiziert Initialwerte für die Eigenschaften einer Instanz und kann andere Prozesse während der Erstellungszeit durchführen. Man benutzt den new Operator in Verbindung mit der Konstruktormethode, um Klasseninstanzen zu erstellen.

+ +

JavaScript folgt einem ähnlichen Modell, jedoch hat keine vom Konstruktor getrennte Klassendefinition. Stattdessen definiert man eine Konstruktorfunktion, um ein Objekt mit einer initialen Menge an Eigenschaften und Werten zu erstellen. Jede JavaScript Funktion kann als Konstruktor verwendet werden. Man benutzt den new Operator mit einer Konstruktorfunktion, um ein neues Objekt zu erstellen.

+ +

Unterklassen und Vererbung

+ +

In einer Klassenbasierten Sprache erstellt man eine Hierarchie von Klassen durch die Klassendefinition. In der Klassendefinition kann man spezifizieren, dass die neue Klasse eine Unterklasse der schon existierenden Klassen ist. Die Unterklasse erbt alle Eigenschaften von der Oberklasse und kann neue Eigenschaften hinzufügen oder vererbte verändern. Angenommen die Employee Klasse hat nur die Eigenschaften name und dept und Manager ist eine Unterklasse von Employee welche die Eigenschaft reports hinzufügt. In diesem Fall hat eine Instanz der Manager Klasse alle drei Eigenschaften: name, dept und reports.

+ +

JavaScript implementiert Vererbung so, dass man jedes Prototypobjekt mit jeder Konstruktorfunktion verbinden kann. So kann man das gleiche EmployeeManager Beispiel erstellen, jedoch mit einer leicht anderen Terminologie. Als erstes definiert man die Employee Konstruktorfunktion, welche die Eigenschaften name und dept spezifiziert. Als nächstes definiert man die Manager Konstruktorfunktion, ruft den Employee Konstruktor auf und spezifiziert die reports Eigenschaft. Letztlich weist man ein neues Objekt zu, welches von Employee.prototype stammt und als prototype für die Manager Konstruktorfunktion dient. Dann, wenn man einen neuen Manager erstellt, erbt dieser die Eigenschaften name und dept von dem Employee Objekt.

+ +

Hinzufügen und Entfernen von Eigenschaften

+ +

In Klassenbasierten Sprachen wird eine Klasse typischerweise zur Übersetzungszeit erstellt und Instanzen dieser Klasse werden zur Übersetzungs- oder Laufzeit instantiiert. Man kann die Anzahl oder die Typen von Eigenschaften einer Klasse nicht nach der Definition der Klasse verändern. In JavaScript kann man immer EIgenschaften während der Laufzeit zu Objekten hinzufügen oder von ihnen entfernen. Wenn eine Eigenschaft zu einem Objekt hinzugefügt wird, welches als Prototyp für andere Objekte fungiert, so bekommen die anderen Objekte auch diese neue Eigenschaft.

+ +

Zusammenfassung von Unterschieden

+ +

Die folgende Tabelle gibt eine kurze Zusammenfassung von einigen der Unterschiede. Der Rest des Kapitels beschreibt detailliert den Einsatz von JavaScript Konstruktoren und Prototypen, um eine Objekthierarchie zu erstellen und vergleicht dieses mit der Sprache Java.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Vergleich von Klassbasierten (Java) und Prototypebasierten (JavaScript) Objektsystemen
Klassenbasiert (Java)Prototypbasiert (JavaScript)
Klassen und Instanzen sind verschiedene Dinge.Alle Objekte können von anderen Objekt erben.
Definieren einer Klasse mit einer Klassendefinition; Instantiieren eine Klasse mit Konstruktormethoden.Definieren und Erstellen einer Menge von Objekten mit Konstruktorfunktionen.
Erstellt ein Objekt mit dem new Operator.Genauso.
Konstruiert eine Objekthierarchie mit Klassendefinitionen, um Unterklasse aus existierenden Klassen zu definieren.Konstruiert eine Objekthierarchie, indem ein Objekt als Prototyp mit einer Konstruktorfunktion verbunden werden.
Erbt Eigenschaften entlang der Klassenkette.Erbt Eigenschaften entlang der Prototypenkette.
Klassendefinitionen spezifizieren alle Eigenschaften von allen Klasseninstanzen. Man kann keine Eigenschaften dynamisch zur Laufzeit hinzufügen.Konstruktorfunktionen oder Prototypen spezifizieren eine initiale Menge von Eigenschaften. Man kann Eigenschaften dynamisch zu individuellen Objekten hinzufügen oder entfernen oder zu einer Menge von Objekten.
+ +

Das Mitarbeiter-Beispiel

+ +

Das restliche Kapitel benutzt die Mitarbeiterhierarchie, die in folgender Grafik dargestellt ist.

+ +
+
+

Eine einfache Objekthierarchie mit den folgenden Objekten:

+ +

+
+ +
+
    +
  • Employee (Mitarbeiter) hat die Eigenschafte name (die als Initialwert einen leerer String hat) und dept (Abteilung) (die als Initialwert "general" hat).
  • +
  • Manager basiert auf Employee. Er fügt die Eigenschaft reports (Berichte) hinzu (die als Initialwert ein leeres Array hat und für ein Array von Employees vorgesehen ist).
  • +
  • WorkerBee (Arbeitsbiene) basiert ebenfalls auf Employee. Er fügt die Eigenschaft projects hinzu (die als Initialwert ein leeres Array hat und für ein Array von Strings vorgesehen ist).
  • +
  • SalesPerson (Verkäufer) basiert auf WorkerBee. Er fügt die Eigenschaft quota (Pensum) hinzu (die als Initialwert 100 hat). zudem überschreibt er die dept Eigenschaft mit dem Wert "sales", um anzudeuten, dass alle Verkäufer in der gleichen Abteilung sind.
  • +
  • Engineer (Ingenieur) basiert auf WorkerBee. Er fügt die Eigenschaft machine (Maschine) hinzu (die als Initialwert einen leeren String hat) und überschreibt die Eigenschaft dept mit dem Wert "engineering".
  • +
+
+
+ +

Erstellen der Hierarchie

+ +

Es gibt viele Wege, um angemessene Konstruktorfunktionen für die Mitarbeiterhierarchie zu implementieren. Welchen man auswählt hängt stark davon ab, was in der Anwendung erreicht werden soll.

+ +

Dieser Abschnitt zeigt, wie man eine sehr einfache (und vergleichbar unflexible) Definition benutzen kann, um zu demonstrieren, wie die Vererbung funktioniert. In dieser Definition ist es nicht möglich jeden Eigenschaftswert zu spezifizieren, wenn ein Objekt erstellt wird. Die neu erstellten Objekte bekommen nur die Initialwerte und können später verändert werden.

+ +

In einer echten Anwendung würde man Konstruktoren so definieren, dass man diesen Eigenschaftswerte zur Erstellzeit übergeben kann (siehe Flexiblere Konstruktoren für mehr Informationen). Für den Anfang zeigen diese Definitionen wie die Vererbung funktioniert.

+ +

Die folgenden Java und JavaScript Employee Definitionen sind gleich. Der einzige Unterschied ist, dass in Java für jede Eigenschaft ein Typ definiert sein muss, in JavaScript jedoch nicht (das liegt daran, dass Java eine stark typisierte Sprache ist, während JavaScript eine schwach typisierte Sprache ist).

+ +
+

JavaScript

+ +
function Employee() {
+  this.name = '';
+  this.dept = 'general';
+}
+
+ +


+ Java

+ +
public class Employee {
+   public String name = "";
+   public String dept = "general";
+}
+
+
+ +

Die Manager und WorkerBee Definitionen zeigen die Unterschiede bei der Spezifizierung eines Oberobjektes in der Vererbungskette. In JavaScript fügt man eine Prototypinstanz der Eigenschaft prototype der Konstruktorfunktion hinzu. Man kann dieses zu jedem Zeitpunkt nach der Definition des Konstruktors machen. In Java spezifiziert man die Oberklasse in der Klassendefinition. Man kann die Oberklasse nicht außerhalb der Klassendefinition ändern.

+ +
+

JavaScript

+ +
function Manager() {
+  Employee.call(this);
+  this.reports = [];
+}
+Manager.prototype =
+    Object.create(Employee.prototype);
+
+function WorkerBee() {
+  Employee.call(this);
+  this.projects = [];
+}
+WorkerBee.prototype =
+    Object.create(Employee.prototype);
+
+ +


+ Java

+ +
public class Manager extends Employee {
+   public Employee[] reports =
+       new Employee[0];
+}
+
+
+
+public class WorkerBee extends Employee {
+   public String[] projects = new String[0];
+}
+
+
+
+
+ +

Die Engineer und SalesPerson Definition erstellt Objekte, welche von WorkerBee und somit auch von Employee abstammen. Ein Objekt von diesen Typen hat alle Eigenschaften der vorherigen Objekte in der Vererbungskette. Zudem überschreiben diese Definitionen den Wert der geerbten dept Eigenschaft mit einem neuen Wert für diese Objekte.

+ +
+

JavaScript

+ +
function SalesPerson() {
+   WorkerBee.call(this);
+   this.dept = 'sales';
+   this.quota = 100;
+}
+SalesPerson.prototype =
+    Object.create(WorkerBee.prototype);
+
+function Engineer() {
+   WorkerBee.call(this);
+   this.dept = 'engineering';
+   this.machine = '';
+}
+Engineer.prototype =
+    Object.create(WorkerBee.prototype);
+
+ +


+ Java

+ +
public class SalesPerson extends WorkerBee {
+   public String dept = "sales";
+   public double quota = 100.0;
+}
+
+
+public class Engineer extends WorkerBee {
+   public String dept = "engineering";
+   public String machine = "";
+}
+
+
+
+ +

Mit diesen Definitionen kann man Instanzen dieser Objekte mit ihren Initialwerten und Eigenschaften erstellen. Die nächste Grafik zeigt diese JavaScript Definitionen, um neue Objekte zu erzeugen und die Werte der neuen Objekte.

+ +
+

Hinweis: Der Term Instanz hat eine spezielle technische Bedeutung in Klassenbasierten Sprachen. In diesen Sprachen ist eine Instanz eine individuelle Instanz von einer Klasse und ist fundamental anders als eine Klasse. In JavaScript gibt es diese technische Bedeutung nicht, weil JavaScript nicht zwischen Klassen und Instanzen unterscheidet. Immer wenn über JavaScript Instanzen gesprochen wird, ist das rein informell und bedeutet, dass ein Objekte mit einer Konstruktorfunktion erstellt wurde. So kann man in diesem Beispiel sagen, dass jane eine Instanz von Engineer ist. Ebenso haben die Terme Eltern, Kind, Vorfahre und Nachfahre keine formale Bedeutung in JavaScript; Man kann diese benutzen, um deutlich zu machen wo sich ein Objekt in der Prototypenkette befindet.

+
+ +

Objekte mit der einfachen Definition erstellen

+ +
+

Objekthierarchie

+ +

Die folgende Hierarchie wird mit dem Code auf der rechten Seite erstellt.

+ +

+ +

Individuelle Objekte = Jim, Sally, Mark, Fred, Jane, etc.
+ "Instanzen" erstellt vom Konstruktor

+ +
var jim = new Employee;
+// Parentheses can be omitted if the
+// constructor takes no arguments.
+// jim.name is ''
+// jim.dept is 'general'
+
+var sally = new Manager;
+// sally.name is ''
+// sally.dept is 'general'
+// sally.reports is []
+
+var mark = new WorkerBee;
+// mark.name is ''
+// mark.dept is 'general'
+// mark.projects is []
+
+var fred = new SalesPerson;
+// fred.name is ''
+// fred.dept is 'sales'
+// fred.projects is []
+// fred.quota is 100
+
+var jane = new Engineer;
+// jane.name is ''
+// jane.dept is 'engineering'
+// jane.projects is []
+// jane.machine is ''
+
+
+ +

Objekteigenschaften

+ +

Dieser Abschnitt diskutiert, wie Objekte EIgenschaften von anderen Objekten in der Prototypenkette erben und was passiert, wenn eine Eigenschaft währende der Laufzeit hinzugefügt wird.

+ +

Eigenschaften vererben

+ +

Es wird vorausgesetzt, dass das Objekt mark als WorkerBee mit dem folgenden Statement erstellt wurde:

+ +
var mark = new WorkerBee;
+
+ +

Wenn JavaScript den new Operator sieht, erstellt es ein neues generisches Objekt und setzt implizit den Wert der internen Eigenschaft [[Prototype]] auf den Wert WorkerBee.prototype und setzt die this Referenz in der WorkerBee Konstruktorfunktion auf das neu erstellte Objekt. Die interne [[Prototype]] Eigenschaft legt die Prototypenkette fest, die zum Zurückgeben von Eigenschaftswerten benutzt wird. Sobald diese Eigenschaften gesetzt sind, gibt JavaScript das neue Objekt zurück und das Zuweisungsstatement setzt die Variable mark mit diesem Objekt.

+ +

Dieser Prozess fügt keine Werte in das mark-Objekt (lokale Werte) für Eigenschaften, die mark von der Prototypenkette erbt. Wenn man nach einem Wert einer Eigenschaft fragt, prüft JavaScript erst, ob der Wert in dem Objekt existiert. Wenn dies der Fall ist, wird dieser zurückgegeben. Wenn kein lokaler Wert vorhanden ist, prüft JavaScript die Prototypenkette (über die interne [[Prototype]] Eigenschaft). Wenn ein Objekt in der Prototypenkette einen Wert für die Eigenschaft hat, wird diese zurückgegeben. Wenn keine solche Eigenschaft gefunden wird, geht JavaScript davon aus, dass das Objekt keine solche Eigenschaft hat. Dementsprechend hat das mark Objekt folgende Eigenschaften und Werte:

+ +
mark.name = '';
+mark.dept = 'general';
+mark.projects = [];
+
+ +

Das mark Objekt hat lokale Werte für die name und dept Eigenschaft über den Employee Konstruktor zugewiesen bekommen. Es wurde ein Wert für die Eigenschaft projects vom WorkerBee Konstruktor zugewiesen. Dieses gibt die Vererbung von Eigenschaften und Werten in JavaScript her. Einige Feinheiten dieses Prozesses werden in Eigenschaftsvererbung erneut besuchen behandelt.

+ +

Weil diese Konstruktoren keine instanzspezifischen Werte bereitstellen können, sind diese Informationen generisch. Die Eigenschaftswerte sind die Standardwerte, die bei der Erstellung aller mit WorkerBee erstellten Objekt genutzt werden. Man kann natürlich die Werte jeder Eigenschaft ändern. So kann man spezifische Informationen für mark wie folgt vergeben:

+ +
mark.name = 'Doe, Mark';
+mark.dept = 'admin';
+mark.projects = ['navigator'];
+ +

Eigenschaften hinzufügen

+ +

In JavaScript kann man zu jedem Objekt zur Laufzeit Eigenschaften hinzufügen. Man ist nicht nur auf die unterstützten Eigenschaften der Konstruktorfunktion angewiesen. Um eine Eigenschaft spezifisch zu einem einfachen Objekt hinzuzufügen, kann man diese wie folgt dem Objekt zuweisen:

+ +
mark.bonus = 3000;
+
+ +

Jetzt hat das mark Objekt eine bonus Eigenschaft, aber kein anderer WorkerBee hat diese Eigenschaft.

+ +

Wenn man eine neue Eigenschaft zu einem Objekt hinzufügt, welches als Prototyp für eine Konstruktorfunktion benutzt wird, fügt man die Eigenschaft zu allen Objekten hinzu, die Eigenschaften von diesem Prototypen erben. Zum Beispiel kann man eine specialty Eigenschaft zu allen employees mit dem folgenden Statement hinzufügen:

+ +
Employee.prototype.specialty = 'none';
+
+ +

Nach der Ausführung dieses Statements durch JavaScript, hat das mark Objekt auch die specialty Eigenschaft mit dem Wert "none". Die folgende Grafik zeigt den Effekt des Hinzufügens dieser Eigenschaft zum Employee Prototyp und das Überschreiben des Engineer Prototypen.

+ +


+ Eigenschaften hinzufügen

+ +

Flexiblere Konstruktoren

+ +

Mit den bisher gezeigten Konstruktorfunktionen kann man beim Erstellen einer Instanz keine Eigenschaftswerte angeben. Wie bei Java kann man Konstruktoren Argumente zum Initialisieren von Eigenschaftswerten für Instanzen übergeben. Die folgende Abbildung zeigt eine Möglichkeit, dies zu tun.

+ +


+ Spezifizieren von Eigenschaften in einem Konstruktor, Teil 1

+ +

Die folgende Tabelle zeigt die Java und JavaScript Definitionen für diese Objekte.

+ +
+

JavaScript

+ +

Java

+
+ +
+
function Employee(name, dept) {
+  this.name = name || '';
+  this.dept = dept || 'general';
+}
+
+ +
public class Employee {
+   public String name;
+   public String dept;
+   public Employee () {
+      this("", "general");
+   }
+   public Employee (String name) {
+      this(name, "general");
+   }
+   public Employee (String name, String dept) {
+      this.name = name;
+      this.dept = dept;
+   }
+}
+
+
+ +
+
function WorkerBee(projs) {
+
+ this.projects = projs || [];
+}
+WorkerBee.prototype = new Employee;
+
+ +
public class WorkerBee extends Employee {
+   public String[] projects;
+   public WorkerBee () {
+      this(new String[0]);
+   }
+   public WorkerBee (String[] projs) {
+      projects = projs;
+   }
+}
+
+
+ +
+
+function Engineer(mach) {
+   this.dept = 'engineering';
+   this.machine = mach || '';
+}
+Engineer.prototype = new WorkerBee;
+
+ +
public class Engineer extends WorkerBee {
+   public String machine;
+   public Engineer () {
+      dept = "engineering";
+      machine = "";
+   }
+   public Engineer (String mach) {
+      dept = "engineering";
+      machine = mach;
+   }
+}
+
+
+ +

Diese JavaScript Definitionen benutzen eine spezielle Syntax für das Setzen von Standardwerten:

+ +
this.name = name || '';
+
+ +

Der logische ODER Operator (||) von JavaScript wertet das erste Argument aus. Wenn das Argument zu true konvertiert wird, gibt der Operator dieses zurück. Andernfalls wird der Wert des zweiten Arguments zurückgegeben. Demnach prüft diese Zeile Code, ob name einen nützlichen Wert für die name Eigenschaft hat. Wenn das der Fall ist, wird this.name auf diesen Wert gesetzt. Andernfalls wird this.name auf den leeren String gesetzt. Dieses Kapitel nutzt diese Syntax aus Gründen der Kürze; es kann jedoch auf den ersten Blick verwirrend sein.

+ +
+

Hinweis: Das kann möglicherweise nicht wie erwartet funktionieren, wenn der Konstruktorfunktion Argumente übergeben werden, welche zu false konvertiert werden (wie 0 (null) und der leere String ("")). In diesen Fällen wird der Standardwert benutzt.

+
+ +

Mit dieser Definition, kann man beim Erstellen einer Objektinstanz spezifische Werte für die lokal definierten Eigenschaften benutzen. Man kann das folgende Statement nutzen, um einen neuen Engineer zu erstellen:

+ +
var jane = new Engineer('belau');
+
+ +

Jane's Eigenschaften sind jetzt:

+ +
jane.name == '';
+jane.dept == 'engineering';
+jane.projects == [];
+jane.machine == 'belau';
+
+ +

Zu beachten ist, dass man mit diesen Definitionen keinen Initialwert für vererbte Eigenschaft wie name spezifizieren kann. Wenn man einen Initialwert für vererbe Eigenschaften in JavaScript spezifizieren möchte, muss man mehr Code zum Konstruktor hinzufügen.

+ +

Bisher hat die Konstruktorfunktion ein generisches Objekt erstellt und dann lokale Eigenschaften und Werte für das neue Objekt angegeben. Man kann den Konstruktor weitere Eigenschaften hinzufügen lassen, indem Sie die Konstruktorfunktion für ein Objekt in der Prototypkette direkt aufrufen. Die folgende Abbildung zeigt diese neuen Definitionen.

+ +


+ Spezifizieren von Eigenschaften in einem Konstruktor, Teil 2

+ +

Sehen wir uns eine dieser Definitionen genauer an. Hier ist die neue Definition für den Engineer-Konstruktor:

+ +
function Engineer(name, projs, mach) {
+  this.base = WorkerBee;
+  this.base(name, 'engineering', projs);
+  this.machine = mach || '';
+}
+
+ +

Angenommen, man erstellt ein neues Engineer-Objekt wie folgt:

+ +
var jane = new Engineer('Doe, Jane', ['navigator', 'javascript'], 'belau');
+
+ +

JavaScript folgt folgenden Schritten:

+ +
    +
  1. Der new Operator erstellt ein generisches Objekt und setzt die __proto__ EIgenschaft auf Engineer.prototype.
  2. +
  3. Der new Operator übergibt das neue Objekt dem Engineer Konstruktor als Wert des this Schlüsselwortes.
  4. +
  5. Der Konstruktor erstellt eine neue Eigenschaft namens base für dieses Objekt und weist dieser den Wert des WorkerBee Konstruktors zu. Das macht den WorkerBee Konstruktor zu einer Methode des Engineer Objektes. Der Name der base Eigenschaft ist nicht festgelegt. Man kann jeden legalen Eigenschaftsnamen nutzen; base erinnert einfach an den Zweck.
  6. +
  7. Der Konstruktor ruft die base Methode auf, übergibt als Argumente zwei der Argumente des Konstruktors ("Doe, Jane" und ["navigator", "javascript"]) und zudem den String "engineering". Der explizite Einsatz von "engineering" im Konstruktor zeigt, dass alle Engineer Objekte den selben Wert für dei geerbte dept Eigenschaft haben und dieser Wert den vererbten Wert von Employee überschreibt.
  8. +
  9. Weil base eine Methode von Engineer ist, weshalb JavaScrip beim Aufruf von base das Schlüsselwort this an das erstellte Objekt aus Schritt 1 bindet. Somit übergibt die WorkerBee Funktion die "Doe, Jane" und "engineering" Argumente zu der Employee Konstruktorfunktion. Nach der Rückgabe der Employee Konstruktorfunktion verwendet die WorkerBee Funktion das restliche Argument, um die projects Eigenschaft zu setzen.
  10. +
  11. Nach der Rückgabe der base Methode initialisiert der Engineer Konstruktor die Objekteigenschaft machine mit "belau".
  12. +
  13. Nach der Rückgabe des Konstruktors weist JavaScript das neue Objekte, der jane Variablen zu.
  14. +
+ +

Man kann denken, dass man, nachdem der WorkerBee-Konstruktor innerhalb des Engineer-Konstruktors aufgerufen wird, die Vererbung für das Engineer-Objekte entsprechend eingerichtet hat. Das ist nicht der Fall. Der Aufruf des WorkerBee Konstruktors stellt sicher, dass ein Engineer Objekt mit den Eigenschaften beginnt, die in allen aufgerufenen Konstruktorfunktionen angegeben sind. Wenn jedoch später eine Eigenschaft zum Employee oder WorkerBee Prototyp hinzugefügt wird, wird diese Eigenschaft nicht von Engineer Objekt geerbt. Nimmt man zum Beispiel folgende Statements an:

+ +
function Engineer(name, projs, mach) {
+  this.base = WorkerBee;
+  this.base(name, 'engineering', projs);
+  this.machine = mach || '';
+}
+var jane = new Engineer('Doe, Jane', ['navigator', 'javascript'], 'belau');
+Employee.prototype.specialty = 'none';
+
+ +

Das jane Objekt erbt nicht die specialty Eigenschaft. Man muss explizit den Prototypen einstellen, um dynamische Vererbung sicherzustellen. Nimmt man stattdessen folgende Statements an:

+ +
function Engineer(name, projs, mach) {
+  this.base = WorkerBee;
+  this.base(name, 'engineering', projs);
+  this.machine = mach || '';
+}
+Engineer.prototype = new WorkerBee;
+var jane = new Engineer('Doe, Jane', ['navigator', 'javascript'], 'belau');
+Employee.prototype.specialty = 'none';
+
+ +

Jetzt ist der Wert der specialty Eigenschaft des jane Objektes "none".

+ +

Ein anderer Weg wür Vererbung ist der Einsatz der call() / apply() Methoden. Die folgenden Beispiele sind äquivalent:

+ +
+
function Engineer(name, projs, mach) {
+  this.base = WorkerBee;
+  this.base(name, 'engineering', projs);
+  this.machine = mach || '';
+}
+
+ +
function Engineer(name, projs, mach) {
+  WorkerBee.call(this, name, 'engineering', projs);
+  this.machine = mach || '';
+}
+
+
+ +

Der Einsatz von javascript call() Methode ergibt ein sauberere Implementierung, weil base nicht mehr benötigt wird.

+ +

Eigenschaftsvererbung erneut besuchen

+ +

Im vorangegangenen Abschnitten wurde beschrieben, wie JavaScript Konstruktoren und Prototypen Hierarchien und Vererbung bereitstellt. Dieser Abschnitt diskutiert einige Feinheiten, die in der vorherigen Diskussion nicht unbedingt ersichtlich waren.

+ +

Lokale versus vererbte Werte

+ +

Wenn man auf eine Objekteigenschaft zugreift, führt JavaScript diese Schritte, wie vorhin in dem Kapitel beschrieben, durch:

+ +
    +
  1. Prüft, ob der Wert lokal existiert. Ist das der Fall, wird er zurückgegeben.
  2. +
  3. Wenn kein lokaler Wert vorhanden ist, wird die Prototypenkette (über die __proto__ Eigenschaft) geprüft.
  4. +
  5. Wenn ein Objekt in der Prototypenkette einen Wert für die spezifizierte Eigenschaft hat, wird dieser zurückgegeben.
  6. +
  7. Wenn keine solche Eigenschaft gefunden wird, hat das Objekt diese Eigenschaft nicht.
  8. +
+ +

Das Resultat dieser Schritte hängt davon ab, wie Dinge im Code definiert sind. Das originale Beispiel hat diese Definition:

+ +
function Employee() {
+  this.name = '';
+  this.dept = 'general';
+}
+
+function WorkerBee() {
+  this.projects = [];
+}
+WorkerBee.prototype = new Employee;
+
+ +

Nimmt man mit diesen Definitionen an, man erstellt amy als eine Instanz von WorkerBee mit folgendem Statement:

+ +
var amy = new WorkerBee;
+
+ +

Das amy Objekt hat eine lokale Eigenschaft, projects. Die Werte der name und dept Eigenschaften sind nicht lokal in amy und werden über die Objekteigenschaft __proto__ von amy erreicht. Deshalb hat amy diese Eigenschaftswerte:

+ +
amy.name == '';
+amy.dept == 'general';
+amy.projects == [];
+
+ +

Nimmt man jetzt an, man ändert den Wert der name Eigenschaft in dem Employee Prototyp:

+ +
Employee.prototype.name = 'Unknown';
+
+ +

Auf den ersten Blick erwartet man, dass der neue Wert an alle Instanzen von Employee propagiert wird. Jedoch ist das falsch.

+ +

Wenn man irgendeine Instanz des Employee Objektes erstellt, bekommt die Instanz einen lokalen Wert für die name Eigenschaft (der leere String). Das bedeutet, wenn man den WorkerBee Prototyp mit einem neuen Employee Objekt einstellt, dass WorkerBee.prototype einen lokalen Wert für die name Eigenschaft hat. Wenn demnach JavaScript nach der name Eigenschaft im amy Objekt sucht (eine Instanz von WorkerBee), wird der lokale Wert der Eigenschaft WorkerBee.prototype gefunden. Demnach wird nicht tiefer in der Kette in Employee.prototype gesucht.

+ +

Wenn man den Wert einer Objekteigenschaft zur Laufzeit ändert möchte und den neuen Wert für alle Nachkommenschaften dieses Objektes haben möchte, kann man die Eigenschaft nicht in der Konstruktorfunktion des Objektes definieren. Stattdessen fügt man sie zu dem Konstruktor assoziierten Prototyp hinzu. Angenommen man ändert zum Beispiel deb vorherigen Code wie folgt:

+ +
function Employee() {
+  this.dept = 'general';    // Note that this.name (a local variable) does not appear here
+}
+Employee.prototype.name = '';    // A single copy
+
+function WorkerBee() {
+  this.projects = [];
+}
+WorkerBee.prototype = new Employee;
+
+var amy = new WorkerBee;
+
+Employee.prototype.name = 'Unknown';
+
+ +

In diesem Fall wird die name Eigenschaft von amy "Unknown".

+ +

Das Beispiel zeigt, dass wenn man Standardwerte für Objekteigenschaften haben möchte und zudem dass diese zur Laufzeit geändert werden können, muss man die Eigenschaft im Konstruktorprototypen setzen und nicht in der Konstruktorfunktion.

+ +

Instanzbeziehungen prüfen

+ +

Das Nachgucken von Eigenschaften in JavaScript prüft erst die eigenen Eigenschaften und wenn die Eigenschaft dort nicht ist die Eigenschaften der speziellen Eigenschaft __proto__. Das setzt sich rekursiv fort; der Prozess wird "nachschlagen in der Prototypenkette" genannt.

+ +

Die spezielle Eigenschaft __proto__ wird beim erstellen des Objektes gesetzt; sie wird auf den Wert der prototype Eigenschaft des Konstruktors gesetzt. Deshalb erstellt der Ausdruck new Foo() ein Objekt mit __proto__ == Foo.prototype. Folglich ändert die Änderung der Foo.prototype Eigenschaft alle Nachschlage Prozesse für alle Objekte, die mit new Foo() erstellt wurden.

+ +

Alle Objekte haben eine __proto__ Objekteigenschaft (außer Object); Alle Funktionen haben eine prototype Objekteigenschaft. So können Objekte über 'Prototypenvererbung' mit anderen Objekten verbunden werden. Man kann auf Vererbung testen, indem __proto__ eines Objekts mit einer prototype Objekt einer Funktion verglichen wird. JavaScript hat dafür eine Kurzschreibweise: der instanceof Operator prüft ein Objekt gegen eine Funktion und gibt true zurück, wenn das Objekt von dem Funktionsprototyp erbt. Zum Beispiel:

+ +
var f = new Foo();
+var isTrue = (f instanceof Foo);
+ +

Für ein detailierteres Beispiel nehmen wir an, dass wir die gleichen Definition wie in Eigenschaften vererben haben. Ein Engineer wird wie folgt erstellt:

+ +
var chris = new Engineer('Pigman, Chris', ['jsd'], 'fiji');
+
+ +

Mit diesem Objekt, sind alle folgenden Statements true:

+ +
chris.__proto__ == Engineer.prototype;
+chris.__proto__.__proto__ == WorkerBee.prototype;
+chris.__proto__.__proto__.__proto__ == Employee.prototype;
+chris.__proto__.__proto__.__proto__.__proto__ == Object.prototype;
+chris.__proto__.__proto__.__proto__.__proto__.__proto__ == null;
+
+ +

Damit kann man eine instanceOf Funktion wie folgt schreiben:

+ +
function instanceOf(object, constructor) {
+   object = object.__proto__;
+   while (object != null) {
+      if (object == constructor.prototype)
+         return true;
+      if (typeof object == 'xml') {
+        return constructor.prototype == XML.prototype;
+      }
+      object = object.__proto__;
+   }
+   return false;
+}
+
+ +
Hinweis: Die obige Implementierung überprüft den Typ des Objekts gegen "xml", um eine Eigenart der Darstellung von XML-Objekten in neueren JavaScript-Versionen zu umgehen. die wesentlichen Details sind in {{bug(634150)}}, beschrieben.
+ +

Der Einsatz der oben definierten instanceOf Funktion führt bei folgenden Ausdrücken zu true:

+ +
instanceOf(chris, Engineer)
+instanceOf(chris, WorkerBee)
+instanceOf(chris, Employee)
+instanceOf(chris, Object)
+
+ +

Jedoch ist der folgende Ausdruck false:

+ +
instanceOf(chris, SalesPerson)
+
+ +

Globale Informationen in Konstruktoren

+ +

Wenn man einen Konstruktor erstellt, muss man vorsichtig sein, wenn man globale Informationen im Konstruktor einstellt. Nimmt man zum Beispiel an, man möchte eine eindeutige ID, die automatisch für jeden neuen employee zugewiesen wird, kann man die folgende Definition für Employee benutzen:

+ +
var idCounter = 1;
+
+function Employee(name, dept) {
+   this.name = name || '';
+   this.dept = dept || 'general';
+   this.id = idCounter++;
+}
+
+ +

Wenn man mit dieser Definition ein neuen Employee erstellt, weist der Konstruktor die nächste ID in der Sequenz zu und inkrementiert dann den globalen ID-Zähler. Wenn die nächsten Statemants die folgenden sind, so ist victoria.id == 1 und harry.id == 2:

+ +
var victoria = new Employee('Pigbert, Victoria', 'pubs');
+var harry = new Employee('Tschopik, Harry', 'sales');
+
+ +

Auf den ersten Blick ist das super. Jedoch wird idCounter jedes mal, wenn ein Employee erstellt wird, wofür auch immer, inkrementiert. Wenn man eine Employee Hierarchie wie im Kapitel oben gezeigt, so wird der Employee Konstruktor für jedes einstellen des Prototypen aufgerufen. Angenommen man hat den folgenden Code:

+ +
var idCounter = 1;
+
+function Employee(name, dept) {
+   this.name = name || '';
+   this.dept = dept || 'general';
+   this.id = idCounter++;
+}
+
+function Manager(name, dept, reports) {...}
+Manager.prototype = new Employee;
+
+function WorkerBee(name, dept, projs) {...}
+WorkerBee.prototype = new Employee;
+
+function Engineer(name, projs, mach) {...}
+Engineer.prototype = new WorkerBee;
+
+function SalesPerson(name, projs, quota) {...}
+SalesPerson.prototype = new WorkerBee;
+
+var mac = new Engineer('Wood, Mac');
+
+ +

Angenommen die Definitionen lassen hier die base Eigenschaft weg und rufen den Konstruktor oberhalb in der Prototypenkette auf. In diesem Fall, bekommt das mac Objekt die id 5.

+ +

Abhängig von der Anwendung ist es sinnvoll oder auch nicht, dass der Zähler an diesen Stellen extra hochzählt. Wenn man an dem exakten Wert des Zählers interessiert ist, ist eine mögliche Lösung den folgenden Konstruktor zu nutzen:

+ +
function Employee(name, dept) {
+   this.name = name || '';
+   this.dept = dept || 'general';
+   if (name)
+      this.id = idCounter++;
+}
+
+ +

Wenn eine Instanz von Employee erstellt wird, der als Prototyp genutzt wird, übergibt man keine Argumente an den Konstruktor. Benutzt man diese Definition des Konstruktors, wird keine id vergeben und der Zäher nicht aktualisiert, wenn dem Konstruktor keine Argumente übergeben werden. Daraus folgt, dass man einem Employee einen Namen geben muss, damit er eine id erhält. In diesem Beispiel ist mac.id == 1.

+ +

Alternativ kann man WorkerBee eine Kopie des Employee Prototypenobjektes zuweisen:

+ +
WorkerBee.prototype = Object.create(Employee.prototype);
+// instead of WorkerBee.prototype = new Employee
+
+ +

Keine Mehrfachvererbung

+ +

Einige objektorientierte SPrachen erlauben Mehrfachvererbung. Das bedeutet, dass ein Objekt die Eigenschaften und Werte von mehreren Elternobjekte erben kann. JavaScript unterstützt keine Mehrfachvererbung.

+ +

Vererbung von Eigenschafteswerten funktioniert zu JavaScripts Laufzeit durch das Suchen in der Prototypenkette eines Objektes. Weil ein Objekt ein einzigen Prototypen hat, kann JavaScript nicht dynamisch von mehr als einer Prototypenkette erben.

+ +

In JavaScript kann eine Konstruktorfunkton mehrere andere Konstruktorfunktionen in sich aufrufen. Das gibt die Illusion von Mehrfachvererbung. Zum Beispiel die folgenden Statements:

+ +
function Hobbyist(hobby) {
+   this.hobby = hobby || 'scuba';
+}
+
+function Engineer(name, projs, mach, hobby) {
+   this.base1 = WorkerBee;
+   this.base1(name, 'engineering', projs);
+   this.base2 = Hobbyist;
+   this.base2(hobby);
+   this.machine = mach || '';
+}
+Engineer.prototype = new WorkerBee;
+
+var dennis = new Engineer('Doe, Dennis', ['collabra'], 'hugo');
+
+ +

Vorausgesetzt wird, die Definition von WorkerBee früher in diesem Kapitel. In diesem Fall hat das dennis Objekt die folgenden Eigenschaften:

+ +
dennis.name == 'Doe, Dennis';
+dennis.dept == 'engineering';
+dennis.projects == ['collabra'];
+dennis.machine == 'hugo';
+dennis.hobby == 'scuba';
+
+ +

dennis hat also die hobby Eigenschaften des Hobbyist Konstruktors bekommen. Setzt man jetzt noch voraus, dass danach Eigenschaften zum Konstruktorprototypen Hobbyist hinzugefügt werde:

+ +
Hobbyist.prototype.equipment = ['mask', 'fins', 'regulator', 'bcd'];
+
+ +

Das dennis Objekt erbt diese neue Eigenschaft nicht.

+ +
{{PreviousNext("Web/JavaScript/Guide/Mit_Objekten_arbeiten", "Web/JavaScript/Guide/Using_promises")}}
diff --git "a/files/de/web/javascript/guide/einf\303\274hrung/index.html" "b/files/de/web/javascript/guide/einf\303\274hrung/index.html" deleted file mode 100644 index b38cb1b700..0000000000 --- "a/files/de/web/javascript/guide/einf\303\274hrung/index.html" +++ /dev/null @@ -1,140 +0,0 @@ ---- -title: Einführung -slug: Web/JavaScript/Guide/Einführung -tags: - - Beginner - - Guide - - Introduction - - JavaScript - - 'l10n:priority' -translation_of: Web/JavaScript/Guide/Introduction ---- -
{{jsSidebar("JavaScript Guide")}} {{PreviousNext("Web/JavaScript/Guide", "Web/JavaScript/Guide/Grammatik_und_Typen")}}
- -

Dieses Kapitel stellt JavaScript vor und behandelt einige grundlegende Konzepte.

- -

Was solltest du bereits wissen

- -

Für diese Einführung solltest du die folgenden Grundkenntnisse besitzen:

- - - -

Wo findest du Informationen zu JavaScript

- -

Die Dokumentation zu JavaScript im MDN umfasst Folgendes:

- - - -

Falls du dich das erste Mal mit JavaScript befasst, beginne einfach mit den Tutorials von Learning the Web [de] und dem JavaScript Guide [de]. Sobald du mit den ersten Grundlagen vertraut bist, kannst du die JavaScript Referenz [de] nutzen, um noch mehr über die einzelnen Methoden, Funktionen und Objekte von JavaScript zu erfahren.

- -

Was ist JavaScript?

- -

JavaScript ist eine plattformübergreifende, objektorientierte Skriptsprache. Es ist eine kompakte und ressourcenschonende Sprache. Innerhalb einer Host-Umgebung kann JavaScript mit den Objekten seiner Umgebung verknüpft werden, um diese programmatisch zu steuern.

- -

JavaScript beinhaltet eine Standardbibliothek von Objekten wie Array, Date, und Math, sowie einen Kern an Sprachelementen wie Operatoren, Kontrollstrukturen und Anweisungen. Der JavaScript-Kern kann für eine Vielzahl von Anwendungsfällen erweitert werden, indem man ihn durch zusätzliche Objekte ergänzt. Beispiele:

- - - -

JavaScript und Java

- -

JavaScript und Java gleichen einander in manchen Aspekten, sind in anderen aber grundlegend verschieden. Die Sprache JavaScript ähnelt Java, verfügt jedoch nicht über Javas statische Typisierung und seine strenge Typprüfung. JavaScript folgt weitgehend der Ausdruckssyntax, den Namenskonventionen und den elementaren Kontrollstrukturen von Java, was der Grund für die Umbenennung von LiveScript in JavaScript gewesen ist.

- -

Im Gegensatz zu Javas durch Deklarationen aufgebautes System, von zur Compile-Zeit verfügbaren Klassen, unterstützt JavaScript ein Laufzeitsystem, das auf einer kleinen Zahl an Datentypen basiert, die numerische und Boolesche Werte sowie Zeichenketten repräsentieren. JavaScript besitzt ein prototypen-basiertes Objektmodell anstatt des verbreiteteren klassenbasierten. Das prototypen-basierte Modell liefert dynamische Vererbung; das bedeutet, was vererbt wird, kann zwischen einzelnen Objekten variieren. JavaScript unterstützt zudem Funktionen ohne spezielle deklarative Anforderungen. Funktionen können Objekt Eigenschaften sein, ausgeführt als schwach typisierte Methoden.

- -

JavaScript ist im Vergleich zu Java eine syntaktisch sehr freie Sprache. Sie müssen nicht alle Variablen, Klassen und Methoden deklarieren. Sie müssen sich nicht damit befassen, ob Methoden öffentlich, privat oder geschützt sind und Sie müssen keine Interfaces implementieren. Variablen, Parameter und Rückgabewerte von Funktionen sind nicht explizit typisiert.

- -

Java ist eine auf schnelle Ausführung und Typsicherheit ausgelegte, klassenbasierte Programmiersprache. Typsicherheit bedeutet, dass Sie zum Beispiel keine Ganzzal in Java in eine Objektreferenz wandeln oder auf geschützten Speicher zugreifen können, indem Sie den Bytecode von Java manipulieren. Javas klassenbasiertes Modell bedeutet, dass Programme ausschließlich aus Klassen und ihren Methoden bestehen. Javas Klassenvererbung und strenge Typisierung erfordern im Allgemeinen eng gekoppelte Objekthierarchien. Wegen dieser Anforderungen ist das Programmieren in Java komplexer als in JavaScript.

- -

Im Gegensatz dazu steht JavaScript in der Tradition einer Reihe kleiner, dynamisch typisierter Sprachen wie HyperTalk und dBase. Diese Skriptsprachen stellen, dank ihrer einfacheren Syntax, spezialisierter eingebauter Funktionalität und minimalen Anforderungen, für die Objektgenerierung Programmierwerkzeuge für einen deutlich breiteren Adressatenkreis zu Verfügung.

- - - - - - - - - - - - - - - - - - - - - - - -
JavaScript im Vergleich zu Java
JavaScriptJava
Objektorientiert. Keine Unterscheidung zwischen Typen von Objekten. Vererbung mittels des Prototypen-Mechanismus, jedes beliebige Objekt kann dynamisch um Eigenschaften und Methoden erweitert werden.Klassenbasiert. Objekte werden in Klassen und Instanzen unterteilt, Vererbung erfolgt vollständig über die Klassenhierarchie. Klassen und Instanzen können keine Eigenschaften und Methoden dynamisch hinzugefügt werden.
Datentypen von Variablen werden nicht deklariert (dynamische Typisierung)Datentypen von Variablen müssen deklariert werden (statische Typisierung)
Kein automatischer Schreibzugriff auf die Festplatte.Kein automatischer Schreibzugriff auf die Festplatte.
- -

Weitere Informationen zu den Unterschieden zwischen JavaScript und Java finden Sie im Kapitel Einzelheiten des Objektmodells.

- -

JavaScript und die ECMAScript-Spezifikation

- -

JavaScript wird durch Ecma International standardisiert — den europäischen Verband zur Standardisierung von Informations- und Telekommunikationssystemen (ECMA war vormals ein Akronym für 'European Computer Manufacturers Association'), um eine standardisierte, internationale Programmiersprache auf der Basis von JavaScript verfügbar zu machen. Diese standardisierte Version von JavaScript, genannt ECMAScript, verhält sich in allen standardkonformen Applikationen identisch. Unternehmen können die offene Sprachdefinition verwenden, um ihre eigene Implementierung von JavaScript zu entwickeln. Der ECMAScript-Standard ist in der Spezifikation ECMA-262 dokumentiert. Unter Neu in JavaScript erfahren Sie mehr über die unterschiedlichen Versionen von JavaScript und den ECMAScript-Spezifikationen.

- -

ECMA-262 ist auch von der ISO (International Organization for Standardization) als ISO-16262 verabschiedet. Sie finden die Spezifikation auch auf der Website von Ecma International. Die Spezifikation von ECMAScript beschreibt nicht das Document Object Model (DOM), welches durch das World Wide Web Consortium (W3C) und der WHATWG (Web Hypertext Application Technology Working Group) standardisiert wird. Das DOM definiert die Art und Weise, in der HTML-Dokumentenobjekte für Ihr Skript sichtbar sind. Um ein besseres Verständnis der verschiedenen bei der Programmierung in JavaScript eingesetzten Technologien zu entwickeln, lesen Sie den Artikel JavaScript Technologieübersicht.

- -

JavaScript-Dokumentation vs. ECMAScript-Spezifikation

- -

Die Spezifikation von ECMAScript besteht aus Anforderungen an eine Implementierung von ECMAScript; sie ist zweckdienlich, falls Sie standardkonforme Spracheigenschaften in Ihrer ECMAScript-Implementierung oder ihrer Laufzeitumgebung (wie SpiderMonkey in Firefox oder v8 in Chrome) realisieren wollen.

- -

Das ECMAScript-Dokument soll nicht den Skriptprogrammierer unterstützen; nutzen Sie für Informationen zum Erstellen von Skripten die JavaScript-Dokumentation.

- -

Die ECMAScript-Spezifikation verwendet Terminologie und Syntax, mit der JavaScript-Programmierer möglicherweise nicht vertraut sind. Obwohl sich die Beschreibung der Sprache in ECMAScript unterscheiden kann, bleibt die Sprache selbst die gleiche. JavaScript unterstützt jede Funktionalität, die in der ECMAScript-Spezifikation genannt wird.

- -

Die JavaScript-Dokumentation beschreibt Aspekte der Sprache in für JavaScript-Programmierer passender Form.

- -

Erste Schritte mit JavaScript

- -

Die ersten Schritte mit JavaScript sind einfach: alles was Sie brauchen, ist einen aktuellen Browser. Diese Einführung nimmt auf einige Spracheigenschaften von JavaScript Bezug, die zur Zeit nur in den jüngsten Versionen von Firefox verfügbar sind, somit wird die Nutzung der aktuellsten Firefox-Version empfohlen.

- -

Es gibt zwei Werkzeuge in Firefox, die zum Experimentieren mit JavaScript nützliche sind: die Web-Konsole and die JavaScript-Umgebung.

- -

Die Web-Konsole

- -

Die Web-Konsole zeigt Ihnen Informationen zur aktuell geladenen Webseite an und beinhaltet zudem eine Kommandozeile, die Sie nutzen können, um JavaScript-Ausdrücke im Kontext der aktuellen Seite auszuführen.

- -

Um die Web-Konsole zu öffnen (Ctrl+Shift+K), wählen Sie "Web-Konsole" im Menü "Entwicklerwerkzeuge", das Sie im Menü von Firefox finden. Die Konsole wird am unteren Rand des Browserfensters angezeigt. Entlang des unteren Randes der Konsole befindet sich die Kommandozeile, in der Sie JavaScript eingeben können; die zugehörige Ausgabe erscheint im darüberliegenden Fensterbereich:

- -

- -

JavaScript-Umgebung (Scratchpad)

- -

Die Web-Konsole eignet sich hervorragend zur Ausführung einzelner Zeilen JavaScript, möchten Sie jedoch mehrere Zeilen ausführen können, ist das nicht besonders komfortabel und Ihren Beispielcode speichern können Sie mit der Web-Konsole auch nicht. Daher ist für komplexere Beispiele die JavaScript-Umgebung die bessere Wahl.

- -

Um die JavaScript-Umgebung zu öffnen (Shift+F4), wählen Sie "JavaScript-Umgebung" aus dem Menü "Entwicklerwerkzeuge", das Sie im Firefox-Menü finden. Die JavaScript-Umgebung öffnet sich in einem eigenen Fenster als Editor, mit dem Sie JavaScript schreiben und im Browser ausführen können. Sie können auch Skripte auf der Festplatte speichern bzw. laden.

- -

- -

Hello world

- -

Beginnen Sie mit dem Programmieren in JavaScript, indem Sie die JavaScript-Umgebung öffnen und Ihr erstes "Hello World"-Programm in JavaScript schreiben:

- -
function greetMe(yourName) {
-  alert("Hello " + yourName);
-}
-
-greetMe("World");
-
- -

Markieren Sie den Quelltext und drücken Sie Ctrl+R, um zu schauen, ob alles funktioniert.

- -

Auf den folgenden Seiten macht Sie diese Einführung mit Syntax und Spracheigenschaften von JavaScript vertraut, sodass Sie bald komplexere Anwendungen schreiben können.

- -

{{PreviousNext("Web/JavaScript/Guide", "Web/JavaScript/Guide/Grammatik_und_Typen")}}

diff --git a/files/de/web/javascript/guide/expressions_and_operators/index.html b/files/de/web/javascript/guide/expressions_and_operators/index.html new file mode 100644 index 0000000000..7a0e723c6c --- /dev/null +++ b/files/de/web/javascript/guide/expressions_and_operators/index.html @@ -0,0 +1,965 @@ +--- +title: Ausdrücke und Operatoren +slug: Web/JavaScript/Guide/Ausdruecke_und_Operatoren +tags: + - Beginner + - Extensions + - Guide + - JavaScript + - Operatoren + - 'l10n:priority' +translation_of: Web/JavaScript/Guide/Expressions_and_Operators +--- +
{{jsSidebar("JavaScript Guide")}} {{PreviousNext("Web/JavaScript/Guide/Funktionen", "Web/JavaScript/Guide/Numbers_and_dates")}}
+ +

Dieses Kapitel beschreibt JavaScript Ausdrücke und Operatoren, Zuweisungsoperatoren, Vergleichsoperatoren, Rechenoperatoren, Bit-Operatoren, Logische Operatoren, Operator zur Zeichenkettenverknüpfung, Bedingte (ternäre) Operatoren und mehr.

+ +

Eine vollständige und detaillierte Liste mit Operatoren und Ausdrücken ist in den Referenzen zu finden.

+ +

Operatoren

+ +

JavaScript besitzt verschiedene Operatortypen. Dieser Abschnitt beschreibt die einzelnen Operatoren und beinhaltet Informationen über die Operator-Prioritäten.

+ + + +

JavaScript verfügt über beides, binäre als auch unäre Operatoren. Zudem existiert ein spezieller ternärer Operator - der Bedingungsoperator. Ein binärer Operator benötigt zwei Operanden, einen vor dem Operator und einen nach dem Operator:

+ +
operand1 operator operand2
+
+ +

Zum Beispiel: 3+4, oder x*y.

+ +

Ein unärer Operator erwartet einen einzelnen Operanden, entweder vor, oder nach dem Operator:

+ +
operator operand
+
+ +

oder

+ +
operand operator
+
+ +

Zum Beispiel: x++, oder ++x.

+ +

Zuweisungsoperatoren

+ +

Ein Zuweisungsoperator weißt seinem linken Operanden einen Wert zu. Dieser Wert basiert auf dem Ergebnis des rechten Operanden. Der einfachste Zuweisungsoperator ist das "Gleich" (=), welches den Wert des rechten Operanden dem linken Operanden zuweist.

+ +

Zum Beispiel: x = y (y wid der Wert von x zugewiesen).

+ +

Es gibt auch zusammengesetzte Zuweisungsoperatoren, diese stellen Abkürzungen für die in der folgenden Tabelle aufgelisteten Operationen dar:

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Zusammengesetzte Zuweisungsoperatoren
NameAbgekürzter OperatorAusgeschriebener Operator
Zuweisungx = yx = y
Additionx += yx = x + y
Subraktionx -= yx = x - y
Multiplikationx *= yx = x * y
Divisionx /= yx = x / y
Modulo (Division mit Rest)x %= yx = x % y
Exponentiation assignment {{experimental_inline}}x **= yx = x ** y
Left shift assignmentx <<= yx = x << y
Right shift assignmentx >>= yx = x >> y
Unsigned right shift assignmentx >>>= yx = x >>> y
Bitwise AND assignmentx &= yx = x & y
Bitwise XOR assignmentx ^= yx = x ^ y
Bitwise OR assignmentx |= yx = x | y
+ +

Destrukturierung

+ +

Komplexere Zuweisungen ermöglicht Javascript über die sogenannte Destrukturierung. Diese ermöglicht es, Daten aus Arrays oder Objekten mithilfe einer Syntax zu extrahieren, die die Konstruktion von Array- und Objektliteralen widerspiegelt.

+ +
var foo = ["eins", "zwei", "drei"];
+
+// Ohne Destrukturierung
+var eins   = foo[0];
+var zwei   = foo[1];
+var drei   = foo[2];
+
+// mit Destrukturierung
+var [eins, zwei, drei] = foo;
+ +

Vergleichsoperatoren

+ +

Ein Vergleichsoperator vergleicht seine Operanden und gibt einen logischen Wert zurück, der darauf basiert, ob der Vergleich wahr ist, oder nicht.

+ +

Die Operanden können numerische-, string-, logische- oder Objektwerte sein. Zeichenfolgen werden basierend auf der lexikographischen Standardreihenfolge mit unicodewerten verglichen. Wenn die beiden Operanden nicht vom selben Typ sind, versucht JavaScript in den meisten Fällen, sie in einen geeigneten Typ für den Vergleich zu konvertieren. Dieses Verhalten führt im Allgemeinen dazu, dass die Operanden numerisch verglichen werden. Die einzigen Ausnahmen für die Typumwandlung innerhalb von Vergleichen sind die Operatoren === und !==, die strenge Vergleiche durchführen. Diese Operatoren versuchen nicht, die Operanden in kompatible Typen zu konvertieren, bevor sie die Gleichheit überprüfen.

+ +

Die folgende Tabelle beschreibt die Vergleichsoperatoren in Bezug auf diesen Beispielcode:

+ +
var var1 = 3;
+var var2 = 4;
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Vergleichsoperatoren
OperatorBeschreibungBeispiele, die true zurückgeben
Equal (==)Gibt true zurück, wenn die Operanden gleich sind.3 == var1 +

"3" == var1

+ 3 == '3'
Not equal (!=)Gibt true zurück, wenn die Operanden ungleich sind.var1 != 4
+ var2 != "3"
Strict equal (===)Gibt true zurück, wenn die Operanden gleich sind und auch der Typ übereinstimmt. Weitere Informationen unter {{jsxref("Object.is")}} und sameness in JS.3 === var1
Strict not equal (!==)Gibt true zurück, wenn die Operanden vom selben Typ sind, doch nicht den selben Wert haben, oder wenn sie den selben Wert haben, doch nicht vom selben Typ sind.var1 !== "3"
+ 3 !== '3'
Greater than (>)Gibt true zurück, wenn der linke Operand größer dem rechten Operanden ist.var2 > var1
+ "12" > 2
Greater than or equal (>=)Gibt true zurück, wenn der linke Operand größer als, oder gleich dem linken Operanden ist.var2 >= var1
+ var1 >= 3
Less than (<)Gibt true zurück, wenn der linke Operand kleiner dem rechten Operanden ist.var1 < var2
+ "2" < 12
Less than or equal (<=)Gibt true zurück, wenn der linke Operand kleiner als, oder gleich dem rechten Operanden ist.var1 <= var2
+ var2 <= 5
+ +
+

Note: (=>) ist kein Operator, hiermit werden Arrow functions notiert.

+
+ +

Arithmetische Operatoren (Rechenzeichen)

+ +

Ein arithmetischer Operator nimmt numerische Werte (Literale oder Variablen) als Operanden entgegen und gibt einen einzelnen numerischen Wert zurück. Die arithmetischen Standardoperatoren sind Addition (+), Subtraktion (-), Multiplikation (*) und Division (/). Diese Operatoren funktionieren wie in den meisten anderen Programmiersprachen, wenn sie mit Fließkommazahlen verwendet werden (beachten Sie insbesondere, dass die Division durch Null {{jsxref ("Infinity")}} ergibt).

+ +
1 / 2; // 0.5
+1 / 2 == 1.0 / 2.0; // this is true
+
+ +

Neben den arithmetischen Standardoperatoren (+, -, * /), stellt JavaScript noch weitere Rechenzeichen zur Verfügung. Diese werden in der folgenden Tabelle aufgeführt:

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Arithmetische Operatoren
OperatorBeschreibungBeispiel
Remainder (%)Binärer Operator. Gibt den ganzzahligen Rest der Division beider Operanden zurück.12 % 5 gibt 2 zurück.
Increment (++) +

Unärer Operator. Addiert 1 zu seinem Operanden.

+ +

Wenn der Operator vorangestellt wird (++x), gibt er den Wert seines Operanden zurück nachdem 1 addiert wurde; Wenn der Operator nachgestellt wird (x++), gibt er den Wert seines Operanden zurück, bevor 1 addiert wurde.

+
Wenn x gleich 3 ist, setzt ++x x auf 4 und gibt 4 zurück, wobei x++  3 zurückgibt und erst danach x auf 4 setzt.
Decrement (--) +

Unärer Operator. Subtrahiert 1 von seinem Operanden.

+ +

Der Rückgabewert verhält sich analog zum increment Operator.

+
Wenn x gleich 3 ist, setzt --x x auf 2 und gibt 2 zurück, wobei x-- 3 zurückgibt und erst danach, x auf 2 setzt.
Unary negation (-)Unärer Operator. Gibt die Negierung seines Operanden zurück.Wenn x gleich 3 ist, gibt -x -3 zurück.
Unary plus (+)Versucht, den Operanden in eine Zahl umzuwandeln, wenn dies nicht bereits der Fall ist.+"3" gibt 3 zurück.
+ +true gibt 1 zurück.
Exponentiation operator (**) {{experimental_inline}}Calculates the base to the exponent power, that is, baseexponent2 ** 3 gibt 8 zurück.
+ 10 ** -1 gibt 0.1 zurück.
+ +

Bitweise Operatoren

+ +

Ein bitweiser Operator behandelt seine Operanden als eine Menge von 32 Bits (Nullen und Einsen) und nicht als dezimale, hexadezimale oder oktale Zahlen. Zum Beispiel hat die Dezimalzahl Neun eine binäre Darstellung von 1001. Bitweise Operatoren führen ihre Operationen mit solchen binären Darstellungen aus, doch sie geben standardmäßige numerische JavaScript-Werte zurück.

+ +

Die folgende Tabelle fasst die bitweisen Operatoren von JavaScript zusammen.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Bitweise Operatoren
OperatorVerwendungBeschreibung
Bitwise ANDa & bReturns a one in each bit position for which the corresponding bits of both operands are ones.
Bitwise ORa | bReturns a zero in each bit position for which the corresponding bits of both operands are zeros.
Bitwise XORa ^ bReturns a zero in each bit position for which the corresponding bits are the same.
+ [Returns a one in each bit position for which the corresponding bits are different.]
Bitwise NOT~ aInverts the bits of its operand.
Left shifta << bShifts a in binary representation b bits to the left, shifting in zeros from the right.
Sign-propagating right shifta >> bShifts a in binary representation b bits to the right, discarding bits shifted off.
Zero-fill right shifta >>> bShifts a in binary representation b bits to the right, discarding bits shifted off, and shifting in zeros from the left.
+ +

Bitweise logische Operatoren

+ +

Konzeptuell arbeiten bitweise logische Operatoren wie folgt:

+ + + +

Zum Beispiel ist die binäre Darstellung der Zahl neun 1001, die binäre Darstellung der Zahl 15 ist 1111. Wenn die bitweisen logischen Operatoren auf diese Zahlen angewendet werden, ergeben sich folgende Ergebnisse:

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Beispiele für bitweise Operatoren
AusdruckErgebnisBinäre Darstellung
15 & 991111 & 1001 = 1001
15 | 9151111 | 1001 = 1111
15 ^ 961111 ^ 1001 = 0110
~15-16~00000000...00001111 = 11111111...11110000
~9-10~00000000...00001001 = 11111111...11110110
+ +

Beachte, dass alle 32 Bits invertiert werden, wenn der bitweise NOT Operator benutzt wird. Wenn dabei das höchstwertigste (ganz linke) Bit auf 1 gesetzt wird, entsteht eine negative Zahl. Note that all 32 bits are inverted using the Bitwise NOT operator, and that values with the most significant (left-most) bit set to 1 represent negative numbers (Zweierkomplement). ~x wird also genauso ausgewertet wie -x - 1.

+ +

Bitweise Schiebeoperatoren

+ +

Die bitweisen Schiebeoperatoren erwarten zwei Operanden. Der erste ist der Wert, der geschoben werden soll, der zweite die Anzahl der Bits, um die geschoben werden soll. Die Richtung, in die geschoben wird, wird durch den verwendeten Operator bestimmt.

+ +

Schiebeoperatoren konvertieren ihre Operanden in 32 Bit Integer Zahlen und liefern als Ergebnis einen Wert vom selben Typen wir der linke Operand.

+ +

Die Schiebeoperatoren sind in der folgenden Tabelle aufgelistet.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
Bitwise shift operators
OperatorDescriptionExample
Left shift
+ (<<)
This operator shifts the first operand the specified number of bits to the left. Excess bits shifted off to the left are discarded. Zero bits are shifted in from the right.9<<2 yields 36, because 1001 shifted 2 bits to the left becomes 100100, which is 36.
Sign-propagating right shift (>>)This operator shifts the first operand the specified number of bits to the right. Excess bits shifted off to the right are discarded. Copies of the leftmost bit are shifted in from the left.9>>2 yields 2, because 1001 shifted 2 bits to the right becomes 10, which is 2. Likewise, -9>>2 yields -3, because the sign is preserved.
Zero-fill right shift (>>>)This operator shifts the first operand the specified number of bits to the right. Excess bits shifted off to the right are discarded. Zero bits are shifted in from the left.19>>>2 yields 4, because 10011 shifted 2 bits to the right becomes 100, which is 4. For non-negative numbers, zero-fill right shift and sign-propagating right shift yield the same result.
+ +

Logische Operatoren

+ +

Logische Operatoren werden normalerweise mit boolesche (logischen) Werten verwendet - hierbei geben sie dann einen booleschen Wert zurück. Die Operatoren && und || geben den Wert von einem der Operatoren zurück, sodass sie im Falle der Verwendung mit einem nicht-booleschen Wert auch einen nicht-booleschen Wert zurückgeben können. Die logischen Operatoren werden in der folgenden Tabelle beschrieben: 

+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
Logische Operatoren
OperatorVerwendungBeschreibung
Logical AND (&&)expr1 && expr2Gibt expr1 zurück, sofern es zu false konvertiert werden kann; ansonsten wird expr2 zurückgegeben. Insofern mit booleschen Werten verwendet, && gibt true zurück, wenn beide Operanden wahr sind; ansonsten false.
Logical OR (||)expr1 || expr2 +

Gibt expr1 zurück, sofern er zu true konvertiert werden kann. Insofern mit booleschen Werten verwendet, gibt der Operator || true zurück, wenn einer von beiden Operanden true ist; wenn beide false sind, wird false zurückgegeben. 

+
Logical NOT (!)!expr +

Gibt false zurück, wenn sein einziger Operand in true konvertiert werden kann; andernfalls gibt er true zurück. 

+
+ +

Beispiele von Ausdrücken, die in false umgewandelt werden können, sind solche, die null, 0, NaN, einen leeren String ("") oder undefined sind. 

+ +

Die folgenden Zeilen zeigen Beispiele des && (logisches UND) Operators.

+ +
var a1 =  true && true;     // t && t returns true
+var a2 =  true && false;    // t && f returns false
+var a3 = false && true;     // f && t returns false
+var a4 = false && (3 == 4); // f && f returns false
+var a5 = "Cat" && "Dog";    // t && t returns Dog
+var a6 = false && "Cat";    // f && t returns false
+var a7 = "Cat" && false;    // t && f returns false
+
+ +

Die folgenden Zeilen zeigen Beispiele des || (logisches ODER) Operators:

+ +
var o1 =  true || true;     // t || t returns true
+var o2 = false || true;     // f || t returns true
+var o3 =  true || false;    // t || f returns true
+var o4 = false || (3 == 4); // f || f returns false
+var o5 = "Cat" || "Dog";    // t || t returns Cat
+var o6 = false || "Cat";    // f || t returns Cat
+var o7 = "Cat" || false;    // t || f returns Cat
+
+ +

Die folgenden Zeilen zeigen Beispiele des ! (logisches NICHT) Operators:

+ +
var n1 = !true;  // !t returns false
+var n2 = !false; // !f returns true
+var n3 = !"Cat"; // !t returns false
+
+ +

Short-circuit-Bewertung 

+ +

Da logische Ausdrücke von links nach rechts bewertet werden, werden sie auf eine mögliche "Abkürzung" (short-circuit) hin gemäß den folgenden Regeln evaluiert:

+ + + +

Die Regeln der Logik garantieren, dass diese Bewertungen immer korrekt sind. Der irgendwas-Operand werden in den o.g. Beispielen hierbei nicht bewertet. 

+ +

String-Operatoren

+ +

In addition to the comparison operators, which can be used on string values, the concatenation operator (+) concatenates two string values together, returning another string that is the union of the two operand strings.

+ +

For example,

+ +
console.log("my " + "string"); // console logs the string "my string".
+ +

The shorthand assignment operator += can also be used to concatenate strings.

+ +

For example,

+ +
var mystring = "alpha";
+mystring += "bet"; // evaluates to "alphabet" and assigns this value to mystring.
+ +

Conditional (ternary) operator

+ +

The conditional operator is the only JavaScript operator that takes three operands. The operator can have one of two values based on a condition. The syntax is:

+ +
condition ? val1 : val2
+
+ +

If condition is true, the operator has the value of val1. Otherwise it has the value of val2. You can use the conditional operator anywhere you would use a standard operator.

+ +

For example,

+ +
var status = (age >= 18) ? "adult" : "minor";
+
+ +

This statement assigns the value "adult" to the variable status if age is eighteen or more. Otherwise, it assigns the value "minor" to status.

+ +

Comma operator

+ +

The comma operator (,) simply evaluates both of its operands and returns the value of the last operand. This operator is primarily used inside a for loop, to allow multiple variables to be updated each time through the loop.

+ +

For example, if a is a 2-dimensional array with 10 elements on a side, the following code uses the comma operator to update two variables at once. The code prints the values of the diagonal elements in the array:

+ +
var x = [0,1,2,3,4,5,6,7,8,9];
+var a = [x, x, x, x, x]
+
+for (var i = 0, j = 9; i <= j; i++, j--)
+  console.log("a[" + i + "][" + j + "]= " + a[i][j]);
+
+ +

Unary operators

+ +

A unary operation is an operation with only one operand.

+ +

delete

+ +

The delete operator deletes an object, an object's property, or an element at a specified index in an array. The syntax is:

+ +
delete objectName;
+delete objectName.property;
+delete objectName[index];
+delete property; // legal only within a with statement
+
+ +

where objectName is the name of an object, property is an existing property, and index is an integer representing the location of an element in an array.

+ +

The fourth form is legal only within a with statement, to delete a property from an object.

+ +

You can use the delete operator to delete variables declared implicitly but not those declared with the var statement.

+ +

If the delete operator succeeds, it sets the property or element to undefined. The delete operator returns true if the operation is possible; it returns false if the operation is not possible.

+ +
x = 42;
+var y = 43;
+myobj = new Number();
+myobj.h = 4;    // create property h
+delete x;       // returns true (can delete if declared implicitly)
+delete y;       // returns false (cannot delete if declared with var)
+delete Math.PI; // returns false (cannot delete predefined properties)
+delete myobj.h; // returns true (can delete user-defined properties)
+delete myobj;   // returns true (can delete if declared implicitly)
+
+ +
Deleting array elements
+ +

When you delete an array element, the array length is not affected. For example, if you delete a[3], a[4] is still a[4] and a[3] is undefined.

+ +

When the delete operator removes an array element, that element is no longer in the array. In the following example, trees[3] is removed with delete. However, trees[3] is still addressable and returns undefined.

+ +
var trees = ["redwood", "bay", "cedar", "oak", "maple"];
+delete trees[3];
+if (3 in trees) {
+  // this does not get executed
+}
+
+ +

If you want an array element to exist but have an undefined value, use the undefined keyword instead of the delete operator. In the following example, trees[3] is assigned the value undefined, but the array element still exists:

+ +
var trees = ["redwood", "bay", "cedar", "oak", "maple"];
+trees[3] = undefined;
+if (3 in trees) {
+  // this gets executed
+}
+
+ +

typeof

+ +

The typeof operator is used in either of the following ways:

+ +
typeof operand
+typeof (operand)
+
+ +

The typeof operator returns a string indicating the type of the unevaluated operand. operand is the string, variable, keyword, or object for which the type is to be returned. The parentheses are optional.

+ +

Suppose you define the following variables:

+ +
var myFun = new Function("5 + 2");
+var shape = "round";
+var size = 1;
+var today = new Date();
+
+ +

The typeof operator returns the following results for these variables:

+ +
typeof myFun;     // returns "function"
+typeof shape;     // returns "string"
+typeof size;      // returns "number"
+typeof today;     // returns "object"
+typeof dontExist; // returns "undefined"
+
+ +

For the keywords true and null, the typeof operator returns the following results:

+ +
typeof true; // returns "boolean"
+typeof null; // returns "object"
+
+ +

For a number or string, the typeof operator returns the following results:

+ +
typeof 62;            // returns "number"
+typeof 'Hello world'; // returns "string"
+
+ +

For property values, the typeof operator returns the type of value the property contains:

+ +
typeof document.lastModified; // returns "string"
+typeof window.length;         // returns "number"
+typeof Math.LN2;              // returns "number"
+
+ +

For methods and functions, the typeof operator returns results as follows:

+ +
typeof blur;        // returns "function"
+typeof eval;        // returns "function"
+typeof parseInt;    // returns "function"
+typeof shape.split; // returns "function"
+
+ +

For predefined objects, the typeof operator returns results as follows:

+ +
typeof Date;     // returns "function"
+typeof Function; // returns "function"
+typeof Math;     // returns "object"
+typeof Option;   // returns "function"
+typeof String;   // returns "function"
+
+ +

void

+ +

The void operator is used in either of the following ways:

+ +
void (expression)
+void expression
+
+ +

The void operator specifies an expression to be evaluated without returning a value. expression is a JavaScript expression to evaluate. The parentheses surrounding the expression are optional, but it is good style to use them.

+ +

You can use the void operator to specify an expression as a hypertext link. The expression is evaluated but is not loaded in place of the current document.

+ +

The following code creates a hypertext link that does nothing when the user clicks it. When the user clicks the link, void(0) evaluates to undefined, which has no effect in JavaScript.

+ +
Click here to do nothing
+
+ +

The following code creates a hypertext link that submits a form when the user clicks it.

+ +

+Click here to submit
+ +

Relational operators

+ +

A relational operator compares its operands and returns a Boolean value based on whether the comparison is true.

+ +

in

+ +

The in operator returns true if the specified property is in the specified object. The syntax is:

+ +
propNameOrNumber in objectName
+
+ +

where propNameOrNumber is a string or numeric expression representing a property name or array index, and objectName is the name of an object.

+ +

The following examples show some uses of the in operator.

+ +
// Arrays
+var trees = ["redwood", "bay", "cedar", "oak", "maple"];
+0 in trees;        // returns true
+3 in trees;        // returns true
+6 in trees;        // returns false
+"bay" in trees;    // returns false (you must specify the index number,
+                   // not the value at that index)
+"length" in trees; // returns true (length is an Array property)
+
+// built-in objects
+"PI" in Math;          // returns true
+var myString = new String("coral");
+"length" in myString;  // returns true
+
+// Custom objects
+var mycar = { make: "Honda", model: "Accord", year: 1998 };
+"make" in mycar;  // returns true
+"model" in mycar; // returns true
+
+ +

instanceof

+ +

The instanceof operator returns true if the specified object is of the specified object type. The syntax is:

+ +
objectName instanceof objectType
+
+ +

where objectName is the name of the object to compare to objectType, and objectType is an object type, such as {{jsxref("Date")}} or {{jsxref("Array")}}.

+ +

Use instanceof when you need to confirm the type of an object at runtime. For example, when catching exceptions, you can branch to different exception-handling code depending on the type of exception thrown.

+ +

For example, the following code uses instanceof to determine whether theDay is a Date object. Because theDay is a Date object, the statements in the if statement execute.

+ +
var theDay = new Date(1995, 12, 17);
+if (theDay instanceof Date) {
+  // statements to execute
+}
+
+ +

Operator precedence

+ +

The precedence of operators determines the order they are applied when evaluating an expression. You can override operator precedence by using parentheses.

+ +

The following table describes the precedence of operators, from highest to lowest.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Operator precedence
Operator typeIndividual operators
member. []
call / create instance() new
negation/increment! ~ - + ++ -- typeof void delete
multiply/divide* / %
addition/subtraction+ -
bitwise shift<< >> >>>
relational< <= > >= in instanceof
equality== != === !==
bitwise-and&
bitwise-xor^
bitwise-or|
logical-and&&
logical-or||
conditional?:
assignment= += -= *= /= %= <<= >>= >>>= &= ^= |=
comma,
+ +

A more detailed version of this table, complete with links to additional details about each operator, may be found in JavaScript Reference.

+ +

Expressions

+ +

An expression is any valid unit of code that resolves to a value.

+ +

Every syntactically valid expression resolves to some value but conceptually, there are two types of expressions: with side effects (for example: those that assign value to a variable) and those that in some sense evaluate and therefore resolve to a value.

+ +

The expression x = 7 is an example of the first type. This expression uses the = operator to assign the value seven to the variable x. The expression itself evaluates to seven.

+ +

The code 3 + 4 is an example of the second expression type. This expression uses the + operator to add three and four together without assigning the result, seven, to a variable.
+
+ JavaScript has the following expression categories:

+ + + +

Primary expressions

+ +

Basic keywords and general expressions in JavaScript.

+ +

this

+ +

Use the this keyword to refer to the current object. In general, this refers to the calling object in a method. Use this either with the dot or the bracket notation:

+ +
this["propertyName"]
+this.propertyName
+
+ +

Suppose a function called validate validates an object's value property, given the object and the high and low values:

+ +
function validate(obj, lowval, hival){
+  if ((obj.value < lowval) || (obj.value > hival))
+    console.log("Invalid Value!");
+}
+
+ +

You could call validate in each form element's onChange event handler, using this to pass it the form element, as in the following example:

+ +

+
+

Enter a number between 18 and 99:

+ +

+ +

Grouping operator

+ +

The grouping operator ( ) controls the precedence of evaluation in expressions. For example, you can override multiplication and division first, then addition and subtraction to evaluate addition first.

+ +
var a = 1;
+var b = 2;
+var c = 3;
+
+// default precedence
+a + b * c     // 7
+// evaluated by default like this
+a + (b * c)   // 7
+
+// now overriding precedence
+// addition before multiplication
+(a + b) * c   // 9
+
+// which is equivalent to
+a * c + b * c // 9
+
+ +

Comprehensions

+ +

Comprehensions are an experimental JavaScript feature, targeted to be included in a future ECMAScript version. There are two versions of comprehensions:

+ +
+
{{experimental_inline}} {{jsxref("Operators/Array_comprehensions", "[for (x of y) x]")}}
+
Array comprehensions.
+
{{experimental_inline}} {{jsxref("Operators/Generator_comprehensions", "(for (x of y) y)")}}
+
Generator comprehensions.
+
+ +

Comprehensions exist in many programming languages and allow you to quickly assemble a new array based on an existing one, for example.

+ +
[for (i of [ 1, 2, 3 ]) i*i ];
+// [ 1, 4, 9 ]
+
+var abc = [ "A", "B", "C" ];
+[for (letter of abc) letter.toLowerCase()];
+// [ "a", "b", "c" ]
+ +

Left-hand-side expressions

+ +

Left values are the destination of an assignment.

+ +

new

+ +

You can use the new operator to create an instance of a user-defined object type or of one of the built-in object types. Use new as follows:

+ +
var objectName = new objectType([param1, param2, ..., paramN]);
+
+ +

super

+ +

The super keyword is used to call functions on an object's parent. It is useful with classes to call the parent constructor, for example.

+ +
super([arguments]); // calls the parent constructor.
+super.functionOnParent([arguments]);
+
+ +

Spread operator

+ +

The spread operator allows an expression to be expanded in places where multiple arguments (for function calls) or multiple elements (for array literals) are expected.

+ +

Example: Today if you have an array and want to create a new array with the existing one being part of it, the array literal syntax is no longer sufficient and you have to fall back to imperative code, using a combination of push, splice, concat, etc. With spread syntax this becomes much more succinct:

+ +
var parts = ['shoulder', 'knees'];
+var lyrics = ['head', ...parts, 'and', 'toes'];
+ +

Similarly, the spread operator works with function calls:

+ +
function f(x, y, z) { }
+var args = [0, 1, 2];
+f(...args);
+ +
{{PreviousNext("Web/JavaScript/Guide/Funktionen", "Web/JavaScript/Guide/Numbers_and_dates")}}
diff --git a/files/de/web/javascript/guide/feinheiten_des_objektmodells/index.html b/files/de/web/javascript/guide/feinheiten_des_objektmodells/index.html deleted file mode 100644 index 4d5e46ac26..0000000000 --- a/files/de/web/javascript/guide/feinheiten_des_objektmodells/index.html +++ /dev/null @@ -1,721 +0,0 @@ ---- -title: Feinheiten des Objektmodells -slug: Web/JavaScript/Guide/Feinheiten_des_Objektmodells -tags: - - Guide - - Intermediate - - JavaScript - - Object - - 'l10n:priority' -translation_of: Web/JavaScript/Guide/Details_of_the_Object_Model ---- -
{{jsSidebar("JavaScript Guide")}} {{PreviousNext("Web/JavaScript/Guide/Mit_Objekten_arbeiten", "Web/JavaScript/Guide/Using_promises")}}
- -

JavaScript ist eine Objektbasierte Programmiersprache, die auf Prototypen, statt auf Klassen basiert. Aufgrund dieser Tatsache ist es u. U. schwieriger zu erkennen, wie in JavaScript Objekthierarchien erstellt werden und die Vererbung von Eigenschaften und deren Werten erfolgt. Dieses Kapitel versucht diese Situation zu klären.

- -

Dieses Kapitel geht davon aus, dass bereits Erfahrungen mit JavaScript vorhanden sind und man einfache Objekte mit Funktionen schon erstellt hat.

- -

Klassenbasierte vs. Prototypbasierte Sprachen

- -

Klassenbasierte, Objektorientierte Sprachen wie Java und C++ bauen auf dem Konzept von Klassen und Instanzen auf.

- - - -

Eine Prototypbasierte Sprache wie JavaScript hat diese Unterscheidung nicht: es gibt einfach Objekte. Eine Prototypbasierte Sprache hat die Notation eines prototypischen Objektes, ein Objekt welches als Template genutzt wird und die initialen Eigenschaften für ein neues Objekt vorgibt. Jedes Objekt kann seine eigenen Eigenschaften spezifizieren, entweder beim Erstellen oder zur Laufzeit. Zudem kann jedes Objekt als Prototyp für ein anderes Objekt verwendet werden, was es auch dem zweiten Objekt erlaubt seine Eigenschaften mit dem ersten Objekt zu teilen.

- -

Eine Klasse definieren

- -

In einer Klassenbasierten Sprache definiert man Klassen in separaten Klassendefinitionen. In diesen Definitionen spezifiziert man spezielle Methoden, Konstruktoren genannt, um eine Instanz der Klasse zu erstellen. Eine Konstruktormethode spezifiziert Initialwerte für die Eigenschaften einer Instanz und kann andere Prozesse während der Erstellungszeit durchführen. Man benutzt den new Operator in Verbindung mit der Konstruktormethode, um Klasseninstanzen zu erstellen.

- -

JavaScript folgt einem ähnlichen Modell, jedoch hat keine vom Konstruktor getrennte Klassendefinition. Stattdessen definiert man eine Konstruktorfunktion, um ein Objekt mit einer initialen Menge an Eigenschaften und Werten zu erstellen. Jede JavaScript Funktion kann als Konstruktor verwendet werden. Man benutzt den new Operator mit einer Konstruktorfunktion, um ein neues Objekt zu erstellen.

- -

Unterklassen und Vererbung

- -

In einer Klassenbasierten Sprache erstellt man eine Hierarchie von Klassen durch die Klassendefinition. In der Klassendefinition kann man spezifizieren, dass die neue Klasse eine Unterklasse der schon existierenden Klassen ist. Die Unterklasse erbt alle Eigenschaften von der Oberklasse und kann neue Eigenschaften hinzufügen oder vererbte verändern. Angenommen die Employee Klasse hat nur die Eigenschaften name und dept und Manager ist eine Unterklasse von Employee welche die Eigenschaft reports hinzufügt. In diesem Fall hat eine Instanz der Manager Klasse alle drei Eigenschaften: name, dept und reports.

- -

JavaScript implementiert Vererbung so, dass man jedes Prototypobjekt mit jeder Konstruktorfunktion verbinden kann. So kann man das gleiche EmployeeManager Beispiel erstellen, jedoch mit einer leicht anderen Terminologie. Als erstes definiert man die Employee Konstruktorfunktion, welche die Eigenschaften name und dept spezifiziert. Als nächstes definiert man die Manager Konstruktorfunktion, ruft den Employee Konstruktor auf und spezifiziert die reports Eigenschaft. Letztlich weist man ein neues Objekt zu, welches von Employee.prototype stammt und als prototype für die Manager Konstruktorfunktion dient. Dann, wenn man einen neuen Manager erstellt, erbt dieser die Eigenschaften name und dept von dem Employee Objekt.

- -

Hinzufügen und Entfernen von Eigenschaften

- -

In Klassenbasierten Sprachen wird eine Klasse typischerweise zur Übersetzungszeit erstellt und Instanzen dieser Klasse werden zur Übersetzungs- oder Laufzeit instantiiert. Man kann die Anzahl oder die Typen von Eigenschaften einer Klasse nicht nach der Definition der Klasse verändern. In JavaScript kann man immer EIgenschaften während der Laufzeit zu Objekten hinzufügen oder von ihnen entfernen. Wenn eine Eigenschaft zu einem Objekt hinzugefügt wird, welches als Prototyp für andere Objekte fungiert, so bekommen die anderen Objekte auch diese neue Eigenschaft.

- -

Zusammenfassung von Unterschieden

- -

Die folgende Tabelle gibt eine kurze Zusammenfassung von einigen der Unterschiede. Der Rest des Kapitels beschreibt detailliert den Einsatz von JavaScript Konstruktoren und Prototypen, um eine Objekthierarchie zu erstellen und vergleicht dieses mit der Sprache Java.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Vergleich von Klassbasierten (Java) und Prototypebasierten (JavaScript) Objektsystemen
Klassenbasiert (Java)Prototypbasiert (JavaScript)
Klassen und Instanzen sind verschiedene Dinge.Alle Objekte können von anderen Objekt erben.
Definieren einer Klasse mit einer Klassendefinition; Instantiieren eine Klasse mit Konstruktormethoden.Definieren und Erstellen einer Menge von Objekten mit Konstruktorfunktionen.
Erstellt ein Objekt mit dem new Operator.Genauso.
Konstruiert eine Objekthierarchie mit Klassendefinitionen, um Unterklasse aus existierenden Klassen zu definieren.Konstruiert eine Objekthierarchie, indem ein Objekt als Prototyp mit einer Konstruktorfunktion verbunden werden.
Erbt Eigenschaften entlang der Klassenkette.Erbt Eigenschaften entlang der Prototypenkette.
Klassendefinitionen spezifizieren alle Eigenschaften von allen Klasseninstanzen. Man kann keine Eigenschaften dynamisch zur Laufzeit hinzufügen.Konstruktorfunktionen oder Prototypen spezifizieren eine initiale Menge von Eigenschaften. Man kann Eigenschaften dynamisch zu individuellen Objekten hinzufügen oder entfernen oder zu einer Menge von Objekten.
- -

Das Mitarbeiter-Beispiel

- -

Das restliche Kapitel benutzt die Mitarbeiterhierarchie, die in folgender Grafik dargestellt ist.

- -
-
-

Eine einfache Objekthierarchie mit den folgenden Objekten:

- -

-
- -
-
    -
  • Employee (Mitarbeiter) hat die Eigenschafte name (die als Initialwert einen leerer String hat) und dept (Abteilung) (die als Initialwert "general" hat).
  • -
  • Manager basiert auf Employee. Er fügt die Eigenschaft reports (Berichte) hinzu (die als Initialwert ein leeres Array hat und für ein Array von Employees vorgesehen ist).
  • -
  • WorkerBee (Arbeitsbiene) basiert ebenfalls auf Employee. Er fügt die Eigenschaft projects hinzu (die als Initialwert ein leeres Array hat und für ein Array von Strings vorgesehen ist).
  • -
  • SalesPerson (Verkäufer) basiert auf WorkerBee. Er fügt die Eigenschaft quota (Pensum) hinzu (die als Initialwert 100 hat). zudem überschreibt er die dept Eigenschaft mit dem Wert "sales", um anzudeuten, dass alle Verkäufer in der gleichen Abteilung sind.
  • -
  • Engineer (Ingenieur) basiert auf WorkerBee. Er fügt die Eigenschaft machine (Maschine) hinzu (die als Initialwert einen leeren String hat) und überschreibt die Eigenschaft dept mit dem Wert "engineering".
  • -
-
-
- -

Erstellen der Hierarchie

- -

Es gibt viele Wege, um angemessene Konstruktorfunktionen für die Mitarbeiterhierarchie zu implementieren. Welchen man auswählt hängt stark davon ab, was in der Anwendung erreicht werden soll.

- -

Dieser Abschnitt zeigt, wie man eine sehr einfache (und vergleichbar unflexible) Definition benutzen kann, um zu demonstrieren, wie die Vererbung funktioniert. In dieser Definition ist es nicht möglich jeden Eigenschaftswert zu spezifizieren, wenn ein Objekt erstellt wird. Die neu erstellten Objekte bekommen nur die Initialwerte und können später verändert werden.

- -

In einer echten Anwendung würde man Konstruktoren so definieren, dass man diesen Eigenschaftswerte zur Erstellzeit übergeben kann (siehe Flexiblere Konstruktoren für mehr Informationen). Für den Anfang zeigen diese Definitionen wie die Vererbung funktioniert.

- -

Die folgenden Java und JavaScript Employee Definitionen sind gleich. Der einzige Unterschied ist, dass in Java für jede Eigenschaft ein Typ definiert sein muss, in JavaScript jedoch nicht (das liegt daran, dass Java eine stark typisierte Sprache ist, während JavaScript eine schwach typisierte Sprache ist).

- -
-

JavaScript

- -
function Employee() {
-  this.name = '';
-  this.dept = 'general';
-}
-
- -


- Java

- -
public class Employee {
-   public String name = "";
-   public String dept = "general";
-}
-
-
- -

Die Manager und WorkerBee Definitionen zeigen die Unterschiede bei der Spezifizierung eines Oberobjektes in der Vererbungskette. In JavaScript fügt man eine Prototypinstanz der Eigenschaft prototype der Konstruktorfunktion hinzu. Man kann dieses zu jedem Zeitpunkt nach der Definition des Konstruktors machen. In Java spezifiziert man die Oberklasse in der Klassendefinition. Man kann die Oberklasse nicht außerhalb der Klassendefinition ändern.

- -
-

JavaScript

- -
function Manager() {
-  Employee.call(this);
-  this.reports = [];
-}
-Manager.prototype =
-    Object.create(Employee.prototype);
-
-function WorkerBee() {
-  Employee.call(this);
-  this.projects = [];
-}
-WorkerBee.prototype =
-    Object.create(Employee.prototype);
-
- -


- Java

- -
public class Manager extends Employee {
-   public Employee[] reports =
-       new Employee[0];
-}
-
-
-
-public class WorkerBee extends Employee {
-   public String[] projects = new String[0];
-}
-
-
-
-
- -

Die Engineer und SalesPerson Definition erstellt Objekte, welche von WorkerBee und somit auch von Employee abstammen. Ein Objekt von diesen Typen hat alle Eigenschaften der vorherigen Objekte in der Vererbungskette. Zudem überschreiben diese Definitionen den Wert der geerbten dept Eigenschaft mit einem neuen Wert für diese Objekte.

- -
-

JavaScript

- -
function SalesPerson() {
-   WorkerBee.call(this);
-   this.dept = 'sales';
-   this.quota = 100;
-}
-SalesPerson.prototype =
-    Object.create(WorkerBee.prototype);
-
-function Engineer() {
-   WorkerBee.call(this);
-   this.dept = 'engineering';
-   this.machine = '';
-}
-Engineer.prototype =
-    Object.create(WorkerBee.prototype);
-
- -


- Java

- -
public class SalesPerson extends WorkerBee {
-   public String dept = "sales";
-   public double quota = 100.0;
-}
-
-
-public class Engineer extends WorkerBee {
-   public String dept = "engineering";
-   public String machine = "";
-}
-
-
-
- -

Mit diesen Definitionen kann man Instanzen dieser Objekte mit ihren Initialwerten und Eigenschaften erstellen. Die nächste Grafik zeigt diese JavaScript Definitionen, um neue Objekte zu erzeugen und die Werte der neuen Objekte.

- -
-

Hinweis: Der Term Instanz hat eine spezielle technische Bedeutung in Klassenbasierten Sprachen. In diesen Sprachen ist eine Instanz eine individuelle Instanz von einer Klasse und ist fundamental anders als eine Klasse. In JavaScript gibt es diese technische Bedeutung nicht, weil JavaScript nicht zwischen Klassen und Instanzen unterscheidet. Immer wenn über JavaScript Instanzen gesprochen wird, ist das rein informell und bedeutet, dass ein Objekte mit einer Konstruktorfunktion erstellt wurde. So kann man in diesem Beispiel sagen, dass jane eine Instanz von Engineer ist. Ebenso haben die Terme Eltern, Kind, Vorfahre und Nachfahre keine formale Bedeutung in JavaScript; Man kann diese benutzen, um deutlich zu machen wo sich ein Objekt in der Prototypenkette befindet.

-
- -

Objekte mit der einfachen Definition erstellen

- -
-

Objekthierarchie

- -

Die folgende Hierarchie wird mit dem Code auf der rechten Seite erstellt.

- -

- -

Individuelle Objekte = Jim, Sally, Mark, Fred, Jane, etc.
- "Instanzen" erstellt vom Konstruktor

- -
var jim = new Employee;
-// Parentheses can be omitted if the
-// constructor takes no arguments.
-// jim.name is ''
-// jim.dept is 'general'
-
-var sally = new Manager;
-// sally.name is ''
-// sally.dept is 'general'
-// sally.reports is []
-
-var mark = new WorkerBee;
-// mark.name is ''
-// mark.dept is 'general'
-// mark.projects is []
-
-var fred = new SalesPerson;
-// fred.name is ''
-// fred.dept is 'sales'
-// fred.projects is []
-// fred.quota is 100
-
-var jane = new Engineer;
-// jane.name is ''
-// jane.dept is 'engineering'
-// jane.projects is []
-// jane.machine is ''
-
-
- -

Objekteigenschaften

- -

Dieser Abschnitt diskutiert, wie Objekte EIgenschaften von anderen Objekten in der Prototypenkette erben und was passiert, wenn eine Eigenschaft währende der Laufzeit hinzugefügt wird.

- -

Eigenschaften vererben

- -

Es wird vorausgesetzt, dass das Objekt mark als WorkerBee mit dem folgenden Statement erstellt wurde:

- -
var mark = new WorkerBee;
-
- -

Wenn JavaScript den new Operator sieht, erstellt es ein neues generisches Objekt und setzt implizit den Wert der internen Eigenschaft [[Prototype]] auf den Wert WorkerBee.prototype und setzt die this Referenz in der WorkerBee Konstruktorfunktion auf das neu erstellte Objekt. Die interne [[Prototype]] Eigenschaft legt die Prototypenkette fest, die zum Zurückgeben von Eigenschaftswerten benutzt wird. Sobald diese Eigenschaften gesetzt sind, gibt JavaScript das neue Objekt zurück und das Zuweisungsstatement setzt die Variable mark mit diesem Objekt.

- -

Dieser Prozess fügt keine Werte in das mark-Objekt (lokale Werte) für Eigenschaften, die mark von der Prototypenkette erbt. Wenn man nach einem Wert einer Eigenschaft fragt, prüft JavaScript erst, ob der Wert in dem Objekt existiert. Wenn dies der Fall ist, wird dieser zurückgegeben. Wenn kein lokaler Wert vorhanden ist, prüft JavaScript die Prototypenkette (über die interne [[Prototype]] Eigenschaft). Wenn ein Objekt in der Prototypenkette einen Wert für die Eigenschaft hat, wird diese zurückgegeben. Wenn keine solche Eigenschaft gefunden wird, geht JavaScript davon aus, dass das Objekt keine solche Eigenschaft hat. Dementsprechend hat das mark Objekt folgende Eigenschaften und Werte:

- -
mark.name = '';
-mark.dept = 'general';
-mark.projects = [];
-
- -

Das mark Objekt hat lokale Werte für die name und dept Eigenschaft über den Employee Konstruktor zugewiesen bekommen. Es wurde ein Wert für die Eigenschaft projects vom WorkerBee Konstruktor zugewiesen. Dieses gibt die Vererbung von Eigenschaften und Werten in JavaScript her. Einige Feinheiten dieses Prozesses werden in Eigenschaftsvererbung erneut besuchen behandelt.

- -

Weil diese Konstruktoren keine instanzspezifischen Werte bereitstellen können, sind diese Informationen generisch. Die Eigenschaftswerte sind die Standardwerte, die bei der Erstellung aller mit WorkerBee erstellten Objekt genutzt werden. Man kann natürlich die Werte jeder Eigenschaft ändern. So kann man spezifische Informationen für mark wie folgt vergeben:

- -
mark.name = 'Doe, Mark';
-mark.dept = 'admin';
-mark.projects = ['navigator'];
- -

Eigenschaften hinzufügen

- -

In JavaScript kann man zu jedem Objekt zur Laufzeit Eigenschaften hinzufügen. Man ist nicht nur auf die unterstützten Eigenschaften der Konstruktorfunktion angewiesen. Um eine Eigenschaft spezifisch zu einem einfachen Objekt hinzuzufügen, kann man diese wie folgt dem Objekt zuweisen:

- -
mark.bonus = 3000;
-
- -

Jetzt hat das mark Objekt eine bonus Eigenschaft, aber kein anderer WorkerBee hat diese Eigenschaft.

- -

Wenn man eine neue Eigenschaft zu einem Objekt hinzufügt, welches als Prototyp für eine Konstruktorfunktion benutzt wird, fügt man die Eigenschaft zu allen Objekten hinzu, die Eigenschaften von diesem Prototypen erben. Zum Beispiel kann man eine specialty Eigenschaft zu allen employees mit dem folgenden Statement hinzufügen:

- -
Employee.prototype.specialty = 'none';
-
- -

Nach der Ausführung dieses Statements durch JavaScript, hat das mark Objekt auch die specialty Eigenschaft mit dem Wert "none". Die folgende Grafik zeigt den Effekt des Hinzufügens dieser Eigenschaft zum Employee Prototyp und das Überschreiben des Engineer Prototypen.

- -


- Eigenschaften hinzufügen

- -

Flexiblere Konstruktoren

- -

Mit den bisher gezeigten Konstruktorfunktionen kann man beim Erstellen einer Instanz keine Eigenschaftswerte angeben. Wie bei Java kann man Konstruktoren Argumente zum Initialisieren von Eigenschaftswerten für Instanzen übergeben. Die folgende Abbildung zeigt eine Möglichkeit, dies zu tun.

- -


- Spezifizieren von Eigenschaften in einem Konstruktor, Teil 1

- -

Die folgende Tabelle zeigt die Java und JavaScript Definitionen für diese Objekte.

- -
-

JavaScript

- -

Java

-
- -
-
function Employee(name, dept) {
-  this.name = name || '';
-  this.dept = dept || 'general';
-}
-
- -
public class Employee {
-   public String name;
-   public String dept;
-   public Employee () {
-      this("", "general");
-   }
-   public Employee (String name) {
-      this(name, "general");
-   }
-   public Employee (String name, String dept) {
-      this.name = name;
-      this.dept = dept;
-   }
-}
-
-
- -
-
function WorkerBee(projs) {
-
- this.projects = projs || [];
-}
-WorkerBee.prototype = new Employee;
-
- -
public class WorkerBee extends Employee {
-   public String[] projects;
-   public WorkerBee () {
-      this(new String[0]);
-   }
-   public WorkerBee (String[] projs) {
-      projects = projs;
-   }
-}
-
-
- -
-
-function Engineer(mach) {
-   this.dept = 'engineering';
-   this.machine = mach || '';
-}
-Engineer.prototype = new WorkerBee;
-
- -
public class Engineer extends WorkerBee {
-   public String machine;
-   public Engineer () {
-      dept = "engineering";
-      machine = "";
-   }
-   public Engineer (String mach) {
-      dept = "engineering";
-      machine = mach;
-   }
-}
-
-
- -

Diese JavaScript Definitionen benutzen eine spezielle Syntax für das Setzen von Standardwerten:

- -
this.name = name || '';
-
- -

Der logische ODER Operator (||) von JavaScript wertet das erste Argument aus. Wenn das Argument zu true konvertiert wird, gibt der Operator dieses zurück. Andernfalls wird der Wert des zweiten Arguments zurückgegeben. Demnach prüft diese Zeile Code, ob name einen nützlichen Wert für die name Eigenschaft hat. Wenn das der Fall ist, wird this.name auf diesen Wert gesetzt. Andernfalls wird this.name auf den leeren String gesetzt. Dieses Kapitel nutzt diese Syntax aus Gründen der Kürze; es kann jedoch auf den ersten Blick verwirrend sein.

- -
-

Hinweis: Das kann möglicherweise nicht wie erwartet funktionieren, wenn der Konstruktorfunktion Argumente übergeben werden, welche zu false konvertiert werden (wie 0 (null) und der leere String ("")). In diesen Fällen wird der Standardwert benutzt.

-
- -

Mit dieser Definition, kann man beim Erstellen einer Objektinstanz spezifische Werte für die lokal definierten Eigenschaften benutzen. Man kann das folgende Statement nutzen, um einen neuen Engineer zu erstellen:

- -
var jane = new Engineer('belau');
-
- -

Jane's Eigenschaften sind jetzt:

- -
jane.name == '';
-jane.dept == 'engineering';
-jane.projects == [];
-jane.machine == 'belau';
-
- -

Zu beachten ist, dass man mit diesen Definitionen keinen Initialwert für vererbte Eigenschaft wie name spezifizieren kann. Wenn man einen Initialwert für vererbe Eigenschaften in JavaScript spezifizieren möchte, muss man mehr Code zum Konstruktor hinzufügen.

- -

Bisher hat die Konstruktorfunktion ein generisches Objekt erstellt und dann lokale Eigenschaften und Werte für das neue Objekt angegeben. Man kann den Konstruktor weitere Eigenschaften hinzufügen lassen, indem Sie die Konstruktorfunktion für ein Objekt in der Prototypkette direkt aufrufen. Die folgende Abbildung zeigt diese neuen Definitionen.

- -


- Spezifizieren von Eigenschaften in einem Konstruktor, Teil 2

- -

Sehen wir uns eine dieser Definitionen genauer an. Hier ist die neue Definition für den Engineer-Konstruktor:

- -
function Engineer(name, projs, mach) {
-  this.base = WorkerBee;
-  this.base(name, 'engineering', projs);
-  this.machine = mach || '';
-}
-
- -

Angenommen, man erstellt ein neues Engineer-Objekt wie folgt:

- -
var jane = new Engineer('Doe, Jane', ['navigator', 'javascript'], 'belau');
-
- -

JavaScript folgt folgenden Schritten:

- -
    -
  1. Der new Operator erstellt ein generisches Objekt und setzt die __proto__ EIgenschaft auf Engineer.prototype.
  2. -
  3. Der new Operator übergibt das neue Objekt dem Engineer Konstruktor als Wert des this Schlüsselwortes.
  4. -
  5. Der Konstruktor erstellt eine neue Eigenschaft namens base für dieses Objekt und weist dieser den Wert des WorkerBee Konstruktors zu. Das macht den WorkerBee Konstruktor zu einer Methode des Engineer Objektes. Der Name der base Eigenschaft ist nicht festgelegt. Man kann jeden legalen Eigenschaftsnamen nutzen; base erinnert einfach an den Zweck.
  6. -
  7. Der Konstruktor ruft die base Methode auf, übergibt als Argumente zwei der Argumente des Konstruktors ("Doe, Jane" und ["navigator", "javascript"]) und zudem den String "engineering". Der explizite Einsatz von "engineering" im Konstruktor zeigt, dass alle Engineer Objekte den selben Wert für dei geerbte dept Eigenschaft haben und dieser Wert den vererbten Wert von Employee überschreibt.
  8. -
  9. Weil base eine Methode von Engineer ist, weshalb JavaScrip beim Aufruf von base das Schlüsselwort this an das erstellte Objekt aus Schritt 1 bindet. Somit übergibt die WorkerBee Funktion die "Doe, Jane" und "engineering" Argumente zu der Employee Konstruktorfunktion. Nach der Rückgabe der Employee Konstruktorfunktion verwendet die WorkerBee Funktion das restliche Argument, um die projects Eigenschaft zu setzen.
  10. -
  11. Nach der Rückgabe der base Methode initialisiert der Engineer Konstruktor die Objekteigenschaft machine mit "belau".
  12. -
  13. Nach der Rückgabe des Konstruktors weist JavaScript das neue Objekte, der jane Variablen zu.
  14. -
- -

Man kann denken, dass man, nachdem der WorkerBee-Konstruktor innerhalb des Engineer-Konstruktors aufgerufen wird, die Vererbung für das Engineer-Objekte entsprechend eingerichtet hat. Das ist nicht der Fall. Der Aufruf des WorkerBee Konstruktors stellt sicher, dass ein Engineer Objekt mit den Eigenschaften beginnt, die in allen aufgerufenen Konstruktorfunktionen angegeben sind. Wenn jedoch später eine Eigenschaft zum Employee oder WorkerBee Prototyp hinzugefügt wird, wird diese Eigenschaft nicht von Engineer Objekt geerbt. Nimmt man zum Beispiel folgende Statements an:

- -
function Engineer(name, projs, mach) {
-  this.base = WorkerBee;
-  this.base(name, 'engineering', projs);
-  this.machine = mach || '';
-}
-var jane = new Engineer('Doe, Jane', ['navigator', 'javascript'], 'belau');
-Employee.prototype.specialty = 'none';
-
- -

Das jane Objekt erbt nicht die specialty Eigenschaft. Man muss explizit den Prototypen einstellen, um dynamische Vererbung sicherzustellen. Nimmt man stattdessen folgende Statements an:

- -
function Engineer(name, projs, mach) {
-  this.base = WorkerBee;
-  this.base(name, 'engineering', projs);
-  this.machine = mach || '';
-}
-Engineer.prototype = new WorkerBee;
-var jane = new Engineer('Doe, Jane', ['navigator', 'javascript'], 'belau');
-Employee.prototype.specialty = 'none';
-
- -

Jetzt ist der Wert der specialty Eigenschaft des jane Objektes "none".

- -

Ein anderer Weg wür Vererbung ist der Einsatz der call() / apply() Methoden. Die folgenden Beispiele sind äquivalent:

- -
-
function Engineer(name, projs, mach) {
-  this.base = WorkerBee;
-  this.base(name, 'engineering', projs);
-  this.machine = mach || '';
-}
-
- -
function Engineer(name, projs, mach) {
-  WorkerBee.call(this, name, 'engineering', projs);
-  this.machine = mach || '';
-}
-
-
- -

Der Einsatz von javascript call() Methode ergibt ein sauberere Implementierung, weil base nicht mehr benötigt wird.

- -

Eigenschaftsvererbung erneut besuchen

- -

Im vorangegangenen Abschnitten wurde beschrieben, wie JavaScript Konstruktoren und Prototypen Hierarchien und Vererbung bereitstellt. Dieser Abschnitt diskutiert einige Feinheiten, die in der vorherigen Diskussion nicht unbedingt ersichtlich waren.

- -

Lokale versus vererbte Werte

- -

Wenn man auf eine Objekteigenschaft zugreift, führt JavaScript diese Schritte, wie vorhin in dem Kapitel beschrieben, durch:

- -
    -
  1. Prüft, ob der Wert lokal existiert. Ist das der Fall, wird er zurückgegeben.
  2. -
  3. Wenn kein lokaler Wert vorhanden ist, wird die Prototypenkette (über die __proto__ Eigenschaft) geprüft.
  4. -
  5. Wenn ein Objekt in der Prototypenkette einen Wert für die spezifizierte Eigenschaft hat, wird dieser zurückgegeben.
  6. -
  7. Wenn keine solche Eigenschaft gefunden wird, hat das Objekt diese Eigenschaft nicht.
  8. -
- -

Das Resultat dieser Schritte hängt davon ab, wie Dinge im Code definiert sind. Das originale Beispiel hat diese Definition:

- -
function Employee() {
-  this.name = '';
-  this.dept = 'general';
-}
-
-function WorkerBee() {
-  this.projects = [];
-}
-WorkerBee.prototype = new Employee;
-
- -

Nimmt man mit diesen Definitionen an, man erstellt amy als eine Instanz von WorkerBee mit folgendem Statement:

- -
var amy = new WorkerBee;
-
- -

Das amy Objekt hat eine lokale Eigenschaft, projects. Die Werte der name und dept Eigenschaften sind nicht lokal in amy und werden über die Objekteigenschaft __proto__ von amy erreicht. Deshalb hat amy diese Eigenschaftswerte:

- -
amy.name == '';
-amy.dept == 'general';
-amy.projects == [];
-
- -

Nimmt man jetzt an, man ändert den Wert der name Eigenschaft in dem Employee Prototyp:

- -
Employee.prototype.name = 'Unknown';
-
- -

Auf den ersten Blick erwartet man, dass der neue Wert an alle Instanzen von Employee propagiert wird. Jedoch ist das falsch.

- -

Wenn man irgendeine Instanz des Employee Objektes erstellt, bekommt die Instanz einen lokalen Wert für die name Eigenschaft (der leere String). Das bedeutet, wenn man den WorkerBee Prototyp mit einem neuen Employee Objekt einstellt, dass WorkerBee.prototype einen lokalen Wert für die name Eigenschaft hat. Wenn demnach JavaScript nach der name Eigenschaft im amy Objekt sucht (eine Instanz von WorkerBee), wird der lokale Wert der Eigenschaft WorkerBee.prototype gefunden. Demnach wird nicht tiefer in der Kette in Employee.prototype gesucht.

- -

Wenn man den Wert einer Objekteigenschaft zur Laufzeit ändert möchte und den neuen Wert für alle Nachkommenschaften dieses Objektes haben möchte, kann man die Eigenschaft nicht in der Konstruktorfunktion des Objektes definieren. Stattdessen fügt man sie zu dem Konstruktor assoziierten Prototyp hinzu. Angenommen man ändert zum Beispiel deb vorherigen Code wie folgt:

- -
function Employee() {
-  this.dept = 'general';    // Note that this.name (a local variable) does not appear here
-}
-Employee.prototype.name = '';    // A single copy
-
-function WorkerBee() {
-  this.projects = [];
-}
-WorkerBee.prototype = new Employee;
-
-var amy = new WorkerBee;
-
-Employee.prototype.name = 'Unknown';
-
- -

In diesem Fall wird die name Eigenschaft von amy "Unknown".

- -

Das Beispiel zeigt, dass wenn man Standardwerte für Objekteigenschaften haben möchte und zudem dass diese zur Laufzeit geändert werden können, muss man die Eigenschaft im Konstruktorprototypen setzen und nicht in der Konstruktorfunktion.

- -

Instanzbeziehungen prüfen

- -

Das Nachgucken von Eigenschaften in JavaScript prüft erst die eigenen Eigenschaften und wenn die Eigenschaft dort nicht ist die Eigenschaften der speziellen Eigenschaft __proto__. Das setzt sich rekursiv fort; der Prozess wird "nachschlagen in der Prototypenkette" genannt.

- -

Die spezielle Eigenschaft __proto__ wird beim erstellen des Objektes gesetzt; sie wird auf den Wert der prototype Eigenschaft des Konstruktors gesetzt. Deshalb erstellt der Ausdruck new Foo() ein Objekt mit __proto__ == Foo.prototype. Folglich ändert die Änderung der Foo.prototype Eigenschaft alle Nachschlage Prozesse für alle Objekte, die mit new Foo() erstellt wurden.

- -

Alle Objekte haben eine __proto__ Objekteigenschaft (außer Object); Alle Funktionen haben eine prototype Objekteigenschaft. So können Objekte über 'Prototypenvererbung' mit anderen Objekten verbunden werden. Man kann auf Vererbung testen, indem __proto__ eines Objekts mit einer prototype Objekt einer Funktion verglichen wird. JavaScript hat dafür eine Kurzschreibweise: der instanceof Operator prüft ein Objekt gegen eine Funktion und gibt true zurück, wenn das Objekt von dem Funktionsprototyp erbt. Zum Beispiel:

- -
var f = new Foo();
-var isTrue = (f instanceof Foo);
- -

Für ein detailierteres Beispiel nehmen wir an, dass wir die gleichen Definition wie in Eigenschaften vererben haben. Ein Engineer wird wie folgt erstellt:

- -
var chris = new Engineer('Pigman, Chris', ['jsd'], 'fiji');
-
- -

Mit diesem Objekt, sind alle folgenden Statements true:

- -
chris.__proto__ == Engineer.prototype;
-chris.__proto__.__proto__ == WorkerBee.prototype;
-chris.__proto__.__proto__.__proto__ == Employee.prototype;
-chris.__proto__.__proto__.__proto__.__proto__ == Object.prototype;
-chris.__proto__.__proto__.__proto__.__proto__.__proto__ == null;
-
- -

Damit kann man eine instanceOf Funktion wie folgt schreiben:

- -
function instanceOf(object, constructor) {
-   object = object.__proto__;
-   while (object != null) {
-      if (object == constructor.prototype)
-         return true;
-      if (typeof object == 'xml') {
-        return constructor.prototype == XML.prototype;
-      }
-      object = object.__proto__;
-   }
-   return false;
-}
-
- -
Hinweis: Die obige Implementierung überprüft den Typ des Objekts gegen "xml", um eine Eigenart der Darstellung von XML-Objekten in neueren JavaScript-Versionen zu umgehen. die wesentlichen Details sind in {{bug(634150)}}, beschrieben.
- -

Der Einsatz der oben definierten instanceOf Funktion führt bei folgenden Ausdrücken zu true:

- -
instanceOf(chris, Engineer)
-instanceOf(chris, WorkerBee)
-instanceOf(chris, Employee)
-instanceOf(chris, Object)
-
- -

Jedoch ist der folgende Ausdruck false:

- -
instanceOf(chris, SalesPerson)
-
- -

Globale Informationen in Konstruktoren

- -

Wenn man einen Konstruktor erstellt, muss man vorsichtig sein, wenn man globale Informationen im Konstruktor einstellt. Nimmt man zum Beispiel an, man möchte eine eindeutige ID, die automatisch für jeden neuen employee zugewiesen wird, kann man die folgende Definition für Employee benutzen:

- -
var idCounter = 1;
-
-function Employee(name, dept) {
-   this.name = name || '';
-   this.dept = dept || 'general';
-   this.id = idCounter++;
-}
-
- -

Wenn man mit dieser Definition ein neuen Employee erstellt, weist der Konstruktor die nächste ID in der Sequenz zu und inkrementiert dann den globalen ID-Zähler. Wenn die nächsten Statemants die folgenden sind, so ist victoria.id == 1 und harry.id == 2:

- -
var victoria = new Employee('Pigbert, Victoria', 'pubs');
-var harry = new Employee('Tschopik, Harry', 'sales');
-
- -

Auf den ersten Blick ist das super. Jedoch wird idCounter jedes mal, wenn ein Employee erstellt wird, wofür auch immer, inkrementiert. Wenn man eine Employee Hierarchie wie im Kapitel oben gezeigt, so wird der Employee Konstruktor für jedes einstellen des Prototypen aufgerufen. Angenommen man hat den folgenden Code:

- -
var idCounter = 1;
-
-function Employee(name, dept) {
-   this.name = name || '';
-   this.dept = dept || 'general';
-   this.id = idCounter++;
-}
-
-function Manager(name, dept, reports) {...}
-Manager.prototype = new Employee;
-
-function WorkerBee(name, dept, projs) {...}
-WorkerBee.prototype = new Employee;
-
-function Engineer(name, projs, mach) {...}
-Engineer.prototype = new WorkerBee;
-
-function SalesPerson(name, projs, quota) {...}
-SalesPerson.prototype = new WorkerBee;
-
-var mac = new Engineer('Wood, Mac');
-
- -

Angenommen die Definitionen lassen hier die base Eigenschaft weg und rufen den Konstruktor oberhalb in der Prototypenkette auf. In diesem Fall, bekommt das mac Objekt die id 5.

- -

Abhängig von der Anwendung ist es sinnvoll oder auch nicht, dass der Zähler an diesen Stellen extra hochzählt. Wenn man an dem exakten Wert des Zählers interessiert ist, ist eine mögliche Lösung den folgenden Konstruktor zu nutzen:

- -
function Employee(name, dept) {
-   this.name = name || '';
-   this.dept = dept || 'general';
-   if (name)
-      this.id = idCounter++;
-}
-
- -

Wenn eine Instanz von Employee erstellt wird, der als Prototyp genutzt wird, übergibt man keine Argumente an den Konstruktor. Benutzt man diese Definition des Konstruktors, wird keine id vergeben und der Zäher nicht aktualisiert, wenn dem Konstruktor keine Argumente übergeben werden. Daraus folgt, dass man einem Employee einen Namen geben muss, damit er eine id erhält. In diesem Beispiel ist mac.id == 1.

- -

Alternativ kann man WorkerBee eine Kopie des Employee Prototypenobjektes zuweisen:

- -
WorkerBee.prototype = Object.create(Employee.prototype);
-// instead of WorkerBee.prototype = new Employee
-
- -

Keine Mehrfachvererbung

- -

Einige objektorientierte SPrachen erlauben Mehrfachvererbung. Das bedeutet, dass ein Objekt die Eigenschaften und Werte von mehreren Elternobjekte erben kann. JavaScript unterstützt keine Mehrfachvererbung.

- -

Vererbung von Eigenschafteswerten funktioniert zu JavaScripts Laufzeit durch das Suchen in der Prototypenkette eines Objektes. Weil ein Objekt ein einzigen Prototypen hat, kann JavaScript nicht dynamisch von mehr als einer Prototypenkette erben.

- -

In JavaScript kann eine Konstruktorfunkton mehrere andere Konstruktorfunktionen in sich aufrufen. Das gibt die Illusion von Mehrfachvererbung. Zum Beispiel die folgenden Statements:

- -
function Hobbyist(hobby) {
-   this.hobby = hobby || 'scuba';
-}
-
-function Engineer(name, projs, mach, hobby) {
-   this.base1 = WorkerBee;
-   this.base1(name, 'engineering', projs);
-   this.base2 = Hobbyist;
-   this.base2(hobby);
-   this.machine = mach || '';
-}
-Engineer.prototype = new WorkerBee;
-
-var dennis = new Engineer('Doe, Dennis', ['collabra'], 'hugo');
-
- -

Vorausgesetzt wird, die Definition von WorkerBee früher in diesem Kapitel. In diesem Fall hat das dennis Objekt die folgenden Eigenschaften:

- -
dennis.name == 'Doe, Dennis';
-dennis.dept == 'engineering';
-dennis.projects == ['collabra'];
-dennis.machine == 'hugo';
-dennis.hobby == 'scuba';
-
- -

dennis hat also die hobby Eigenschaften des Hobbyist Konstruktors bekommen. Setzt man jetzt noch voraus, dass danach Eigenschaften zum Konstruktorprototypen Hobbyist hinzugefügt werde:

- -
Hobbyist.prototype.equipment = ['mask', 'fins', 'regulator', 'bcd'];
-
- -

Das dennis Objekt erbt diese neue Eigenschaft nicht.

- -
{{PreviousNext("Web/JavaScript/Guide/Mit_Objekten_arbeiten", "Web/JavaScript/Guide/Using_promises")}}
diff --git a/files/de/web/javascript/guide/functions/index.html b/files/de/web/javascript/guide/functions/index.html new file mode 100644 index 0000000000..3eeeb4f4e5 --- /dev/null +++ b/files/de/web/javascript/guide/functions/index.html @@ -0,0 +1,657 @@ +--- +title: Funktionen +slug: Web/JavaScript/Guide/Funktionen +tags: + - Beginner + - Functions + - Guide + - JavaScript + - 'l10n:priority' +translation_of: Web/JavaScript/Guide/Functions +--- +
{{jsSidebar("JavaScript Guide")}} {{PreviousNext("Web/JavaScript/Guide/Schleifen_und_Iterationen", "Web/JavaScript/Guide/Ausdruecke_und_Operatoren")}}
+ +

Funktionen sind ein Grundbaustein in JavaScript. Eine Funktion ist eine Prozedur - eine Reihe von Anweisungen, um eine Aufgabe auszuführen oder eine Wert auszurechnen. Um Funktionen zu verwenden, müssen diese im Scope (Gültigkeitsbereich) deklariert werden, in dem sie ausgeführt werden soll.

+ +

Siehe ebenfalls in der ausführlichen Referenz über JavaScript Funktionen nach, um noch mehr Detail zu erfahren.

+ +

Funktionen definieren

+ +

Funktionsdeklaration

+ +

Eine Funktionsdefinition (auch Funktionsdeklaration oder Funktionsanweisung genannt) besteht aus dem Schlüsselwort function, gefolgt von:

+ + + +

Das folgende Beispiel definiert eine Funktion mit dem Namen square:

+ +
function square(number) {
+  return number * number;
+}
+
+ +

Die Funktion square nimmt einen Parameter entgegen, welcher number heißt. Die Funktion besteht aus einer Anweisung, die besagt, dass der Parameter der Funktion (das ist number), multipliziert mit sich selbst, zurückgegeben werden soll. Dabei gibt das  return Statement an, welcher Wert von der Funktion zurückzugeben wird.

+ +
return number * number;
+
+ +

Bei Primitive Parameter, wie Zahlen, wird der Funktionen der Wert übergeben. Werte, die der Funktion übergeben wurden und innerhalb der Funktion geändert werden, ändert den Wert zwar innerhalb der Funktion, aber nicht global oder in der aufrufenden Funktion.

+ +

Wird ein Objekt als Parameter übergeben (z. B. ein nicht primitiver Wert wie ein  {{jsxref("Array")}} oder ein selbst definiertes Objekt) und die Funktion ändert die Objekteigenschaften, so sind die Änderungen außerhalb der Funktion sichtbar, wie im folgendem Beispiel veranschaulicht wird:

+ +
function myFunc(theObject) {       //Funktiondekleration
+  theObject.make = 'Toyota';
+}
+
+var mycar = {make: 'Honda', model: 'Accord', year: 1998};
+var x, y;
+
+x = mycar.make;  // x bekommt den Wert "Honda"
+
+myFunc(mycar);
+y = mycar.make;  // y  bekommt den Wert "Toyota"
+                 // (die make Eigenschaft wurde in der Funktion geändert)
+ +

Funktionsausdrücke

+ +

Während die Funktionsdeklarationen oben syntaktisch ein Statement sind, kann eine Funktion auch durch Funktionsausdrücke erstellt werde. Derartige Funktionen können auch anonym sein; denn Funktionen benötigten keinen Namen. So kann zum Beispiel die Funktion square auch so definiert werden:

+ +
var square = function(number) { return number * number; };
+var x = square(4); // x bekommt den Wert 16
+ +

Jedoch kann die Funktion auch einen Name haben, um sich innerhalb der Funktion selbst aufzurufen oder die Funktion im Stack Traces des Debuggers zu identifizieren zu können:

+ +
var factorial = function fac(n) { return n < 2 ? 1 : n * fac(n - 1); };
+
+console.log(factorial(3));
+
+ +

Funktionsausdrücke sind praktisch, um Funktionen als ein Argument einer anderen Funktion zu übergeben. Das folgende Beispiel zeigt die Definition einer map Funktion, die eine Funktion als ersten Parameter erwartet:

+ +
function map(f, a) {
+  var result = [],i; // erstellt ein neues Array
+  for (i = 0; i != a.length; i++)
+    result[i] = f(a[i]);
+  return result;
+}
+
+ +

Im folgenden Quelltext wird einer Funktion eine Funktion übergeben, welche zuvor durch einen Funktions-Ausdruck definiert wurde. Diese Funktion wird für jedes Element in einem Array (zweiter Parameter) ausgeführt.

+ +
function map(f, a) {
+  var result = []; // erstellt ein neues Array
+  var i;
+  for (i = 0; i < a.length; i++) {
+    result[i] = f(a[i]);
+  }
+  return result;
+}
+var f = function(x) {
+  return x * x * x;
+}
+var numbers = [0, 1, 2, 5, 10];
+var cube = map(f,numbers);
+console.log(cube);
+
+ +

gibt [0, 1, 8, 125, 1000]  zurück.

+ +

In JavaScript kann eine Funktion definiert werden, wenn eine Bedingung erfüllt ist. Zum Beispiel wird myFunc nur definiert, wenn num gleich 0 ist:

+ +
var myFunc;
+if (num === 0) {
+  myFunc = function(theObject) {
+    theObject.make = 'Toyota';
+  }
+}
+ +

Im Unterschied zu den hier gezeigten Funktionsdeklarationen, kann man auch den {{jsxref("Function")}} Konstruktor verwenden, um eine Funktion von einem String zur Laufzeit zu erstellen, ähnlich der {{jsxref("eval()")}} Funktion.

+ +

Eine Methode ist eine Funktion, die Eigenschaft eines Objektes ist. Mehr Informationen über Objekt und Methoden sind im Artikel "Mit Objekten arbeiten" zu finden.

+ +

Aufruf von Funktionen

+ +

Das Definieren einer Funktion führen diese noch nicht aus. Die Definition gibt der Funktion lediglich einen Namen und beschreibt was geschehen soll, wenn die Funktion aufgerufen wird. Erst der Aufruf ermöglicht es die Aktionen mit den angegebenen Parametern durchzuführen. Zum Beispiel wird die vorher definierte Funktion square so aufgerufen:

+ +
square(5);
+
+ +

Es wird die Funktion mit dem Argument 5 aufgerufen. Die Funktion führt ihre Anweisungen aus und gibt den Wert 25 zurück.

+ +

Funktionen müssen im Scope (Gültigkeitsbereich) sein, wenn sie aufgerufen werden, können jedoch auch erst später definiert werden, wie im folgenden Beispiel:

+ +
console.log(square(5));
+/* ... */
+function square(n) { return n * n; }
+
+ +

Der Scope einer Funktion ist die Funktion in der sie deklariert wird, oder das gesamte Programm, falls sie auf oberster Ebene deklariert wird.

+ +
+

Hinweis: Nur die oben angegebene Syntax für Funktionen wird funktionieren (function funcName(){}). Der folgende Code funktioniert nicht. Das bedeutet, dass das nur mit Funktionsdeklarationen funktioniert aber nicht mit Funktionsausdrücken.

+
+ +
console.log(square); // square ist mit dem Initialwert undefined gehoisted.
+console.log(square(5)); // TypeError: square is not a function
+var square = function(n) {
+  return n * n;
+}
+
+ +

Die Argumente einer Funktion sind nicht auf Strings und Nummern limitiert, denn es können auch ganze Objekte übergeben werden. Die showProps() Funktion (definiert in Beitrag "Arbeiten mit Objekten") ist ein Beispiel für einer Funktion, die Objekte als Argument entgegennimmt.

+ +

Eine Funktion kann sich selbst Aufrufen. Zum Beispiel berechnet folgende Funktion die Fakultät rekursiv:

+ +
function factorial(n) {
+  if ((n === 0) || (n === 1))
+    return 1;
+  else
+    return (n * factorial(n - 1));
+}
+
+ +

Die Fakultät von 1 bis 5 kann wie folgt berechnet werden:

+ +
var a, b, c, d, e;
+a = factorial(1); // a wird der Wert 1 zugewiesen
+b = factorial(2); // b wird der Wert 2 zugewiesen
+c = factorial(3); // c wird der Wert 6 zugewiesen
+d = factorial(4); // d wird der Wert 24 zugewiesen
+e = factorial(5); // e wird der Wert 120 zugewiesen
+
+ +

Es gibt aber noch weitere Möglichkeiten Funktionen aufzurufen. Oftmals gibt es Fälle, in denen Funktionen dynamisch aufgerufen werden müssen, die Anzahl der Argumente variiert oder der Kontext einer Funktion zur Laufzeit gesetzt werden muss. Das zieht nach sich, dass Funktionen selbst Objekte sind, die Methoden haben (siehe das {{jsxref("Function")}} Objekt). Eine diese Methoden ist die {{jsxref("Function.apply", "apply()")}} Methode, mit der man die oben genannten Aufgaben lösen kann.

+ +

Scopes (Gültigkeitsbereiche) von Funktionen

+ +

Variablen, die in einer Funktion definiert werden, können nicht außerhalb der Funktion erreicht werden, weil die Variablen nur im Scope (Gültigkeitbereich) der Funktion definiert sind. Im Gegensatz dazu kann eine Funktion alle Variablen und Funktionen erreichen, die in dem Scope definiert wurden, in dem auch die Funktion definiert wurde. Anders gesagt kann eine Funktion, die im globalen Scope definiert wurde, alle Variablen und Funktionen des globalen Scopes erreichen. Wenn eine Funktion in einer Funktion definiert wird, kann die innere Funktion auf alle Definitionen seiner Elternfunktion und alle Definitionen, auf die die Elternfunktion Zugriff hat, zugreifen.

+ +
// Die folgenden Variablen sind im globalen Scope definiert
+var num1 = 20,
+    num2 = 3,
+    name = 'Chamahk';
+
+// Diese Funktion ist im globalen Scope definiert
+function multiply() {
+  return num1 * num2;
+}
+
+multiply(); // gibt 60 zurück
+
+// Ein Beispiel für verschachtelte Funktionen
+function getScore() {
+  var num1 = 2,
+      num2 = 3;
+
+  function add() {
+    return name + ' scored ' + (num1 + num2);
+  }
+
+  return add();
+}
+
+getScore(); // gibt "Chamahk scored 5" zurück
+
+ +

Scope und der Funktionsstack

+ +

Rekursion

+ +

Eine Funktion kann sich selbst referenzieren und aufrufen. Dabei gibt es drei Möglichkeiten, wie eine Funktion sich selbst referenzieren kann:

+ +
    +
  1. Der Funktionsname
  2. +
  3. arguments.callee
  4. +
  5. Eine im Scope liegende Variable, die auf die Funktion referenziert.
  6. +
+ +

Nimmt man zum Beispiel folgende Funktion:

+ +
var foo = function bar() {
+   // Anweisungen
+};
+
+ +

Folgende Anweisungen im Körper der Funktion bewirken alle das Gleiche:

+ +
    +
  1. bar()
  2. +
  3. arguments.callee()
  4. +
  5. foo()
  6. +
+ +

Eine Funktion, die sich selbst aufruft, wird rekursive Funktion genannt. Rekursion ist dabei vergleichbar mit einer Schleife. Beide führen den selben Quelltext mehrfach aus und beide benötigen eine Bedingung (um eine unendliche Schleife zu vermeiden oder eine unendliche Rekursion zu vermeiden). Das nächste Beispiel zeigt eine Schleife:

+ +
var x = 0;
+while (x < 10) { // "x < 10" ist die Schleifenbedingung
+   // do stuff
+   x++;
+}
+
+ +

Diese Schleife kann in eine rekursive Funktion konvertiert werden, die aufgerufen wird:

+ +
function loop(x) {
+  if (x >= 10) // "x >= 10" ist die Abbruchbedingung (gleich zu "!(x < 10)")
+    return;
+  // do stuff
+  loop(x + 1); // der rekursive Aufruf
+}
+loop(0);
+
+ +

Jedoch können manche Algorithmen nicht in eine einfache Schleife umgewandelt werden. Zum Beispiel kann das Abrufen aller Knoten einer Baumstruktur (z. B. DOM) einfacher rekursiv realisieren werden:

+ +
function walkTree(node) {
+  if (node == null) //
+    return;
+  // do something with node
+  for (var i = 0; i < node.childNodes.length; i++) {
+    walkTree(node.childNodes[i]);
+  }
+}
+
+ +

Verglichen mit der Funktion loop, erzeugt hier jeder rekursive Aufruf mehrere weitere rekursive Aufrufe.

+ +

Es ist möglich jeden rekursiven Algorithmus in einen nicht rekursiven umzuwandeln, jedoch ist die Logik oftmals sehr viel komplexer und es wird ein zusätzlicher Stack benötigt. Rekursion nutzt ebenfalls einen Stack: den Funktionsstack.

+ +

Die Stack-ähnliche Funktionsweise kann in folgendem Beispiel betrachtet werden:

+ +
function foo(i) {
+  if (i < 0)
+    return;
+  console.log('begin:' + i);
+  foo(i - 1);
+  console.log('end:' + i);
+}
+foo(3);
+
+// Output:
+
+// begin: 3
+// begin: 2
+// begin: 1
+// begin: 0
+// end: 0
+// end: 1
+// end: 2
+// end: 3
+ +

Verschachtelte Funktionen und Closures

+ +

Man kann eine Funktion in eine andere verschachteln. Die verschachtelte (innere) Funktion ist privat innerhalb ihrer Containerfunktion (äußere Funktion). Sie formt auch eine Closure. Eine Closure ist ein Ausdruck, der freie Variablen enthalten kann, (typischerweise eine Funktion) zusammen mit einer Umgebung, welche die diese Variablen einschließt (und damit den Ausdruck abschließt, daher der Name closure).

+ +

Weil eine verschachtelte Funktion eine Closure ist, bedeutet das, dass sie die Argumente und Variablen ihrer Containerfunktion vererbt bekommt. Anders gesagt enthält der Scope der inneren Funktion den Scope der äußeren Funktion.

+ +

Zusammenfassend:

+ + + +

Im folgenden Beispiel werden innere Funktionen gezeigt:

+ +
function addSquares(a, b) {
+  function square(x) {
+    return x * x;
+  }
+  return square(a) + square(b);
+}
+a = addSquares(2, 3); // gibt 13 zurück
+b = addSquares(3, 4); // gibt 25 zurück
+c = addSquares(4, 5); // gibt 41 zurück
+
+ +

Weil die innere Funktion eine Closure formt, kann die äußere Funktion aufgerufen werden und Argumente für die innere und äußere Funktion spezifizieren::

+ +
function outside(x) {
+  function inside(y) {
+    return x + y;
+  }
+  return inside;
+}
+fn_inside = outside(3);  // Man kann sich das folgendermaßen vorstellen
+                         // gib mir eine Funktion, die 3 zu einem Parameter addiert.
+result = fn_inside(5);   // gibt 8 zurück
+
+result1 = outside(3)(5); // gibt 8 zurück
+
+ +

Erhaltung von Variablen

+ +

Bemerkenswert ist, dass x erhalten wird, wenn inside zurückgegeben wird. Eine Closure muss alle Argumente und Variablen erhalten, die sie referenziert. Weil jeder Aufruf potenziell verschiedene Argumente benötigt, wird eine neue Closure für jeden Aufruf erstellt. Der Speicher kann nur freigegeben werden, wenn die zurückgegebene inside Funktion nicht mehr erreichbar ist.

+ +

Das ist nicht anders mit gespeicherten Referenzen in anderen Objekten, jedoch oftmals weniger deutlich, weil man diese nicht direkt referenziert und nicht inspizieren kann.

+ +

Mehrfach verschachtelte Funktionen

+ +

Funktionen können mehrfach verschachtelt sein, z. B. eine Funktion (A) enthält eine Funktion (B), die eine Funktion (C) enthält. Beide Funktionen, B und C sind Closures, B kann A erreichen und C kann B erreichen. Zudem kann C auch A erreichen, weil C B erreichen kann und B A erreichen kann. Deswegen kann eine Closure mehrere Scopes enthalten.; sie enthält rekursiv die Scopes der Funktion, die der Container ist. Das wird Scopeverkettung (scope chaining) genannt.

+ +

Untersuche das nächste Beispiel:

+ +
function A(x) {
+  function B(y) {
+    function C(z) {
+      console.log(x + y + z);
+    }
+    C(3);
+  }
+  B(2);
+}
+A(1); // logs 6 (1 + 2 + 3)
+
+ +

In diesem Beispiel benutzt C die Variablen y, von B, und x, von A. Das kann gemacht werden weil:

+ +
    +
  1. B ist eine Closure, die A enthält, z. B. B kann die Argumente und Variablen von A benutzen.
  2. +
  3. C ist ein Closure, die B enthält.
  4. +
  5. Weil die Closure von B auf A zugreifen kann, kann die Closure von C auf die Argumente und Variablen von A und B zugreifen. Anders gesagt verkettet C den Scope von B und A in dieser Reihenfolge.
  6. +
+ +

Das umgekehrte ist nicht möglich. A kann nicht auf C zugreifen, weil A nicht auf die Variablen und Argumente von B zugreifen kann und C eine Variable von B ist. So bleibt C für B privat.

+ +

Namenskonflikte

+ +

Wenn zwei Argumente oder Variablen in dem Scope einer Closure mit dem gleichen Namen existieren, gibt es einen Namenskonflikt. Der innerste Scope hat dann Vorrang, was bedeutet, dass der innerste Scope die höchste Priorität hat, während der äußerste Scope die geringste Priorität hat. Das ist wegen der Scopeverkettung. Das erste Glied in der Kette ist der innerste Scope und das letzt Glied ist der äußerste Scope. Dieses ist im folgenden Beispiel zu sehen:

+ +
function outside() {
+  var x = 10;
+  function inside(x) {
+    return x;
+  }
+  return inside;
+}
+result = outside()(20); // gibt 20 statt 10 zurück
+
+ +

Der Namenskonflikt tritt beim der Anweisung return x auf und ist zwischen dem Parmeter x von inside und der Variable x von outside. Die Scopekette ist hier {inside, outside, globales Objekt}. Dabei bekommt x von inside eine höhere Priorität als das x von outside. und 20 wird statt der 10 zurückgegeben.

+ +

Closures

+ +

Closures sind eines der mächtigsten Funktionen von JavaScript. JavaScript unterstützt das Verschachteln von Funktionen und erlaubt der inneren Funktionen den vollen Zugriff auf alle definierten Variablen und Funktionen der äußeren Funktion (und alle anderen Variablen und Funktionen die die äußere Funktion erreichen kann). Jedoch hat die äußere Funktion keinen Zugriff auf die Variablen und Funktione, die in der innere Funktion definiert werden. Das unterstützt mehr oder weniger Sicherheit für die Variablen der inneren Funktion. Wenn die innere Funktion Zugriff auf den Scope der äußeren Funktion hat, müssen die Variablen und Funktionen der äußeren Funktion länger leben, als die Ausführungen der inneren Funktion, weil die innere Funktion das Überleben der äußeren Funktion managet. Eine Closure wird erstellt, wenn die innere Funktion irgendwie in einem äußeren Scope der äußeren Funktion erreichbar gemacht wird.

+ +
var pet = function(name) {   // Die äußere Funktion definiert eine Variable "name"
+  var getName = function() {
+    return name;             // Die innere Funktion hat Zugriff auf die "name" Variable der äußeren Funktion
+  }
+  return getName;            // gibt die innere Funktion zurück
+}
+myPet = pet('Vivie');
+
+myPet();                     // gibt "Vivie" zurück
+
+ +

Es kann viel komplexer sein, als der oben gezeigte Quelltext. Ein Objekt enthält Methoden zum verändern von inneren Variablen der äußeren Funktion.

+ +
var createPet = function(name) {
+  var sex;
+
+  return {
+    setName: function(newName) {
+      name = newName;
+    },
+
+    getName: function() {
+      return name;
+    },
+
+    getSex: function() {
+      return sex;
+    },
+
+    setSex: function(newSex) {
+      if(typeof newSex === 'string' && (newSex.toLowerCase() === 'male' || newSex.toLowerCase() === 'female')) {
+        sex = newSex;
+      }
+    }
+  }
+}
+
+var pet = createPet('Vivie');
+pet.getName();                  // Vivie
+
+pet.setName('Oliver');
+pet.setSex('male');
+pet.getSex();                   // male
+pet.getName();                  // Oliver
+
+ +

Im Quelltext oben ist die name Variable der äußeren Funktion in den inneren Funktionen erreichbar und es gibt keine andere Möglichkeit die inneren Variablen zu erreichen, als über die inneren Funktion. Die innere Variable der inneren Funktion fungiert als sicherer Speicher für die äußeren Parameter und Variablen. Sie enthalten permanent und sicher die Daten mit denen die innere Funktion arbeitet. Die Funktion hat niemals eine Variable beschrieben noch hat sie einen Namen.

+ +
var getCode = (function() {
+  var secureCode = '0]Eal(eh&2';    // Ein Code der nicht von Außerhalb verändert werden soll
+
+  return function () {
+    return secureCode;
+  };
+}());
+
+getCode();    // gibt secureCode zurück.
+
+ +

Es gibt aber eine menge von Tücken, die der Einsatz von Closures mit sich bringt. Wenn eine innere Funktion eine Variable definiert, die den gleichen Namen wie eine Variable im äußeren Scope hat, kann die äußere Variable nicht mehr referenziert werden.

+ +
var createPet = function(name) {  // Äußere Funktion definiert die Variable "name"
+  return {
+    setName: function(name) {    // Innere Funktion definiert ebenfalls eine Variable "name"
+      name = name;               // Wie referenziert man die Variable "name" der äußeren Funktion?
+    }
+  }
+}
+
+ +

Einsatz des arguments Objekts

+ +

Die Argumente einer Funktion werden in einem Array-ähnlichen Objekt gewartet. In einer Funktion können die Argumente wie folgt adressiert werden:

+ +
arguments[i]
+
+ +

i ist die Ordnungsnummer des Arguments, beginnend bei null. So ist das erste übergebene Argument einer Funktion arguments[0]. Die Anzahl der übergebenen Argumente ist arguments.length.

+ +

Mit dem arguments Objekt kann man eine Funktion mit mehr Agumenten aufrufen als sie formal deklariert wurden. Das ist oft nützlich, wenn man nicht weiß, wie viele Argumente einer Funktion übergeben werden. Mit arguments.length kann die Anzahl der Argumente, die einer Funktion übergeben wurde, ermittelt werden. Über das arguments Objekt können dann alle Argumente gelesen werden.

+ +

Zum Beispiel kann es eine Funktion geben, die verschieden viele Strings zusammenfügt. Das einzige formale Argument der Funktion ist das Trennzeichen, welches die Zeichen definiert, die zwischen den Strings eingefügt werden. Im folgenden Quelltext ist die Funktion implementiert:

+ +
function myConcat(separator) {
+   var result = ''; // initialize list
+   var i;
+   // iterate through arguments
+   for (i = 1; i < arguments.length; i++) {
+      result += arguments[i] + separator;
+   }
+   return result;
+}
+
+ +

Man kann der Funktion jede Anzahl an Argumenten übergeben und die Funktion fügt die Argumente in einem String zusammen:

+ +
// returns "red, orange, blue, "
+myConcat(', ', 'red', 'orange', 'blue');
+
+// returns "elephant; giraffe; lion; cheetah; "
+myConcat('; ', 'elephant', 'giraffe', 'lion', 'cheetah');
+
+// returns "sage. basil. oregano. pepper. parsley. "
+myConcat('. ', 'sage', 'basil', 'oregano', 'pepper', 'parsley');
+
+ +
+

Hinweis: Die arguments Variable ist "Array-ähnlich", aber kein Array. Es ist Array-ähnlich indem es nummerierte Indizes und eine length Eigenschaft hat. Jedoch unterstützt es nicht alle Array-Manipulations-Methoden.

+
+ +

Siehe im {{jsxref("Function")}} Objekt in den JavaScript Referenzen für mehr Informationen.

+ +

Funktionsparameter

+ +

Mit ECMAScript 2015, gibt es zwei neue Arten von Parametern: Default-Parameter und Rest-Parameter.

+ +

Default-Parameter

+ +

In JavaScript ist der Standardwert eines Parameters undefined. In manchen Situationen ist es sinnvoll den Standardwert auf einen anderen Wert zu setzen. Das ist das Einsatzgebiet von Default-Parametern.

+ +

In der Vergangenheit war die Strategie für das Setzen von Standardwerten, dass im Körper der Funktion geprüft wird, ob ein Parameter undefined ist und ihn in diesem Fall neu zu beschreiben. Wenn im folgenden Beispiel kein Argument b übergeben wird, wird dieser undefined sein und die Auswertung von a*b wird NaN sein. Deswegen ist dieser Fall in der zweiten Zeile des Beispiels abgefangen:

+ +
function multiply(a, b) {
+  b = typeof b !== 'undefined' ?  b : 1;
+
+  return a * b;
+}
+
+multiply(5); // 5
+
+ +

Mit Default-Parametern ist die Überprüfung im Körper der Funktion nicht mehr nötig. Jetzt kann man 1 als Standardwert für b im Funktionskopf angeben:

+ +
function multiply(a, b = 1) {
+  return a * b;
+}
+
+multiply(5); // 5
+ +

Für mehr Details, siehe in den Referenzen unter Default-Parameter.

+ +

Rest-Parameter

+ +

Die Rest-Parameter Syntax ermöglicht er eine unendliche Anzahl von Argumenten als Array zu repräsentieren. Im Beispiel wird der Rest-Parameter eingesetzt um die alle Argumente ab dem zweiten Argument zu sammeln. Danach werden diese mit dem ersten Parameter multipliziert. Dieses Beispiel benutzt Pfeilfunktionen, welche in nächsten Kapitel erklärt werden:

+ +
function multiply(multiplier, ...theArgs) {
+  return theArgs.map(x => multiplier * x);
+}
+
+var arr = multiply(2, 1, 2, 3);
+console.log(arr); // [2, 4, 6]
+ +

Pfeilfunktionen

+ +

Ein Pfeilfunktions Ausdruck hat eine kürzere Syntax verglichen mit Funktionsausdrücken und bindet lexikalisch den this Wert. Pfeilfunktionen sind immer anonym. Sie dazu auch den hacks.mozilla.org Blogbeitrag: "ES6 In Depth: Arrow functions".

+ +

Zwei Faktoren haben die Einführung von Pfeilfunktionen beeinflusst: kürzere Funktionen und lexikalisches this.

+ +

Kürzere Funktionen

+ +

In manchen funktionalen Patterns sind kurze Funktionen willkommen. Vergleiche:

+ +
var a = [
+  'Hydrogen',
+  'Helium',
+  'Lithium',
+  'Beryl­lium'
+];
+
+var a2 = a.map(function(s) { return s.length; });
+
+console.log(a2); // logs [8, 6, 7, 9]
+
+var a3 = a.map( s => s.length );
+
+console.log(a3); // logs [8, 6, 7, 9]
+
+ +

Lexikalisches this

+ +

Bis es Pfeilfunktionen gab, hat jede neue Funktion sein eigenen this Wert definiert (ein neues Objekt in Fällen eines Konstruktors, undefined in Funktionsaufrufen im strict mode, das Kontextobjekt, wenn eine Funktion als Objektmethode aufgerufen wird, etc.). Das ist lästig mit objektorientierten Programmierstilen.

+ +
function Person() {
+  // The Person() constructor defines `this` as itself.
+  this.age = 0;
+
+  setInterval(function growUp() {
+    // In nonstrict mode, the growUp() function defines `this`
+    // as the global object, which is different from the `this`
+    // defined by the Person() constructor.
+    this.age++;
+  }, 1000);
+}
+
+var p = new Person();
+ +

In ECMAScript 3/5, wurde dieses Problem behoben, indem der Wert der Variablen this in einer weiteren Variablen gespeichert wird.

+ +
function Person() {
+  var self = this; // Some choose `that` instead of `self`.
+                   // Choose one and be consistent.
+  self.age = 0;
+
+  setInterval(function growUp() {
+    // The callback refers to the `self` variable of which
+    // the value is the expected object.
+    self.age++;
+  }, 1000);
+}
+ +

Alternativ kann eine gebundene Funktion  erstellt werden, so dass der Wert für this mit übergeben werden kann.

+ +

Pfeilfunktionen nutzen den this Wert des umschließenden Kontextes, so dass der folgende Quelltext wie erwartet funktioniert:

+ +
function Person() {
+  this.age = 0;
+
+  setInterval(() => {
+    this.age++; // |this| properly refers to the person object
+  }, 1000);
+}
+
+var p = new Person();
+ +

Vordefinierte Funktionen

+ +

JavaScript hat einige eingebaute Funktionen:

+ +
+
{{jsxref("Global_Objects/eval", "eval()")}}
+
+

Die eval() Methode wertet JavaScript Quelltext repräsentiert als String aus.

+
+
{{jsxref("Global_Objects/uneval", "uneval()")}} {{non-standard_inline}}
+
+

Die uneval() Methode erstellt einen String der Quelltext eines {{jsxref("Object")}}s repräsentiert.

+
+
{{jsxref("Global_Objects/isFinite", "isFinite()")}}
+
+

Die globale isFinite() Funktion ob ein übergebener Wert endlich ist. Der übergebene Wert wird, wenn es nötig ist, zu einer Zahl konvertiert.

+
+
{{jsxref("Global_Objects/isNaN", "isNaN()")}}
+
Die isNaN() Funktion überprüft, ob ein Wert {{jsxref("Global_Objects/NaN", "NaN")}} ist oder nicht. Hinweis: Wegen einigen Zwängen innerhalb der isNaN Funktion gibt es interessante Regeln; alternativ kann auch die in  ECMAScript 2015 definierte Funktion Funktion {{jsxref("Number.isNaN()")}} oder der Operator typeof verwendet werden, um einen {{jsxref("Global_Objects/NaN", "NaN")}} Wert zu erkennen.
+
{{jsxref("Global_Objects/parseFloat", "parseFloat()")}}
+
+

Doe parseFloat() Funktion liest einen String als Argument ein und gibt eine Gleitkommazahl zurück.

+
+
{{jsxref("Global_Objects/parseInt", "parseInt()")}}
+
+

Die parseInt() Funktion liest einen String als Argument ein und gibt eine ganze Zahl der Spezifizierten Basis zurück (die Basis ist in der Mathematik das Zahlensystem).

+
+
{{jsxref("Global_Objects/decodeURI", "decodeURI()")}}
+
+

Die decodeURI() Methode decodiert einen Uniform Resource Identifier (URI), der vorher mit der {{jsxref("Global_Objects/encodeURI", "encodeURI")}} Funktion order einer ähnlichen Funktion erstellt wurde.

+
+
{{jsxref("Global_Objects/decodeURIComponent", "decodeURIComponent()")}}
+
+

Die decodeURIComponent() Methode decodiert eine Uniform Resource Identifier (URI) Komponente, die vorher mit der {{jsxref("Global_Objects/encodeURIComponent", "encodeURIComponent")}} Funktion oder einer ähnlichen Funktion erstellt wurde.

+
+
{{jsxref("Global_Objects/encodeURI", "encodeURI()")}}
+
+

Die encodeURI() Methode codiert einen Uniform Resource Identifier (URI), indem jedes besondere Zeilen durch eine Sequenz aus zwei drei oder vier Zeichen escaped wird. Dieses Sequenzen Repräsentieren die UTF-8 Darstellung der Zeichen (wird nur vier escape Sequenzen von Zeichen zu zwei zwei Platzhalterzeichen umwandeln)

+
+
{{jsxref("Global_Objects/encodeURIComponent", "encodeURIComponent()")}}
+
+

Die encodeURIComponent() Methode codiert eine Uniform Resource Identifier (URI) Komponente, indem jedes besondere Zeilen durch eine Sequenz aus zwei drei oder vier Zeichen escaped wird. Dieses Sequenzen Repräsentieren die UTF-8 Darstellung der Zeichen (wird nur vier escape Sequenzen von Zeichen zu zwei zwei Platzhalterzeichen umwandeln)

+
+
{{jsxref("Global_Objects/escape", "escape()")}} {{deprecated_inline}}
+
+

Die veraltete escape() Methode berechnet einen neuen String indem manche Zeichen durch Hexadezimalsequenzen ersetzt werden. Man sollte {{jsxref("Global_Objects/encodeURI", "encodeURI")}} oder {{jsxref("Global_Objects/encodeURIComponent", "encodeURIComponent")}} stattdessen benutzen.

+
+
{{jsxref("Global_Objects/unescape", "unescape()")}} {{deprecated_inline}}
+
+

Die veraltete unescape() Methode berechnet einen neuen String indem Hexadezimalsequenzen durch die repräsentierenden Zeichen ersetzt werden. Die Hexadezimalsequenzen können von Funktionen wie {{jsxref("Global_Objects/escape", "escape")}} eingeführt werden. Weil unescape() veraltet ist, sollte man stattdessen die Funktion {{jsxref("Global_Objects/decodeURI", "decodeURI()")}} oder {{jsxref("Global_Objects/decodeURIComponent", "decodeURIComponent")}} benutzen.

+
+
+ +

{{PreviousNext("Web/JavaScript/Guide/Schleifen_und_Iterationen", "Web/JavaScript/Guide/Ausdruecke_und_Operatoren")}}

diff --git a/files/de/web/javascript/guide/funktionen/index.html b/files/de/web/javascript/guide/funktionen/index.html deleted file mode 100644 index 3eeeb4f4e5..0000000000 --- a/files/de/web/javascript/guide/funktionen/index.html +++ /dev/null @@ -1,657 +0,0 @@ ---- -title: Funktionen -slug: Web/JavaScript/Guide/Funktionen -tags: - - Beginner - - Functions - - Guide - - JavaScript - - 'l10n:priority' -translation_of: Web/JavaScript/Guide/Functions ---- -
{{jsSidebar("JavaScript Guide")}} {{PreviousNext("Web/JavaScript/Guide/Schleifen_und_Iterationen", "Web/JavaScript/Guide/Ausdruecke_und_Operatoren")}}
- -

Funktionen sind ein Grundbaustein in JavaScript. Eine Funktion ist eine Prozedur - eine Reihe von Anweisungen, um eine Aufgabe auszuführen oder eine Wert auszurechnen. Um Funktionen zu verwenden, müssen diese im Scope (Gültigkeitsbereich) deklariert werden, in dem sie ausgeführt werden soll.

- -

Siehe ebenfalls in der ausführlichen Referenz über JavaScript Funktionen nach, um noch mehr Detail zu erfahren.

- -

Funktionen definieren

- -

Funktionsdeklaration

- -

Eine Funktionsdefinition (auch Funktionsdeklaration oder Funktionsanweisung genannt) besteht aus dem Schlüsselwort function, gefolgt von:

- - - -

Das folgende Beispiel definiert eine Funktion mit dem Namen square:

- -
function square(number) {
-  return number * number;
-}
-
- -

Die Funktion square nimmt einen Parameter entgegen, welcher number heißt. Die Funktion besteht aus einer Anweisung, die besagt, dass der Parameter der Funktion (das ist number), multipliziert mit sich selbst, zurückgegeben werden soll. Dabei gibt das  return Statement an, welcher Wert von der Funktion zurückzugeben wird.

- -
return number * number;
-
- -

Bei Primitive Parameter, wie Zahlen, wird der Funktionen der Wert übergeben. Werte, die der Funktion übergeben wurden und innerhalb der Funktion geändert werden, ändert den Wert zwar innerhalb der Funktion, aber nicht global oder in der aufrufenden Funktion.

- -

Wird ein Objekt als Parameter übergeben (z. B. ein nicht primitiver Wert wie ein  {{jsxref("Array")}} oder ein selbst definiertes Objekt) und die Funktion ändert die Objekteigenschaften, so sind die Änderungen außerhalb der Funktion sichtbar, wie im folgendem Beispiel veranschaulicht wird:

- -
function myFunc(theObject) {       //Funktiondekleration
-  theObject.make = 'Toyota';
-}
-
-var mycar = {make: 'Honda', model: 'Accord', year: 1998};
-var x, y;
-
-x = mycar.make;  // x bekommt den Wert "Honda"
-
-myFunc(mycar);
-y = mycar.make;  // y  bekommt den Wert "Toyota"
-                 // (die make Eigenschaft wurde in der Funktion geändert)
- -

Funktionsausdrücke

- -

Während die Funktionsdeklarationen oben syntaktisch ein Statement sind, kann eine Funktion auch durch Funktionsausdrücke erstellt werde. Derartige Funktionen können auch anonym sein; denn Funktionen benötigten keinen Namen. So kann zum Beispiel die Funktion square auch so definiert werden:

- -
var square = function(number) { return number * number; };
-var x = square(4); // x bekommt den Wert 16
- -

Jedoch kann die Funktion auch einen Name haben, um sich innerhalb der Funktion selbst aufzurufen oder die Funktion im Stack Traces des Debuggers zu identifizieren zu können:

- -
var factorial = function fac(n) { return n < 2 ? 1 : n * fac(n - 1); };
-
-console.log(factorial(3));
-
- -

Funktionsausdrücke sind praktisch, um Funktionen als ein Argument einer anderen Funktion zu übergeben. Das folgende Beispiel zeigt die Definition einer map Funktion, die eine Funktion als ersten Parameter erwartet:

- -
function map(f, a) {
-  var result = [],i; // erstellt ein neues Array
-  for (i = 0; i != a.length; i++)
-    result[i] = f(a[i]);
-  return result;
-}
-
- -

Im folgenden Quelltext wird einer Funktion eine Funktion übergeben, welche zuvor durch einen Funktions-Ausdruck definiert wurde. Diese Funktion wird für jedes Element in einem Array (zweiter Parameter) ausgeführt.

- -
function map(f, a) {
-  var result = []; // erstellt ein neues Array
-  var i;
-  for (i = 0; i < a.length; i++) {
-    result[i] = f(a[i]);
-  }
-  return result;
-}
-var f = function(x) {
-  return x * x * x;
-}
-var numbers = [0, 1, 2, 5, 10];
-var cube = map(f,numbers);
-console.log(cube);
-
- -

gibt [0, 1, 8, 125, 1000]  zurück.

- -

In JavaScript kann eine Funktion definiert werden, wenn eine Bedingung erfüllt ist. Zum Beispiel wird myFunc nur definiert, wenn num gleich 0 ist:

- -
var myFunc;
-if (num === 0) {
-  myFunc = function(theObject) {
-    theObject.make = 'Toyota';
-  }
-}
- -

Im Unterschied zu den hier gezeigten Funktionsdeklarationen, kann man auch den {{jsxref("Function")}} Konstruktor verwenden, um eine Funktion von einem String zur Laufzeit zu erstellen, ähnlich der {{jsxref("eval()")}} Funktion.

- -

Eine Methode ist eine Funktion, die Eigenschaft eines Objektes ist. Mehr Informationen über Objekt und Methoden sind im Artikel "Mit Objekten arbeiten" zu finden.

- -

Aufruf von Funktionen

- -

Das Definieren einer Funktion führen diese noch nicht aus. Die Definition gibt der Funktion lediglich einen Namen und beschreibt was geschehen soll, wenn die Funktion aufgerufen wird. Erst der Aufruf ermöglicht es die Aktionen mit den angegebenen Parametern durchzuführen. Zum Beispiel wird die vorher definierte Funktion square so aufgerufen:

- -
square(5);
-
- -

Es wird die Funktion mit dem Argument 5 aufgerufen. Die Funktion führt ihre Anweisungen aus und gibt den Wert 25 zurück.

- -

Funktionen müssen im Scope (Gültigkeitsbereich) sein, wenn sie aufgerufen werden, können jedoch auch erst später definiert werden, wie im folgenden Beispiel:

- -
console.log(square(5));
-/* ... */
-function square(n) { return n * n; }
-
- -

Der Scope einer Funktion ist die Funktion in der sie deklariert wird, oder das gesamte Programm, falls sie auf oberster Ebene deklariert wird.

- -
-

Hinweis: Nur die oben angegebene Syntax für Funktionen wird funktionieren (function funcName(){}). Der folgende Code funktioniert nicht. Das bedeutet, dass das nur mit Funktionsdeklarationen funktioniert aber nicht mit Funktionsausdrücken.

-
- -
console.log(square); // square ist mit dem Initialwert undefined gehoisted.
-console.log(square(5)); // TypeError: square is not a function
-var square = function(n) {
-  return n * n;
-}
-
- -

Die Argumente einer Funktion sind nicht auf Strings und Nummern limitiert, denn es können auch ganze Objekte übergeben werden. Die showProps() Funktion (definiert in Beitrag "Arbeiten mit Objekten") ist ein Beispiel für einer Funktion, die Objekte als Argument entgegennimmt.

- -

Eine Funktion kann sich selbst Aufrufen. Zum Beispiel berechnet folgende Funktion die Fakultät rekursiv:

- -
function factorial(n) {
-  if ((n === 0) || (n === 1))
-    return 1;
-  else
-    return (n * factorial(n - 1));
-}
-
- -

Die Fakultät von 1 bis 5 kann wie folgt berechnet werden:

- -
var a, b, c, d, e;
-a = factorial(1); // a wird der Wert 1 zugewiesen
-b = factorial(2); // b wird der Wert 2 zugewiesen
-c = factorial(3); // c wird der Wert 6 zugewiesen
-d = factorial(4); // d wird der Wert 24 zugewiesen
-e = factorial(5); // e wird der Wert 120 zugewiesen
-
- -

Es gibt aber noch weitere Möglichkeiten Funktionen aufzurufen. Oftmals gibt es Fälle, in denen Funktionen dynamisch aufgerufen werden müssen, die Anzahl der Argumente variiert oder der Kontext einer Funktion zur Laufzeit gesetzt werden muss. Das zieht nach sich, dass Funktionen selbst Objekte sind, die Methoden haben (siehe das {{jsxref("Function")}} Objekt). Eine diese Methoden ist die {{jsxref("Function.apply", "apply()")}} Methode, mit der man die oben genannten Aufgaben lösen kann.

- -

Scopes (Gültigkeitsbereiche) von Funktionen

- -

Variablen, die in einer Funktion definiert werden, können nicht außerhalb der Funktion erreicht werden, weil die Variablen nur im Scope (Gültigkeitbereich) der Funktion definiert sind. Im Gegensatz dazu kann eine Funktion alle Variablen und Funktionen erreichen, die in dem Scope definiert wurden, in dem auch die Funktion definiert wurde. Anders gesagt kann eine Funktion, die im globalen Scope definiert wurde, alle Variablen und Funktionen des globalen Scopes erreichen. Wenn eine Funktion in einer Funktion definiert wird, kann die innere Funktion auf alle Definitionen seiner Elternfunktion und alle Definitionen, auf die die Elternfunktion Zugriff hat, zugreifen.

- -
// Die folgenden Variablen sind im globalen Scope definiert
-var num1 = 20,
-    num2 = 3,
-    name = 'Chamahk';
-
-// Diese Funktion ist im globalen Scope definiert
-function multiply() {
-  return num1 * num2;
-}
-
-multiply(); // gibt 60 zurück
-
-// Ein Beispiel für verschachtelte Funktionen
-function getScore() {
-  var num1 = 2,
-      num2 = 3;
-
-  function add() {
-    return name + ' scored ' + (num1 + num2);
-  }
-
-  return add();
-}
-
-getScore(); // gibt "Chamahk scored 5" zurück
-
- -

Scope und der Funktionsstack

- -

Rekursion

- -

Eine Funktion kann sich selbst referenzieren und aufrufen. Dabei gibt es drei Möglichkeiten, wie eine Funktion sich selbst referenzieren kann:

- -
    -
  1. Der Funktionsname
  2. -
  3. arguments.callee
  4. -
  5. Eine im Scope liegende Variable, die auf die Funktion referenziert.
  6. -
- -

Nimmt man zum Beispiel folgende Funktion:

- -
var foo = function bar() {
-   // Anweisungen
-};
-
- -

Folgende Anweisungen im Körper der Funktion bewirken alle das Gleiche:

- -
    -
  1. bar()
  2. -
  3. arguments.callee()
  4. -
  5. foo()
  6. -
- -

Eine Funktion, die sich selbst aufruft, wird rekursive Funktion genannt. Rekursion ist dabei vergleichbar mit einer Schleife. Beide führen den selben Quelltext mehrfach aus und beide benötigen eine Bedingung (um eine unendliche Schleife zu vermeiden oder eine unendliche Rekursion zu vermeiden). Das nächste Beispiel zeigt eine Schleife:

- -
var x = 0;
-while (x < 10) { // "x < 10" ist die Schleifenbedingung
-   // do stuff
-   x++;
-}
-
- -

Diese Schleife kann in eine rekursive Funktion konvertiert werden, die aufgerufen wird:

- -
function loop(x) {
-  if (x >= 10) // "x >= 10" ist die Abbruchbedingung (gleich zu "!(x < 10)")
-    return;
-  // do stuff
-  loop(x + 1); // der rekursive Aufruf
-}
-loop(0);
-
- -

Jedoch können manche Algorithmen nicht in eine einfache Schleife umgewandelt werden. Zum Beispiel kann das Abrufen aller Knoten einer Baumstruktur (z. B. DOM) einfacher rekursiv realisieren werden:

- -
function walkTree(node) {
-  if (node == null) //
-    return;
-  // do something with node
-  for (var i = 0; i < node.childNodes.length; i++) {
-    walkTree(node.childNodes[i]);
-  }
-}
-
- -

Verglichen mit der Funktion loop, erzeugt hier jeder rekursive Aufruf mehrere weitere rekursive Aufrufe.

- -

Es ist möglich jeden rekursiven Algorithmus in einen nicht rekursiven umzuwandeln, jedoch ist die Logik oftmals sehr viel komplexer und es wird ein zusätzlicher Stack benötigt. Rekursion nutzt ebenfalls einen Stack: den Funktionsstack.

- -

Die Stack-ähnliche Funktionsweise kann in folgendem Beispiel betrachtet werden:

- -
function foo(i) {
-  if (i < 0)
-    return;
-  console.log('begin:' + i);
-  foo(i - 1);
-  console.log('end:' + i);
-}
-foo(3);
-
-// Output:
-
-// begin: 3
-// begin: 2
-// begin: 1
-// begin: 0
-// end: 0
-// end: 1
-// end: 2
-// end: 3
- -

Verschachtelte Funktionen und Closures

- -

Man kann eine Funktion in eine andere verschachteln. Die verschachtelte (innere) Funktion ist privat innerhalb ihrer Containerfunktion (äußere Funktion). Sie formt auch eine Closure. Eine Closure ist ein Ausdruck, der freie Variablen enthalten kann, (typischerweise eine Funktion) zusammen mit einer Umgebung, welche die diese Variablen einschließt (und damit den Ausdruck abschließt, daher der Name closure).

- -

Weil eine verschachtelte Funktion eine Closure ist, bedeutet das, dass sie die Argumente und Variablen ihrer Containerfunktion vererbt bekommt. Anders gesagt enthält der Scope der inneren Funktion den Scope der äußeren Funktion.

- -

Zusammenfassend:

- - - -

Im folgenden Beispiel werden innere Funktionen gezeigt:

- -
function addSquares(a, b) {
-  function square(x) {
-    return x * x;
-  }
-  return square(a) + square(b);
-}
-a = addSquares(2, 3); // gibt 13 zurück
-b = addSquares(3, 4); // gibt 25 zurück
-c = addSquares(4, 5); // gibt 41 zurück
-
- -

Weil die innere Funktion eine Closure formt, kann die äußere Funktion aufgerufen werden und Argumente für die innere und äußere Funktion spezifizieren::

- -
function outside(x) {
-  function inside(y) {
-    return x + y;
-  }
-  return inside;
-}
-fn_inside = outside(3);  // Man kann sich das folgendermaßen vorstellen
-                         // gib mir eine Funktion, die 3 zu einem Parameter addiert.
-result = fn_inside(5);   // gibt 8 zurück
-
-result1 = outside(3)(5); // gibt 8 zurück
-
- -

Erhaltung von Variablen

- -

Bemerkenswert ist, dass x erhalten wird, wenn inside zurückgegeben wird. Eine Closure muss alle Argumente und Variablen erhalten, die sie referenziert. Weil jeder Aufruf potenziell verschiedene Argumente benötigt, wird eine neue Closure für jeden Aufruf erstellt. Der Speicher kann nur freigegeben werden, wenn die zurückgegebene inside Funktion nicht mehr erreichbar ist.

- -

Das ist nicht anders mit gespeicherten Referenzen in anderen Objekten, jedoch oftmals weniger deutlich, weil man diese nicht direkt referenziert und nicht inspizieren kann.

- -

Mehrfach verschachtelte Funktionen

- -

Funktionen können mehrfach verschachtelt sein, z. B. eine Funktion (A) enthält eine Funktion (B), die eine Funktion (C) enthält. Beide Funktionen, B und C sind Closures, B kann A erreichen und C kann B erreichen. Zudem kann C auch A erreichen, weil C B erreichen kann und B A erreichen kann. Deswegen kann eine Closure mehrere Scopes enthalten.; sie enthält rekursiv die Scopes der Funktion, die der Container ist. Das wird Scopeverkettung (scope chaining) genannt.

- -

Untersuche das nächste Beispiel:

- -
function A(x) {
-  function B(y) {
-    function C(z) {
-      console.log(x + y + z);
-    }
-    C(3);
-  }
-  B(2);
-}
-A(1); // logs 6 (1 + 2 + 3)
-
- -

In diesem Beispiel benutzt C die Variablen y, von B, und x, von A. Das kann gemacht werden weil:

- -
    -
  1. B ist eine Closure, die A enthält, z. B. B kann die Argumente und Variablen von A benutzen.
  2. -
  3. C ist ein Closure, die B enthält.
  4. -
  5. Weil die Closure von B auf A zugreifen kann, kann die Closure von C auf die Argumente und Variablen von A und B zugreifen. Anders gesagt verkettet C den Scope von B und A in dieser Reihenfolge.
  6. -
- -

Das umgekehrte ist nicht möglich. A kann nicht auf C zugreifen, weil A nicht auf die Variablen und Argumente von B zugreifen kann und C eine Variable von B ist. So bleibt C für B privat.

- -

Namenskonflikte

- -

Wenn zwei Argumente oder Variablen in dem Scope einer Closure mit dem gleichen Namen existieren, gibt es einen Namenskonflikt. Der innerste Scope hat dann Vorrang, was bedeutet, dass der innerste Scope die höchste Priorität hat, während der äußerste Scope die geringste Priorität hat. Das ist wegen der Scopeverkettung. Das erste Glied in der Kette ist der innerste Scope und das letzt Glied ist der äußerste Scope. Dieses ist im folgenden Beispiel zu sehen:

- -
function outside() {
-  var x = 10;
-  function inside(x) {
-    return x;
-  }
-  return inside;
-}
-result = outside()(20); // gibt 20 statt 10 zurück
-
- -

Der Namenskonflikt tritt beim der Anweisung return x auf und ist zwischen dem Parmeter x von inside und der Variable x von outside. Die Scopekette ist hier {inside, outside, globales Objekt}. Dabei bekommt x von inside eine höhere Priorität als das x von outside. und 20 wird statt der 10 zurückgegeben.

- -

Closures

- -

Closures sind eines der mächtigsten Funktionen von JavaScript. JavaScript unterstützt das Verschachteln von Funktionen und erlaubt der inneren Funktionen den vollen Zugriff auf alle definierten Variablen und Funktionen der äußeren Funktion (und alle anderen Variablen und Funktionen die die äußere Funktion erreichen kann). Jedoch hat die äußere Funktion keinen Zugriff auf die Variablen und Funktione, die in der innere Funktion definiert werden. Das unterstützt mehr oder weniger Sicherheit für die Variablen der inneren Funktion. Wenn die innere Funktion Zugriff auf den Scope der äußeren Funktion hat, müssen die Variablen und Funktionen der äußeren Funktion länger leben, als die Ausführungen der inneren Funktion, weil die innere Funktion das Überleben der äußeren Funktion managet. Eine Closure wird erstellt, wenn die innere Funktion irgendwie in einem äußeren Scope der äußeren Funktion erreichbar gemacht wird.

- -
var pet = function(name) {   // Die äußere Funktion definiert eine Variable "name"
-  var getName = function() {
-    return name;             // Die innere Funktion hat Zugriff auf die "name" Variable der äußeren Funktion
-  }
-  return getName;            // gibt die innere Funktion zurück
-}
-myPet = pet('Vivie');
-
-myPet();                     // gibt "Vivie" zurück
-
- -

Es kann viel komplexer sein, als der oben gezeigte Quelltext. Ein Objekt enthält Methoden zum verändern von inneren Variablen der äußeren Funktion.

- -
var createPet = function(name) {
-  var sex;
-
-  return {
-    setName: function(newName) {
-      name = newName;
-    },
-
-    getName: function() {
-      return name;
-    },
-
-    getSex: function() {
-      return sex;
-    },
-
-    setSex: function(newSex) {
-      if(typeof newSex === 'string' && (newSex.toLowerCase() === 'male' || newSex.toLowerCase() === 'female')) {
-        sex = newSex;
-      }
-    }
-  }
-}
-
-var pet = createPet('Vivie');
-pet.getName();                  // Vivie
-
-pet.setName('Oliver');
-pet.setSex('male');
-pet.getSex();                   // male
-pet.getName();                  // Oliver
-
- -

Im Quelltext oben ist die name Variable der äußeren Funktion in den inneren Funktionen erreichbar und es gibt keine andere Möglichkeit die inneren Variablen zu erreichen, als über die inneren Funktion. Die innere Variable der inneren Funktion fungiert als sicherer Speicher für die äußeren Parameter und Variablen. Sie enthalten permanent und sicher die Daten mit denen die innere Funktion arbeitet. Die Funktion hat niemals eine Variable beschrieben noch hat sie einen Namen.

- -
var getCode = (function() {
-  var secureCode = '0]Eal(eh&2';    // Ein Code der nicht von Außerhalb verändert werden soll
-
-  return function () {
-    return secureCode;
-  };
-}());
-
-getCode();    // gibt secureCode zurück.
-
- -

Es gibt aber eine menge von Tücken, die der Einsatz von Closures mit sich bringt. Wenn eine innere Funktion eine Variable definiert, die den gleichen Namen wie eine Variable im äußeren Scope hat, kann die äußere Variable nicht mehr referenziert werden.

- -
var createPet = function(name) {  // Äußere Funktion definiert die Variable "name"
-  return {
-    setName: function(name) {    // Innere Funktion definiert ebenfalls eine Variable "name"
-      name = name;               // Wie referenziert man die Variable "name" der äußeren Funktion?
-    }
-  }
-}
-
- -

Einsatz des arguments Objekts

- -

Die Argumente einer Funktion werden in einem Array-ähnlichen Objekt gewartet. In einer Funktion können die Argumente wie folgt adressiert werden:

- -
arguments[i]
-
- -

i ist die Ordnungsnummer des Arguments, beginnend bei null. So ist das erste übergebene Argument einer Funktion arguments[0]. Die Anzahl der übergebenen Argumente ist arguments.length.

- -

Mit dem arguments Objekt kann man eine Funktion mit mehr Agumenten aufrufen als sie formal deklariert wurden. Das ist oft nützlich, wenn man nicht weiß, wie viele Argumente einer Funktion übergeben werden. Mit arguments.length kann die Anzahl der Argumente, die einer Funktion übergeben wurde, ermittelt werden. Über das arguments Objekt können dann alle Argumente gelesen werden.

- -

Zum Beispiel kann es eine Funktion geben, die verschieden viele Strings zusammenfügt. Das einzige formale Argument der Funktion ist das Trennzeichen, welches die Zeichen definiert, die zwischen den Strings eingefügt werden. Im folgenden Quelltext ist die Funktion implementiert:

- -
function myConcat(separator) {
-   var result = ''; // initialize list
-   var i;
-   // iterate through arguments
-   for (i = 1; i < arguments.length; i++) {
-      result += arguments[i] + separator;
-   }
-   return result;
-}
-
- -

Man kann der Funktion jede Anzahl an Argumenten übergeben und die Funktion fügt die Argumente in einem String zusammen:

- -
// returns "red, orange, blue, "
-myConcat(', ', 'red', 'orange', 'blue');
-
-// returns "elephant; giraffe; lion; cheetah; "
-myConcat('; ', 'elephant', 'giraffe', 'lion', 'cheetah');
-
-// returns "sage. basil. oregano. pepper. parsley. "
-myConcat('. ', 'sage', 'basil', 'oregano', 'pepper', 'parsley');
-
- -
-

Hinweis: Die arguments Variable ist "Array-ähnlich", aber kein Array. Es ist Array-ähnlich indem es nummerierte Indizes und eine length Eigenschaft hat. Jedoch unterstützt es nicht alle Array-Manipulations-Methoden.

-
- -

Siehe im {{jsxref("Function")}} Objekt in den JavaScript Referenzen für mehr Informationen.

- -

Funktionsparameter

- -

Mit ECMAScript 2015, gibt es zwei neue Arten von Parametern: Default-Parameter und Rest-Parameter.

- -

Default-Parameter

- -

In JavaScript ist der Standardwert eines Parameters undefined. In manchen Situationen ist es sinnvoll den Standardwert auf einen anderen Wert zu setzen. Das ist das Einsatzgebiet von Default-Parametern.

- -

In der Vergangenheit war die Strategie für das Setzen von Standardwerten, dass im Körper der Funktion geprüft wird, ob ein Parameter undefined ist und ihn in diesem Fall neu zu beschreiben. Wenn im folgenden Beispiel kein Argument b übergeben wird, wird dieser undefined sein und die Auswertung von a*b wird NaN sein. Deswegen ist dieser Fall in der zweiten Zeile des Beispiels abgefangen:

- -
function multiply(a, b) {
-  b = typeof b !== 'undefined' ?  b : 1;
-
-  return a * b;
-}
-
-multiply(5); // 5
-
- -

Mit Default-Parametern ist die Überprüfung im Körper der Funktion nicht mehr nötig. Jetzt kann man 1 als Standardwert für b im Funktionskopf angeben:

- -
function multiply(a, b = 1) {
-  return a * b;
-}
-
-multiply(5); // 5
- -

Für mehr Details, siehe in den Referenzen unter Default-Parameter.

- -

Rest-Parameter

- -

Die Rest-Parameter Syntax ermöglicht er eine unendliche Anzahl von Argumenten als Array zu repräsentieren. Im Beispiel wird der Rest-Parameter eingesetzt um die alle Argumente ab dem zweiten Argument zu sammeln. Danach werden diese mit dem ersten Parameter multipliziert. Dieses Beispiel benutzt Pfeilfunktionen, welche in nächsten Kapitel erklärt werden:

- -
function multiply(multiplier, ...theArgs) {
-  return theArgs.map(x => multiplier * x);
-}
-
-var arr = multiply(2, 1, 2, 3);
-console.log(arr); // [2, 4, 6]
- -

Pfeilfunktionen

- -

Ein Pfeilfunktions Ausdruck hat eine kürzere Syntax verglichen mit Funktionsausdrücken und bindet lexikalisch den this Wert. Pfeilfunktionen sind immer anonym. Sie dazu auch den hacks.mozilla.org Blogbeitrag: "ES6 In Depth: Arrow functions".

- -

Zwei Faktoren haben die Einführung von Pfeilfunktionen beeinflusst: kürzere Funktionen und lexikalisches this.

- -

Kürzere Funktionen

- -

In manchen funktionalen Patterns sind kurze Funktionen willkommen. Vergleiche:

- -
var a = [
-  'Hydrogen',
-  'Helium',
-  'Lithium',
-  'Beryl­lium'
-];
-
-var a2 = a.map(function(s) { return s.length; });
-
-console.log(a2); // logs [8, 6, 7, 9]
-
-var a3 = a.map( s => s.length );
-
-console.log(a3); // logs [8, 6, 7, 9]
-
- -

Lexikalisches this

- -

Bis es Pfeilfunktionen gab, hat jede neue Funktion sein eigenen this Wert definiert (ein neues Objekt in Fällen eines Konstruktors, undefined in Funktionsaufrufen im strict mode, das Kontextobjekt, wenn eine Funktion als Objektmethode aufgerufen wird, etc.). Das ist lästig mit objektorientierten Programmierstilen.

- -
function Person() {
-  // The Person() constructor defines `this` as itself.
-  this.age = 0;
-
-  setInterval(function growUp() {
-    // In nonstrict mode, the growUp() function defines `this`
-    // as the global object, which is different from the `this`
-    // defined by the Person() constructor.
-    this.age++;
-  }, 1000);
-}
-
-var p = new Person();
- -

In ECMAScript 3/5, wurde dieses Problem behoben, indem der Wert der Variablen this in einer weiteren Variablen gespeichert wird.

- -
function Person() {
-  var self = this; // Some choose `that` instead of `self`.
-                   // Choose one and be consistent.
-  self.age = 0;
-
-  setInterval(function growUp() {
-    // The callback refers to the `self` variable of which
-    // the value is the expected object.
-    self.age++;
-  }, 1000);
-}
- -

Alternativ kann eine gebundene Funktion  erstellt werden, so dass der Wert für this mit übergeben werden kann.

- -

Pfeilfunktionen nutzen den this Wert des umschließenden Kontextes, so dass der folgende Quelltext wie erwartet funktioniert:

- -
function Person() {
-  this.age = 0;
-
-  setInterval(() => {
-    this.age++; // |this| properly refers to the person object
-  }, 1000);
-}
-
-var p = new Person();
- -

Vordefinierte Funktionen

- -

JavaScript hat einige eingebaute Funktionen:

- -
-
{{jsxref("Global_Objects/eval", "eval()")}}
-
-

Die eval() Methode wertet JavaScript Quelltext repräsentiert als String aus.

-
-
{{jsxref("Global_Objects/uneval", "uneval()")}} {{non-standard_inline}}
-
-

Die uneval() Methode erstellt einen String der Quelltext eines {{jsxref("Object")}}s repräsentiert.

-
-
{{jsxref("Global_Objects/isFinite", "isFinite()")}}
-
-

Die globale isFinite() Funktion ob ein übergebener Wert endlich ist. Der übergebene Wert wird, wenn es nötig ist, zu einer Zahl konvertiert.

-
-
{{jsxref("Global_Objects/isNaN", "isNaN()")}}
-
Die isNaN() Funktion überprüft, ob ein Wert {{jsxref("Global_Objects/NaN", "NaN")}} ist oder nicht. Hinweis: Wegen einigen Zwängen innerhalb der isNaN Funktion gibt es interessante Regeln; alternativ kann auch die in  ECMAScript 2015 definierte Funktion Funktion {{jsxref("Number.isNaN()")}} oder der Operator typeof verwendet werden, um einen {{jsxref("Global_Objects/NaN", "NaN")}} Wert zu erkennen.
-
{{jsxref("Global_Objects/parseFloat", "parseFloat()")}}
-
-

Doe parseFloat() Funktion liest einen String als Argument ein und gibt eine Gleitkommazahl zurück.

-
-
{{jsxref("Global_Objects/parseInt", "parseInt()")}}
-
-

Die parseInt() Funktion liest einen String als Argument ein und gibt eine ganze Zahl der Spezifizierten Basis zurück (die Basis ist in der Mathematik das Zahlensystem).

-
-
{{jsxref("Global_Objects/decodeURI", "decodeURI()")}}
-
-

Die decodeURI() Methode decodiert einen Uniform Resource Identifier (URI), der vorher mit der {{jsxref("Global_Objects/encodeURI", "encodeURI")}} Funktion order einer ähnlichen Funktion erstellt wurde.

-
-
{{jsxref("Global_Objects/decodeURIComponent", "decodeURIComponent()")}}
-
-

Die decodeURIComponent() Methode decodiert eine Uniform Resource Identifier (URI) Komponente, die vorher mit der {{jsxref("Global_Objects/encodeURIComponent", "encodeURIComponent")}} Funktion oder einer ähnlichen Funktion erstellt wurde.

-
-
{{jsxref("Global_Objects/encodeURI", "encodeURI()")}}
-
-

Die encodeURI() Methode codiert einen Uniform Resource Identifier (URI), indem jedes besondere Zeilen durch eine Sequenz aus zwei drei oder vier Zeichen escaped wird. Dieses Sequenzen Repräsentieren die UTF-8 Darstellung der Zeichen (wird nur vier escape Sequenzen von Zeichen zu zwei zwei Platzhalterzeichen umwandeln)

-
-
{{jsxref("Global_Objects/encodeURIComponent", "encodeURIComponent()")}}
-
-

Die encodeURIComponent() Methode codiert eine Uniform Resource Identifier (URI) Komponente, indem jedes besondere Zeilen durch eine Sequenz aus zwei drei oder vier Zeichen escaped wird. Dieses Sequenzen Repräsentieren die UTF-8 Darstellung der Zeichen (wird nur vier escape Sequenzen von Zeichen zu zwei zwei Platzhalterzeichen umwandeln)

-
-
{{jsxref("Global_Objects/escape", "escape()")}} {{deprecated_inline}}
-
-

Die veraltete escape() Methode berechnet einen neuen String indem manche Zeichen durch Hexadezimalsequenzen ersetzt werden. Man sollte {{jsxref("Global_Objects/encodeURI", "encodeURI")}} oder {{jsxref("Global_Objects/encodeURIComponent", "encodeURIComponent")}} stattdessen benutzen.

-
-
{{jsxref("Global_Objects/unescape", "unescape()")}} {{deprecated_inline}}
-
-

Die veraltete unescape() Methode berechnet einen neuen String indem Hexadezimalsequenzen durch die repräsentierenden Zeichen ersetzt werden. Die Hexadezimalsequenzen können von Funktionen wie {{jsxref("Global_Objects/escape", "escape")}} eingeführt werden. Weil unescape() veraltet ist, sollte man stattdessen die Funktion {{jsxref("Global_Objects/decodeURI", "decodeURI()")}} oder {{jsxref("Global_Objects/decodeURIComponent", "decodeURIComponent")}} benutzen.

-
-
- -

{{PreviousNext("Web/JavaScript/Guide/Schleifen_und_Iterationen", "Web/JavaScript/Guide/Ausdruecke_und_Operatoren")}}

diff --git a/files/de/web/javascript/guide/grammar_and_types/index.html b/files/de/web/javascript/guide/grammar_and_types/index.html new file mode 100644 index 0000000000..3ca2b9936b --- /dev/null +++ b/files/de/web/javascript/guide/grammar_and_types/index.html @@ -0,0 +1,699 @@ +--- +title: Grammatik und Typen +slug: Web/JavaScript/Guide/Grammatik_und_Typen +tags: + - Guide + - JavaScript + - 'l10n:priority' +translation_of: Web/JavaScript/Guide/Grammar_and_types +--- +
{{jsSidebar("JavaScript Guide")}} {{PreviousNext("Web/JavaScript/Guide/Einführung", "Web/JavaScript/Guide/Kontrollfluss_und_Fehlerbehandlung")}}
+ +

Dieses Kapitel behandelt die grundlegende Grammatik von JavaScript, Deklaration von Variablen, Datentypen und Objektinstanzen.

+ +

Grundlagen

+ +

JavaScript leiht sich den größten Teil seiner Syntax von Java, ist aber auch von Sprachen wie Awk, Perl und Python beeinflusst.

+ +

JavaScript ist case-sensitiv (unterscheidet zwischen Groß- und Kleinschreibung) und benutzt den Unicode-Zeichensatz. Zum Beispiel kann das Wort Früh als Variablenname genutzt werden.

+ +
var Früh = "foobar";
+
+ +

Jedoch ist die Variable früh nicht dieselbe wie Früh, weil JavaScript case-sensitiv ist.

+ +

In JavaScript heißen Anweisungen "{{Glossary("Statement", "statements")}}" und werden durch ein Semikolon (;) voneinander getrennt. Ein Semikolon ist nicht nötig, wenn jedes Statement in einer neuen Zeile ist. Wenn mehrere Statements in einer Zeile geschrieben werden, sollte nach jedes mit einem Semikolon trennen. Zudem ist es gängige Praxis, hinter jedem Statement ein Semikolon zu schreiben. Leerzeichen, Tabulatoren und Zeilenumbrüche werden "Whitespace" genannt. Der Quelltext von JavaScript wird vom Interpreter von links nach rechts gelesen und in Sequenzen von Eingabe-Elementen wie JavaScript-Tokens, Steuerzeichen, Zeichenumbrüche, Kommentare und Objektinstanzen (Literale) umgewandelt. ECMAScript beschreibt für den Interpreter reservierte Schlüsselwörter sowie Objektinstanzen und hat eingebaute Regeln für die automatische Einfügung von Semikola (ASI) um Anweisungen zu beenden. Es wird jedoch empfohlen jede Anweisung mit einem Semikolon zu beenden; dies vermeidet ungewollte Nebeneffekte. Mehr Informationen dazu sind in der detaillierten Referenz über JavaScripts lexikalische Grammatik zu finden.

+ +

Kommentare

+ +

Die Syntax von Kommentaren ist dieselbe wie in C++ und in vielen anderen Sprachen:

+ +
// Einzeiliger Kommentar
+
+/* Das ist ein langer,
+ * mehrzeiliger Kommentar
+ */
+
+/* Man kann keine Kommentare, /* Verschachteln */ SyntaxError */
+ +

Kommentare sind wie Whitespaces und werden bei der Ausführung von Skripten verworfen.

+ +

Deklarationen

+ +

Es gibt drei mögliche Arten, Variablen zu deklarieren:

+ +
+
{{jsxref("Statements/var", "var")}}
+
Deklariert eine Variable. Optional wird ein Wert initialisiert.
+
{{jsxref("Statements/let", "let")}}
+
Deklariert eine Variable mit Gültigkeit im aktuellen Block. Optional wird ein Wert initialisiert.
+
{{jsxref("Statements/const", "const")}}
+
Deklariert eine Konstante mit Gültigkeit im aktuellen Block.
+
+ +

Variablen

+ +

Variablen werden benutzt, um Werte zu speichern. Dabei gibt man einer Variablen einen Namen, der {{Glossary("identifier", "Bezeichner")}} bzw. Bezeichner genannt wird und der bestimmten Regeln folgt.

+ +

Ein JavaScript Bezeichner muss mit einem Buchstaben, Unterstrich (_) oder einem Dollarzeichen ($) beginnen. Die nachfolgenden Zeichen können auch Zahlen sein. Da JavaScript case-sensitive ist, wird zwischen Groß- und Kleinschreibung unterschieden und somit repräsentiert "A" einen anderen Buchstaben als "a".

+ +

Es kann ein Großteil der ISO 8859-1 und Unicode-Zeichen benutzt werden, wie z.B. ü oder auch å, aber auch Unicode escape sequences können genutzt werden.

+ +

Beispiele für zulässige Bezeichner sind Number_hits, temp99 und _name.

+ +

Variablendeklaration

+ +

Die Deklaration einer Variable ist durch drei unterschiedliche Wege möglich:

+ + + +

Variablen auswerten

+ +

Eine Variable, die mit var ohne Initialisierung deklariert wurde, hat den Wert {{jsxref("undefined")}}.

+ +

Der Zugriff auf eine nicht initialisierte Variable und der Zugriff auf eine let-Variable, bevor diese Initialisiert wurde, erzeugt einen {{jsxref("ReferenceError")}} Fehler:

+ +
var a;
+console.log("Der Wert von a ist " + a); // Der Wert von a ist undefined
+
+console.log("Der Wert von b ist " + b); // Der Wert von b ist undefined
+var b;
+
+console.log("Der Wert von c ist " + c); // ReferenceError: c is not defined
+
+let x
+console.log("Der Wert von x ist " + x); // Der Wert von x ist undefined
+
+console.log("Der Wert von y ist " + y); // ReferenceError: y is not defined
+let y;
+
+ +

undefined kann benutzt werden, um zu überprüfen ob eine Variable einen Wert hat. Im Folgenden Codebeispiel ist der Variable input kein Wert zugewiesen worden und das if-Statement wird somit true ausgeben.

+ +
var input;
+if(input === undefined){
+  macheDas();
+} else {
+  macheDasAndere();
+}
+
+ +

undefined verhält sich wie ein false, wenn es in einem boolschen Kontext verwendet wird. Zum Beispiel wird im folgendem Codebeispiel die Funktion myFunction ausgeführt, weil das myArray Element undefined ist:

+ +
var myArray = [];
+if (!myArray[0]) myFunction();
+
+ +

undefined wird zu NaN (Not a Number) konvertiert, wenn es in einem numerischen Kontext verwendet wird:

+ +
var a;
+a + 2;  //NaN
+ +

Wenn eine {{jsxref("null")}} Variable ausgewertet wird, verhält sie sich im numerischen Kontext wie 0 und in booleschem Kontext wie false:

+ +
var n = null;
+console.log(n * 32);  // wird 0 in die Konsole eintragen
+
+ +

Variablen Scope

+ +

Wird eine Variable außerhalb eines Code-Blocks deklariert, wird sie eine globale Variable genannt, da sie jetzt in jedem Bereich verfügbar ist. Wenn eine Variable jedoch innerhalb eines Code-Blocks deklariert wird, so ist sie nur innerhalb dieses Blocks verfügbar und wird aus diesem Grund lokale Variable genannt.

+ +

JavaScript hatte vor ECMAScript 2015 keinen Block-Anweisungs Scope; daher wurde eine deklarierte Variable in einem Block immer zu der Funktion (oder dem globalen Scope) gezählt, in dem sich der Block befand. Zum Beispiel wird der folgende Quelltext 5 ausgeben, weil der Scope von x die Funktion ist bzw. der globale Kontext, in dem x deklariert wurde, und nicht der Block, in diesem Fall die if Anweisung, selbst.

+ +
if (true) {
+  var x = 5;
+}
+console.log(x);  // 5
+
+ +

Das Verhalten ändert sich, wenn man die in ECMAScript 2015 eingeführte let Deklaration benutzt.

+ +
if (true) {
+  let y = 5;
+}
+console.log(y);  // ReferenceError: y is not defined
+
+ +

Variablen hochziehen (hoisting)

+ +

Eine andere Besonderheit mit Variablen in JavaScript ist, dass man eine Variable referenzieren kann, bevor sie deklariert wurde, ohne das es zu einem Fehler kommt. Diese Konzept ist bekannt als hoisting (hochziehen); Variablen in JavaScript sind hochgezogen und quasi zum Anfang der Funktion oder des Statements gehoben worden. Immer wenn Variablen hochgezogen werden, werden sie den Wert undefined zurückgeben. So wird immer undefined zurückgegeben, wenn man die Variablen benutzt, bevor sie deklariert und initialisiert wurden.

+ +
/**
+ * Beispiel 1
+ */
+console.log(x === undefined); // true
+var x = 3;
+
+/**
+ * Beispiel 2
+ * wird den Wert undefined zurückgeben
+ */
+var myvar = "my value";
+
+(function() {
+  console.log(myvar); // undefined
+  var myvar = "local value";
+})();
+
+ +

Das obere Beispiel wird genauso interpretiert, wie das folgende Beispiel:

+ +
/**
+ * Beispiel 1
+ */
+var x;
+console.log(x === undefined); // true
+x = 3;
+
+/**
+ * Beispiel 2
+ */
+var myvar = "my value";
+
+(function() {
+  var myvar;
+  console.log(myvar); // undefined
+  myvar = "local value";
+})();
+
+ +

Wegen des Hochziehens sollten alle var Anweisungen so weit am Anfang der Funktion wie nur möglich platziert werden. Dieses Vorgehen verbessert die Qualität des Quelltextes.

+ +

In ECMAScript 2015 wird let (bzw. const) nicht an den Anfang eines Blocks hochgezogen. Das Referenzieren der Variable in dem Block, bevor diese deklariert wurde, führt zu einem {{jsxref("ReferenceError")}}. Die Variable ist in einer "temporären toten Zone", die vom Start des Blocks bis zur Deklaration der Variablen besteht.

+ +
console.log(x); // ReferenceError
+let x = 3;
+ +

Funktionen hochziehen (hoisting)

+ +

Bei Funktionen (nur Funktionsdeklarationen) werden die Deklarationen ebenfalls nach oben gezogen. Bei Funktionsausdrücken gilt das jedoch nicht.

+ +
/* Funktionsdeklaration */
+
+foo(); // "bar"
+
+function foo() {
+   console.log("bar");
+}
+
+
+/* Funktionsausdruck */
+
+baz(); // TypeError: baz ist keine Funktion
+
+var baz = function() {
+   console.log("bar2");
+};
+
+ +

Globale Variablen

+ +

Globale Variablen sind faktisch Eigenschaften des globalen Objekts. In Webseiten ist das globale Objekt das {{domxref("window")}} Objekt, so dass globale Variablen gesetzt und erreicht werden können, indem die Syntax window.variable eingesetzt wird.

+ +

Folglich kann man globale Variablen, die in einem window oder frame deklariert wurden, aus einem anderen window oder Frame erreichen, indem der window oder framename angegeben wird. Zum Beispiel kann eine Variable phoneNumber, die in einem Dokument deklariert wurde, von einem iframe mit parent.phoneNumber erreicht werden.

+ +

Konstanten

+ +

Man kann eine nur lesende, benannte Konstante mit dem Schlüsselwort {{jsxref("Statements/const", "const")}} erstellen. Die Syntax für einen Konstantenbezeichner ist dieselbe, wie für Variablenbezeichner: Er muss mit einem Buchstaben, Unterstrich oder Dollarzeichen beginnen und kann alphabetische Zeichen, numerische Zeichen und Unterstriche enthalten.

+ +
const PI = 3.14;
+
+ +

Der Wert einer Konstanten kann nicht zur Laufzeit durch Zuweisungen oder Neudeklarationen geändert werden. Konstanten müssen deswegen immer initialisiert werden.

+ +

Die Sichtbarkeitsregeln (Scope) bei Konstanten sind die gleichen, wie für let Blockscope Variablen. Wenn das Schüsselwort const weggelassen wird, wird vorausgesetzt, dass der Bezeichner eine Variable repräsentiert.

+ +

Man kann keine Konstante mit dem gleichen Namen einer Funktion oder Variablen im gleiche Gültigkeitsbereich deklarieren. Zum Beispiel:

+ +
// DAS WIRD ZU EINEM ERROR FÜHREN
+function f() {};
+const f = 5;
+
+// DAS WIRD EBENFALLS ZU EINEM ERROR FÜHREN
+function f() {
+  const g = 5;
+  var g;
+
+  //statements
+}
+
+ +

Immer, wenn Objektattribute nicht geschützt sind, werden die folgenden Anweisungen ohne Probleme ausgeführt.

+ +
const MY_OBJECT = {"key": "value"};
+MY_OBJECT.key = "otherValue";
+ +

Jedoch ist der Inhalt eines Arrays nicht geschützt, sodass folgendes Statement ohne Probleme ausgeführt wird.

+ +
const MY_ARRAY = ['HTML','CSS'];
+MY_ARRAY.push('JAVASCRIPT');
+console.log(MY_ARRAY); // logs ['HTML','CSS','JAVASCRIPT']
+
+ +

Datenstrukturen und -typen

+ +

Datentypen

+ +

Der neuste ECMAScript Standard definiert sieben Datentypen:

+ + + +

Obwohl die Anzahl der Datentypen relativ klein ist, eröffnen sie die Möglichkeit nützliche Funktionen für Applikationen zu erstellen. {{jsxref("Object", "Objects")}} und {{jsxref("Function", "functions")}} sind die anderen fundamentalen Elemente der Sprache. Man kann sich Objekte als benannte Container für Werte und Funktionen, die die Applikation ausführen kann, vorstellen.

+ +

Datentypkonvertierungen

+ +

JavaScript ist eine dynamisch typisierte Sprache. Das bedeutet, dass man den Datentypen einer Variable bei der Deklaration nicht mit angibt. Der Datentyp wird während der Ausführung automatisch konvertiert, wenn es notwendig ist. So kann eine Variable folgendermaßen definiert werden:

+ +
var answer = 42;
+
+ +

Und Später kann der gleichen Variablen eine Zeichenkette zugewiesen werden:

+ +
answer = "Thanks for all the fish...";
+
+ +

Weil JavaScript dynamisch typisiert ist, erzeugt diese Zuweisung keinen Fehler im Programm.

+ +

In Ausdrücken, in denen Zahlen und Zeichenketten mit dem + Operator gebraucht werden, konvertiert JavaScript die Zahlen in Zeichenketten. Siehe dazu das folgende Beispiel:

+ +
x = "The answer is " + 42 // "The answer is 42"
+y = 42 + " is the answer" // "42 is the answer"
+
+ +

In Ausdrücken mit anderen Operatoren, konvertiert JavaScript zahlen nicht in Zeichenketten. Zum Beispiel:

+ +
"37" - 7 // 30
+"37" + 7 // "377"
+
+ +

Konvertieren von Zeichenketten zu Zahlen

+ +

In Fällen, in denen eine Zahl durch einen String repräsentiert wird, gibt es folgende Methoden, um die Zeichenkette in eine Zahl umzuwandeln.

+ + + +

parseInt gibt nur ganze Zahlen zurück, weshalb der Einsatz für Dezimalzahlen nicht geeignet ist. Zu einem guten Programmierstil gehört es, dass man immer die Basis bei parseInt mit angibt. Der radix Parameter der Methode gibt an, aus welchem Zahlensystem die Zahl stammt.

+ +

Eine alternative Methode, um einen String in eine Zahl zu konvertieren ist der + (unär Plus) Operator:

+ +
"1.1" + "1.1" // "1.11.1"
+(+"1.1") + (+"1.1") // 2.2
+// Hinweis: die hinzugefügten Klammern sind nur für die Lesbarkeit.
+ +

Literale

+ +

Man benutzt Literale, um in JavaScript Werte zu repräsentieren. Es sind feste Werte, keine Variablen, die man in einem Skript einsetzt. Dieses Kapitel beschreibt die folgeden Literaltypen:

+ + + +

Array Literal

+ +

Ein Array Literal ist eine Liste von null oder mehr Ausdrücken. Jeder Ausdruck repräsentiert ein Element des Arrays. Diese Elemente sind von eckigen Klammern ([]) umschlossen. Wenn ein Array mit einem Array Literal erstellt wird, wird das Array mit allen definierten Elementen initialisiert und die länge des Arrays wird auf die Menge der Elemente gesetzt.

+ +

Das folgende Beispiel erstellt das coffees Array mit drei Elementen und der Länge drei:

+ +
var coffees = ["French Roast", "Colombian", "Kona"];
+
+ +
+

Hinweis: Ein Array Literal ist eine Art von Objektinitialisierung. Sie dazu auch den Einsatz von Objektinitialisierern.

+
+ +

Wenn ein Array durch ein Literal im Toplevel Skript erstellt wird, interpretiert JavaScript das Array immer dann, wenn ein Ausdruck dieses Literal enthält. Im Gegensatz dazu wird ein Literal in einer Funktion immer neu erstellt, wenn die Funktion aufgerufen wird.

+ +

Array Literale sind ebenfalls Array Objekte. Für mehr Details siehe {{jsxref("Array")}} und Indexed collections.

+ +

Extra Kommas in Array Literalen

+ +

Man muss nicht alle Elemente in einem Array Literal spezifizieren. Wenn man zwei Kommas in einer Reihe verwendet, wird das Array mit einem undefined Element erstellt. Das folgende Beispiel erstellt das fish Array:

+ +
var fish = ["Lion", , "Angel"];
+
+ +

Dieses Array hat zwei Elemente mit Werten und ein leeres Element (fish[0] ist "Lion", fish[1] ist undefined und fish[2] ist "Angel").

+ +

Wenn man ein trennendes Komma am Ende der Elementliste hinzufügt, wird es ignoriert. Im folgenden Beispiel ist die Länge des Arrays drei. Es gibt kein myList[3]. Alle weiteren Kommas in der Liste führen zu einem neuen Element.

+ +
+

Hinweis: Trennende Kommas können in älteren Browserversionen zu Fehlern führen. Zudem ist es ein guter Stil diese Kommas zu entfernen.

+
+ +
var myList = ['home', , 'school', ];
+
+ +

Im folgenden Beispiel hat das Array vier Elemente und myList[0] und myList[2] sind nicht spezifiziert.

+ +
var myList = [ , 'home', , 'school'];
+
+ +

Im folgenden Beispiel hat das Array vier Elemente und myList[1] und myList[3] sind nicht spezifiziert. Nur das letzte Komma wird ignoriert.

+ +
var myList = ['home', , 'school', , ];
+
+ +

Das Verständnis für das Verhalten von extra Kommas ist wichtig, um JavaScript als Sprache zu verstehen. Immer, wenn man seinen eigenen Quelltext schreibt, sollten explizit fehlenden Elementen mit undefined deklariert werden, damit die Lesbarkeit und Wartbarkeit des Quelltextes besser ist.

+ +

Boolean Literale

+ +

Der Boolean Typ hat zwei Literale: true und false.

+ +

Man sollte die primitiven Werte true und false jedoch nicht mit den Werten true und false des Boolean Objektes verwechseln. Das Boolean Objekt ist eine Hülle um den primitiven Boolean Datentypen. Siehe im Artikel {{jsxref("Boolean")}} für weitere Informationen.

+ +

Numerische Literale

+ +

Ganze Zahlen können als Dezimal- (Basis 10), Hexadezimal- (Basis 16), Oktal- (Basis 8) und Binärzahl (Basis 2) ausgedrückt werden.

+ + + +

Im folgenden Beispiel sind einige Beispiele für Zahlenliterale:

+ +
0, 117 und -345 (dezimal, Basis 10)
+015, 0001 und -0o77 (oktal, Basis 8)
+0x1123, 0x00111 und -0xF1A7 (hexadezimal, "hex", Base 16)
+0b11, 0b0011 und -0b11 (binär, Basis 2)
+
+ +

Für weitere Informationen siehe numerische Literale in der Lexikalischen Grammatik Referenz.

+ +

Gleitkomma Literale

+ +

Ein Gleitkomma Literal kann die folgenden Abschnitte beinhalten:

+ + + +

Der Exponent besteht aus einem "e" oder "E" gefolgt von einer ganzen Zahl, die mit einem Vorzeichen ("+" oder "-") versehen sein kann. Eine Gleitkommazahl muss mindestens aus einer Ziffer und entweder einem Dezimalpunkt oder einem "e" (oder "E") bestehen.

+ +

Kurz und knapp sieht die Syntax folgendermaßen aus:

+ +
[(+|-)][ziffern][.ziffern][(E|e)[(+|-)]ziffern]
+
+ +

Zum Beispiel:

+ +
3.1415926
+-.123456789
+-3.1E+12
+.1e-23
+
+ +

Objekt Literale

+ +

Ein Objekt Literal ist eine Liste von null oder mehr Paaren von Eigenschaftsnamen und -werten, umschlossen von geschweiften Klammern ({}). Man sollte kein Objektliteral am Anfang eines Statements benutzen. Das wird zu einem Fehler führen oder nicht wie erwartet funktionieren, weil das {-Zeichen als Anfang eines Blocks interpretiert wird.

+ +

Es folgt ein Beispiel für ein Objekt Literal. Das erste Element des car Objektes definiert eine Eigenschaft myCar und beschreibt diese mit einem neuen String "Saturn". Am zweiten Element, der getCar Eigenschaft, wird der Rückgabewert der aufgerufenen Funktion carTypes("Honda") zugewiesen. Das dritte Element, die special Eigenschaft, benutzt eine existierende Variable sales.

+ +
var sales = "Toyota";
+
+function carTypes(name) {
+  if (name === "Honda") {
+    return name;
+  } else {
+    return "Sorry, we don't sell " + name + ".";
+  }
+}
+
+var car = {
+  myCar: "Saturn",
+  getCar: carTypes("Honda"),
+  special: sales
+};
+
+console.log(car.myCar);   // Saturn
+console.log(car.getCar);  // Honda
+console.log(car.special); // Toyota
+
+ +

Für die Namen der Eigenschaften kann auch ein String oder ein Zahlen Literal verwendet werden. Für den Wert kann auch ein verschachteltes Objekt Literal genutzt werden. Das folgende Beispiel nutzt diese Optionen.

+ +
var car = { manyCars: {a: 'Saab', b: 'Jeep'}, 7: 'Mazda' };
+
+console.log(car.manyCars.b); // Jeep
+console.log(car[7]); // Mazda
+
+ +

Die Namen von Objekteigenschaften können ein String sein, was auch den leeren String beinhaltet. Wenn die Eigenschaftsnamen keine gültigen JavaScript {{Glossary("Identifier","Bezeichner")}} sind, müssen sie in Anführungszeichen geschrieben werden. Eigenschaftsnamen die keine gültigen Bezeichner sind, können nicht mit der Punktschreibweise (.) erreicht werden. Wohl aber mit der Array ähnlichen Notation ("[]").

+ +
var unusualPropertyNames = {
+  "": "An empty string",
+  "!": "Bang!"
+}
+console.log(unusualPropertyNames."");   // SyntaxError: Unexpected string
+console.log(unusualPropertyNames[""]);  // An empty string
+console.log(unusualPropertyNames.!);    // SyntaxError: Unexpected token !
+console.log(unusualPropertyNames["!"]); // Bang!
+ +

Erweiterte Objekt Literale

+ +

In ES2015 wurde das Objekt Literal dahingehend erweitert, dass der Prototyp bei der Erstellung gesetzt wird. Desweiteren sind neue Funktionalitäten hinzugekommen, die eine Kurzschreibweise für foo: foo Zuweisungen, die Definitionen für Methoden, das Aufrufen von super Methoden und die Berechnung der Eigenschaftsnamen mit Ausdrücken ermöglichen. Alle diese Funktionen bringen zum Einen Klassendefinition und Objekt Literale näher zusammen und sind somit objektbasiertes Design und zum Anderen häufig vorteilhafter und bequemer.

+ +
var obj = {
+    // __proto__
+    __proto__: theProtoObj,
+    // Shorthand for ‘handler: handler’
+    handler,
+    // Methods
+    toString() {
+     // Super calls
+     return "d " + super.toString();
+    },
+    // Computed (dynamic) property names
+    [ 'prop_' + (() => 42)() ]: 42
+};
+ +

Bitte beachten:

+ +
var foo = {a: "alpha", 2: "two"};
+console.log(foo.a);    // alpha
+console.log(foo[2]);   // two
+//console.log(foo.2);  // Error: missing ) after argument list
+//console.log(foo[a]); // Error: a is not defined
+console.log(foo["a"]); // alpha
+console.log(foo["2"]); // two
+
+ +

RegExp Literale

+ +

Ein RegExp Literal (welcher im Detail später erklärt wird) ist ein Pattern (Muster) umschlossen von Slashes (/). Das Folgende ist ein Beispiel für ein RegExp Literal:

+ +
var re = /ab+c/;
+ +

String Literale

+ +

Ein String Literal besteht aus null oder mehr Zeichen, die von doppelten (") oder einfachen (') Anführungszeichen umschlossen sind. Ein String muss immer von gleichen Anführungszeichen umschlossen sein. Entweder von einfachen oder von doppelten Anführungszeichen. Im folgenden Beispiel sind ein paar String Literale gezeigt:

+ +
"foo"
+'bar'
+"1234"
+"eine Zeile \n weitere Zeile"
+"John's cat"
+
+ +

Man kann alle Methoden des String Objektes auf einem String Literal aufrufen, denn JavaScript konvertiert das Literal automatisch in ein temporäres String Objekt, führt die Methode aus und verwirft danach das temporäre Objekt. Man kann auch die String.length Eigenschaft mit einem String Literal benutzen:

+ +
console.log("John's cat".length)
+// Wird die Anzahl der Zeichen (auch Leerzeichen) ausgeben.
+// In diesem Fall 10.
+
+ +

In ES2015, wurden zudem Template Literale eingeführt. Template Literale sind von Backticks (` `) (Gravis) umschlossen. Template Strings bieten syntaktischen Zucker für das Erstellen von Strings an. Sie sind vergleichbar mit den String Interpolations Funktionen in Perl, Python und anderen Sprachen. Optional können Marken eingefügt werden, um einen String benutzerdefiniert zu erstellen. Sie vermeiden Injection-Attacken und ermöglichen es Datenstrukturen in Strings unterzubringen.

+ +
// Standardliteral für die String erstellung
+`In JavaScript '\n' is a line-feed.`
+
+// Mehrzellige Strings
+`In JavaScript ist das
+ nicht erlaubt.`
+
+// String Interpolation
+var name = "Bob", time = "today";
+`Hello ${name}, how are you ${time}?`
+
+// Erstellung einer HTTP Anfrage.
+POST`http://foo.org/bar?a=${a}&b=${b}
+     Content-Type: application/json
+     X-Credentials: ${credentials}
+     { "foo": ${foo},
+       "bar": ${bar}}`(myOnReadyStateChangeHandler);
+ +

Man sollte String Literale benutzen, sofern man nicht explizit ein Objekt benötigt. Für weitere Informationen siehe im {{jsxref("String")}} Artikel nach.

+ +

Einsatz von Sonderzeichen in Strings

+ +

Neben den normalen Zeichen ist es auch möglich Sonderzeichen in einem String zu verwenden. Ein Beispiel ist im folgenden zu sehen:

+ +
"eine Zeile \n nächste Zeile"
+
+ +

Die folgende Tabelle Zeigt die Sonderzeichen, die in JavaScript Strings verwendet werden können:

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Table: JavaScript Sonderzeichen
ZeichenBedeutung
\0Null Byte
\bBackspace
\fForm feed
\nNew line
\rCarriage return
\tTab
\vVertical tab
\'Einfache Anführungszeichen
\"Doppelte Anführungszeichen
\\Backslash Zeichen
\XXXDas Zeichen, das im Latin-1 Encoding mit drei Oktalzahlen (XXX) Spezifiziert wird (0 bis 377). Zum Beispiel ist \251 die Oktalsequenz für das Copyrightsymbol.
\xXXZeichen, die im Latin-1 Encoding mit zwei Hexadezimalzahlen (XX) spezifiziert werden (00 bis FF). Zum Beispiel ist \xA9 die Hexadezimalsequenz für das Copyrightsymbol.
\uXXXXDie Unicode Zeichen, die mit vier Hexadezimalziffern XXXX beschreiben werden. Zum Beispiel ist \u00A9 die Hexadezimalsequenz für das Copyrightsymbol. Siehe Unicode escape Sequenzen.
\u{XXXXX}Unicode code point escapes. Zum Beispiel ist \u{2F804} das gleiche wie das einfache Unicodezeichen \uD87E\uDC04.
+ +

Escaping Zeichen

+ +

Für nicht in der Tabelle gezeigte Zeichen wird ein voranstehendes Backslash ignoriert. Der Einsatz von Backslashs ist Veraltet und sollte vermieden werden.

+ +

Man kann Anführungszeichen in einen String hinzufügen, indem ein Führendes Backslash eingesetzt wird. Das wird auch escaping der Anführungszeichen genannt. Ein Beispiel:

+ +
var quote = "He read \"The Cremation of Sam McGee\" by R.W. Service.";
+console.log(quote);
+
+ +

Das Ergebnis ist:

+ +
He read "The Cremation of Sam McGee" by R.W. Service.
+
+ +

Um ein Backslash in einem String zu verwenden, muss dieses mit einem Backslash escaped werden. Zum Beispiel muss der Pfad c:\temp wie folgt geschrieben werden:

+ +
var home = "c:\\temp";
+
+ +

Man kann zudem Zeilenumbrüche mit einem vorangegangenen Backslash escapen. Das Backslash und der Zeilenumbruch werden aus dem String entfernt.

+ +
var str = "this string \
+is broken \
+across multiple\
+lines."
+console.log(str);   // this string is broken across multiple lines.
+
+ +

JavaScript kennt keine "heredoc" Syntax. Um eine solche zu simulieren muss am Ende jeder Zeile mit einem Zeilenumbruch (\n) ein Backslash stehen:

+ +
var poem =
+"Roses are red,\n\
+Violets are blue.\n\
+Sugar is sweet,\n\
+and so is foo."
+
+ +

ECMAScript 2015 führte einen neuen Literaltyp, das Template Literal, ein. Dieses führte, für viele neue Funktionen, Strings mit mehrere Zeilen ein!

+ +
var poem =
+`Roses are red,
+Violets are blue.
+Sugar is sweet,
+and so is foo.`
+
+ +

Mehr Informationen

+ +

Dieses Kapitel beschränkt sich auf die Basissyntax für Deklarationen und Typen. Um mehr über die Sprachkonstrukte von JavaScript zu lernen siehe in die folgenden Kapitel dieses Guides:

+ + + +

Im nächsten Kapitel wird ein Blick auf Kontrollflüsse und Fehlerbehandlungen geworfen.

+ +

{{PreviousNext("Web/JavaScript/Guide/Einführung", "Web/JavaScript/Guide/Kontrollfluss_und_Fehlerbehandlung")}}

diff --git a/files/de/web/javascript/guide/grammatik_und_typen/index.html b/files/de/web/javascript/guide/grammatik_und_typen/index.html deleted file mode 100644 index 3ca2b9936b..0000000000 --- a/files/de/web/javascript/guide/grammatik_und_typen/index.html +++ /dev/null @@ -1,699 +0,0 @@ ---- -title: Grammatik und Typen -slug: Web/JavaScript/Guide/Grammatik_und_Typen -tags: - - Guide - - JavaScript - - 'l10n:priority' -translation_of: Web/JavaScript/Guide/Grammar_and_types ---- -
{{jsSidebar("JavaScript Guide")}} {{PreviousNext("Web/JavaScript/Guide/Einführung", "Web/JavaScript/Guide/Kontrollfluss_und_Fehlerbehandlung")}}
- -

Dieses Kapitel behandelt die grundlegende Grammatik von JavaScript, Deklaration von Variablen, Datentypen und Objektinstanzen.

- -

Grundlagen

- -

JavaScript leiht sich den größten Teil seiner Syntax von Java, ist aber auch von Sprachen wie Awk, Perl und Python beeinflusst.

- -

JavaScript ist case-sensitiv (unterscheidet zwischen Groß- und Kleinschreibung) und benutzt den Unicode-Zeichensatz. Zum Beispiel kann das Wort Früh als Variablenname genutzt werden.

- -
var Früh = "foobar";
-
- -

Jedoch ist die Variable früh nicht dieselbe wie Früh, weil JavaScript case-sensitiv ist.

- -

In JavaScript heißen Anweisungen "{{Glossary("Statement", "statements")}}" und werden durch ein Semikolon (;) voneinander getrennt. Ein Semikolon ist nicht nötig, wenn jedes Statement in einer neuen Zeile ist. Wenn mehrere Statements in einer Zeile geschrieben werden, sollte nach jedes mit einem Semikolon trennen. Zudem ist es gängige Praxis, hinter jedem Statement ein Semikolon zu schreiben. Leerzeichen, Tabulatoren und Zeilenumbrüche werden "Whitespace" genannt. Der Quelltext von JavaScript wird vom Interpreter von links nach rechts gelesen und in Sequenzen von Eingabe-Elementen wie JavaScript-Tokens, Steuerzeichen, Zeichenumbrüche, Kommentare und Objektinstanzen (Literale) umgewandelt. ECMAScript beschreibt für den Interpreter reservierte Schlüsselwörter sowie Objektinstanzen und hat eingebaute Regeln für die automatische Einfügung von Semikola (ASI) um Anweisungen zu beenden. Es wird jedoch empfohlen jede Anweisung mit einem Semikolon zu beenden; dies vermeidet ungewollte Nebeneffekte. Mehr Informationen dazu sind in der detaillierten Referenz über JavaScripts lexikalische Grammatik zu finden.

- -

Kommentare

- -

Die Syntax von Kommentaren ist dieselbe wie in C++ und in vielen anderen Sprachen:

- -
// Einzeiliger Kommentar
-
-/* Das ist ein langer,
- * mehrzeiliger Kommentar
- */
-
-/* Man kann keine Kommentare, /* Verschachteln */ SyntaxError */
- -

Kommentare sind wie Whitespaces und werden bei der Ausführung von Skripten verworfen.

- -

Deklarationen

- -

Es gibt drei mögliche Arten, Variablen zu deklarieren:

- -
-
{{jsxref("Statements/var", "var")}}
-
Deklariert eine Variable. Optional wird ein Wert initialisiert.
-
{{jsxref("Statements/let", "let")}}
-
Deklariert eine Variable mit Gültigkeit im aktuellen Block. Optional wird ein Wert initialisiert.
-
{{jsxref("Statements/const", "const")}}
-
Deklariert eine Konstante mit Gültigkeit im aktuellen Block.
-
- -

Variablen

- -

Variablen werden benutzt, um Werte zu speichern. Dabei gibt man einer Variablen einen Namen, der {{Glossary("identifier", "Bezeichner")}} bzw. Bezeichner genannt wird und der bestimmten Regeln folgt.

- -

Ein JavaScript Bezeichner muss mit einem Buchstaben, Unterstrich (_) oder einem Dollarzeichen ($) beginnen. Die nachfolgenden Zeichen können auch Zahlen sein. Da JavaScript case-sensitive ist, wird zwischen Groß- und Kleinschreibung unterschieden und somit repräsentiert "A" einen anderen Buchstaben als "a".

- -

Es kann ein Großteil der ISO 8859-1 und Unicode-Zeichen benutzt werden, wie z.B. ü oder auch å, aber auch Unicode escape sequences können genutzt werden.

- -

Beispiele für zulässige Bezeichner sind Number_hits, temp99 und _name.

- -

Variablendeklaration

- -

Die Deklaration einer Variable ist durch drei unterschiedliche Wege möglich:

- - - -

Variablen auswerten

- -

Eine Variable, die mit var ohne Initialisierung deklariert wurde, hat den Wert {{jsxref("undefined")}}.

- -

Der Zugriff auf eine nicht initialisierte Variable und der Zugriff auf eine let-Variable, bevor diese Initialisiert wurde, erzeugt einen {{jsxref("ReferenceError")}} Fehler:

- -
var a;
-console.log("Der Wert von a ist " + a); // Der Wert von a ist undefined
-
-console.log("Der Wert von b ist " + b); // Der Wert von b ist undefined
-var b;
-
-console.log("Der Wert von c ist " + c); // ReferenceError: c is not defined
-
-let x
-console.log("Der Wert von x ist " + x); // Der Wert von x ist undefined
-
-console.log("Der Wert von y ist " + y); // ReferenceError: y is not defined
-let y;
-
- -

undefined kann benutzt werden, um zu überprüfen ob eine Variable einen Wert hat. Im Folgenden Codebeispiel ist der Variable input kein Wert zugewiesen worden und das if-Statement wird somit true ausgeben.

- -
var input;
-if(input === undefined){
-  macheDas();
-} else {
-  macheDasAndere();
-}
-
- -

undefined verhält sich wie ein false, wenn es in einem boolschen Kontext verwendet wird. Zum Beispiel wird im folgendem Codebeispiel die Funktion myFunction ausgeführt, weil das myArray Element undefined ist:

- -
var myArray = [];
-if (!myArray[0]) myFunction();
-
- -

undefined wird zu NaN (Not a Number) konvertiert, wenn es in einem numerischen Kontext verwendet wird:

- -
var a;
-a + 2;  //NaN
- -

Wenn eine {{jsxref("null")}} Variable ausgewertet wird, verhält sie sich im numerischen Kontext wie 0 und in booleschem Kontext wie false:

- -
var n = null;
-console.log(n * 32);  // wird 0 in die Konsole eintragen
-
- -

Variablen Scope

- -

Wird eine Variable außerhalb eines Code-Blocks deklariert, wird sie eine globale Variable genannt, da sie jetzt in jedem Bereich verfügbar ist. Wenn eine Variable jedoch innerhalb eines Code-Blocks deklariert wird, so ist sie nur innerhalb dieses Blocks verfügbar und wird aus diesem Grund lokale Variable genannt.

- -

JavaScript hatte vor ECMAScript 2015 keinen Block-Anweisungs Scope; daher wurde eine deklarierte Variable in einem Block immer zu der Funktion (oder dem globalen Scope) gezählt, in dem sich der Block befand. Zum Beispiel wird der folgende Quelltext 5 ausgeben, weil der Scope von x die Funktion ist bzw. der globale Kontext, in dem x deklariert wurde, und nicht der Block, in diesem Fall die if Anweisung, selbst.

- -
if (true) {
-  var x = 5;
-}
-console.log(x);  // 5
-
- -

Das Verhalten ändert sich, wenn man die in ECMAScript 2015 eingeführte let Deklaration benutzt.

- -
if (true) {
-  let y = 5;
-}
-console.log(y);  // ReferenceError: y is not defined
-
- -

Variablen hochziehen (hoisting)

- -

Eine andere Besonderheit mit Variablen in JavaScript ist, dass man eine Variable referenzieren kann, bevor sie deklariert wurde, ohne das es zu einem Fehler kommt. Diese Konzept ist bekannt als hoisting (hochziehen); Variablen in JavaScript sind hochgezogen und quasi zum Anfang der Funktion oder des Statements gehoben worden. Immer wenn Variablen hochgezogen werden, werden sie den Wert undefined zurückgeben. So wird immer undefined zurückgegeben, wenn man die Variablen benutzt, bevor sie deklariert und initialisiert wurden.

- -
/**
- * Beispiel 1
- */
-console.log(x === undefined); // true
-var x = 3;
-
-/**
- * Beispiel 2
- * wird den Wert undefined zurückgeben
- */
-var myvar = "my value";
-
-(function() {
-  console.log(myvar); // undefined
-  var myvar = "local value";
-})();
-
- -

Das obere Beispiel wird genauso interpretiert, wie das folgende Beispiel:

- -
/**
- * Beispiel 1
- */
-var x;
-console.log(x === undefined); // true
-x = 3;
-
-/**
- * Beispiel 2
- */
-var myvar = "my value";
-
-(function() {
-  var myvar;
-  console.log(myvar); // undefined
-  myvar = "local value";
-})();
-
- -

Wegen des Hochziehens sollten alle var Anweisungen so weit am Anfang der Funktion wie nur möglich platziert werden. Dieses Vorgehen verbessert die Qualität des Quelltextes.

- -

In ECMAScript 2015 wird let (bzw. const) nicht an den Anfang eines Blocks hochgezogen. Das Referenzieren der Variable in dem Block, bevor diese deklariert wurde, führt zu einem {{jsxref("ReferenceError")}}. Die Variable ist in einer "temporären toten Zone", die vom Start des Blocks bis zur Deklaration der Variablen besteht.

- -
console.log(x); // ReferenceError
-let x = 3;
- -

Funktionen hochziehen (hoisting)

- -

Bei Funktionen (nur Funktionsdeklarationen) werden die Deklarationen ebenfalls nach oben gezogen. Bei Funktionsausdrücken gilt das jedoch nicht.

- -
/* Funktionsdeklaration */
-
-foo(); // "bar"
-
-function foo() {
-   console.log("bar");
-}
-
-
-/* Funktionsausdruck */
-
-baz(); // TypeError: baz ist keine Funktion
-
-var baz = function() {
-   console.log("bar2");
-};
-
- -

Globale Variablen

- -

Globale Variablen sind faktisch Eigenschaften des globalen Objekts. In Webseiten ist das globale Objekt das {{domxref("window")}} Objekt, so dass globale Variablen gesetzt und erreicht werden können, indem die Syntax window.variable eingesetzt wird.

- -

Folglich kann man globale Variablen, die in einem window oder frame deklariert wurden, aus einem anderen window oder Frame erreichen, indem der window oder framename angegeben wird. Zum Beispiel kann eine Variable phoneNumber, die in einem Dokument deklariert wurde, von einem iframe mit parent.phoneNumber erreicht werden.

- -

Konstanten

- -

Man kann eine nur lesende, benannte Konstante mit dem Schlüsselwort {{jsxref("Statements/const", "const")}} erstellen. Die Syntax für einen Konstantenbezeichner ist dieselbe, wie für Variablenbezeichner: Er muss mit einem Buchstaben, Unterstrich oder Dollarzeichen beginnen und kann alphabetische Zeichen, numerische Zeichen und Unterstriche enthalten.

- -
const PI = 3.14;
-
- -

Der Wert einer Konstanten kann nicht zur Laufzeit durch Zuweisungen oder Neudeklarationen geändert werden. Konstanten müssen deswegen immer initialisiert werden.

- -

Die Sichtbarkeitsregeln (Scope) bei Konstanten sind die gleichen, wie für let Blockscope Variablen. Wenn das Schüsselwort const weggelassen wird, wird vorausgesetzt, dass der Bezeichner eine Variable repräsentiert.

- -

Man kann keine Konstante mit dem gleichen Namen einer Funktion oder Variablen im gleiche Gültigkeitsbereich deklarieren. Zum Beispiel:

- -
// DAS WIRD ZU EINEM ERROR FÜHREN
-function f() {};
-const f = 5;
-
-// DAS WIRD EBENFALLS ZU EINEM ERROR FÜHREN
-function f() {
-  const g = 5;
-  var g;
-
-  //statements
-}
-
- -

Immer, wenn Objektattribute nicht geschützt sind, werden die folgenden Anweisungen ohne Probleme ausgeführt.

- -
const MY_OBJECT = {"key": "value"};
-MY_OBJECT.key = "otherValue";
- -

Jedoch ist der Inhalt eines Arrays nicht geschützt, sodass folgendes Statement ohne Probleme ausgeführt wird.

- -
const MY_ARRAY = ['HTML','CSS'];
-MY_ARRAY.push('JAVASCRIPT');
-console.log(MY_ARRAY); // logs ['HTML','CSS','JAVASCRIPT']
-
- -

Datenstrukturen und -typen

- -

Datentypen

- -

Der neuste ECMAScript Standard definiert sieben Datentypen:

- - - -

Obwohl die Anzahl der Datentypen relativ klein ist, eröffnen sie die Möglichkeit nützliche Funktionen für Applikationen zu erstellen. {{jsxref("Object", "Objects")}} und {{jsxref("Function", "functions")}} sind die anderen fundamentalen Elemente der Sprache. Man kann sich Objekte als benannte Container für Werte und Funktionen, die die Applikation ausführen kann, vorstellen.

- -

Datentypkonvertierungen

- -

JavaScript ist eine dynamisch typisierte Sprache. Das bedeutet, dass man den Datentypen einer Variable bei der Deklaration nicht mit angibt. Der Datentyp wird während der Ausführung automatisch konvertiert, wenn es notwendig ist. So kann eine Variable folgendermaßen definiert werden:

- -
var answer = 42;
-
- -

Und Später kann der gleichen Variablen eine Zeichenkette zugewiesen werden:

- -
answer = "Thanks for all the fish...";
-
- -

Weil JavaScript dynamisch typisiert ist, erzeugt diese Zuweisung keinen Fehler im Programm.

- -

In Ausdrücken, in denen Zahlen und Zeichenketten mit dem + Operator gebraucht werden, konvertiert JavaScript die Zahlen in Zeichenketten. Siehe dazu das folgende Beispiel:

- -
x = "The answer is " + 42 // "The answer is 42"
-y = 42 + " is the answer" // "42 is the answer"
-
- -

In Ausdrücken mit anderen Operatoren, konvertiert JavaScript zahlen nicht in Zeichenketten. Zum Beispiel:

- -
"37" - 7 // 30
-"37" + 7 // "377"
-
- -

Konvertieren von Zeichenketten zu Zahlen

- -

In Fällen, in denen eine Zahl durch einen String repräsentiert wird, gibt es folgende Methoden, um die Zeichenkette in eine Zahl umzuwandeln.

- - - -

parseInt gibt nur ganze Zahlen zurück, weshalb der Einsatz für Dezimalzahlen nicht geeignet ist. Zu einem guten Programmierstil gehört es, dass man immer die Basis bei parseInt mit angibt. Der radix Parameter der Methode gibt an, aus welchem Zahlensystem die Zahl stammt.

- -

Eine alternative Methode, um einen String in eine Zahl zu konvertieren ist der + (unär Plus) Operator:

- -
"1.1" + "1.1" // "1.11.1"
-(+"1.1") + (+"1.1") // 2.2
-// Hinweis: die hinzugefügten Klammern sind nur für die Lesbarkeit.
- -

Literale

- -

Man benutzt Literale, um in JavaScript Werte zu repräsentieren. Es sind feste Werte, keine Variablen, die man in einem Skript einsetzt. Dieses Kapitel beschreibt die folgeden Literaltypen:

- - - -

Array Literal

- -

Ein Array Literal ist eine Liste von null oder mehr Ausdrücken. Jeder Ausdruck repräsentiert ein Element des Arrays. Diese Elemente sind von eckigen Klammern ([]) umschlossen. Wenn ein Array mit einem Array Literal erstellt wird, wird das Array mit allen definierten Elementen initialisiert und die länge des Arrays wird auf die Menge der Elemente gesetzt.

- -

Das folgende Beispiel erstellt das coffees Array mit drei Elementen und der Länge drei:

- -
var coffees = ["French Roast", "Colombian", "Kona"];
-
- -
-

Hinweis: Ein Array Literal ist eine Art von Objektinitialisierung. Sie dazu auch den Einsatz von Objektinitialisierern.

-
- -

Wenn ein Array durch ein Literal im Toplevel Skript erstellt wird, interpretiert JavaScript das Array immer dann, wenn ein Ausdruck dieses Literal enthält. Im Gegensatz dazu wird ein Literal in einer Funktion immer neu erstellt, wenn die Funktion aufgerufen wird.

- -

Array Literale sind ebenfalls Array Objekte. Für mehr Details siehe {{jsxref("Array")}} und Indexed collections.

- -

Extra Kommas in Array Literalen

- -

Man muss nicht alle Elemente in einem Array Literal spezifizieren. Wenn man zwei Kommas in einer Reihe verwendet, wird das Array mit einem undefined Element erstellt. Das folgende Beispiel erstellt das fish Array:

- -
var fish = ["Lion", , "Angel"];
-
- -

Dieses Array hat zwei Elemente mit Werten und ein leeres Element (fish[0] ist "Lion", fish[1] ist undefined und fish[2] ist "Angel").

- -

Wenn man ein trennendes Komma am Ende der Elementliste hinzufügt, wird es ignoriert. Im folgenden Beispiel ist die Länge des Arrays drei. Es gibt kein myList[3]. Alle weiteren Kommas in der Liste führen zu einem neuen Element.

- -
-

Hinweis: Trennende Kommas können in älteren Browserversionen zu Fehlern führen. Zudem ist es ein guter Stil diese Kommas zu entfernen.

-
- -
var myList = ['home', , 'school', ];
-
- -

Im folgenden Beispiel hat das Array vier Elemente und myList[0] und myList[2] sind nicht spezifiziert.

- -
var myList = [ , 'home', , 'school'];
-
- -

Im folgenden Beispiel hat das Array vier Elemente und myList[1] und myList[3] sind nicht spezifiziert. Nur das letzte Komma wird ignoriert.

- -
var myList = ['home', , 'school', , ];
-
- -

Das Verständnis für das Verhalten von extra Kommas ist wichtig, um JavaScript als Sprache zu verstehen. Immer, wenn man seinen eigenen Quelltext schreibt, sollten explizit fehlenden Elementen mit undefined deklariert werden, damit die Lesbarkeit und Wartbarkeit des Quelltextes besser ist.

- -

Boolean Literale

- -

Der Boolean Typ hat zwei Literale: true und false.

- -

Man sollte die primitiven Werte true und false jedoch nicht mit den Werten true und false des Boolean Objektes verwechseln. Das Boolean Objekt ist eine Hülle um den primitiven Boolean Datentypen. Siehe im Artikel {{jsxref("Boolean")}} für weitere Informationen.

- -

Numerische Literale

- -

Ganze Zahlen können als Dezimal- (Basis 10), Hexadezimal- (Basis 16), Oktal- (Basis 8) und Binärzahl (Basis 2) ausgedrückt werden.

- - - -

Im folgenden Beispiel sind einige Beispiele für Zahlenliterale:

- -
0, 117 und -345 (dezimal, Basis 10)
-015, 0001 und -0o77 (oktal, Basis 8)
-0x1123, 0x00111 und -0xF1A7 (hexadezimal, "hex", Base 16)
-0b11, 0b0011 und -0b11 (binär, Basis 2)
-
- -

Für weitere Informationen siehe numerische Literale in der Lexikalischen Grammatik Referenz.

- -

Gleitkomma Literale

- -

Ein Gleitkomma Literal kann die folgenden Abschnitte beinhalten:

- - - -

Der Exponent besteht aus einem "e" oder "E" gefolgt von einer ganzen Zahl, die mit einem Vorzeichen ("+" oder "-") versehen sein kann. Eine Gleitkommazahl muss mindestens aus einer Ziffer und entweder einem Dezimalpunkt oder einem "e" (oder "E") bestehen.

- -

Kurz und knapp sieht die Syntax folgendermaßen aus:

- -
[(+|-)][ziffern][.ziffern][(E|e)[(+|-)]ziffern]
-
- -

Zum Beispiel:

- -
3.1415926
--.123456789
--3.1E+12
-.1e-23
-
- -

Objekt Literale

- -

Ein Objekt Literal ist eine Liste von null oder mehr Paaren von Eigenschaftsnamen und -werten, umschlossen von geschweiften Klammern ({}). Man sollte kein Objektliteral am Anfang eines Statements benutzen. Das wird zu einem Fehler führen oder nicht wie erwartet funktionieren, weil das {-Zeichen als Anfang eines Blocks interpretiert wird.

- -

Es folgt ein Beispiel für ein Objekt Literal. Das erste Element des car Objektes definiert eine Eigenschaft myCar und beschreibt diese mit einem neuen String "Saturn". Am zweiten Element, der getCar Eigenschaft, wird der Rückgabewert der aufgerufenen Funktion carTypes("Honda") zugewiesen. Das dritte Element, die special Eigenschaft, benutzt eine existierende Variable sales.

- -
var sales = "Toyota";
-
-function carTypes(name) {
-  if (name === "Honda") {
-    return name;
-  } else {
-    return "Sorry, we don't sell " + name + ".";
-  }
-}
-
-var car = {
-  myCar: "Saturn",
-  getCar: carTypes("Honda"),
-  special: sales
-};
-
-console.log(car.myCar);   // Saturn
-console.log(car.getCar);  // Honda
-console.log(car.special); // Toyota
-
- -

Für die Namen der Eigenschaften kann auch ein String oder ein Zahlen Literal verwendet werden. Für den Wert kann auch ein verschachteltes Objekt Literal genutzt werden. Das folgende Beispiel nutzt diese Optionen.

- -
var car = { manyCars: {a: 'Saab', b: 'Jeep'}, 7: 'Mazda' };
-
-console.log(car.manyCars.b); // Jeep
-console.log(car[7]); // Mazda
-
- -

Die Namen von Objekteigenschaften können ein String sein, was auch den leeren String beinhaltet. Wenn die Eigenschaftsnamen keine gültigen JavaScript {{Glossary("Identifier","Bezeichner")}} sind, müssen sie in Anführungszeichen geschrieben werden. Eigenschaftsnamen die keine gültigen Bezeichner sind, können nicht mit der Punktschreibweise (.) erreicht werden. Wohl aber mit der Array ähnlichen Notation ("[]").

- -
var unusualPropertyNames = {
-  "": "An empty string",
-  "!": "Bang!"
-}
-console.log(unusualPropertyNames."");   // SyntaxError: Unexpected string
-console.log(unusualPropertyNames[""]);  // An empty string
-console.log(unusualPropertyNames.!);    // SyntaxError: Unexpected token !
-console.log(unusualPropertyNames["!"]); // Bang!
- -

Erweiterte Objekt Literale

- -

In ES2015 wurde das Objekt Literal dahingehend erweitert, dass der Prototyp bei der Erstellung gesetzt wird. Desweiteren sind neue Funktionalitäten hinzugekommen, die eine Kurzschreibweise für foo: foo Zuweisungen, die Definitionen für Methoden, das Aufrufen von super Methoden und die Berechnung der Eigenschaftsnamen mit Ausdrücken ermöglichen. Alle diese Funktionen bringen zum Einen Klassendefinition und Objekt Literale näher zusammen und sind somit objektbasiertes Design und zum Anderen häufig vorteilhafter und bequemer.

- -
var obj = {
-    // __proto__
-    __proto__: theProtoObj,
-    // Shorthand for ‘handler: handler’
-    handler,
-    // Methods
-    toString() {
-     // Super calls
-     return "d " + super.toString();
-    },
-    // Computed (dynamic) property names
-    [ 'prop_' + (() => 42)() ]: 42
-};
- -

Bitte beachten:

- -
var foo = {a: "alpha", 2: "two"};
-console.log(foo.a);    // alpha
-console.log(foo[2]);   // two
-//console.log(foo.2);  // Error: missing ) after argument list
-//console.log(foo[a]); // Error: a is not defined
-console.log(foo["a"]); // alpha
-console.log(foo["2"]); // two
-
- -

RegExp Literale

- -

Ein RegExp Literal (welcher im Detail später erklärt wird) ist ein Pattern (Muster) umschlossen von Slashes (/). Das Folgende ist ein Beispiel für ein RegExp Literal:

- -
var re = /ab+c/;
- -

String Literale

- -

Ein String Literal besteht aus null oder mehr Zeichen, die von doppelten (") oder einfachen (') Anführungszeichen umschlossen sind. Ein String muss immer von gleichen Anführungszeichen umschlossen sein. Entweder von einfachen oder von doppelten Anführungszeichen. Im folgenden Beispiel sind ein paar String Literale gezeigt:

- -
"foo"
-'bar'
-"1234"
-"eine Zeile \n weitere Zeile"
-"John's cat"
-
- -

Man kann alle Methoden des String Objektes auf einem String Literal aufrufen, denn JavaScript konvertiert das Literal automatisch in ein temporäres String Objekt, führt die Methode aus und verwirft danach das temporäre Objekt. Man kann auch die String.length Eigenschaft mit einem String Literal benutzen:

- -
console.log("John's cat".length)
-// Wird die Anzahl der Zeichen (auch Leerzeichen) ausgeben.
-// In diesem Fall 10.
-
- -

In ES2015, wurden zudem Template Literale eingeführt. Template Literale sind von Backticks (` `) (Gravis) umschlossen. Template Strings bieten syntaktischen Zucker für das Erstellen von Strings an. Sie sind vergleichbar mit den String Interpolations Funktionen in Perl, Python und anderen Sprachen. Optional können Marken eingefügt werden, um einen String benutzerdefiniert zu erstellen. Sie vermeiden Injection-Attacken und ermöglichen es Datenstrukturen in Strings unterzubringen.

- -
// Standardliteral für die String erstellung
-`In JavaScript '\n' is a line-feed.`
-
-// Mehrzellige Strings
-`In JavaScript ist das
- nicht erlaubt.`
-
-// String Interpolation
-var name = "Bob", time = "today";
-`Hello ${name}, how are you ${time}?`
-
-// Erstellung einer HTTP Anfrage.
-POST`http://foo.org/bar?a=${a}&b=${b}
-     Content-Type: application/json
-     X-Credentials: ${credentials}
-     { "foo": ${foo},
-       "bar": ${bar}}`(myOnReadyStateChangeHandler);
- -

Man sollte String Literale benutzen, sofern man nicht explizit ein Objekt benötigt. Für weitere Informationen siehe im {{jsxref("String")}} Artikel nach.

- -

Einsatz von Sonderzeichen in Strings

- -

Neben den normalen Zeichen ist es auch möglich Sonderzeichen in einem String zu verwenden. Ein Beispiel ist im folgenden zu sehen:

- -
"eine Zeile \n nächste Zeile"
-
- -

Die folgende Tabelle Zeigt die Sonderzeichen, die in JavaScript Strings verwendet werden können:

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Table: JavaScript Sonderzeichen
ZeichenBedeutung
\0Null Byte
\bBackspace
\fForm feed
\nNew line
\rCarriage return
\tTab
\vVertical tab
\'Einfache Anführungszeichen
\"Doppelte Anführungszeichen
\\Backslash Zeichen
\XXXDas Zeichen, das im Latin-1 Encoding mit drei Oktalzahlen (XXX) Spezifiziert wird (0 bis 377). Zum Beispiel ist \251 die Oktalsequenz für das Copyrightsymbol.
\xXXZeichen, die im Latin-1 Encoding mit zwei Hexadezimalzahlen (XX) spezifiziert werden (00 bis FF). Zum Beispiel ist \xA9 die Hexadezimalsequenz für das Copyrightsymbol.
\uXXXXDie Unicode Zeichen, die mit vier Hexadezimalziffern XXXX beschreiben werden. Zum Beispiel ist \u00A9 die Hexadezimalsequenz für das Copyrightsymbol. Siehe Unicode escape Sequenzen.
\u{XXXXX}Unicode code point escapes. Zum Beispiel ist \u{2F804} das gleiche wie das einfache Unicodezeichen \uD87E\uDC04.
- -

Escaping Zeichen

- -

Für nicht in der Tabelle gezeigte Zeichen wird ein voranstehendes Backslash ignoriert. Der Einsatz von Backslashs ist Veraltet und sollte vermieden werden.

- -

Man kann Anführungszeichen in einen String hinzufügen, indem ein Führendes Backslash eingesetzt wird. Das wird auch escaping der Anführungszeichen genannt. Ein Beispiel:

- -
var quote = "He read \"The Cremation of Sam McGee\" by R.W. Service.";
-console.log(quote);
-
- -

Das Ergebnis ist:

- -
He read "The Cremation of Sam McGee" by R.W. Service.
-
- -

Um ein Backslash in einem String zu verwenden, muss dieses mit einem Backslash escaped werden. Zum Beispiel muss der Pfad c:\temp wie folgt geschrieben werden:

- -
var home = "c:\\temp";
-
- -

Man kann zudem Zeilenumbrüche mit einem vorangegangenen Backslash escapen. Das Backslash und der Zeilenumbruch werden aus dem String entfernt.

- -
var str = "this string \
-is broken \
-across multiple\
-lines."
-console.log(str);   // this string is broken across multiple lines.
-
- -

JavaScript kennt keine "heredoc" Syntax. Um eine solche zu simulieren muss am Ende jeder Zeile mit einem Zeilenumbruch (\n) ein Backslash stehen:

- -
var poem =
-"Roses are red,\n\
-Violets are blue.\n\
-Sugar is sweet,\n\
-and so is foo."
-
- -

ECMAScript 2015 führte einen neuen Literaltyp, das Template Literal, ein. Dieses führte, für viele neue Funktionen, Strings mit mehrere Zeilen ein!

- -
var poem =
-`Roses are red,
-Violets are blue.
-Sugar is sweet,
-and so is foo.`
-
- -

Mehr Informationen

- -

Dieses Kapitel beschränkt sich auf die Basissyntax für Deklarationen und Typen. Um mehr über die Sprachkonstrukte von JavaScript zu lernen siehe in die folgenden Kapitel dieses Guides:

- - - -

Im nächsten Kapitel wird ein Blick auf Kontrollflüsse und Fehlerbehandlungen geworfen.

- -

{{PreviousNext("Web/JavaScript/Guide/Einführung", "Web/JavaScript/Guide/Kontrollfluss_und_Fehlerbehandlung")}}

diff --git a/files/de/web/javascript/guide/introduction/index.html b/files/de/web/javascript/guide/introduction/index.html new file mode 100644 index 0000000000..b38cb1b700 --- /dev/null +++ b/files/de/web/javascript/guide/introduction/index.html @@ -0,0 +1,140 @@ +--- +title: Einführung +slug: Web/JavaScript/Guide/Einführung +tags: + - Beginner + - Guide + - Introduction + - JavaScript + - 'l10n:priority' +translation_of: Web/JavaScript/Guide/Introduction +--- +
{{jsSidebar("JavaScript Guide")}} {{PreviousNext("Web/JavaScript/Guide", "Web/JavaScript/Guide/Grammatik_und_Typen")}}
+ +

Dieses Kapitel stellt JavaScript vor und behandelt einige grundlegende Konzepte.

+ +

Was solltest du bereits wissen

+ +

Für diese Einführung solltest du die folgenden Grundkenntnisse besitzen:

+ + + +

Wo findest du Informationen zu JavaScript

+ +

Die Dokumentation zu JavaScript im MDN umfasst Folgendes:

+ + + +

Falls du dich das erste Mal mit JavaScript befasst, beginne einfach mit den Tutorials von Learning the Web [de] und dem JavaScript Guide [de]. Sobald du mit den ersten Grundlagen vertraut bist, kannst du die JavaScript Referenz [de] nutzen, um noch mehr über die einzelnen Methoden, Funktionen und Objekte von JavaScript zu erfahren.

+ +

Was ist JavaScript?

+ +

JavaScript ist eine plattformübergreifende, objektorientierte Skriptsprache. Es ist eine kompakte und ressourcenschonende Sprache. Innerhalb einer Host-Umgebung kann JavaScript mit den Objekten seiner Umgebung verknüpft werden, um diese programmatisch zu steuern.

+ +

JavaScript beinhaltet eine Standardbibliothek von Objekten wie Array, Date, und Math, sowie einen Kern an Sprachelementen wie Operatoren, Kontrollstrukturen und Anweisungen. Der JavaScript-Kern kann für eine Vielzahl von Anwendungsfällen erweitert werden, indem man ihn durch zusätzliche Objekte ergänzt. Beispiele:

+ + + +

JavaScript und Java

+ +

JavaScript und Java gleichen einander in manchen Aspekten, sind in anderen aber grundlegend verschieden. Die Sprache JavaScript ähnelt Java, verfügt jedoch nicht über Javas statische Typisierung und seine strenge Typprüfung. JavaScript folgt weitgehend der Ausdruckssyntax, den Namenskonventionen und den elementaren Kontrollstrukturen von Java, was der Grund für die Umbenennung von LiveScript in JavaScript gewesen ist.

+ +

Im Gegensatz zu Javas durch Deklarationen aufgebautes System, von zur Compile-Zeit verfügbaren Klassen, unterstützt JavaScript ein Laufzeitsystem, das auf einer kleinen Zahl an Datentypen basiert, die numerische und Boolesche Werte sowie Zeichenketten repräsentieren. JavaScript besitzt ein prototypen-basiertes Objektmodell anstatt des verbreiteteren klassenbasierten. Das prototypen-basierte Modell liefert dynamische Vererbung; das bedeutet, was vererbt wird, kann zwischen einzelnen Objekten variieren. JavaScript unterstützt zudem Funktionen ohne spezielle deklarative Anforderungen. Funktionen können Objekt Eigenschaften sein, ausgeführt als schwach typisierte Methoden.

+ +

JavaScript ist im Vergleich zu Java eine syntaktisch sehr freie Sprache. Sie müssen nicht alle Variablen, Klassen und Methoden deklarieren. Sie müssen sich nicht damit befassen, ob Methoden öffentlich, privat oder geschützt sind und Sie müssen keine Interfaces implementieren. Variablen, Parameter und Rückgabewerte von Funktionen sind nicht explizit typisiert.

+ +

Java ist eine auf schnelle Ausführung und Typsicherheit ausgelegte, klassenbasierte Programmiersprache. Typsicherheit bedeutet, dass Sie zum Beispiel keine Ganzzal in Java in eine Objektreferenz wandeln oder auf geschützten Speicher zugreifen können, indem Sie den Bytecode von Java manipulieren. Javas klassenbasiertes Modell bedeutet, dass Programme ausschließlich aus Klassen und ihren Methoden bestehen. Javas Klassenvererbung und strenge Typisierung erfordern im Allgemeinen eng gekoppelte Objekthierarchien. Wegen dieser Anforderungen ist das Programmieren in Java komplexer als in JavaScript.

+ +

Im Gegensatz dazu steht JavaScript in der Tradition einer Reihe kleiner, dynamisch typisierter Sprachen wie HyperTalk und dBase. Diese Skriptsprachen stellen, dank ihrer einfacheren Syntax, spezialisierter eingebauter Funktionalität und minimalen Anforderungen, für die Objektgenerierung Programmierwerkzeuge für einen deutlich breiteren Adressatenkreis zu Verfügung.

+ + + + + + + + + + + + + + + + + + + + + + + +
JavaScript im Vergleich zu Java
JavaScriptJava
Objektorientiert. Keine Unterscheidung zwischen Typen von Objekten. Vererbung mittels des Prototypen-Mechanismus, jedes beliebige Objekt kann dynamisch um Eigenschaften und Methoden erweitert werden.Klassenbasiert. Objekte werden in Klassen und Instanzen unterteilt, Vererbung erfolgt vollständig über die Klassenhierarchie. Klassen und Instanzen können keine Eigenschaften und Methoden dynamisch hinzugefügt werden.
Datentypen von Variablen werden nicht deklariert (dynamische Typisierung)Datentypen von Variablen müssen deklariert werden (statische Typisierung)
Kein automatischer Schreibzugriff auf die Festplatte.Kein automatischer Schreibzugriff auf die Festplatte.
+ +

Weitere Informationen zu den Unterschieden zwischen JavaScript und Java finden Sie im Kapitel Einzelheiten des Objektmodells.

+ +

JavaScript und die ECMAScript-Spezifikation

+ +

JavaScript wird durch Ecma International standardisiert — den europäischen Verband zur Standardisierung von Informations- und Telekommunikationssystemen (ECMA war vormals ein Akronym für 'European Computer Manufacturers Association'), um eine standardisierte, internationale Programmiersprache auf der Basis von JavaScript verfügbar zu machen. Diese standardisierte Version von JavaScript, genannt ECMAScript, verhält sich in allen standardkonformen Applikationen identisch. Unternehmen können die offene Sprachdefinition verwenden, um ihre eigene Implementierung von JavaScript zu entwickeln. Der ECMAScript-Standard ist in der Spezifikation ECMA-262 dokumentiert. Unter Neu in JavaScript erfahren Sie mehr über die unterschiedlichen Versionen von JavaScript und den ECMAScript-Spezifikationen.

+ +

ECMA-262 ist auch von der ISO (International Organization for Standardization) als ISO-16262 verabschiedet. Sie finden die Spezifikation auch auf der Website von Ecma International. Die Spezifikation von ECMAScript beschreibt nicht das Document Object Model (DOM), welches durch das World Wide Web Consortium (W3C) und der WHATWG (Web Hypertext Application Technology Working Group) standardisiert wird. Das DOM definiert die Art und Weise, in der HTML-Dokumentenobjekte für Ihr Skript sichtbar sind. Um ein besseres Verständnis der verschiedenen bei der Programmierung in JavaScript eingesetzten Technologien zu entwickeln, lesen Sie den Artikel JavaScript Technologieübersicht.

+ +

JavaScript-Dokumentation vs. ECMAScript-Spezifikation

+ +

Die Spezifikation von ECMAScript besteht aus Anforderungen an eine Implementierung von ECMAScript; sie ist zweckdienlich, falls Sie standardkonforme Spracheigenschaften in Ihrer ECMAScript-Implementierung oder ihrer Laufzeitumgebung (wie SpiderMonkey in Firefox oder v8 in Chrome) realisieren wollen.

+ +

Das ECMAScript-Dokument soll nicht den Skriptprogrammierer unterstützen; nutzen Sie für Informationen zum Erstellen von Skripten die JavaScript-Dokumentation.

+ +

Die ECMAScript-Spezifikation verwendet Terminologie und Syntax, mit der JavaScript-Programmierer möglicherweise nicht vertraut sind. Obwohl sich die Beschreibung der Sprache in ECMAScript unterscheiden kann, bleibt die Sprache selbst die gleiche. JavaScript unterstützt jede Funktionalität, die in der ECMAScript-Spezifikation genannt wird.

+ +

Die JavaScript-Dokumentation beschreibt Aspekte der Sprache in für JavaScript-Programmierer passender Form.

+ +

Erste Schritte mit JavaScript

+ +

Die ersten Schritte mit JavaScript sind einfach: alles was Sie brauchen, ist einen aktuellen Browser. Diese Einführung nimmt auf einige Spracheigenschaften von JavaScript Bezug, die zur Zeit nur in den jüngsten Versionen von Firefox verfügbar sind, somit wird die Nutzung der aktuellsten Firefox-Version empfohlen.

+ +

Es gibt zwei Werkzeuge in Firefox, die zum Experimentieren mit JavaScript nützliche sind: die Web-Konsole and die JavaScript-Umgebung.

+ +

Die Web-Konsole

+ +

Die Web-Konsole zeigt Ihnen Informationen zur aktuell geladenen Webseite an und beinhaltet zudem eine Kommandozeile, die Sie nutzen können, um JavaScript-Ausdrücke im Kontext der aktuellen Seite auszuführen.

+ +

Um die Web-Konsole zu öffnen (Ctrl+Shift+K), wählen Sie "Web-Konsole" im Menü "Entwicklerwerkzeuge", das Sie im Menü von Firefox finden. Die Konsole wird am unteren Rand des Browserfensters angezeigt. Entlang des unteren Randes der Konsole befindet sich die Kommandozeile, in der Sie JavaScript eingeben können; die zugehörige Ausgabe erscheint im darüberliegenden Fensterbereich:

+ +

+ +

JavaScript-Umgebung (Scratchpad)

+ +

Die Web-Konsole eignet sich hervorragend zur Ausführung einzelner Zeilen JavaScript, möchten Sie jedoch mehrere Zeilen ausführen können, ist das nicht besonders komfortabel und Ihren Beispielcode speichern können Sie mit der Web-Konsole auch nicht. Daher ist für komplexere Beispiele die JavaScript-Umgebung die bessere Wahl.

+ +

Um die JavaScript-Umgebung zu öffnen (Shift+F4), wählen Sie "JavaScript-Umgebung" aus dem Menü "Entwicklerwerkzeuge", das Sie im Firefox-Menü finden. Die JavaScript-Umgebung öffnet sich in einem eigenen Fenster als Editor, mit dem Sie JavaScript schreiben und im Browser ausführen können. Sie können auch Skripte auf der Festplatte speichern bzw. laden.

+ +

+ +

Hello world

+ +

Beginnen Sie mit dem Programmieren in JavaScript, indem Sie die JavaScript-Umgebung öffnen und Ihr erstes "Hello World"-Programm in JavaScript schreiben:

+ +
function greetMe(yourName) {
+  alert("Hello " + yourName);
+}
+
+greetMe("World");
+
+ +

Markieren Sie den Quelltext und drücken Sie Ctrl+R, um zu schauen, ob alles funktioniert.

+ +

Auf den folgenden Seiten macht Sie diese Einführung mit Syntax und Spracheigenschaften von JavaScript vertraut, sodass Sie bald komplexere Anwendungen schreiben können.

+ +

{{PreviousNext("Web/JavaScript/Guide", "Web/JavaScript/Guide/Grammatik_und_Typen")}}

diff --git a/files/de/web/javascript/guide/kontrollfluss_und_fehlerbehandlung/index.html b/files/de/web/javascript/guide/kontrollfluss_und_fehlerbehandlung/index.html deleted file mode 100644 index 97dbba8b3e..0000000000 --- a/files/de/web/javascript/guide/kontrollfluss_und_fehlerbehandlung/index.html +++ /dev/null @@ -1,430 +0,0 @@ ---- -title: Kontrollfluss und Fehlerbehandlung -slug: Web/JavaScript/Guide/Kontrollfluss_und_Fehlerbehandlung -tags: - - Beginner - - Guide - - JavaScript - - 'l10n:priority' -translation_of: Web/JavaScript/Guide/Control_flow_and_error_handling ---- -
{{jsSidebar("JavaScript Guide")}} {{PreviousNext("Web/JavaScript/Guide/Grammatik_und_Typen", "Web/JavaScript/Guide/Schleifen_und_Iterationen")}}
- -

JavaScript unterstützt eine Menge von Anweisungen, speziell um Verlaufs-Anweisungen zu kontrollieren, welches eine großartige Methode ist um Interaktivität in deine Anwendung einzuarbeiten. Dieses Kapitel liefert dir ein Überblick über diese Anweisungen.

- -

Die JavaScript Referenzen beinhalten umfassende Details über die Anweisungen in diesem Kapitel. Das Semikolon (;) als Zeichen wird genutzt um Anweisungen im JavaScript Code einzuteilen.

- -

Jeder JavaScript Ausdruck ist auch eine Anweisung. Schau ebenfalls in Ausdrücke und Operatoren, um komplette Informationen über Ausdrücke zu erhalten.

- -

Block-Anweisungen

- -

Das einfachste Statement ist das Block-Statement, welches genutzt wird um Anweisungen zu gruppieren. Dieser Block wird von einem Paar geschweiften Klammer umschlossen:

- -
{
-  statement_1;
-  statement_2;
-  .
-  .
-  .
-  statement_n;
-}
-
- -

Beispiele

- -

Block-Statements werden meistens mit Kontrollfluss-Statements genutzt (z. B. if, for, while).

- -
while (x < 10) {
-  x++;
-}
-
- -

Hier ist, { x++; } das Block-Statement.

- -

Wichtig: JavaScript hat vor ECMAScript2015 keine Block-Scopes. Variablen, die in einem Block deklariert werden, gehören zu der Funktion oder dem Skript und das Beschreiben der Variablen führt dazu, dass diese über den Block hinaus verfügbar ist. In anderen Worten, Block-Statements definieren keinen Scope. Alleinstehende Blöcke in JavaScript können komplett andere Ergebnisse erzeugen als in C oder Java. Zum Beispiel:

- -
var x = 1;
-{
-  var x = 2;
-}
-console.log(x); // outputs 2
-
- -

Hier wird 2 ausgegeben, weil var x innerhalb des Blocks im gleichen Scope ist wie das var x vor dem Block. In C oder Java hätte der selbe Code 1 ausgegeben.

- -

Seit ECMAScript2015 sind let und const Variablendeklarationen, die an den Block gebunden sind. Siehe dazu auch die Referenzseiten {{jsxref("Statements/let", "let")}} und {{jsxref("Statements/const", "const")}} an.

- -

Bedingte Statements

- -

Ein bedingtes Statement ist eine Menge von Befehlen, die ausgeführt werden, wenn eine Bedingung wahr ist. JavaScript unterstützt zwei bedingte Statements: if...else und switch.

- -

if...else Anweisungen

- -

if wird eingesetzt um Statements auszuführen, wenn eine logische Bedingung wahr wird. Mit der optionalen else-Klausel werden Statements ausgeführt, wenn die Bedingung falsch ist. Ein if-Block sieht folgendermaßen aus:

- -
if (bedingung) {
-  statement_1;
-} else {
-  statement_2;
-}
- -

Hier kann die Bedingung ein Ausdruck sein, der zu true oder false ausgewertet wird. Siehe Boolean nach, um zu erfahren, was zu true und was zu false ausgewertet wird. Wenn bedingung zu true ausgewertet wird, wird statement_1 ausgeführt. Andernfalls wird statement_2 ausgeführt. statement_1 und statement_2 können beliebige Statements sein, auch weitere if-Statements.

- -

Man kann zudem Statements mit else if konstruieren, um mehrere Bedingungen sequentiell zu testen:

- -
if (bedingung_1) {
-  statement_1;
-} else if (bedingung_2) {
-  statement_2;
-} else if (bedingung_n) {
-  statement_n;
-} else {
-  statement_last;
-}
-
- -

Um mehrere Statements auszuführen, werden diese in Blockstatements gruppiert ({ ... }). Generell ist es guter Stil immer Block-Statements zu benutzen, besonders bei verschachtelten if-Statements.

- -
if (bedingung) {
-  statement_1_runs_if_condition_is_true;
-  statement_2_runs_if_condition_is_true;
-} else {
-  statement_3_runs_if_condition_is_false;
-  statement_4_runs_if_condition_is_false;
-}
-
- -

Es ist ratsam, keine einfachen Zuweisungen in Bedingungen zu verwenden, da die Zuordnung mit der Prüfung auf Gleichheit verwechselt werden kann, wenn man über den Code schaut. Verwenden Sie zum Beispiel den folgenden Code nicht:

- -
if (x = y) {
-  /* statements here */
-}
-
- -

Wenn eine Zuweisung in einer Bedingung benötigt wird, ist es verbreitet diese in weitere runde Klammeren zu schreiben. Zum Beispiel:

- -
if ((x = y)) {
-  /* statements here */
-}
-
- -

Falsy Werte

- -

Die folgenden Werte werden zu false ausgewertet (auch bekannt als {{Glossary("Falsy")}} Werte):

- - - -

Alle anderen Werte, auch alle Objekte, werden zu true ausgewertet, wenn sie als Bedingung eingesetzt werden.

- -

Es ist jedoch etwas verwirrend mit den primitiven boolean Werten true und false und den Werten des {{jsxref("Boolean")}}-Objektes, wie folgendes Beispiel zeigt:

- -
var b = new Boolean(false);
-if (b)          // Die Bedingung wird zu true ausgewertet.
-if (b == true)  // Die Bedingung wird zu false ausgewertet.
- -

Beispiel

- -

Im folgenden Beispiel gibt die Funktion checkData true zurück, wenn die Anzahl der Zeichen in einem Text Objekt drei ist. Andernfalls wird ein Alert angezeigt, und false zurückgegeben.

- -
function checkData() {
-  if (document.form1.threeChar.value.length == 3) {
-    return true;
-  } else {
-    alert("Enter exactly three characters. " +
-    document.form1.threeChar.value + " is not valid.");
-    return false;
-  }
-}
-
- -

switch Statement

- -

Ein switch Statement erlaubt es einen Ausdruck auszuwerten und das Resultat zu einem passenden Fall-Label (case-Label ) zuzuordnen. Wenn ein passendes Fall-Label gefunden wird, werden die zugehörigen Statements ausgeführt. Ein switch Statement sieht wie folgt aus:

- -
switch (ausdruck) {
-  case label_1:
-    statements_1
-    [break;]
-  case label_2:
-    statements_2
-    [break;]
-    ...
-  default:
-    statements_def
-    [break;]
-}
-
- -

Das Programm sucht als erstes nach eine case-Klausel mit einem Label, welches mit dem Wert des Ausgewerteten Ausdrucks übereinstimmt und gibt die Kontrolle zu dieser Klausel, was bedeutet, dass die zugehörigen Statements ausgeführt werden. Wenn kein passendes Label gefunden wird, sucht das Programm nach der optionalen default-Klausel und gibt die Kontrolle an diese, was bedeutet, dass die zugehörigen Statements ausgeführt werden. Wenn keine default-Klausel vorhanden ist, wird das switch beendet und das nächste Statement wird ausgeführt. Laut Konventionen ist die default-Klausel die letzte Klausel, das muss aber nicht immer so sein.

- -

Das optionale break Statement, welches in jeder case-Klausel eingesetzt ist, sorgt daführ, dass nach der Klausel das switch Statement beendet wird und das Programm mit dem nachfolgenden Statement weiter macht. Wenn break weggelassen wird, wird das Programm mit dem nächsten Statement im switch weitermachen, was dazu führt, dass alle nachlogenden case-Klauseln und die optionale default-Klausel mit ausgeführt werden.

- -

Beispiel

- -

Im folgenden Beispiel wird der case "Bananas" ausgeführt, wenn fruittype zu "Bananas" ausgewertet wird. Die break Statements bewirken, dass das switch beendet wird und das nach switch stehende Statement ausgeführt wird. Wird break im case "Bananas" weggelassen, so wird der case "Cherries" mit ausgeführt.

- -
switch (fruittype) {
-  case 'Oranges':
-    console.log('Oranges are $0.59 a pound.');
-    break;
-  case 'Apples':
-    console.log('Apples are $0.32 a pound.');
-    break;
-  case 'Bananas':
-    console.log('Bananas are $0.48 a pound.');
-    break;
-  case 'Cherries':
-    console.log('Cherries are $3.00 a pound.');
-    break;
-  case 'Mangoes':
-    console.log('Mangoes are $0.56 a pound.');
-    break;
-  case 'Papayas':
-    console.log('Mangoes and papayas are $2.79 a pound.');
-    break;
-  default:
-   console.log('Sorry, we are out of ' + fruittype + '.');
-}
-console.log("Is there anything else you'd like?");
- -

Statements zur Fehler- bzw. Ausnahmebehandlung

- -

Man kann mit dem throw Statement Fehler werfen (erzeugen) und diese mit dem Einsatz des try...catch Statements auffangen und verarbeiten.

- - - -

Ausnahmetypen

- -

Jedes Objekt in JavaScript kann als Fehler bzw. Ausnahme geworfen werden. Nicht alle Fehlerobjekte müssen auf die gleiche Art und Weise erstellt worden sein. Trotz des häufig Einsatzes von Zahlen oder Strings als Ausnahmen ist es deutlich effektiver die speziell für Ausnahmen erstellten Typen zu benutzen:

- - - -

throw Statement

- -

Das throw Statement wird benutzt, um eine Exception (Ausnahme / Fehler) zu werfen. Wenn eine Exception geworfen wird, so wird ein Ausdruck spezifiziert, welcher den Wert, welcher geworfen wird, spezifiziert:

- -
throw ausdruck;
-
- -

Man kann jeden Ausdruck werfen, nicht nur Ausdrücke eines bestimmten Typs. Der folgende Code wirft mehrere Ausnahmen verschiedenen Typs:

- -
throw "Error2";   // String type
-throw 42;         // Number type
-throw true;       // Boolean type
-throw {toString: function() { return "I'm an object!"; } };
-
- -
Notiz: Man kann ein Objekt beim Werfen einer Exception spezifizieren. Im catch Block können die Eigenschaften des Objektes referenziert werden.
- -
// Erstellt ein Objekt vom Typ UserException
-function UserException (message){
-  this.message=message;
-  this.name="UserException";
-}
-
-// Macht die Konvertierung der Exception in einen schönen String, wenn die Exception
-// als String genutzt werden soll.
-// (z. B. in der Fehlerconsole)
-UserException.prototype.toString = function () {
-  return this.name + ': "' + this.message + '"';
-}
-
-// Erstellt eine Instanz der UserException und wirft diese
-throw new UserException("Value too high");
- -

try...catch Statement

- -

Das try...catch Statement markiert einen Block von Statements, welcher versucht wird auszuführen, und einen oder mehrere Blöcke welche auf geworfene Exceptions abfangen. Wenn eine Exception geworfen wird, fängt das try...catch Statements diese ab.

- -

Das try...catch Statement besteht aus einem try Block, welcher ein oder mehrere Statements enthält, und null oder mehr catch Blöcken, welche Statements spezifizieren, welche eine im try Block geworfene Exception abfangen und behandeln. Das Statement versucht den try Block erfolgreich abzuarbeiten und wenn dieser nicht erfolgreich ist, wird die Kontrolle an den catch Block gegeben. Wenn ein Statement in dem try Block (oder eine im try Block aufgerufene Funktion) eine Exception wirft, wird der Kontrollfluss sofort an den catch Block übergeben. Wenn keine Exception im try Block geworfen wird, wird der catch Block übersprungen. Der optionale finally Block wird nach dem try und nach dem catch Block ausgeführt, bevor das auf das try...catch Statement folgenden Statement ausgeführt wird.

- -

Das Folgende Beispiel benutzt ein try...catch Statement. Das Beispiel ruft eine Funktion auf, welche einen Monatsnamen aus einen Array zurückgibt, je nachdem, welcher Wert übergeben wurde. Wenn der übergebene Wert keine korrekte Monatsnummer ist (1 - 12), dann wird eine Exception mit dem Wert "InvalidMonthNo" geworfen und die Statements im catch Block setzen die monthName Variable auf unknown.

- -
function getMonthName (mo) {
-  mo = mo-1; // Justiert Monatsnummer zu Arrayindex (1=Jan, 12=Dec)
-  var months = ["Jan","Feb","Mar","Apr","May","Jun","Jul",
-                "Aug","Sep","Oct","Nov","Dec"];
-  if (months[mo] != null) {
-    return months[mo];
-  } else {
-    throw "InvalidMonthNo"; // throw Schlüsselwort wird hier benutzt
-  }
-}
-
-try { // statements to try
-  monthName = getMonthName(myMonth); // Funktion die Exceptions werfen kann
-}
-catch (e) {
-  monthName = "unknown";
-  logMyErrors(e); // Gibt Exception Objekt weiter für Fehlerbehandlung
-}
-
- -

Der catch Block

- -

Man kann einen catch Block einsetzen, um alle Exceptions, die im try Block generiert werden, zu verarbeiten.

- -
catch (catchID) {
-  statements
-}
-
- -

Der catch Block spezifiziert einen Variable (catchID im voranstehenden Syntaxbeispiel), welcher den Wert des throw Statements enthält. Man kann über diese Variable Informationen über die geworfene Exception abfragen. JavaScript erstellt diese Variable, wenn der Programmfluss in den catch Block geht. Die Variable existiert nur in dem catch Block. Nach dem beenden des catch Blocks ist die Variable nicht mehr verfügbar.

- -

Im nächsten Beispeil wird eine Exception geworfen. Wenn die Exception geworfen wird, wird der Programmfluss in den catch Block gegeben.

- -
try {
-  throw "myException" // Erstellt eine Exception
-}
-catch (e) {
-  // Statements, die die Exception verarbeiten
-  logMyErrors(e) // Verarbeitet Exception Objekt zur Fehlerbehandlung
-}
-
- -

Der finally Block

- -

Der finally Block enthält Statements, welche nach dem try und catch Block ausgeführt werden, bevor das Statement nach dem try...catch Statement ausgeführt wird. Der finally Block wird ausgeführt, egal ob eine Exception geworfen wird oder nicht. Wenn eine Exception geworfen wird, wird der finally auch ausgeführt, wenn kein catch die Exception abfängt.

- -

Man kann den finally Block benutzen, um Skripte fehlertoleranter zu gestalten. Zum Beispiel kann eine Ressource im finally Block geschlossen werden. Das Folgende Beispiel öffnet eine Datei und führt Statements aus, um die Datei zu benutzen (Serverseitiges JavaScript erlaubt Zugriffe auf Dateien). Wenn eine Exception geworfen wird, während die Datei geöffnet ist, sorgt der finally Block dafür, dass die Datei wieder geschlossen wird.

- -
openMyFile();
-try {
-  writeMyFile(theData); //Das kann Exceptions werfen
-} catch(e) {
-  handleError(e); // Wenn eine Exception geworfen wird, wird sie hier verarbeitet
-} finally {
-  closeMyFile(); // Schließt immer die Ressource
-}
-
- -

Wenn der finally Block einen Rückgabewert definiert, ist dieser der Rückgabewert des try-catch-finally Prozedur, unabhängig davon, ob return Statements im try und catch Block verwendet werden.

- -
function f() {
-  try {
-    console.log(0);
-    throw "bogus";
-  } catch(e) {
-    console.log(1);
-    return true; // Dieses return Statement is überflüssig
-                 // weil im finally Block ebenfalls eins vorhanden ist
-    console.log(2); // wird niemals erreicht
-  } finally {
-    console.log(3);
-    return false; // überschreibt früheres return Statements
-    console.log(4); // wird niemals erreicht
-  }
-  // false wird jetzt zurückgegeben
-  console.log(5); // wird niemals erreicht
-}
-f(); // alerts 0, 1, 3; returns false
-
- -

Das Überschreiben des Rückgabewertes durch den finally Block überschreibt auch geworfene Exceptions, wenn diese im catch geworfen werden.

- -
function f() {
-  try {
-    throw "bogus";
-  } catch(e) {
-    console.log('caught inner "bogus"');
-    throw e; // Dieses throw Statement is überflüssig
-             // weil im finally Block ein return vorkommt
-  } finally {
-    return false; // Überschreibt das vorherige "throw"
-  }
-  // false wird zurückgegeben
-}
-
-try {
-  f();
-} catch(e) {
-  // Dieser bereich wird nie erreicht, weil
-  // die Exception durch das return im
-  // finally block überschrieben wird.
-  console.log('caught outer "bogus"');
-}
-
-// OUTPUT
-// caught inner "bogus"
- -

Verschachtelte try...catch Statements

- -

Man kann mehrere try...catch Statements ineinander verschachteln. Wenn ein inneres try...catch Statements keinen catch Block hat, wird ein äußeres try...catch Statement mit einem catch Block eine Exception auffangen. Mehr Informationen gibt es im Kapitel Verschachtelte try-Blöcke auf der try...catch Seite.

- -

Nützliche Verwendung des Error Objekts

- -

Abhängig vom der Art des Fehlers, möchte man die Möglichkeit haben einen Namen und eine Fehlernachricht zu vergeben. 'name' und 'message' Eigenschaften sind generell durch die Klasse Error (z. B. DOMException oder Error) unterstützt. Die 'message' Eigenschaft ist dabei eine String-Repräsentation des Fehlers, so wie sie bei der Konvertierung des Objektes zu einem String benötigt wird.

- -

Wenn man beim Werfen von eigenen Exceptions die Vorteile dieser Eigenschaften nutzen möchte (wenn zum Beipsiel der catch Block nicht zwischen eigenen und System Exceptions unterscheidet), kann der Konstruktor von Error benutzt werden. Zum Beispiel:

- -
function doSomethingErrorProne () {
-  if (ourCodeMakesAMistake()) {
-    throw (new Error('The message'));
-  } else {
-    doSomethingToGetAJavascriptError();
-  }
-}
-....
-try {
-  doSomethingErrorProne();
-}
-catch (e) {
-  console.log(e.name); // logs 'Error'
-  console.log(e.message); // logs 'The message' or a JavaScript error message)
-}
- -

Promises

- -

Mit ECMAScript 6 hat JavaScript die Unterstützung für {{jsxref("Promise")}} Objekte bekommen, welche zum Steuern von asynchronen Operationen genutzt wird.

- -

Ein Promise ist in einem der folgenen Status:

- - - -

- -

Ein Bild mit XHR laden

- -

Ein einfaches Beispiel für den Einsatz von Promise und XMLHttpRequest ist das Laden eines Bildes (Siehe MDN GitHub js-examples Repository; man kann es hier auch in Aktion sehen). Jeder Schritt ist Kommentiert und erlaubt es der Architektur des Promise und XHR zu folgen. Hier ist die unkommentierte Version, welche den Promise Ablauf zeigt, zu sehen, so dass man eine Idee davon bekommt.

- -
function imgLoad(url) {
-  return new Promise(function(resolve, reject) {
-    var request = new XMLHttpRequest();
-    request.open('GET', url);
-    request.responseType = 'blob';
-    request.onload = function() {
-      if (request.status === 200) {
-        resolve(request.response);
-      } else {
-        reject(Error('Image didn\'t load successfully; error code:'
-                     + request.statusText));
-      }
-    };
-    request.onerror = function() {
-      reject(Error('There was a network error.'));
-    };
-    request.send();
-  });
-}
- -

Für deteiliertere Informationen, kann man sich die {{jsxref("Promise")}} Referenz Seite und den Using Promises Guide anschauen.

- -
{{PreviousNext("Web/JavaScript/Guide/Grammatik_und_Typen", "Web/JavaScript/Guide/Schleifen_und_Iterationen")}}
diff --git a/files/de/web/javascript/guide/loops_and_iteration/index.html b/files/de/web/javascript/guide/loops_and_iteration/index.html new file mode 100644 index 0000000000..9f351abcd9 --- /dev/null +++ b/files/de/web/javascript/guide/loops_and_iteration/index.html @@ -0,0 +1,337 @@ +--- +title: Schleifen und Iterationen +slug: Web/JavaScript/Guide/schleifen_und_iterationen +tags: + - Guide + - JavaScript + - Loop + - Syntax + - 'l10n:priority' +translation_of: Web/JavaScript/Guide/Loops_and_iteration +--- +
{{jsSidebar("JavaScript Guide")}} {{PreviousNext("Web/JavaScript/Guide/Control_flow_and_error_handling", "Web/JavaScript/Guide/Functions")}}
+ +

Schleifen sind ein einfaches Werkzeug, um einzelne Schritte wiederholt auszuführen. Dieses Kapitel des JavaScript Guide stellt die verschiedenen Statements für Iterationen vor, welche in JavaScript zur Verfügung stehen.

+ +

Man kann sich Schleifen wie eine Computerversion des Spiels vorstellen, bei dem man jemandem sagt, er soll x Schritte in eine Richtung und dann y Schritte in eine andere Richtung gehen. So kann zum Beispiel die Aussage "Gehe fünf Schritte nach Osten" mit Hilfe von Schleifen so ausgedrückt werden:

+ +
var schritt;
+for (schritt = 0; schritt < 5; schritt++) {
+  // Laufe 5 mal, mit den Werten von Schritt 0 bis 4
+  console.log('Gehe einen Schritt nach Osten');
+}
+
+ +

Es gibt viele verschiedene Arten von Schleifen, doch im Wesentlichen verrichten alle die gleiche Aufgabe: sie führen eine Aktion für eine bestimmte Anzahl an Wiederholungen aus (diese Anzahl kann auch 0 sein). Dabei ermöglichen die verschiedenen Arten von Schleifen unterschiedliche Anfangs- und Endpunkte festzulegen. Es gibt zahlreiche Situationen in denen eine Art von Schleifen einfacher zum Ergebnis führt, als eine andere.

+ +

JavaScript stellt folgende Statements für Schleifen zur Verfügung:

+ + + +

for Statement

+ +

Eine  {{jsxref("statements/for","for Schleife")}} wird so lange durchlaufen, bis eine bestimmte Bedingung den Wert false liefert. Die for Schleife in JavaScript ist vergleichbar mit der in Java und C. Ein for Statement sieht wie folgt aus:

+ +
for ([initialerAusruck]; [Bedingung]; [erhöhenderAusdruck])
+  Anweisung
+
+ +

Bei der Ausführung einer for Schleife geschieht folgendes:

+ +
    +
  1. Der Ausdruck zur Initialisierung der Schleife initialerAsudruck, wird ausgeführt, sofern dieser existiert. Dieser Ausdruck initialisiert einen oder mehrere Schleifenzähler, wobei die Syntax beliebig komplexe Ausdrücke zulässt. In diesem Ausdruck können auch Variablen deklariert werden.
  2. +
  3. Die Bedingung Bedingung wird geprüft. Wenn die Auswertung von Bedingung den Wert true ergibt, werden die Anweisungen innerhalb der Schleife ausgeführt. Ergibt die Prüfung hingegen false, wird die Schleife verlassen. Bleibt die Bedingung leer, wird immer der Wert true angenommen.
  4. +
  5. Die Anweisung wird ausgeführt. Um mehrere Anweisungen auszuführen, werden Block-Anweisungen ({ ... }) verwendet, um diese zu gruppieren.
  6. +
  7. Wenn vorhanden, wird der Ausdruck erhöhenderAusdruck ausgeführt.
  8. +
  9. Geht zu Schritt 2 zurück.
  10. +
+ +

Beispiel

+ +

Die folgende Funktion enthält ein for Statement, welche die Anzahl der ausgewählten Optionen aus einer Auswahlliste (ein {{HTMLElement("select")}}, welches eine Mehrfachauswahl erlaubt) ermittelt. Das for Statement deklariert eine Variable i und initialisiert diese mit dem Wert 0. Sie prüft ob i kleiner als die Anzahl der verfügbarer Optionen des <select> Elements ist, führt das nachfolgende if Statement aus und erhöht i bei jedem Schleifendurchlauf um 1.

+ +
<form name="selectForm">
+  <p>
+    <label for="musicTypes">Choose some music types, then click the button below:</label>
+    <select id="musicTypes" name="musicTypes" multiple="multiple">
+      <option selected="selected">R&B</option>
+      <option>Jazz</option>
+      <option>Blues</option>
+      <option>New Age</option>
+      <option>Classical</option>
+      <option>Opera</option>
+    </select>
+  </p>
+  <p><input id="btn" type="button" value="How many are selected?" /></p>
+</form>
+
+<script>
+function howMany(selectObject) {
+  var numberSelected = 0;
+  for (var i = 0; i < selectObject.options.length; i++) {
+    if (selectObject.options[i].selected) {
+      numberSelected++;
+    }
+  }
+  return numberSelected;
+}
+
+var btn = document.getElementById('btn');
+btn.addEventListener('click', function(){
+  alert('Number of options selected: ' + howMany(document.selectForm.musicTypes))
+});
+</script>
+
+
+ +

do...while Statement

+ +

Das {{jsxref("statements/do...while", "do...while")}} Statement wiederholt eine bestimmte Anweisung, bis eine Bedingung false ergibt. Ein do...while Statement sieht wie folgt aus:

+ +
do
+  anweisung
+while (bedingung);
+
+ +

amweisung wird dabei einmal ausgeführt, bevor die Bedingung geprüft wird. Um mehrere Anweisungen auszuführen, werden diese als Block Statement ({ ... }) gruppiert. Wenn bedingung true ist, wird die Anweisung erneut ausgeführt. Nach jeder Ausführung der Anweisungen, wird die Bedingung erneut geprüft. Sobald bedingung false ergibt, endet die Ausführung der Schleife und die nächste Anweisung nach der do...while Schleife aus wird ausgeführt.

+ +

Beispiel

+ +

Im folgenden Beispiel wird die Schleife mindestens einmal ausgeführt. Anschliessend wird die Schleife so oft durchlaufen, bis i nicht mehr kleiner als 5 ist.

+ +
var i = 0;
+do {
+  i += 1;
+  console.log(i);
+} while (i < 5);
+ +

while Statement

+ +

Ein {{jsxref("statements/while","while")}} Statement wird solange ausgeführt, wie eine bestimmte Bedingung true ergibt. Ein while Statement sieht wie folgt aus:

+ +
while (bedingung)
+  anweisung
+
+ +

Wenn die Bedingung false ist, wird die Schleife nicht weiter durchlaufen und die nächste Anweisung nach der while Schleife wird ausgeführt.

+ +

Die Prüfung der Bedingung erfolgt, bevor die Anweisungen innerhalb der Schleife ausgeführt werden. Nur wenn die Bedingung true ist, wird die Schleife ausgeführt, wobei anschliessend eine erneute Prüfung der Bedingung erfolgt. Ergibt die Bedingung false, wir mit der Anweisungen nach der while Schleife fortgefahren.

+ +

Um mehrere Anweisungen auszuführen, werden diese in einer block Anweisung ({ ... }) gruppiert.

+ +

Beispiel 1

+ +

Die folgende while Schleife wird so lange ausgeführt, wie n kleiner als 3 ist.

+ +
var n = 0;
+var x = 0;
+while (n < 3) {
+  n++;
+  x += n;
+}
+
+ +

Mit jedem Schleifendurchlauf wird n um 1 erhöht. Der Wert von n wird dann zum Wert von x addiert. Dadurch nehmen x und n die folgenden Werte an:

+ + + +

Nach dem dritten Durchlauf ist die Bedingung n < 3 nicht mehr true und die Schleife wird verlassen.

+ +

Beispiel 2

+ +

Endlosschleifen müssen vermieden werden. Es ist immer sicherzustellen, dass die Bedingung irgendwann false ergibt, da die Schleife ansonsten nie endet. Die Anweisung in der folgenden while Schleife wird für immer ausgeführt, weil die Bedingung nie false ergibt:

+ +
while (true) {
+  console.log('Hello, world!');
+}
+ +

Label Statement

+ +

Ein {{jsxref("statements/label","label")}} stellt ein Statement mit einem Bezeichner bereit, welches es ermöglicht auf eine bestimmte stelle im Programm zu verweisen. So kann ein Label zum Beispiel dafür verwendet werden eine Schleife zu identifizieren und dann mit break oder continue festzulegen ob diese beendet oder weiter durchlaufen werden soll.

+ +

Die Syntax des Label Statement sieht wie folgt aus:

+ +
label :
+   anweisung
+
+ +

Der Wert von label kann jede Bezeichnung sein, der kein reserviertes JavaScript Schlüsselwort ist. Die anweisung die mit dem Label identifiziert wird, kann jede beliebige Anweisung sein.

+ +

Beispiel

+ +

In diesem Beispiel identifiziert das Label markLoop eine while Schleife.

+ +
markLoop:
+while (theMark == true) {
+   doSomething();
+}
+ +

break Statement

+ +

Um eine Schleife oder ein switch Statement zu beenden, verwendet man das {{jsxref("statements/break","break")}} Statement in Verbindung mit dem Label Statement.

+ + + +

Die Syntax von break sieht wie folgt aus:

+ +
break [label];
+
+ +

Die erste Variante der Syntax beendet die innerste Schleife oder das innerste switch Statement. Die zweite Variante beendet eine bestimmte Anweisung.

+ +

Beispiel 1

+ +

Das folgende Beispiel durchläuft die Elemente in einem Array, bis ein Element mit dem Wert von theValue gefunden wird:

+ +
for (var i = 0; i < a.length; i++) {
+  if (a[i] == theValue) {
+    break;
+  }
+}
+ +

Beispiel 2: break mit einem Label

+ +
var x = 0;
+var z = 0;
+labelCancelLoops: while (true) {
+  console.log('Outer loops: ' + x);
+  x += 1;
+  z = 1;
+  while (true) {
+    console.log('Inner loops: ' + z);
+    z += 1;
+    if (z === 10 && x === 10) {
+      break labelCancelLoops;
+    } else if (z === 10) {
+      break;
+    }
+  }
+}
+
+ +

continue Statement

+ +

Das {{jsxref("statements/continue","continue")}} Statement kann eingesetzt werden, um eine while, do-while, for Schleife oder ein Statement mit einem Label erneut auszuführen.

+ + + +

Die Syntax des continue Statement sieht wie folgt aus:

+ +
continue [label];
+
+ +

Beispiel 1

+ +

Das folgende Beispiel zeigt eine while Schleife, mit einem continue Statement, die weiter ausgeführt wird, wenn i den Wert 3 hat. Dadurch erhält n die Werte 1, 3, 7 und 12.

+ +
var i = 0;
+var n = 0;
+while (i < 5) {
+  i++;
+  if (i == 3) {
+    continue;
+  }
+  n += i;
+}
+
+ +

Beispiel 2

+ +

Eine Anweisung mit dem Label checkiandj enthält eine Anweisung mit dem Label checkj. Wenn continue erreicht wird, bricht das Programm den aktuellen Schleifendurchlauf von checkj ab und setzt die Ausführung beim nächsten Durchlauf fort. Immer wenn continue erreicht wird, wird checkj erneut ausgeführt, bis dessen Bedingung false zurückliefert. Wird false zurückgeliefert, wird der Rest der checkiandj Anweisung vollendet und checkiandj wird wiederholt, bis dessen Bedingung false zurückgibt. Wird false zurückgegeben, wird das Programm bei der Anweisung nach checkiandj fortgesetzt.

+ +

Wenn continue ein Label checkiandj hätte, würde das Programm am Anfang der checkiandj Anweisung fortgesetzt werden.

+ +
var i = 0;
+var j = 10;
+checkiandj:
+  while (i < 4) {
+    console.log(i);
+    i += 1;
+    checkj:
+      while (j > 4) {
+        console.log(j);
+        j -= 1;
+        if ((j % 2) == 0) {
+          continue checkj;
+        }
+        console.log(j + ' is odd.');
+      }
+      console.log('i = ' + i);
+      console.log('j = ' + j);
+  }
+ +

for...in Statement

+ +

Das {{jsxref("statements/for...in","for...in")}} Statement durchläuft eine bestimmte Variable über alle aufzählbaren Eigenschaften eines Objekts. Für jede einzelne Eigenschaft führt JavaScript die entsprechende Anweisung aus. Ein for...in Statement sieht wie folgt aus:

+ +
for (variable in object) {
+  statements
+}
+
+ +

Beispiel

+ +

Die folgende Funktion nimmt als Argument ein Objekt und dessen Namen entgegen. Anschliessend durchläuft sie alle Eigenschaften des Objekts und liefert einen String zurück, der alle Namen und Werte der Eigenschaften des Objekts enthält.

+ +
function dump_props(obj, obj_name) {
+  var result = '';
+  for (var i in obj) {
+    result += obj_name + '.' + i + ' = ' + obj[i] + '<br>';
+  }
+  result += '<hr>';
+  return result;
+}
+
+ +

Für ein Objekt car mit den Eigenschaften make und model, sieht das Ergebnis wie folgt aus:

+ +
car.make = Ford
+car.model = Mustang
+
+ +

Arrays

+ +

Auch wenn es nahe liegt diesen Weg zu verwenden, um die Elemente eines {{jsxref("Array")}}s zu durchlaufen, würde das for...in Statement die Namen der definierten Werte und den numerischen Index zurückliefern. Daher ist es besser eine normale {{jsxref("statements/for","for")}} Schleifen mit einem numerischen Index zu verwenden, wenn Arrays durchlaufen werden sollen, da das for...in Statement neben den benutzerdefinierten Elementen auch die Eigenschaften des Arrays durchläuft, wenn man Methoden oder Eigenschaften hinzufügt oder ändert.

+ +

for...of Statement

+ +

Das {{jsxref("statements/for...of","for...of")}} Statement erstellt eine Schleife, die alle iterable objects (inklusive {{jsxref("Array")}}, {{jsxref("Map")}}, {{jsxref("Set")}}, {{jsxref("functions/arguments","arguments")}} Objekt, etc.) durchläuft und die Anweisungen ausführt, die mit dem Wert des Durchlaufes für jede Eigenschaft übereinstimmt.

+ +
for (variable of object) {
+  statement
+}
+ +

Das folgende Beispiel zeigt den Unterschied zwischen der for...of Schleife und der {{jsxref("statements/for...in","for...in")}} Schleife. Während for...in die Namen der Eigenschaften durchläuft, durchläuft for...of die Werte der Eigenschaft:

+ +
var arr = [3, 5, 7];
+arr.foo = 'hello';
+
+for (var i in arr) {
+   console.log(i); // logs "0", "1", "2", "foo"
+}
+
+for (var i of arr) {
+   console.log(i); // logs 3, 5, 7
+}
+
+ +

{{PreviousNext("Web/JavaScript/Guide/Control_flow_and_error_handling", "Web/JavaScript/Guide/Functions")}}

diff --git a/files/de/web/javascript/guide/mit_objekten_arbeiten/index.html b/files/de/web/javascript/guide/mit_objekten_arbeiten/index.html deleted file mode 100644 index 2448621a4a..0000000000 --- a/files/de/web/javascript/guide/mit_objekten_arbeiten/index.html +++ /dev/null @@ -1,506 +0,0 @@ ---- -title: Mit Objekten arbeiten -slug: Web/JavaScript/Guide/Mit_Objekten_arbeiten -tags: - - Beginner - - Comparing object - - Constructor - - Document - - Guide - - JavaScript - - Object - - 'l10n:priority' -translation_of: Web/JavaScript/Guide/Working_with_Objects ---- -
{{jsSidebar("JavaScript Guide")}} {{PreviousNext("Web/JavaScript/Guide/Regular_Expressions", "Web/JavaScript/Guide/Feinheiten_des_Objektmodells")}}
- -

JavaScript ist nach einem einfachen objekt-basierten Muster entworfen. Ein Objekt ist eine Sammlung von Eigenschaften und eine Eigenschaft ist eine Verbindung von einem Namen und einem Wert. Der Wert einer Eigenschaft kann eine Funktion sein. In diesem Fall wird die Eigenschaft Methode genannt. Zusätzlich zu Objekten, die vom Browser vordefiniert sind, können auch eigene Objekte definiert werden. Dieses Kapitel beschreibt, wie Objekte, Eigenschaften, Funktionen und Methoden benutzt und eigene Objekte erzeugt werden können.

- -

Objekte Übersicht

- -

Objekte in JavaScript, wie in vielen anderen Programmiersprachen, können mit Objekten aus dem realen Leben verglichen werden. Das Konzept der Objekte in JavaScript kann mit greifbaren Objekten aus der realen Welt verstanden werden.

- -

In JavaScript ist ein Objekt eine für sich stehende Einheit mit Eigenschaften und Typ. Vergleichbar mit einer Tasse zum Beispiel. Eine Tasse ist ein Objekt mit Eigenschaften. Eine Tasse hat eine Farbe, ein Design, ein Gewicht, ein Material, aus dem sie erstellt wurde, usw. Ebenso können JavaScript Objekte Eigenschaften besitzen, die Ihre Besonderheiten definieren.

- -

Objekte und Eigenschaften

- -

Ein JavaScript Objekt besitzt mit ihm verbundene Eigenschaften. Eine Eigenschaft eines Objekts kann als Variable erklärt werden, die dem Objekt angeheftet ist. Objekteigenschaften sind grundsätzlich das Gleiche wie übliche Variablen ausser der Verknüpfung mit Objekten. Die Eigenschaften eines Objekts definieren seine Charakteristik. Auf die Eigenschaften eines Objekt kann mit einer einfachen Punkt-Notation zugegriffen werden:

- -
objectName.propertyName
-
- -

Wie bei allen JavaScript-Variablen sind Objektname (eine normale Variable) und Attribute groß-, und kleinschreibungsabhängig. Ein Attribut wird definiert, indem es einen Wert zugewiesen bekommt. Zum Beispiel: Ein Objekt namens myCar mit den Attributen make, model, und year:

- -
var myCar = new Object();
-myCar.make = "Ford";
-myCar.model = "Mustang";
-myCar.year = 1969;
-
- -

Nicht initialisierte Eigenschaften eines Objektes haben den Wert {{jsxref("undefined")}} (nicht {{jsxref("null")}}).

- -
myCar.color; // undefined
- -

Eigenschaften von JavaScript-Objekten können auch mit der Klammernotation (für weitere Informationen siehe property accessors). Objekte werden manchmal assoziative Arrays genannt da jede Eigenschaft mit einer Zeichenkette assoziiert ist mit der man auf die Eigenschaft zugreifen kann. Zum Beispiel kann man auf die Eigenschaften des Objekts myCar folgendermassen zugreifen:

- -
myCar["make"] = "Ford";
-myCar["model"] = "Mustang";
-myCar["year"] = 1969;
-
- -

Der Name einer Objekteigenschaft kann ein valider JavaScript String sein. Dies kann auch alles sein, was in einen String convertiert werden kann, inklusive eines leeren Strings. Immer, wenn der Name einer Eigenschaft kein valider JavaScript Bezeichner ist (zum Beispiel ein Name mit einem Leerzeichen oder einem minus oder ein Name der mit einer Ziffer beginnt), kann dieses nur über die Klammernotation erreicht werden. Diese Notation ist zusätzlich sehr hilfreich, wenn Namen von Eigenschaften dynamisch ermittelt werden (Wenn die Namen nicht bis zur Laufzeit ermittelt werden können). Im folgenden ein Beispiel:

- -
// four variables are created and assigned in a single go,
-// separated by commas
-var myObj = new Object(),
-    str = 'myString',
-    rand = Math.random(),
-    obj = new Object();
-
-myObj.type              = 'Dot syntax';
-myObj['date created']   = 'String with space';
-myObj[str]              = 'String value';
-myObj[rand]             = 'Random Number';
-myObj[obj]              = 'Object';
-myObj['']               = 'Even an empty string';
-
-console.log(myObj);
-
- -

Zu bemerken ist, dass alle Schlüssel in der Klammernotation zum Typ Strings konvertiert werden, weil in JavaScript nur Strings als Schlüssel bei Objekte erlaubt sind. Zum Beispiel wird im orberen Beispiel obj konvertiert wenn es in myObj benutzt wird. JavaScript ruft die obj.toString() Methode auf und benutzt den resultierenden String als neuen Schlüssel.

- -

Man kann eine Eigenschaft auch erreichen, indem eine Variable vom Typ String benutzt wird:

- -
var propertyName = 'make';
-myCar[propertyName] = 'Ford';
-
-propertyName = 'model';
-myCar[propertyName] = 'Mustang';
-
- -

Man kann die Klammernotation mit for...in nutzen, um über alle enumerable (aufzählbaren) Eigenschaften eines Objektes zu iterieren. Um dieses zu zeigen wie das funktioniert, zeigt die folgende Funktion die Eigenschaften eines Objektes, wenn eine Objekt und der Name des Objektes der Funktion als Parameter übergeben werden:

- -
function showProps(obj, objName) {
-  var result = '';
-  for (var i in obj) {
-    // obj.hasOwnProperty() wird benutzt um Eigenschaften aus der Prototypen-Kette herauszufiltern
-    if (obj.hasOwnProperty(i)) {
-      result += objName + '.' + i + ' = ' + obj[i] + '\n';
-    }
-  }
-  return result;
-}
-
- -

So gibt der Aufruf showProps(myCar, "myCar") folgenden Rückgabewert zurück:

- -
myCar.make = Ford
-myCar.model = Mustang
-myCar.year = 1969
- -

Enumerate the properties of an object

- -

Starting with ECMAScript 5, there are three native ways to list/traverse object properties:

- - - -

Before ECMAScript 5, there was no native way to list all properties of an object. However, this can be achieved with the following function:

- -
function listAllProperties(o) {
-	var objectToInspect;
-	var result = [];
-
-	for(objectToInspect = o; objectToInspect !== null; objectToInspect = Object.getPrototypeOf(objectToInspect)) {
-      result = result.concat(Object.getOwnPropertyNames(objectToInspect));
-	}
-
-	return result;
-}
-
- -

This can be useful to reveal "hidden" properties (properties in the prototype chain which are not accessible through the object, because another property has the same name earlier in the prototype chain). Listing accessible properties only can easily be done by removing duplicates in the array.

- -

Creating new objects

- -

JavaScript has a number of predefined objects. In addition, you can create your own objects. You can create an object using an object initializer. Alternatively, you can first create a constructor function and then instantiate an object invoking that function in conjunction with the new operator.

- -

Using object initializers

- -

In addition to creating objects using a constructor function, you can create objects using an object initializer. Using object initializers is sometimes referred to as creating objects with literal notation. "Object initializer" is consistent with the terminology used by C++.

- -

The syntax for an object using an object initializer is:

- -
var obj = { property_1:   value_1,   // property_# may be an identifier...
-            2:            value_2,   // or a number...
-            // ...,
-            'property n': value_n }; // or a string
-
- -

where obj is the name of the new object, each property_i is an identifier (either a name, a number, or a string literal), and each value_i is an expression whose value is assigned to the property_i. The obj and assignment is optional; if you do not need to refer to this object elsewhere, you do not need to assign it to a variable. (Note that you may need to wrap the object literal in parentheses if the object appears where a statement is expected, so as not to have the literal be confused with a block statement.)

- -

Object initializers are expressions, and each object initializer results in a new object being created whenever the statement in which it appears is executed. Identical object initializers create distinct objects that will not compare to each other as equal. Objects are created as if a call to new Object() were made; that is, objects made from object literal expressions are instances of Object.

- -

The following statement creates an object and assigns it to the variable x if and only if the expression cond is true:

- -
if (cond) var x = {greeting: 'hi there'};
-
- -

The following example creates myHonda with three properties. Note that the engine property is also an object with its own properties.

- -
var myHonda = {color: 'red', wheels: 4, engine: {cylinders: 4, size: 2.2}};
-
- -

You can also use object initializers to create arrays. See array literals.

- -

Using a constructor function

- -

Alternatively, you can create an object with these two steps:

- -
    -
  1. Define the object type by writing a constructor function. There is a strong convention, with good reason, to use a capital initial letter.
  2. -
  3. Create an instance of the object with new.
  4. -
- -

To define an object type, create a function for the object type that specifies its name, properties, and methods. For example, suppose you want to create an object type for cars. You want this type of object to be called Car, and you want it to have properties for make, model, and year. To do this, you would write the following function:

- -
function Car(make, model, year) {
-  this.make = make;
-  this.model = model;
-  this.year = year;
-}
-
- -

Notice the use of this to assign values to the object's properties based on the values passed to the function.

- -

Now you can create an object called mycar as follows:

- -
var mycar = new Car('Eagle', 'Talon TSi', 1993);
-
- -

This statement creates mycar and assigns it the specified values for its properties. Then the value of mycar.make is the string "Eagle", mycar.year is the integer 1993, and so on.

- -

You can create any number of Car objects by calls to new. For example,

- -
var kenscar = new Car('Nissan', '300ZX', 1992);
-var vpgscar = new Car('Mazda', 'Miata', 1990);
-
- -

An object can have a property that is itself another object. For example, suppose you define an object called person as follows:

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

and then instantiate two new person objects as follows:

- -
var rand = new Person('Rand McKinnon', 33, 'M');
-var ken = new Person('Ken Jones', 39, 'M');
-
- -

Then, you can rewrite the definition of Car to include an owner property that takes a person object, as follows:

- -
function Car(make, model, year, owner) {
-  this.make = make;
-  this.model = model;
-  this.year = year;
-  this.owner = owner;
-}
-
- -

To instantiate the new objects, you then use the following:

- -
var car1 = new Car('Eagle', 'Talon TSi', 1993, rand);
-var car2 = new Car('Nissan', '300ZX', 1992, ken);
-
- -

Notice that instead of passing a literal string or integer value when creating the new objects, the above statements pass the objects rand and ken as the arguments for the owners. Then if you want to find out the name of the owner of car2, you can access the following property:

- -
car2.owner.name
-
- -

Note that you can always add a property to a previously defined object. For example, the statement

- -
car1.color = 'black';
-
- -

adds a property color to car1, and assigns it a value of "black." However, this does not affect any other objects. To add the new property to all objects of the same type, you have to add the property to the definition of the Car object type.

- -

Using the Object.create method

- -

Objects can also be created using the {{jsxref("Object.create()")}} method. This method can be very useful, because it allows you to choose the prototype object for the object you want to create, without having to define a constructor function.

- -
// Animal properties and method encapsulation
-var Animal = {
-  type: 'Invertebrates', // Default value of properties
-  displayType: function() {  // Method which will display type of Animal
-    console.log(this.type);
-  }
-};
-
-// Create new animal type called animal1
-var animal1 = Object.create(Animal);
-animal1.displayType(); // Output:Invertebrates
-
-// Create new animal type called Fishes
-var fish = Object.create(Animal);
-fish.type = 'Fishes';
-fish.displayType(); // Output:Fishes
- -

Inheritance

- -

All objects in JavaScript inherit from at least one other object. The object being inherited from is known as the prototype, and the inherited properties can be found in the prototype object of the constructor. See Inheritance and the prototype chain for more information.

- -

Indexing object properties

- -

You can refer to a property of an object either by its property name or by its ordinal index. If you initially define a property by its name, you must always refer to it by its name, and if you initially define a property by an index, you must always refer to it by its index.

- -

This restriction applies when you create an object and its properties with a constructor function (as we did previously with the Car object type) and when you define individual properties explicitly (for example, myCar.color = "red"). If you initially define an object property with an index, such as myCar[5] = "25 mpg", you subsequently refer to the property only as myCar[5].

- -

The exception to this rule is objects reflected from HTML, such as the forms array. You can always refer to objects in these arrays by either their ordinal number (based on where they appear in the document) or their name (if defined). For example, if the second <FORM> tag in a document has a NAME attribute of "myForm", you can refer to the form as document.forms[1] or document.forms["myForm"] or document.forms.myForm.

- -

Defining properties for an object type

- -

You can add a property to a previously defined object type by using the prototype property. This defines a property that is shared by all objects of the specified type, rather than by just one instance of the object. The following code adds a color property to all objects of type Car, and then assigns a value to the color property of the object car1.

- -
Car.prototype.color = null;
-car1.color = 'black';
-
- -

See the prototype property of the Function object in the JavaScript reference for more information.

- -

Defining methods

- -

A method is a function associated with an object, or, simply put, a method is a property of an object that is a function. Methods are defined the way normal functions are defined, except that they have to be assigned as the property of an object. See also method definitions for more details. An example is:

- -
objectName.methodname = functionName;
-
-var myObj = {
-  myMethod: function(params) {
-    // ...do something
-  }
-
-  // OR THIS WORKS TOO
-
-  myOtherMethod(params) {
-    // ...do something else
-  }
-};
-
- -

where objectName is an existing object, methodname is the name you are assigning to the method, and functionName is the name of the function.

- -

You can then call the method in the context of the object as follows:

- -
object.methodname(params);
-
- -

You can define methods for an object type by including a method definition in the object constructor function. You could define a function that would format and display the properties of the previously-defined Car objects; for example,

- -
function displayCar() {
-  var result = 'A Beautiful ' + this.year + ' ' + this.make
-    + ' ' + this.model;
-  pretty_print(result);
-}
-
- -

where pretty_print is a function to display a horizontal rule and a string. Notice the use of this to refer to the object to which the method belongs.

- -

You can make this function a method of Car by adding the statement

- -
this.displayCar = displayCar;
-
- -

to the object definition. So, the full definition of Car would now look like

- -
function Car(make, model, year, owner) {
-  this.make = make;
-  this.model = model;
-  this.year = year;
-  this.owner = owner;
-  this.displayCar = displayCar;
-}
-
- -

Then you can call the displayCar method for each of the objects as follows:

- -
car1.displayCar();
-car2.displayCar();
-
- -

Using this for object references

- -

JavaScript has a special keyword, this, that you can use within a method to refer to the current object. For example, suppose you have a function called validate that validates an object's value property, given the object and the high and low values:

- -
function validate(obj, lowval, hival) {
-  if ((obj.value < lowval) || (obj.value > hival)) {
-    alert('Invalid Value!');
-  }
-}
-
- -

Then, you could call validate in each form element's onchange event handler, using this to pass it the element, as in the following example:

- -
<input type="text" name="age" size="3"
-  onChange="validate(this, 18, 99)">
-
- -

In general, this refers to the calling object in a method.

- -

When combined with the form property, this can refer to the current object's parent form. In the following example, the form myForm contains a Text object and a button. When the user clicks the button, the value of the Text object is set to the form's name. The button's onclick event handler uses this.form to refer to the parent form, myForm.

- -
<form name="myForm">
-<p><label>Form name:<input type="text" name="text1" value="Beluga"></label>
-<p><input name="button1" type="button" value="Show Form Name"
-     onclick="this.form.text1.value = this.form.name">
-</p>
-</form>
- -

Defining getters and setters

- -

A getter is a method that gets the value of a specific property. A setter is a method that sets the value of a specific property. You can define getters and setters on any predefined core object or user-defined object that supports the addition of new properties. The syntax for defining getters and setters uses the object literal syntax.

- -

The following illustrates how getters and setters could work for a user-defined object o.

- -
var o = {
-  a: 7,
-  get b() {
-    return this.a + 1;
-  },
-  set c(x) {
-    this.a = x / 2;
-  }
-};
-
-console.log(o.a); // 7
-console.log(o.b); // 8
-o.c = 50;
-console.log(o.a); // 25
-
- -

The o object's properties are:

- - - -

Please note that function names of getters and setters defined in an object literal using "[gs]et property()" (as opposed to __define[GS]etter__ ) are not the names of the getters themselves, even though the [gs]et propertyName(){ } syntax may mislead you to think otherwise. To name a function in a getter or setter using the "[gs]et property()" syntax, define an explicitly named function programmatically using Object.defineProperty (or the Object.prototype.__defineGetter__ legacy fallback).

- -

The following code illustrates how getters and setters can extend the {{jsxref("Date")}} prototype to add a year property to all instances of the predefined Date class. It uses the Date class's existing getFullYear and setFullYear methods to support the year property's getter and setter.

- -

These statements define a getter and setter for the year property:

- -
var d = Date.prototype;
-Object.defineProperty(d, 'year', {
-  get: function() { return this.getFullYear(); },
-  set: function(y) { this.setFullYear(y); }
-});
-
- -

These statements use the getter and setter in a Date object:

- -
var now = new Date();
-console.log(now.year); // 2000
-now.year = 2001; // 987617605170
-console.log(now);
-// Wed Apr 18 11:13:25 GMT-0700 (Pacific Daylight Time) 2001
-
- -

In principle, getters and setters can be either

- - - -

When defining getters and setters using object initializers all you need to do is to prefix a getter method with get and a setter method with set. Of course, the getter method must not expect a parameter, while the setter method expects exactly one parameter (the new value to set). For instance:

- -
var o = {
-  a: 7,
-  get b() { return this.a + 1; },
-  set c(x) { this.a = x / 2; }
-};
-
- -

Getters and setters can also be added to an object at any time after creation using the Object.defineProperties method. This method's first parameter is the object on which you want to define the getter or setter. The second parameter is an object whose property names are the getter or setter names, and whose property values are objects for defining the getter or setter functions. Here's an example that defines the same getter and setter used in the previous example:

- -
var o = { a: 0 };
-
-Object.defineProperties(o, {
-    'b': { get: function() { return this.a + 1; } },
-    'c': { set: function(x) { this.a = x / 2; } }
-});
-
-o.c = 10; // Runs the setter, which assigns 10 / 2 (5) to the 'a' property
-console.log(o.b); // Runs the getter, which yields a + 1 or 6
-
- -

Which of the two forms to choose depends on your programming style and task at hand. If you already go for the object initializer when defining a prototype you will probably most of the time choose the first form. This form is more compact and natural. However, if you need to add getters and setters later — because you did not write the prototype or particular object — then the second form is the only possible form. The second form probably best represents the dynamic nature of JavaScript — but it can make the code hard to read and understand.

- -

Deleting properties

- -

You can remove a non-inherited property by using the delete operator. The following code shows how to remove a property.

- -
// Creates a new object, myobj, with two properties, a and b.
-var myobj = new Object;
-myobj.a = 5;
-myobj.b = 12;
-
-// Removes the a property, leaving myobj with only the b property.
-delete myobj.a;
-console.log ('a' in myobj); // yields "false"
-
- -

You can also use delete to delete a global variable if the var keyword was not used to declare the variable:

- -
g = 17;
-delete g;
-
- -

Comparing Objects

- -

In JavaScript objects are a reference type. Two distinct objects are never equal, even if they have the same properties. Only comparing the same object reference with itself yields true.

- -
// Two variables, two distinct objects with the same properties
-var fruit = {name: 'apple'};
-var fruitbear = {name: 'apple'};
-
-fruit == fruitbear; // return false
-fruit === fruitbear; // return false
- -
// Two variables, a single object
-var fruit = {name: 'apple'};
-var fruitbear = fruit;  // assign fruit object reference to fruitbear
-
-// here fruit and fruitbear are pointing to same object
-fruit == fruitbear; // return true
-fruit === fruitbear; // return true
-
- -
fruit.name = 'grape';
-console.log(fruitbear);    // yields { name: "grape" } instead of { name: "apple" }
-
- -

For more information about comparison operators, see Comparison operators.

- -

See also

- - - -

{{PreviousNext("Web/JavaScript/Guide/Regular_Expressions", "Web/JavaScript/Guide/Feinheiten_des_Objektmodells")}}

diff --git a/files/de/web/javascript/guide/schleifen_und_iterationen/index.html b/files/de/web/javascript/guide/schleifen_und_iterationen/index.html deleted file mode 100644 index 9f351abcd9..0000000000 --- a/files/de/web/javascript/guide/schleifen_und_iterationen/index.html +++ /dev/null @@ -1,337 +0,0 @@ ---- -title: Schleifen und Iterationen -slug: Web/JavaScript/Guide/schleifen_und_iterationen -tags: - - Guide - - JavaScript - - Loop - - Syntax - - 'l10n:priority' -translation_of: Web/JavaScript/Guide/Loops_and_iteration ---- -
{{jsSidebar("JavaScript Guide")}} {{PreviousNext("Web/JavaScript/Guide/Control_flow_and_error_handling", "Web/JavaScript/Guide/Functions")}}
- -

Schleifen sind ein einfaches Werkzeug, um einzelne Schritte wiederholt auszuführen. Dieses Kapitel des JavaScript Guide stellt die verschiedenen Statements für Iterationen vor, welche in JavaScript zur Verfügung stehen.

- -

Man kann sich Schleifen wie eine Computerversion des Spiels vorstellen, bei dem man jemandem sagt, er soll x Schritte in eine Richtung und dann y Schritte in eine andere Richtung gehen. So kann zum Beispiel die Aussage "Gehe fünf Schritte nach Osten" mit Hilfe von Schleifen so ausgedrückt werden:

- -
var schritt;
-for (schritt = 0; schritt < 5; schritt++) {
-  // Laufe 5 mal, mit den Werten von Schritt 0 bis 4
-  console.log('Gehe einen Schritt nach Osten');
-}
-
- -

Es gibt viele verschiedene Arten von Schleifen, doch im Wesentlichen verrichten alle die gleiche Aufgabe: sie führen eine Aktion für eine bestimmte Anzahl an Wiederholungen aus (diese Anzahl kann auch 0 sein). Dabei ermöglichen die verschiedenen Arten von Schleifen unterschiedliche Anfangs- und Endpunkte festzulegen. Es gibt zahlreiche Situationen in denen eine Art von Schleifen einfacher zum Ergebnis führt, als eine andere.

- -

JavaScript stellt folgende Statements für Schleifen zur Verfügung:

- - - -

for Statement

- -

Eine  {{jsxref("statements/for","for Schleife")}} wird so lange durchlaufen, bis eine bestimmte Bedingung den Wert false liefert. Die for Schleife in JavaScript ist vergleichbar mit der in Java und C. Ein for Statement sieht wie folgt aus:

- -
for ([initialerAusruck]; [Bedingung]; [erhöhenderAusdruck])
-  Anweisung
-
- -

Bei der Ausführung einer for Schleife geschieht folgendes:

- -
    -
  1. Der Ausdruck zur Initialisierung der Schleife initialerAsudruck, wird ausgeführt, sofern dieser existiert. Dieser Ausdruck initialisiert einen oder mehrere Schleifenzähler, wobei die Syntax beliebig komplexe Ausdrücke zulässt. In diesem Ausdruck können auch Variablen deklariert werden.
  2. -
  3. Die Bedingung Bedingung wird geprüft. Wenn die Auswertung von Bedingung den Wert true ergibt, werden die Anweisungen innerhalb der Schleife ausgeführt. Ergibt die Prüfung hingegen false, wird die Schleife verlassen. Bleibt die Bedingung leer, wird immer der Wert true angenommen.
  4. -
  5. Die Anweisung wird ausgeführt. Um mehrere Anweisungen auszuführen, werden Block-Anweisungen ({ ... }) verwendet, um diese zu gruppieren.
  6. -
  7. Wenn vorhanden, wird der Ausdruck erhöhenderAusdruck ausgeführt.
  8. -
  9. Geht zu Schritt 2 zurück.
  10. -
- -

Beispiel

- -

Die folgende Funktion enthält ein for Statement, welche die Anzahl der ausgewählten Optionen aus einer Auswahlliste (ein {{HTMLElement("select")}}, welches eine Mehrfachauswahl erlaubt) ermittelt. Das for Statement deklariert eine Variable i und initialisiert diese mit dem Wert 0. Sie prüft ob i kleiner als die Anzahl der verfügbarer Optionen des <select> Elements ist, führt das nachfolgende if Statement aus und erhöht i bei jedem Schleifendurchlauf um 1.

- -
<form name="selectForm">
-  <p>
-    <label for="musicTypes">Choose some music types, then click the button below:</label>
-    <select id="musicTypes" name="musicTypes" multiple="multiple">
-      <option selected="selected">R&B</option>
-      <option>Jazz</option>
-      <option>Blues</option>
-      <option>New Age</option>
-      <option>Classical</option>
-      <option>Opera</option>
-    </select>
-  </p>
-  <p><input id="btn" type="button" value="How many are selected?" /></p>
-</form>
-
-<script>
-function howMany(selectObject) {
-  var numberSelected = 0;
-  for (var i = 0; i < selectObject.options.length; i++) {
-    if (selectObject.options[i].selected) {
-      numberSelected++;
-    }
-  }
-  return numberSelected;
-}
-
-var btn = document.getElementById('btn');
-btn.addEventListener('click', function(){
-  alert('Number of options selected: ' + howMany(document.selectForm.musicTypes))
-});
-</script>
-
-
- -

do...while Statement

- -

Das {{jsxref("statements/do...while", "do...while")}} Statement wiederholt eine bestimmte Anweisung, bis eine Bedingung false ergibt. Ein do...while Statement sieht wie folgt aus:

- -
do
-  anweisung
-while (bedingung);
-
- -

amweisung wird dabei einmal ausgeführt, bevor die Bedingung geprüft wird. Um mehrere Anweisungen auszuführen, werden diese als Block Statement ({ ... }) gruppiert. Wenn bedingung true ist, wird die Anweisung erneut ausgeführt. Nach jeder Ausführung der Anweisungen, wird die Bedingung erneut geprüft. Sobald bedingung false ergibt, endet die Ausführung der Schleife und die nächste Anweisung nach der do...while Schleife aus wird ausgeführt.

- -

Beispiel

- -

Im folgenden Beispiel wird die Schleife mindestens einmal ausgeführt. Anschliessend wird die Schleife so oft durchlaufen, bis i nicht mehr kleiner als 5 ist.

- -
var i = 0;
-do {
-  i += 1;
-  console.log(i);
-} while (i < 5);
- -

while Statement

- -

Ein {{jsxref("statements/while","while")}} Statement wird solange ausgeführt, wie eine bestimmte Bedingung true ergibt. Ein while Statement sieht wie folgt aus:

- -
while (bedingung)
-  anweisung
-
- -

Wenn die Bedingung false ist, wird die Schleife nicht weiter durchlaufen und die nächste Anweisung nach der while Schleife wird ausgeführt.

- -

Die Prüfung der Bedingung erfolgt, bevor die Anweisungen innerhalb der Schleife ausgeführt werden. Nur wenn die Bedingung true ist, wird die Schleife ausgeführt, wobei anschliessend eine erneute Prüfung der Bedingung erfolgt. Ergibt die Bedingung false, wir mit der Anweisungen nach der while Schleife fortgefahren.

- -

Um mehrere Anweisungen auszuführen, werden diese in einer block Anweisung ({ ... }) gruppiert.

- -

Beispiel 1

- -

Die folgende while Schleife wird so lange ausgeführt, wie n kleiner als 3 ist.

- -
var n = 0;
-var x = 0;
-while (n < 3) {
-  n++;
-  x += n;
-}
-
- -

Mit jedem Schleifendurchlauf wird n um 1 erhöht. Der Wert von n wird dann zum Wert von x addiert. Dadurch nehmen x und n die folgenden Werte an:

- - - -

Nach dem dritten Durchlauf ist die Bedingung n < 3 nicht mehr true und die Schleife wird verlassen.

- -

Beispiel 2

- -

Endlosschleifen müssen vermieden werden. Es ist immer sicherzustellen, dass die Bedingung irgendwann false ergibt, da die Schleife ansonsten nie endet. Die Anweisung in der folgenden while Schleife wird für immer ausgeführt, weil die Bedingung nie false ergibt:

- -
while (true) {
-  console.log('Hello, world!');
-}
- -

Label Statement

- -

Ein {{jsxref("statements/label","label")}} stellt ein Statement mit einem Bezeichner bereit, welches es ermöglicht auf eine bestimmte stelle im Programm zu verweisen. So kann ein Label zum Beispiel dafür verwendet werden eine Schleife zu identifizieren und dann mit break oder continue festzulegen ob diese beendet oder weiter durchlaufen werden soll.

- -

Die Syntax des Label Statement sieht wie folgt aus:

- -
label :
-   anweisung
-
- -

Der Wert von label kann jede Bezeichnung sein, der kein reserviertes JavaScript Schlüsselwort ist. Die anweisung die mit dem Label identifiziert wird, kann jede beliebige Anweisung sein.

- -

Beispiel

- -

In diesem Beispiel identifiziert das Label markLoop eine while Schleife.

- -
markLoop:
-while (theMark == true) {
-   doSomething();
-}
- -

break Statement

- -

Um eine Schleife oder ein switch Statement zu beenden, verwendet man das {{jsxref("statements/break","break")}} Statement in Verbindung mit dem Label Statement.

- - - -

Die Syntax von break sieht wie folgt aus:

- -
break [label];
-
- -

Die erste Variante der Syntax beendet die innerste Schleife oder das innerste switch Statement. Die zweite Variante beendet eine bestimmte Anweisung.

- -

Beispiel 1

- -

Das folgende Beispiel durchläuft die Elemente in einem Array, bis ein Element mit dem Wert von theValue gefunden wird:

- -
for (var i = 0; i < a.length; i++) {
-  if (a[i] == theValue) {
-    break;
-  }
-}
- -

Beispiel 2: break mit einem Label

- -
var x = 0;
-var z = 0;
-labelCancelLoops: while (true) {
-  console.log('Outer loops: ' + x);
-  x += 1;
-  z = 1;
-  while (true) {
-    console.log('Inner loops: ' + z);
-    z += 1;
-    if (z === 10 && x === 10) {
-      break labelCancelLoops;
-    } else if (z === 10) {
-      break;
-    }
-  }
-}
-
- -

continue Statement

- -

Das {{jsxref("statements/continue","continue")}} Statement kann eingesetzt werden, um eine while, do-while, for Schleife oder ein Statement mit einem Label erneut auszuführen.

- - - -

Die Syntax des continue Statement sieht wie folgt aus:

- -
continue [label];
-
- -

Beispiel 1

- -

Das folgende Beispiel zeigt eine while Schleife, mit einem continue Statement, die weiter ausgeführt wird, wenn i den Wert 3 hat. Dadurch erhält n die Werte 1, 3, 7 und 12.

- -
var i = 0;
-var n = 0;
-while (i < 5) {
-  i++;
-  if (i == 3) {
-    continue;
-  }
-  n += i;
-}
-
- -

Beispiel 2

- -

Eine Anweisung mit dem Label checkiandj enthält eine Anweisung mit dem Label checkj. Wenn continue erreicht wird, bricht das Programm den aktuellen Schleifendurchlauf von checkj ab und setzt die Ausführung beim nächsten Durchlauf fort. Immer wenn continue erreicht wird, wird checkj erneut ausgeführt, bis dessen Bedingung false zurückliefert. Wird false zurückgeliefert, wird der Rest der checkiandj Anweisung vollendet und checkiandj wird wiederholt, bis dessen Bedingung false zurückgibt. Wird false zurückgegeben, wird das Programm bei der Anweisung nach checkiandj fortgesetzt.

- -

Wenn continue ein Label checkiandj hätte, würde das Programm am Anfang der checkiandj Anweisung fortgesetzt werden.

- -
var i = 0;
-var j = 10;
-checkiandj:
-  while (i < 4) {
-    console.log(i);
-    i += 1;
-    checkj:
-      while (j > 4) {
-        console.log(j);
-        j -= 1;
-        if ((j % 2) == 0) {
-          continue checkj;
-        }
-        console.log(j + ' is odd.');
-      }
-      console.log('i = ' + i);
-      console.log('j = ' + j);
-  }
- -

for...in Statement

- -

Das {{jsxref("statements/for...in","for...in")}} Statement durchläuft eine bestimmte Variable über alle aufzählbaren Eigenschaften eines Objekts. Für jede einzelne Eigenschaft führt JavaScript die entsprechende Anweisung aus. Ein for...in Statement sieht wie folgt aus:

- -
for (variable in object) {
-  statements
-}
-
- -

Beispiel

- -

Die folgende Funktion nimmt als Argument ein Objekt und dessen Namen entgegen. Anschliessend durchläuft sie alle Eigenschaften des Objekts und liefert einen String zurück, der alle Namen und Werte der Eigenschaften des Objekts enthält.

- -
function dump_props(obj, obj_name) {
-  var result = '';
-  for (var i in obj) {
-    result += obj_name + '.' + i + ' = ' + obj[i] + '<br>';
-  }
-  result += '<hr>';
-  return result;
-}
-
- -

Für ein Objekt car mit den Eigenschaften make und model, sieht das Ergebnis wie folgt aus:

- -
car.make = Ford
-car.model = Mustang
-
- -

Arrays

- -

Auch wenn es nahe liegt diesen Weg zu verwenden, um die Elemente eines {{jsxref("Array")}}s zu durchlaufen, würde das for...in Statement die Namen der definierten Werte und den numerischen Index zurückliefern. Daher ist es besser eine normale {{jsxref("statements/for","for")}} Schleifen mit einem numerischen Index zu verwenden, wenn Arrays durchlaufen werden sollen, da das for...in Statement neben den benutzerdefinierten Elementen auch die Eigenschaften des Arrays durchläuft, wenn man Methoden oder Eigenschaften hinzufügt oder ändert.

- -

for...of Statement

- -

Das {{jsxref("statements/for...of","for...of")}} Statement erstellt eine Schleife, die alle iterable objects (inklusive {{jsxref("Array")}}, {{jsxref("Map")}}, {{jsxref("Set")}}, {{jsxref("functions/arguments","arguments")}} Objekt, etc.) durchläuft und die Anweisungen ausführt, die mit dem Wert des Durchlaufes für jede Eigenschaft übereinstimmt.

- -
for (variable of object) {
-  statement
-}
- -

Das folgende Beispiel zeigt den Unterschied zwischen der for...of Schleife und der {{jsxref("statements/for...in","for...in")}} Schleife. Während for...in die Namen der Eigenschaften durchläuft, durchläuft for...of die Werte der Eigenschaft:

- -
var arr = [3, 5, 7];
-arr.foo = 'hello';
-
-for (var i in arr) {
-   console.log(i); // logs "0", "1", "2", "foo"
-}
-
-for (var i of arr) {
-   console.log(i); // logs 3, 5, 7
-}
-
- -

{{PreviousNext("Web/JavaScript/Guide/Control_flow_and_error_handling", "Web/JavaScript/Guide/Functions")}}

diff --git a/files/de/web/javascript/guide/text_formatting/index.html b/files/de/web/javascript/guide/text_formatting/index.html new file mode 100644 index 0000000000..48c45c9871 --- /dev/null +++ b/files/de/web/javascript/guide/text_formatting/index.html @@ -0,0 +1,257 @@ +--- +title: Textformatierung +slug: Web/JavaScript/Guide/Textformatierung +tags: + - Guide + - JavaScript + - 'l10n:priority' +translation_of: Web/JavaScript/Guide/Text_formatting +--- +
{{jsSidebar("JavaScript Guide")}} {{PreviousNext("Web/JavaScript/Guide/Numbers_and_dates", "Web/JavaScript/Guide/Regular_Expressions")}}
+ +

Dieses Kapitel gibt eine Einführung darüber, wie in JavaScript mit Strings (Zeichenfolgen) und Texten gearbeitet wird.

+ +

Strings

+ +

JavaScript's Datentyp {{Glossary("String")}} wird verwendet, um textuelle Daten zu repräsentieren. Es handelt sich um eine Reihe von Elementen, die ganzzahlige 16-Bit-Werte ohne Vorzeichen (UTF-16 Code Units) sind. Jedes Element belegt eine Position im String. Das erste Element befindet hat den Index 0, das nächste den Index 1 usw. Die Länge des Strings ist die Anzahl der Elemente, die darin enthalten sind. Strings können über String-Literale oder String-Objekte erzeugt werden.

+ +

ACHTUNG: Beim Bearbeiten dieser Seite keine Zeichen mit Zeichencode größer als U+FFFF einfügen, bis MDN bug 857438 behoben wurde ( https://bugzilla.mozilla.org/show_bug.cgi?id=857438 ).

+ +

String Literale

+ +

Einfache Strings können mittels einfacher oder doppelter Anführungszeichen erzeugt werden:

+ +
'foo'
+"bar"
+ +

Anspruchsvollere Strings können mit Escape-Sequenzen erstellt werden:

+ +

Hexadezimale Escape-Sequenzen

+ +

Die Zahl nach \x wird als hexadecimale Zahl interpretiert.

+ +
'\xA9' // "©"
+
+ +

Unicode Escape-Sequenzen

+ +

Unicode Escape-Sequenzen erfordern mindestens vier hexadezimale Ziffern nach \u.

+ +
'\u00A9' // "©"
+ +

Unicode Code Point Escapes

+ +

Diese sind neu in ECMAScript 2015. Mit Unicode Code Point Maskierung können beliebige Zeichen durch Maskierungssequenzen mit hexadezimalen Zahlen erzeugt werden, sodass die Verwendung von Unicode Code Points bis zu 0x10FFFF möglich ist. Mit einfachen Unicode Maskierungssequenz ist es oft notwendig, Surrogate-Hälften als zwei getrennte Maskierungssequenzen zu schreiben, um dasselbe Ergebnis zu erhalten.

+ +

Siehe auch {{jsxref("String.fromCodePoint()")}} oder {{jsxref("String.prototype.codePointAt()")}}.

+ +
'\u{2F804}'
+
+// das gleiche mit einfachen Unicode Escape-Sequenzen
+'\uD87E\uDC04'
+ +

String Objekte

+ +

Das {{jsxref("String")}} Objekt ist ein Wrapper für den primitiven Datentyp String.

+ +
var s = new String('foo'); // Erstellt ein String object
+console.log(s); // Ausgabe: {'0': 'f', '1': 'o', '2': 'o'}
+typeof s; // Gibt 'object' zurück
+
+ +

Beliebige Methoden des String Objekts können als Methoden eines String-Literals aufgerufen werden – JavaScript wandelt das String-Literal automatisch in ein temporäres String Objekt um, ruft die Methode auf und verwirft das temporäre String Objekt anschließend. Außerdem kann die String.length Eigenschaft mit einem String-Literal verwendet werden.

+ +

String-Literale sollten verwendet werden, außer es wird tatsächlich ein String Objekt benötigt, da String Objekte unerwartetes Verhalten aufweisen können. Beispielsweise:

+ +
var s1 = '2 + 2'; // Erzeugt ein String-Literal
+var s2 = new String('2 + 2'); // Erzeugt ein String Objekt
+eval(s1); // Gibt die Zahl 4 zurück
+eval(s2); // Gibt den String "2 + 2" zurück
+ +

Ein String Objekt hat eine Eigenschaft length, die die Anzahl von der UTF-16 Code Units im String angibt. Der folgende Code beispielsweise weist der Variable x den Wert 13 zu, da "Hello, World!" aus 13 Zeichen besteht. Jedes dieser Zeichen wird durch eine UTF-16 Code Unit dargestellt. Auf jede dieser Code Units kann durch eckige Klammern zugegriffen werden. Es können jedoch keine Zeichen geändert werden, da Strings unveränderbare Array-ähnliche Objekte sind:

+ +
var mystring = 'Hello, World!';
+var x = mystring.length;
+mystring[0] = 'L'; // hat keinen Effekt
+mystring[0]; // gibt "H" zurück
+
+ +

Zeichen mit einem Unicode-Wert größer als U+FFFF (wie z.B. manche seltene chinesiche/japanische/koreanische/vietnamesische Zeichen und einige Emoji) werden in UTF-16 als zwei Surrogate Code Units gespeichert. Ein String, der nur aus einem Zeichen, U+1F600 ("Emoji grinning face"), besteht, hätte die Länge 2. Der Zugriff auf einzelne Code Units in einem solchen String kann zu unerwünschten Effekten führen, wie z.B. die Entstehung von String mit unvollständigen Surrogate Code Units, was gegen den Unicode Standard verstößt. (Beispiele dafür sollten zu dieser Seite hinzugefügt werden, sobald MDN bug 857438 behoben wurde.) Siehe auch {{jsxref("String.fromCodePoint()")}} oder {{jsxref("String.prototype.codePointAt()")}}.

+ +

Ein String Objekt verschiedenste Methoden, unter anderem auch welche, die den String in abgewandelter Form zurückgeben, wie z.B. substring und toUpperCase.

+ +

Die folgende Tabelle gibt eine Zusammenfassung der Methoden von {{jsxref("String")}} Objekten.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+

Methoden von String

+
MethodeBeschreibung
{{jsxref("String.charAt", "charAt")}}, {{jsxref("String.charCodeAt", "charCodeAt")}}, {{jsxref("String.codePointAt", "codePointAt")}}Gibt das Zeichen oder den Zeichencode an der angegebenen Stelle im String zurück.
{{jsxref("String.indexOf", "indexOf")}}, {{jsxref("String.lastIndexOf", "lastIndexOf")}}Gibt die erste bzw. letzte Position des angegebenen Teilstrings im String zurück.
{{jsxref("String.startsWith", "startsWith")}}, {{jsxref("String.endsWith", "endsWith")}}, {{jsxref("String.includes", "includes")}}Gibt zurück, ob ein String mit dem angegebenen Teilstring beginnt, endet oder den Teilstring enthält.
{{jsxref("String.concat", "concat")}}Fügt die beiden Strings zusammen und gibt diesen neuen String zurück.
{{jsxref("String.fromCharCode", "fromCharCode")}}, {{jsxref("String.fromCodePoint", "fromCodePoint")}}Erstellt einen String aus den angegebenen Unicode Codes. Es handelt sich um eine Methode der Klasse String, nicht die einer String Instanz.
{{jsxref("String.split", "split")}}Teilt ein String Objekt in ein Array von Teilstrings.
{{jsxref("String.slice", "slice")}}Gibt einen Ausschnitt des Strings als neuen String zurück.
{{jsxref("String.substring", "substring")}}, {{jsxref("String.substr", "substr")}}Gibt einen Ausschnitt des Strings zurück, der entweder durch Angabe der Start- und Endindizes oder durch Angabe des Startindex und einer Länge gebildet wird.
{{jsxref("String.match", "match")}}, {{jsxref("String.replace", "replace")}}, {{jsxref("String.search", "search")}}Verwendet Regular Expressions um Übereinstimmungen mit einem Suchmuster zu finden oder Teile des Strings zu ersetzen.
{{jsxref("String.toUpperCase", "toUpperCase")}}, {{jsxref("String.toLowerCase", "toLowerCase")}} +

Wandelt einen String in Groß- bzw Kleinschreibung um und gibt das Ergebnis als neuen String zurück.

+
{{jsxref("String.normalize", "normalize")}}Gibt die Unicode Normalization Form des Strings zurück.
{{jsxref("String.repeat", "repeat")}}Gibt einen String zurück, in dem der ursprüngliche String mehrfach aneinandergereiht wurde.
{{jsxref("String.trim", "trim")}}Entfernt Leerzeichen vom Anfang und vom Ende des Strings.
+ +

Mehrzeilige Template-Strings

+ +

Template-Strings sind String-Symbole, die eingebettete Ausdrücke erlauben. Mit diesen Ausdrücken können mehrzeilige Strings und String-Interpolation genutzt werden.

+ +

Template-Strings sind anstelle von doppelten bzw. einfachen Anführungszeichen in Back-Ticks (` `) (grave accent) eingeschlossen. Template-Strings können Platzhalter beinhalten, die durch das Dollarsymbol gefolgt von geschweiften Klammern gekennzeichnet sind (${expression}).

+ +

Mehrzeilige Strings

+ +

Alle Zeichen, die einen Zeilenumbruch einleiten und sich zwischen Back-Ticks befinden, werden als Teil des Template Strings verwendet. Bei normalen Strings muss die folgende Syntax genutzt werden, um Strings mit Zeilenumbrücken über mehrere Codezeilen zu definieren:

+ +
console.log('string text line 1\n\
+string text line 2');
+// "string text line 1
+// string text line 2"
+ +

Um dasselbe Ergebnis mit Template-Strings zu erreichen, kann die folgende Schreibweise genutzt werden:

+ +
console.log(`string text line 1
+string text line 2`);
+// "string text line 1
+// string text line 2"
+ +

Erweiterung von Ausdrücken

+ +

Um Ausdrücke in normale Strings einzufügen, müsste die folgende Syntax genutzt werden:

+ +
var a = 5;
+var b = 10;
+console.log('Fifteen is ' + (a + b) + ' and\nnot ' + (2 * a + b) + '.');
+// "Fifteen is 15 and
+// not 20."
+ +

Mit Template-Strings können nun die syntaktischen Vorteile genutzt werden um solche Ersetzungen leserlicher zu machen:

+ +
var a = 5;
+var b = 10;
+console.log(`Fifteen is ${a + b} and\nnot ${2 * a + b}.`);
+// "Fifteen is 15 and
+// not 20."
+ +

Mehr Informationen sind unter Template-Strings in der JavaScript-Referenz nachzulesen. 

+ +

Internationalization

+ +

Das {{jsxref("Intl")}} Objekt ist der Namespace für das ECMAScript Internationalization API, welches sprachabhängige String-Vergleiche, Zahlen-, Datums- und Uhrzeitformate bereitstellt. Die Konstruktoren für {{jsxref("Collator")}}, {{jsxref("NumberFormat")}} und {{jsxref("DateTimeFormat")}} Objekte sind Eigenschaften des Intl Objekts.

+ +

Datums- und Uhrzeitformatierung

+ +

Das {{jsxref("DateTimeFormat")}} Objekt hilft bei der Datums- oder Uhrzeitformatierung. Im folgenden Beispiel wird ein Datum für amerikanisches Englisch formatiert. (Das Ergebnis variiert je nach eingestellter Zeitzone.)

+ +
var msPerDay = 24 * 60 * 60 * 1000;
+
+// July 17, 2014 00:00:00 UTC.
+var july172014 = new Date(msPerDay * (44 * 365 + 11 + 197));
+
+var options = { year: '2-digit', month: '2-digit', day: '2-digit',
+                hour: '2-digit', minute: '2-digit', timeZoneName: 'short' };
+var americanDateTime = new Intl.DateTimeFormat('en-US', options).format;
+
+console.log(americanDateTime(july172014)); // 07/16/14, 5:00 PM PDT
+
+ +

Zahlenformatierung

+ +

Das {{jsxref("NumberFormat")}} Objekt hilft bei der Formatierung von Zahlen, wie z.B. Währungen.

+ +
var gasPrice = new Intl.NumberFormat('en-US',
+                        { style: 'currency', currency: 'USD',
+                          minimumFractionDigits: 3 });
+
+console.log(gasPrice.format(5.259)); // $5.259
+
+var hanDecimalRMBInChina = new Intl.NumberFormat('zh-CN-u-nu-hanidec',
+                        { style: 'currency', currency: 'CNY' });
+
+console.log(hanDecimalRMBInChina.format(1314.25)); // ¥ 一,三一四.二五
+
+ +

Sortierung

+ +

Das {{jsxref("Collator")}} Objekt hilft beim Vergleichen und Sortieren von Strings.

+ +

Zum Beispiel gibt es im Deutschen zwei unterschiedliche Sortierreihenfolgen: Telefonbuchsortierung und Wörterbuchsortierung. Bei der Telefonbuchsortierung werden "ä", "ö" etc. so sortiert, als ob es sich um "ae", "oe" etc. handeln würde.

+ +
var names = ['Hochberg', 'Hönigswald', 'Holzman'];
+
+var germanPhonebook = new Intl.Collator('de-DE-u-co-phonebk');
+
+// as if sorting ["Hochberg", "Hoenigswald", "Holzman"]:
+console.log(names.sort(germanPhonebook.compare).join(', '));
+// logs "Hochberg, Hönigswald, Holzman"
+
+ +

Bei manchen Beugungsformen wird ein Vokal zu einem Umlaut, daher ist es sinnvoll, Wörterbücher so zu sortieren, dass Vokale und Umlaute gleich sortiert werden. Bei der Sortierung wird dann also "ä" wie "a" und "ö" wie "o" sortiert. Eine Ausnahme stellen Wörter dar, die sich nur im Umlaut unterscheiden. In solchen Fällen wird der Vokal vor dem Umlaut gereiht (z.B. schon vor schön). 

+ +
var germanDictionary = new Intl.Collator('de-DE-u-co-dict');
+
+// as if sorting ["Hochberg", "Honigswald", "Holzman"]:
+console.log(names.sort(germanDictionary.compare).join(', '));
+// logs "Hochberg, Holzman, Hönigswald"
+
+ +

Mehr Informationen über das {{jsxref("Intl")}} API können unter Introducing the JavaScript Internationalization API (in Englisch) nachgelesen werden.

+ +
{{PreviousNext("Web/JavaScript/Guide/Numbers_and_dates", "Web/JavaScript/Guide/Regular_Expressions")}}
diff --git a/files/de/web/javascript/guide/textformatierung/index.html b/files/de/web/javascript/guide/textformatierung/index.html deleted file mode 100644 index 48c45c9871..0000000000 --- a/files/de/web/javascript/guide/textformatierung/index.html +++ /dev/null @@ -1,257 +0,0 @@ ---- -title: Textformatierung -slug: Web/JavaScript/Guide/Textformatierung -tags: - - Guide - - JavaScript - - 'l10n:priority' -translation_of: Web/JavaScript/Guide/Text_formatting ---- -
{{jsSidebar("JavaScript Guide")}} {{PreviousNext("Web/JavaScript/Guide/Numbers_and_dates", "Web/JavaScript/Guide/Regular_Expressions")}}
- -

Dieses Kapitel gibt eine Einführung darüber, wie in JavaScript mit Strings (Zeichenfolgen) und Texten gearbeitet wird.

- -

Strings

- -

JavaScript's Datentyp {{Glossary("String")}} wird verwendet, um textuelle Daten zu repräsentieren. Es handelt sich um eine Reihe von Elementen, die ganzzahlige 16-Bit-Werte ohne Vorzeichen (UTF-16 Code Units) sind. Jedes Element belegt eine Position im String. Das erste Element befindet hat den Index 0, das nächste den Index 1 usw. Die Länge des Strings ist die Anzahl der Elemente, die darin enthalten sind. Strings können über String-Literale oder String-Objekte erzeugt werden.

- -

ACHTUNG: Beim Bearbeiten dieser Seite keine Zeichen mit Zeichencode größer als U+FFFF einfügen, bis MDN bug 857438 behoben wurde ( https://bugzilla.mozilla.org/show_bug.cgi?id=857438 ).

- -

String Literale

- -

Einfache Strings können mittels einfacher oder doppelter Anführungszeichen erzeugt werden:

- -
'foo'
-"bar"
- -

Anspruchsvollere Strings können mit Escape-Sequenzen erstellt werden:

- -

Hexadezimale Escape-Sequenzen

- -

Die Zahl nach \x wird als hexadecimale Zahl interpretiert.

- -
'\xA9' // "©"
-
- -

Unicode Escape-Sequenzen

- -

Unicode Escape-Sequenzen erfordern mindestens vier hexadezimale Ziffern nach \u.

- -
'\u00A9' // "©"
- -

Unicode Code Point Escapes

- -

Diese sind neu in ECMAScript 2015. Mit Unicode Code Point Maskierung können beliebige Zeichen durch Maskierungssequenzen mit hexadezimalen Zahlen erzeugt werden, sodass die Verwendung von Unicode Code Points bis zu 0x10FFFF möglich ist. Mit einfachen Unicode Maskierungssequenz ist es oft notwendig, Surrogate-Hälften als zwei getrennte Maskierungssequenzen zu schreiben, um dasselbe Ergebnis zu erhalten.

- -

Siehe auch {{jsxref("String.fromCodePoint()")}} oder {{jsxref("String.prototype.codePointAt()")}}.

- -
'\u{2F804}'
-
-// das gleiche mit einfachen Unicode Escape-Sequenzen
-'\uD87E\uDC04'
- -

String Objekte

- -

Das {{jsxref("String")}} Objekt ist ein Wrapper für den primitiven Datentyp String.

- -
var s = new String('foo'); // Erstellt ein String object
-console.log(s); // Ausgabe: {'0': 'f', '1': 'o', '2': 'o'}
-typeof s; // Gibt 'object' zurück
-
- -

Beliebige Methoden des String Objekts können als Methoden eines String-Literals aufgerufen werden – JavaScript wandelt das String-Literal automatisch in ein temporäres String Objekt um, ruft die Methode auf und verwirft das temporäre String Objekt anschließend. Außerdem kann die String.length Eigenschaft mit einem String-Literal verwendet werden.

- -

String-Literale sollten verwendet werden, außer es wird tatsächlich ein String Objekt benötigt, da String Objekte unerwartetes Verhalten aufweisen können. Beispielsweise:

- -
var s1 = '2 + 2'; // Erzeugt ein String-Literal
-var s2 = new String('2 + 2'); // Erzeugt ein String Objekt
-eval(s1); // Gibt die Zahl 4 zurück
-eval(s2); // Gibt den String "2 + 2" zurück
- -

Ein String Objekt hat eine Eigenschaft length, die die Anzahl von der UTF-16 Code Units im String angibt. Der folgende Code beispielsweise weist der Variable x den Wert 13 zu, da "Hello, World!" aus 13 Zeichen besteht. Jedes dieser Zeichen wird durch eine UTF-16 Code Unit dargestellt. Auf jede dieser Code Units kann durch eckige Klammern zugegriffen werden. Es können jedoch keine Zeichen geändert werden, da Strings unveränderbare Array-ähnliche Objekte sind:

- -
var mystring = 'Hello, World!';
-var x = mystring.length;
-mystring[0] = 'L'; // hat keinen Effekt
-mystring[0]; // gibt "H" zurück
-
- -

Zeichen mit einem Unicode-Wert größer als U+FFFF (wie z.B. manche seltene chinesiche/japanische/koreanische/vietnamesische Zeichen und einige Emoji) werden in UTF-16 als zwei Surrogate Code Units gespeichert. Ein String, der nur aus einem Zeichen, U+1F600 ("Emoji grinning face"), besteht, hätte die Länge 2. Der Zugriff auf einzelne Code Units in einem solchen String kann zu unerwünschten Effekten führen, wie z.B. die Entstehung von String mit unvollständigen Surrogate Code Units, was gegen den Unicode Standard verstößt. (Beispiele dafür sollten zu dieser Seite hinzugefügt werden, sobald MDN bug 857438 behoben wurde.) Siehe auch {{jsxref("String.fromCodePoint()")}} oder {{jsxref("String.prototype.codePointAt()")}}.

- -

Ein String Objekt verschiedenste Methoden, unter anderem auch welche, die den String in abgewandelter Form zurückgeben, wie z.B. substring und toUpperCase.

- -

Die folgende Tabelle gibt eine Zusammenfassung der Methoden von {{jsxref("String")}} Objekten.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
-

Methoden von String

-
MethodeBeschreibung
{{jsxref("String.charAt", "charAt")}}, {{jsxref("String.charCodeAt", "charCodeAt")}}, {{jsxref("String.codePointAt", "codePointAt")}}Gibt das Zeichen oder den Zeichencode an der angegebenen Stelle im String zurück.
{{jsxref("String.indexOf", "indexOf")}}, {{jsxref("String.lastIndexOf", "lastIndexOf")}}Gibt die erste bzw. letzte Position des angegebenen Teilstrings im String zurück.
{{jsxref("String.startsWith", "startsWith")}}, {{jsxref("String.endsWith", "endsWith")}}, {{jsxref("String.includes", "includes")}}Gibt zurück, ob ein String mit dem angegebenen Teilstring beginnt, endet oder den Teilstring enthält.
{{jsxref("String.concat", "concat")}}Fügt die beiden Strings zusammen und gibt diesen neuen String zurück.
{{jsxref("String.fromCharCode", "fromCharCode")}}, {{jsxref("String.fromCodePoint", "fromCodePoint")}}Erstellt einen String aus den angegebenen Unicode Codes. Es handelt sich um eine Methode der Klasse String, nicht die einer String Instanz.
{{jsxref("String.split", "split")}}Teilt ein String Objekt in ein Array von Teilstrings.
{{jsxref("String.slice", "slice")}}Gibt einen Ausschnitt des Strings als neuen String zurück.
{{jsxref("String.substring", "substring")}}, {{jsxref("String.substr", "substr")}}Gibt einen Ausschnitt des Strings zurück, der entweder durch Angabe der Start- und Endindizes oder durch Angabe des Startindex und einer Länge gebildet wird.
{{jsxref("String.match", "match")}}, {{jsxref("String.replace", "replace")}}, {{jsxref("String.search", "search")}}Verwendet Regular Expressions um Übereinstimmungen mit einem Suchmuster zu finden oder Teile des Strings zu ersetzen.
{{jsxref("String.toUpperCase", "toUpperCase")}}, {{jsxref("String.toLowerCase", "toLowerCase")}} -

Wandelt einen String in Groß- bzw Kleinschreibung um und gibt das Ergebnis als neuen String zurück.

-
{{jsxref("String.normalize", "normalize")}}Gibt die Unicode Normalization Form des Strings zurück.
{{jsxref("String.repeat", "repeat")}}Gibt einen String zurück, in dem der ursprüngliche String mehrfach aneinandergereiht wurde.
{{jsxref("String.trim", "trim")}}Entfernt Leerzeichen vom Anfang und vom Ende des Strings.
- -

Mehrzeilige Template-Strings

- -

Template-Strings sind String-Symbole, die eingebettete Ausdrücke erlauben. Mit diesen Ausdrücken können mehrzeilige Strings und String-Interpolation genutzt werden.

- -

Template-Strings sind anstelle von doppelten bzw. einfachen Anführungszeichen in Back-Ticks (` `) (grave accent) eingeschlossen. Template-Strings können Platzhalter beinhalten, die durch das Dollarsymbol gefolgt von geschweiften Klammern gekennzeichnet sind (${expression}).

- -

Mehrzeilige Strings

- -

Alle Zeichen, die einen Zeilenumbruch einleiten und sich zwischen Back-Ticks befinden, werden als Teil des Template Strings verwendet. Bei normalen Strings muss die folgende Syntax genutzt werden, um Strings mit Zeilenumbrücken über mehrere Codezeilen zu definieren:

- -
console.log('string text line 1\n\
-string text line 2');
-// "string text line 1
-// string text line 2"
- -

Um dasselbe Ergebnis mit Template-Strings zu erreichen, kann die folgende Schreibweise genutzt werden:

- -
console.log(`string text line 1
-string text line 2`);
-// "string text line 1
-// string text line 2"
- -

Erweiterung von Ausdrücken

- -

Um Ausdrücke in normale Strings einzufügen, müsste die folgende Syntax genutzt werden:

- -
var a = 5;
-var b = 10;
-console.log('Fifteen is ' + (a + b) + ' and\nnot ' + (2 * a + b) + '.');
-// "Fifteen is 15 and
-// not 20."
- -

Mit Template-Strings können nun die syntaktischen Vorteile genutzt werden um solche Ersetzungen leserlicher zu machen:

- -
var a = 5;
-var b = 10;
-console.log(`Fifteen is ${a + b} and\nnot ${2 * a + b}.`);
-// "Fifteen is 15 and
-// not 20."
- -

Mehr Informationen sind unter Template-Strings in der JavaScript-Referenz nachzulesen. 

- -

Internationalization

- -

Das {{jsxref("Intl")}} Objekt ist der Namespace für das ECMAScript Internationalization API, welches sprachabhängige String-Vergleiche, Zahlen-, Datums- und Uhrzeitformate bereitstellt. Die Konstruktoren für {{jsxref("Collator")}}, {{jsxref("NumberFormat")}} und {{jsxref("DateTimeFormat")}} Objekte sind Eigenschaften des Intl Objekts.

- -

Datums- und Uhrzeitformatierung

- -

Das {{jsxref("DateTimeFormat")}} Objekt hilft bei der Datums- oder Uhrzeitformatierung. Im folgenden Beispiel wird ein Datum für amerikanisches Englisch formatiert. (Das Ergebnis variiert je nach eingestellter Zeitzone.)

- -
var msPerDay = 24 * 60 * 60 * 1000;
-
-// July 17, 2014 00:00:00 UTC.
-var july172014 = new Date(msPerDay * (44 * 365 + 11 + 197));
-
-var options = { year: '2-digit', month: '2-digit', day: '2-digit',
-                hour: '2-digit', minute: '2-digit', timeZoneName: 'short' };
-var americanDateTime = new Intl.DateTimeFormat('en-US', options).format;
-
-console.log(americanDateTime(july172014)); // 07/16/14, 5:00 PM PDT
-
- -

Zahlenformatierung

- -

Das {{jsxref("NumberFormat")}} Objekt hilft bei der Formatierung von Zahlen, wie z.B. Währungen.

- -
var gasPrice = new Intl.NumberFormat('en-US',
-                        { style: 'currency', currency: 'USD',
-                          minimumFractionDigits: 3 });
-
-console.log(gasPrice.format(5.259)); // $5.259
-
-var hanDecimalRMBInChina = new Intl.NumberFormat('zh-CN-u-nu-hanidec',
-                        { style: 'currency', currency: 'CNY' });
-
-console.log(hanDecimalRMBInChina.format(1314.25)); // ¥ 一,三一四.二五
-
- -

Sortierung

- -

Das {{jsxref("Collator")}} Objekt hilft beim Vergleichen und Sortieren von Strings.

- -

Zum Beispiel gibt es im Deutschen zwei unterschiedliche Sortierreihenfolgen: Telefonbuchsortierung und Wörterbuchsortierung. Bei der Telefonbuchsortierung werden "ä", "ö" etc. so sortiert, als ob es sich um "ae", "oe" etc. handeln würde.

- -
var names = ['Hochberg', 'Hönigswald', 'Holzman'];
-
-var germanPhonebook = new Intl.Collator('de-DE-u-co-phonebk');
-
-// as if sorting ["Hochberg", "Hoenigswald", "Holzman"]:
-console.log(names.sort(germanPhonebook.compare).join(', '));
-// logs "Hochberg, Hönigswald, Holzman"
-
- -

Bei manchen Beugungsformen wird ein Vokal zu einem Umlaut, daher ist es sinnvoll, Wörterbücher so zu sortieren, dass Vokale und Umlaute gleich sortiert werden. Bei der Sortierung wird dann also "ä" wie "a" und "ö" wie "o" sortiert. Eine Ausnahme stellen Wörter dar, die sich nur im Umlaut unterscheiden. In solchen Fällen wird der Vokal vor dem Umlaut gereiht (z.B. schon vor schön). 

- -
var germanDictionary = new Intl.Collator('de-DE-u-co-dict');
-
-// as if sorting ["Hochberg", "Honigswald", "Holzman"]:
-console.log(names.sort(germanDictionary.compare).join(', '));
-// logs "Hochberg, Holzman, Hönigswald"
-
- -

Mehr Informationen über das {{jsxref("Intl")}} API können unter Introducing the JavaScript Internationalization API (in Englisch) nachgelesen werden.

- -
{{PreviousNext("Web/JavaScript/Guide/Numbers_and_dates", "Web/JavaScript/Guide/Regular_Expressions")}}
diff --git a/files/de/web/javascript/guide/working_with_objects/index.html b/files/de/web/javascript/guide/working_with_objects/index.html new file mode 100644 index 0000000000..2448621a4a --- /dev/null +++ b/files/de/web/javascript/guide/working_with_objects/index.html @@ -0,0 +1,506 @@ +--- +title: Mit Objekten arbeiten +slug: Web/JavaScript/Guide/Mit_Objekten_arbeiten +tags: + - Beginner + - Comparing object + - Constructor + - Document + - Guide + - JavaScript + - Object + - 'l10n:priority' +translation_of: Web/JavaScript/Guide/Working_with_Objects +--- +
{{jsSidebar("JavaScript Guide")}} {{PreviousNext("Web/JavaScript/Guide/Regular_Expressions", "Web/JavaScript/Guide/Feinheiten_des_Objektmodells")}}
+ +

JavaScript ist nach einem einfachen objekt-basierten Muster entworfen. Ein Objekt ist eine Sammlung von Eigenschaften und eine Eigenschaft ist eine Verbindung von einem Namen und einem Wert. Der Wert einer Eigenschaft kann eine Funktion sein. In diesem Fall wird die Eigenschaft Methode genannt. Zusätzlich zu Objekten, die vom Browser vordefiniert sind, können auch eigene Objekte definiert werden. Dieses Kapitel beschreibt, wie Objekte, Eigenschaften, Funktionen und Methoden benutzt und eigene Objekte erzeugt werden können.

+ +

Objekte Übersicht

+ +

Objekte in JavaScript, wie in vielen anderen Programmiersprachen, können mit Objekten aus dem realen Leben verglichen werden. Das Konzept der Objekte in JavaScript kann mit greifbaren Objekten aus der realen Welt verstanden werden.

+ +

In JavaScript ist ein Objekt eine für sich stehende Einheit mit Eigenschaften und Typ. Vergleichbar mit einer Tasse zum Beispiel. Eine Tasse ist ein Objekt mit Eigenschaften. Eine Tasse hat eine Farbe, ein Design, ein Gewicht, ein Material, aus dem sie erstellt wurde, usw. Ebenso können JavaScript Objekte Eigenschaften besitzen, die Ihre Besonderheiten definieren.

+ +

Objekte und Eigenschaften

+ +

Ein JavaScript Objekt besitzt mit ihm verbundene Eigenschaften. Eine Eigenschaft eines Objekts kann als Variable erklärt werden, die dem Objekt angeheftet ist. Objekteigenschaften sind grundsätzlich das Gleiche wie übliche Variablen ausser der Verknüpfung mit Objekten. Die Eigenschaften eines Objekts definieren seine Charakteristik. Auf die Eigenschaften eines Objekt kann mit einer einfachen Punkt-Notation zugegriffen werden:

+ +
objectName.propertyName
+
+ +

Wie bei allen JavaScript-Variablen sind Objektname (eine normale Variable) und Attribute groß-, und kleinschreibungsabhängig. Ein Attribut wird definiert, indem es einen Wert zugewiesen bekommt. Zum Beispiel: Ein Objekt namens myCar mit den Attributen make, model, und year:

+ +
var myCar = new Object();
+myCar.make = "Ford";
+myCar.model = "Mustang";
+myCar.year = 1969;
+
+ +

Nicht initialisierte Eigenschaften eines Objektes haben den Wert {{jsxref("undefined")}} (nicht {{jsxref("null")}}).

+ +
myCar.color; // undefined
+ +

Eigenschaften von JavaScript-Objekten können auch mit der Klammernotation (für weitere Informationen siehe property accessors). Objekte werden manchmal assoziative Arrays genannt da jede Eigenschaft mit einer Zeichenkette assoziiert ist mit der man auf die Eigenschaft zugreifen kann. Zum Beispiel kann man auf die Eigenschaften des Objekts myCar folgendermassen zugreifen:

+ +
myCar["make"] = "Ford";
+myCar["model"] = "Mustang";
+myCar["year"] = 1969;
+
+ +

Der Name einer Objekteigenschaft kann ein valider JavaScript String sein. Dies kann auch alles sein, was in einen String convertiert werden kann, inklusive eines leeren Strings. Immer, wenn der Name einer Eigenschaft kein valider JavaScript Bezeichner ist (zum Beispiel ein Name mit einem Leerzeichen oder einem minus oder ein Name der mit einer Ziffer beginnt), kann dieses nur über die Klammernotation erreicht werden. Diese Notation ist zusätzlich sehr hilfreich, wenn Namen von Eigenschaften dynamisch ermittelt werden (Wenn die Namen nicht bis zur Laufzeit ermittelt werden können). Im folgenden ein Beispiel:

+ +
// four variables are created and assigned in a single go,
+// separated by commas
+var myObj = new Object(),
+    str = 'myString',
+    rand = Math.random(),
+    obj = new Object();
+
+myObj.type              = 'Dot syntax';
+myObj['date created']   = 'String with space';
+myObj[str]              = 'String value';
+myObj[rand]             = 'Random Number';
+myObj[obj]              = 'Object';
+myObj['']               = 'Even an empty string';
+
+console.log(myObj);
+
+ +

Zu bemerken ist, dass alle Schlüssel in der Klammernotation zum Typ Strings konvertiert werden, weil in JavaScript nur Strings als Schlüssel bei Objekte erlaubt sind. Zum Beispiel wird im orberen Beispiel obj konvertiert wenn es in myObj benutzt wird. JavaScript ruft die obj.toString() Methode auf und benutzt den resultierenden String als neuen Schlüssel.

+ +

Man kann eine Eigenschaft auch erreichen, indem eine Variable vom Typ String benutzt wird:

+ +
var propertyName = 'make';
+myCar[propertyName] = 'Ford';
+
+propertyName = 'model';
+myCar[propertyName] = 'Mustang';
+
+ +

Man kann die Klammernotation mit for...in nutzen, um über alle enumerable (aufzählbaren) Eigenschaften eines Objektes zu iterieren. Um dieses zu zeigen wie das funktioniert, zeigt die folgende Funktion die Eigenschaften eines Objektes, wenn eine Objekt und der Name des Objektes der Funktion als Parameter übergeben werden:

+ +
function showProps(obj, objName) {
+  var result = '';
+  for (var i in obj) {
+    // obj.hasOwnProperty() wird benutzt um Eigenschaften aus der Prototypen-Kette herauszufiltern
+    if (obj.hasOwnProperty(i)) {
+      result += objName + '.' + i + ' = ' + obj[i] + '\n';
+    }
+  }
+  return result;
+}
+
+ +

So gibt der Aufruf showProps(myCar, "myCar") folgenden Rückgabewert zurück:

+ +
myCar.make = Ford
+myCar.model = Mustang
+myCar.year = 1969
+ +

Enumerate the properties of an object

+ +

Starting with ECMAScript 5, there are three native ways to list/traverse object properties:

+ + + +

Before ECMAScript 5, there was no native way to list all properties of an object. However, this can be achieved with the following function:

+ +
function listAllProperties(o) {
+	var objectToInspect;
+	var result = [];
+
+	for(objectToInspect = o; objectToInspect !== null; objectToInspect = Object.getPrototypeOf(objectToInspect)) {
+      result = result.concat(Object.getOwnPropertyNames(objectToInspect));
+	}
+
+	return result;
+}
+
+ +

This can be useful to reveal "hidden" properties (properties in the prototype chain which are not accessible through the object, because another property has the same name earlier in the prototype chain). Listing accessible properties only can easily be done by removing duplicates in the array.

+ +

Creating new objects

+ +

JavaScript has a number of predefined objects. In addition, you can create your own objects. You can create an object using an object initializer. Alternatively, you can first create a constructor function and then instantiate an object invoking that function in conjunction with the new operator.

+ +

Using object initializers

+ +

In addition to creating objects using a constructor function, you can create objects using an object initializer. Using object initializers is sometimes referred to as creating objects with literal notation. "Object initializer" is consistent with the terminology used by C++.

+ +

The syntax for an object using an object initializer is:

+ +
var obj = { property_1:   value_1,   // property_# may be an identifier...
+            2:            value_2,   // or a number...
+            // ...,
+            'property n': value_n }; // or a string
+
+ +

where obj is the name of the new object, each property_i is an identifier (either a name, a number, or a string literal), and each value_i is an expression whose value is assigned to the property_i. The obj and assignment is optional; if you do not need to refer to this object elsewhere, you do not need to assign it to a variable. (Note that you may need to wrap the object literal in parentheses if the object appears where a statement is expected, so as not to have the literal be confused with a block statement.)

+ +

Object initializers are expressions, and each object initializer results in a new object being created whenever the statement in which it appears is executed. Identical object initializers create distinct objects that will not compare to each other as equal. Objects are created as if a call to new Object() were made; that is, objects made from object literal expressions are instances of Object.

+ +

The following statement creates an object and assigns it to the variable x if and only if the expression cond is true:

+ +
if (cond) var x = {greeting: 'hi there'};
+
+ +

The following example creates myHonda with three properties. Note that the engine property is also an object with its own properties.

+ +
var myHonda = {color: 'red', wheels: 4, engine: {cylinders: 4, size: 2.2}};
+
+ +

You can also use object initializers to create arrays. See array literals.

+ +

Using a constructor function

+ +

Alternatively, you can create an object with these two steps:

+ +
    +
  1. Define the object type by writing a constructor function. There is a strong convention, with good reason, to use a capital initial letter.
  2. +
  3. Create an instance of the object with new.
  4. +
+ +

To define an object type, create a function for the object type that specifies its name, properties, and methods. For example, suppose you want to create an object type for cars. You want this type of object to be called Car, and you want it to have properties for make, model, and year. To do this, you would write the following function:

+ +
function Car(make, model, year) {
+  this.make = make;
+  this.model = model;
+  this.year = year;
+}
+
+ +

Notice the use of this to assign values to the object's properties based on the values passed to the function.

+ +

Now you can create an object called mycar as follows:

+ +
var mycar = new Car('Eagle', 'Talon TSi', 1993);
+
+ +

This statement creates mycar and assigns it the specified values for its properties. Then the value of mycar.make is the string "Eagle", mycar.year is the integer 1993, and so on.

+ +

You can create any number of Car objects by calls to new. For example,

+ +
var kenscar = new Car('Nissan', '300ZX', 1992);
+var vpgscar = new Car('Mazda', 'Miata', 1990);
+
+ +

An object can have a property that is itself another object. For example, suppose you define an object called person as follows:

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

and then instantiate two new person objects as follows:

+ +
var rand = new Person('Rand McKinnon', 33, 'M');
+var ken = new Person('Ken Jones', 39, 'M');
+
+ +

Then, you can rewrite the definition of Car to include an owner property that takes a person object, as follows:

+ +
function Car(make, model, year, owner) {
+  this.make = make;
+  this.model = model;
+  this.year = year;
+  this.owner = owner;
+}
+
+ +

To instantiate the new objects, you then use the following:

+ +
var car1 = new Car('Eagle', 'Talon TSi', 1993, rand);
+var car2 = new Car('Nissan', '300ZX', 1992, ken);
+
+ +

Notice that instead of passing a literal string or integer value when creating the new objects, the above statements pass the objects rand and ken as the arguments for the owners. Then if you want to find out the name of the owner of car2, you can access the following property:

+ +
car2.owner.name
+
+ +

Note that you can always add a property to a previously defined object. For example, the statement

+ +
car1.color = 'black';
+
+ +

adds a property color to car1, and assigns it a value of "black." However, this does not affect any other objects. To add the new property to all objects of the same type, you have to add the property to the definition of the Car object type.

+ +

Using the Object.create method

+ +

Objects can also be created using the {{jsxref("Object.create()")}} method. This method can be very useful, because it allows you to choose the prototype object for the object you want to create, without having to define a constructor function.

+ +
// Animal properties and method encapsulation
+var Animal = {
+  type: 'Invertebrates', // Default value of properties
+  displayType: function() {  // Method which will display type of Animal
+    console.log(this.type);
+  }
+};
+
+// Create new animal type called animal1
+var animal1 = Object.create(Animal);
+animal1.displayType(); // Output:Invertebrates
+
+// Create new animal type called Fishes
+var fish = Object.create(Animal);
+fish.type = 'Fishes';
+fish.displayType(); // Output:Fishes
+ +

Inheritance

+ +

All objects in JavaScript inherit from at least one other object. The object being inherited from is known as the prototype, and the inherited properties can be found in the prototype object of the constructor. See Inheritance and the prototype chain for more information.

+ +

Indexing object properties

+ +

You can refer to a property of an object either by its property name or by its ordinal index. If you initially define a property by its name, you must always refer to it by its name, and if you initially define a property by an index, you must always refer to it by its index.

+ +

This restriction applies when you create an object and its properties with a constructor function (as we did previously with the Car object type) and when you define individual properties explicitly (for example, myCar.color = "red"). If you initially define an object property with an index, such as myCar[5] = "25 mpg", you subsequently refer to the property only as myCar[5].

+ +

The exception to this rule is objects reflected from HTML, such as the forms array. You can always refer to objects in these arrays by either their ordinal number (based on where they appear in the document) or their name (if defined). For example, if the second <FORM> tag in a document has a NAME attribute of "myForm", you can refer to the form as document.forms[1] or document.forms["myForm"] or document.forms.myForm.

+ +

Defining properties for an object type

+ +

You can add a property to a previously defined object type by using the prototype property. This defines a property that is shared by all objects of the specified type, rather than by just one instance of the object. The following code adds a color property to all objects of type Car, and then assigns a value to the color property of the object car1.

+ +
Car.prototype.color = null;
+car1.color = 'black';
+
+ +

See the prototype property of the Function object in the JavaScript reference for more information.

+ +

Defining methods

+ +

A method is a function associated with an object, or, simply put, a method is a property of an object that is a function. Methods are defined the way normal functions are defined, except that they have to be assigned as the property of an object. See also method definitions for more details. An example is:

+ +
objectName.methodname = functionName;
+
+var myObj = {
+  myMethod: function(params) {
+    // ...do something
+  }
+
+  // OR THIS WORKS TOO
+
+  myOtherMethod(params) {
+    // ...do something else
+  }
+};
+
+ +

where objectName is an existing object, methodname is the name you are assigning to the method, and functionName is the name of the function.

+ +

You can then call the method in the context of the object as follows:

+ +
object.methodname(params);
+
+ +

You can define methods for an object type by including a method definition in the object constructor function. You could define a function that would format and display the properties of the previously-defined Car objects; for example,

+ +
function displayCar() {
+  var result = 'A Beautiful ' + this.year + ' ' + this.make
+    + ' ' + this.model;
+  pretty_print(result);
+}
+
+ +

where pretty_print is a function to display a horizontal rule and a string. Notice the use of this to refer to the object to which the method belongs.

+ +

You can make this function a method of Car by adding the statement

+ +
this.displayCar = displayCar;
+
+ +

to the object definition. So, the full definition of Car would now look like

+ +
function Car(make, model, year, owner) {
+  this.make = make;
+  this.model = model;
+  this.year = year;
+  this.owner = owner;
+  this.displayCar = displayCar;
+}
+
+ +

Then you can call the displayCar method for each of the objects as follows:

+ +
car1.displayCar();
+car2.displayCar();
+
+ +

Using this for object references

+ +

JavaScript has a special keyword, this, that you can use within a method to refer to the current object. For example, suppose you have a function called validate that validates an object's value property, given the object and the high and low values:

+ +
function validate(obj, lowval, hival) {
+  if ((obj.value < lowval) || (obj.value > hival)) {
+    alert('Invalid Value!');
+  }
+}
+
+ +

Then, you could call validate in each form element's onchange event handler, using this to pass it the element, as in the following example:

+ +
<input type="text" name="age" size="3"
+  onChange="validate(this, 18, 99)">
+
+ +

In general, this refers to the calling object in a method.

+ +

When combined with the form property, this can refer to the current object's parent form. In the following example, the form myForm contains a Text object and a button. When the user clicks the button, the value of the Text object is set to the form's name. The button's onclick event handler uses this.form to refer to the parent form, myForm.

+ +
<form name="myForm">
+<p><label>Form name:<input type="text" name="text1" value="Beluga"></label>
+<p><input name="button1" type="button" value="Show Form Name"
+     onclick="this.form.text1.value = this.form.name">
+</p>
+</form>
+ +

Defining getters and setters

+ +

A getter is a method that gets the value of a specific property. A setter is a method that sets the value of a specific property. You can define getters and setters on any predefined core object or user-defined object that supports the addition of new properties. The syntax for defining getters and setters uses the object literal syntax.

+ +

The following illustrates how getters and setters could work for a user-defined object o.

+ +
var o = {
+  a: 7,
+  get b() {
+    return this.a + 1;
+  },
+  set c(x) {
+    this.a = x / 2;
+  }
+};
+
+console.log(o.a); // 7
+console.log(o.b); // 8
+o.c = 50;
+console.log(o.a); // 25
+
+ +

The o object's properties are:

+ + + +

Please note that function names of getters and setters defined in an object literal using "[gs]et property()" (as opposed to __define[GS]etter__ ) are not the names of the getters themselves, even though the [gs]et propertyName(){ } syntax may mislead you to think otherwise. To name a function in a getter or setter using the "[gs]et property()" syntax, define an explicitly named function programmatically using Object.defineProperty (or the Object.prototype.__defineGetter__ legacy fallback).

+ +

The following code illustrates how getters and setters can extend the {{jsxref("Date")}} prototype to add a year property to all instances of the predefined Date class. It uses the Date class's existing getFullYear and setFullYear methods to support the year property's getter and setter.

+ +

These statements define a getter and setter for the year property:

+ +
var d = Date.prototype;
+Object.defineProperty(d, 'year', {
+  get: function() { return this.getFullYear(); },
+  set: function(y) { this.setFullYear(y); }
+});
+
+ +

These statements use the getter and setter in a Date object:

+ +
var now = new Date();
+console.log(now.year); // 2000
+now.year = 2001; // 987617605170
+console.log(now);
+// Wed Apr 18 11:13:25 GMT-0700 (Pacific Daylight Time) 2001
+
+ +

In principle, getters and setters can be either

+ + + +

When defining getters and setters using object initializers all you need to do is to prefix a getter method with get and a setter method with set. Of course, the getter method must not expect a parameter, while the setter method expects exactly one parameter (the new value to set). For instance:

+ +
var o = {
+  a: 7,
+  get b() { return this.a + 1; },
+  set c(x) { this.a = x / 2; }
+};
+
+ +

Getters and setters can also be added to an object at any time after creation using the Object.defineProperties method. This method's first parameter is the object on which you want to define the getter or setter. The second parameter is an object whose property names are the getter or setter names, and whose property values are objects for defining the getter or setter functions. Here's an example that defines the same getter and setter used in the previous example:

+ +
var o = { a: 0 };
+
+Object.defineProperties(o, {
+    'b': { get: function() { return this.a + 1; } },
+    'c': { set: function(x) { this.a = x / 2; } }
+});
+
+o.c = 10; // Runs the setter, which assigns 10 / 2 (5) to the 'a' property
+console.log(o.b); // Runs the getter, which yields a + 1 or 6
+
+ +

Which of the two forms to choose depends on your programming style and task at hand. If you already go for the object initializer when defining a prototype you will probably most of the time choose the first form. This form is more compact and natural. However, if you need to add getters and setters later — because you did not write the prototype or particular object — then the second form is the only possible form. The second form probably best represents the dynamic nature of JavaScript — but it can make the code hard to read and understand.

+ +

Deleting properties

+ +

You can remove a non-inherited property by using the delete operator. The following code shows how to remove a property.

+ +
// Creates a new object, myobj, with two properties, a and b.
+var myobj = new Object;
+myobj.a = 5;
+myobj.b = 12;
+
+// Removes the a property, leaving myobj with only the b property.
+delete myobj.a;
+console.log ('a' in myobj); // yields "false"
+
+ +

You can also use delete to delete a global variable if the var keyword was not used to declare the variable:

+ +
g = 17;
+delete g;
+
+ +

Comparing Objects

+ +

In JavaScript objects are a reference type. Two distinct objects are never equal, even if they have the same properties. Only comparing the same object reference with itself yields true.

+ +
// Two variables, two distinct objects with the same properties
+var fruit = {name: 'apple'};
+var fruitbear = {name: 'apple'};
+
+fruit == fruitbear; // return false
+fruit === fruitbear; // return false
+ +
// Two variables, a single object
+var fruit = {name: 'apple'};
+var fruitbear = fruit;  // assign fruit object reference to fruitbear
+
+// here fruit and fruitbear are pointing to same object
+fruit == fruitbear; // return true
+fruit === fruitbear; // return true
+
+ +
fruit.name = 'grape';
+console.log(fruitbear);    // yields { name: "grape" } instead of { name: "apple" }
+
+ +

For more information about comparison operators, see Comparison operators.

+ +

See also

+ + + +

{{PreviousNext("Web/JavaScript/Guide/Regular_Expressions", "Web/JavaScript/Guide/Feinheiten_des_Objektmodells")}}

diff --git a/files/de/web/javascript/introduction_to_object-oriented_javascript/index.html b/files/de/web/javascript/introduction_to_object-oriented_javascript/index.html deleted file mode 100644 index 41d67bc025..0000000000 --- a/files/de/web/javascript/introduction_to_object-oriented_javascript/index.html +++ /dev/null @@ -1,390 +0,0 @@ ---- -title: Einführung in objektorientiertes JavaScript -slug: Web/JavaScript/Introduction_to_Object-Oriented_JavaScript -tags: - - Constructor - - Encapsulation - - Inheritance - - Intermediate - - JavaScript - - Members - - Namespace - - OOP - - Object - - Object-Oriented -translation_of: Learn/JavaScript/Objects -translation_of_original: Web/JavaScript/Introduction_to_Object-Oriented_JavaScript ---- -
{{jsSidebar("Introductory")}}
- -

Im Kern ist JavaScript eine objektorientierte Programmiersprache mit mächtigen und flexiblen Fähigkeiten der {{Glossary("OOP")}}. Dieser Artikel beginnt mit einer Einführung in die objektorientierte Programmierung. Im zweiten Teil wird das Objektmodel von JavaScript erläutert. Danach folgt eine praktische Vorstellung der objektorientierten Programmierung in JavaScript. Dieser Artikel beschreibt nicht die neuere Syntax für {{jsxref("Classes", "objektorientierte Programmierung in ECMAScript 6", "", 1)}}.

- -

JavaScript Review

- -

Wenn Sie nicht mit den Konzepten in JavaScript, wie zum Beispiel Variablen, Typen, Funktionen und Geltungsbereich, vertraut sind, lesen Sie bitte zuerst den Artikel Eine Wiedereinführung in JavaScript. Sie können ebenfalls auf den JavaScript Guide zurückgreifen.

- -

Objektorientierte Programmierung

- -

Die objektorientierte Programmierung ist ein Paradigma, in dem über Abstraktion Modelle basierend auf der realen Welt erstellt werden. Es verwendet Techniken, die von zuvor etablierten Paradigmen eingeführt wurden. Darunter befinden sich Modularität, Polymorphismus und Datenkapselung. Heutzutage unterstützen viele populäre Programmiersprachen (z.B.: Java, JavaScript, C#, C++, Python, PHP, Ruby und Objective-C) die objektorientierte Programmierung (OOP).

- -

Objektorientierte Programmierung kann als das Design einer Software unter der Verwendung von kooperierenden Objekten angesehen werden. Die traditionelle Ansicht dagegen sieht ein Programm als eine Menge von Funktionen oder noch einfacher als eine Abfolge von Instruktionen an den Computer. In der OOP kann jedes Objekt Nachrichten empfangen, Daten verarbeiten und Nachrichten an andere Objekte senden. Jedes Objekt kann als eine unabhängige kleine Maschine mit einer bestimmten Rolle oder Verantwortlichkeit angesehen werden.

- -

Die Objektorientierte Programmierung versucht höhere Flexibilität und Wartbarkeit in Programmen zu ermöglichen und wird deshalb oft beim Software Engineering von hochskalierenden Programmen eingesetzt. Durch die starke Konzentration auf Modularität hat objektorientierter Code den Vorteil, dass er einfacher zu entwickeln und zu verstehen ist. Sie konzentriert sich direkter auf die Analyse, die Codierung und das Verstehen von komplexen Situationen und Prozeduren als weniger modulare Programmiermethoden.1

- -

Begriffsdefinitionen

- -
-
{{Glossary("Namespace")}}
-
Ein Container, der Entwicklern die Bündelung von Funktionalität unter einem eindeutigen, applikationsspezifischen Namen ermöglicht.
-
{{Glossary("Klasse")}}
-
Definiert die Eigenschaften eines Objekts. Sie ist die Definition einer Vorlage von Variablen und Methoden eines Objekts.
-
{{Glossary("Objekt")}}
-
Eine Instanz einer Klasse.
-
{{Glossary("Eigenschaft")}}
-
Eine Eigenschaft eines Objekts, wie zum Beispiel eine Farbe.
-
{{Glossary("Methode")}}
-
Eine Fähigkeit eines Objekts, wie zum Beispiel laufen. Sie ist eine Unterroutine oder Funktion, die mit der Klasse assoziiert ist.
-
{{Glossary("Konstruktor")}}
-
Eine spezielle Methode, die zur Instanziierung eines Objekts aufgerufen wird. Sie hat gewöhnlicherweise denselben Namen wie die Klasse, zu der sie gehört.
-
{{Glossary("Vererbung")}}
-
Eine Klasse kann die Eigenschaften und Fähigkeiten von anderen Klassen erben und somit für sich verwenden.
-
{{Glossary("Datenkapselung")}}
-
Die Datenkapselung ist eine Technik, um die Daten und die Methoden, die diese Daten verwenden, miteinander zu bündeln.
-
{{Glossary("Abstraktion")}}
-
Die Verknüpfung von komplexer Vererbung, Methoden und Eigenschaften eines Objekts müssen ein Modell der Realität simulieren können.
-
{{Glossary("Polymorphismus")}}
-
Poly bedeute "viele"  und Morphismus bedeutet "Formen". Verschiedene Klassen können dieselbe Methode oder dieselbe Eigenschaft definieren.
-
- -

Lesen Sie bitte den Artikel {{interwiki("wikipedia", "Objektorientierte Programmierung")}} auf Wikipedia für eine umfassendere Beschreibung der objektorientierten Programmierung.

- -

Prototypenbasierte Programmierung

- -

Prototypenbasierte Programmierung ist eine Art der objektorientierten Programmierung bei der keine Klassen gegenwärtig sind. Die Wiederverwendung von Verhalten (bekannt als Vererbung in klassenbasierten Programmiersprachen) wird über das Dekorieren von existierenden Objekten erreicht, die als Prototyp dienen. Dieses Modell wird als klassenlose, prototyporientierte oder instanzorientierte Programmierung bezeichnet.

- -

Das ursprüngliche (und am meisten kanonische) Beispiel einer prototypenbasierten Programmiersprache ist {{interwiki("wikipedia", "Self (Programmiersprache)")}}, welche von David Ungar and Randall Smith entwickelt wurde. Seitdem wurde die klassenlose Programmierung immer mehr populär und wurde für andere Programmiersprachen wie JavaScript, Cecil, NewtonScript, Io, MOO, REBOL, Kevo, Squeak (wenn das Viewer Framework zur Manipulation von Morphic Komponenten verwendet wird) und einige andere adoptiert.2

- -

Objektorientierte Programmierung mit JavaScript

- -

Namespace

- -

Ein Namespace ist ein Container in dem Entwickler Funktionalitäten unter einem eindeutigen, applikationsspezifischen Namen zusammenfassen können. In JavaScript ist ein Namespace ein gewöhnliches Objekt, welches Methoden, Eigenschaften und Objekte enthält.

- -
-

Im Gegensatz zu manchen anderen objektorientierten Programmiersprachen gibt es in der Sprachebene von JavaScript keinen Unterschied zwischen einem regulären Objekt und einem Namespace.

-
- -

Die Idee hinter der Erstellung eines Namespaces in JavaScript ist simpel: es wird ein globales Objekt erstellt, welches alle Variablen, Methoden und Funktionen als Eigenschaften besitzt. Zusätzlich kann die Verwendung von Namespaces Namenskonflikten in der Applikation vorbeugen.

- -

Es wird ein globales Objekt names MYAPP erstellt:

- -
// global namespace
-var MYAPP = MYAPP || {};
- -

Im obigen Code wird zuerst geprüft, ob MYAPP bereits definiert wurde (entweder in derselben oder einer anderen Datei). Wenn MYAPP bereits definiert wurde, wird das globale Objekt MYAPP verwendet. Anderenfalls wird ein leeres Objekt names MYAPP erstellt, welches später Methoden, Funktionen, Variablen und andere Objekte kapseln kann.

- -

Innerhalb eines Namespaces können weitere Namespaces erstellt werden:

- -
// sub namespace
-MYAPP.event = {};
- -

Der folgende Code erstellt einen Namespace und fügt diesem Variablen, Funktionen und Methoden hinzu:

- -
// Create container called MYAPP.commonMethod for common method and properties
-MYAPP.commonMethod = {
-  regExForName: "", // define regex for name validation
-  regExForPhone: "", // define regex for phone no validation
-  validateName: function(name){
-    // Do something with name, you can access regExForName variable
-    // using "this.regExForName"
-  },
-
-  validatePhoneNo: function(phoneNo){
-    // do something with phone number
-  }
-}
-
-// Object together with the method declarations
-MYAPP.event = {
-    addListener: function(el, type, fn) {
-    //  code stuff
-    },
-   removeListener: function(el, type, fn) {
-    // code stuff
-   },
-   getEvent: function(e) {
-   // code stuff
-   }
-
-   // Can add another method and properties
-}
-
-//Syntax for Using addListner method:
-MYAPP.event.addListener("yourel", "type", callback);
- -

Standardmäßig eingebaute Objekte

- -

JavaScript besitzt verschiedene Objekte im Kern. Darunter befinden sich zum Beispiel die Objekte Math, Object, Array, und String. Das folgende Beispiel zeigt, wie das Math Objekt mit der random() Methode eine Zufallszahl generiert.

- -
console.log(Math.random());
-
- -
Hinweis: Dieses und folgende Beispiele setzen voraus, dass {{domxref("console.log()")}} global definiert wurde. Die console.log Funktion ist kein eigentlicher Sprachteil von JavaScript, jedoch implementieren viele Browser diese zum Debuggen.
- -

Siehe JavaScript Reference: Standard built-in objects für eine List aller Objekte im Kern von JavaScript.

- -

Jedes Objekt in JavaScript ist eine Instanz des Objekts Object und erbt somit alle Eigenschaften und Methoden von diesem.

- -

Eigene Objekte

- -

Die Klasse

- -

JavaScript ist eine prototypenbasierte Programmiersprache, welche im Gegensatz zu C++ oder Java keine class Anweisung enthält. Dies kann für Programmierer manchmal verwirrend sein, wenn sie normalerweise Programmiersprachen mit einer class Anweisung verwenden. JavaScript verwendet stattdessen Funktionen als Klassen. Die Definition einer Klasse erfolgt analog zu der einer Funktion. Im folgenden Beispiel wird eine neue Klasse namens Person definiert.

- -
var Person = function(){ }
-
- -

Das Objekt (Instanz einer Klasse)

- -

Um eine neue Instanz eines Objekts obj zu erstellen, wird die Anweisung new obj ausgeführt. Das Ergebnis der Anweisung (welches den Typ obj hat) wird für eine spätere Verwendung einer Variablen zugewiesen.

- -

Im folgenden Beispiel wird eine Klasse mit dem Namen Person definiert und zwei Objekte (person1 and person2) instanziiert.

- -
var person1 = new Person();
-var person2 = new Person();
-
- -
Lesen Sie bitte {{jsxref("Object.create()")}} für eine neue, alternative Methode zur Objektinstanziierung.
- -

Der Konstruktor

- -

Der Konstruktor wird zum Zeitpunkt der Instanziierung (wenn eine Objektinstanz erstellt wird) aufgerufen. Er ist als eine Methode der Klasse definiert. In JavaScript agiert die Funktion als Konstruktor für das Objekt. Somit muss keine Methode explizit für den Konstruktor definiert werden. Jede deklarierte Anweisung in der Klasse wird zum Zeitpunkt der Instanziierung ausgeführt.

- -

Der Konstruktor wird zur Initialisierung der Eigenschaften oder vorbereitende Methodenaufrufe zur Verwendung des Objekts verwendet. Das Hinzufügen von Klassenmethoden und deren Definitionen verwendet eine andere Syntax, welche später im Artikel erläutert wird.

- -

Im folgenden Beispiel loggt der Konstruktor der Klasse Person eine Nachricht, wenn ein Person Objekt instanziiert wird.

- -
function Person() {
-  console.log('Instanz erstellt');
-}
-
-var person1 = new Person();
-var person2 = new Person();
-
- -

Die Eigenschaft (Objektattribut)

- -

Eigenschaften sind Variablen innerhalb einer Klasse. Jede Instanz des Objekts besitzt diese Eigenschaften. Eigenschaften sollten im Prototyp der Eigenschaft in der Klasse (Funktion) gesetzt werden, damit die Vererbung korrekt funktioniert.

- -

Eigenschaften können innerhalb eines Objekts mit dem Schlüsselwort this, welches das aktuelle Objekt referenziert, verwendet werden. Der Zugriff (lesen oder schreiben) auf eine Eigenschaft von außerhalb der Klasse wird durch die Syntax InstanceName.Property ermöglicht. Diese Syntax ist analog zu C++, Java und zahlreichen anderen Programmiersprachen. Innerhalb der Klasse wird die Syntax this.Property zum Lesen oder Schreiben des Werts verwendet.

- -

Im folgenden Beispiel wird die Eigenschaft firstName für die Person Klasse definiert. Bei der Instanziierung wird ihr ein Wert zugewiesen.

- -
function Person(firstName) {
-  this.firstName = firstName;
-  console.log('Person instantiated');
-}
-
-var person1 = new Person('Alice');
-var person2 = new Person('Bob');
-
-// Zeigt die Eigenschaft firstName des Objektes
-console.log('person1 is ' + person1.firstName); // logs "person1 is Alice"
-console.log('person2 is ' + person2.firstName); // logs "person2 is Bob"
-
- -

Die Methoden

- -

Methoden befolgen beinahe dieselbe Logik wie Eigenschaften mit dem Unterschied, dass sie Funktionen sind und deshalb als Funktionen definiert werden. Der Aufruf einer Funktion erfolgt analog zu Eigenschaften gefolgt von () am Ende des Methodennames. Innerhalb der Klammern können der Methode Argumente übergeben werden. Um eine Methode zu definieren, muss eine Funktion einer benannten Eigenschaft der prototype Eigenschaft der Klasse zugewiesen werden. Der Name der benannten Eigenschaft dient nun als Methodenname über den die Methode auf dem Objekt aufgerufen werden kann.

- -

Im folgenden Beispiel wird die Methode sayHello() für die Person Klasse definiert.

- -
function Person(firstName) {
-  this.firstName = firstName;
-}
-
-Person.prototype.sayHello = function() {
-  console.log("Hello, I'm " + this.firstName);
-};
-
-var person1 = new Person("Alice");
-var person2 = new Person("Bob");
-
-// Aufrufen der Methode sayHello der Person.
-person1.sayHello(); // logs "Hello, I'm Alice"
-person2.sayHello(); // logs "Hello, I'm Bob"
-
- -

Methoden in JavaScript sind gewöhnliche Funktionsobjekte, die als eine Eigenschaft an ein Objekt gebunden werden. Dadurch können Methoden auch "außerhalb des Kontexts" aufgerufen werden. Das folgende Beispiel veranschaulicht dies:

- -
function Person(firstName) {
-  this.firstName = firstName;
-}
-
-Person.prototype.sayHello = function() {
-  console.log("Hello, I'm " + this.firstName);
-};
-
-var person1 = new Person("Alice");
-var person2 = new Person("Bob");
-var helloFunction = person1.sayHello;
-
-// logs "Hello, I'm Alice"
-person1.sayHello();
-
-// logs "Hello, I'm Bob"
-person2.sayHello();
-
-// logs "Hello, I'm undefined" (oder schlägt
-// mit einem TypeError im strict mode fehl)
-helloFunction();
-
-// logs true
-console.log(helloFunction === person1.sayHello);
-
-// logs true
-console.log(helloFunction === Person.prototype.sayHello);
-
-// logs "Hello, I'm Alice"
-helloFunction.call(person1);
- -

Das Beispiel zeigt, dass alle Referenzen zur sayHello Funktion — die auf person1, auf Person.prototype, in der helloFunction Variable, etc. — dieselbe Funktion referenzieren. Der Wert von this während eines Funktionsaufrufs hängt von der Art ab, wie die Funktion aufgerufen wird. In allgemeinen Fällen, wenn die Funktion in einem Ausdruck  über die Eigenschaft aufgerufen wird — person1.sayHello() — referenziert this das Objekt, auf der die Funktion aufgerufen wird (person1). Deshalb verwendet person1.sayHello() den Namen "Alice" und person2.sayHello() den Namen "Bob". Wenn die Funktion über andere Arten aufgerufen wird, ist this unterschiedlich definiert: Der Aufruf von der Variablen aus — helloFunction() — setzt this auf das globale Objekt (window, in Webbbrowsern). Da dieses Objekt (wahrscheinlich) keine firstName Eigenschaft besitzt, gitb die Funktion "Hello, I'm undefined" aus. (Dieses Ergebnis wird im Loose Mode produziert. Im Strict Mode verhält sich die Funktion anders und es könnte ein Fehler ausgelöst werden. Um Verwirrungen zu vermeiden wird dies nicht weiter im Detail besprochen) this kann auch explizit über Function#call (oder Function#apply) definiert werden. Die geschieht in der letzten Zeile des obigen Beispiels.

- -
Hinweis: Mehr über this können Sie unter Function#call und Function#apply finden.
- -

Vererbung

- -

Vererbung ist eine Methode, um eine Klasse zu erstellen, die eine spezialisierte Version von einer (Einfachvererbung) oder mehrerer (Mehrfachvererbung) Klassen ist (JavaScript unterstützt nur Einfachvererbung). Die spezialisierte Klasse wird normalerweise als child bezeichnet. Die Klasse, von der geerbt wird, wird als parent bezeichnet. Vererbung in JavaScript funktioniert indem eine Instanz der parent Klasse der child Klasse zugewiesen und dann spezialisiert wird. In modernen Webbrowsern kann die Vererbung auch mittels der Verwendung von Object.create implementiert werden.

- -
Hinweis: JavaScript erkennt den Konstruktor prototype.constructor (siehe Object.prototype) der child Klasse nicht. Er muss manuell angegeben werden. Sehe dazu zusätzlich den Beitrag "Why is it necessary to set the prototype constructor?" (englisch) auf Stackoverflow an.
- -

Im folgenden Beispiel wird die Klasse Student als child Klasse von Person definiert. Dann wird die Methode sayHello() neu definiert und die Methode sayGoodBye() zur Klasse Person hinzugefügt.

- -
// Definiert den Person Konstruktor
-function Person(firstName) {
-  this.firstName = firstName;
-}
-
-// Fügt Methoden zum Person.prototype hinzu
-Person.prototype.walk = function(){
-  console.log("I am walking!");
-};
-Person.prototype.sayHello = function(){
-  console.log("Hello, I'm " + this.firstName);
-};
-
-// Definiert den Student Konstruktor
-function Student(firstName, subject) {
-  // Call the parent constructor, making sure (using Function#call)
-  // that "this" is set correctly during the call
-  Person.call(this, firstName);
-
-  // Initialize our Student-specific properties
-  this.subject = subject;
-};
-
-// Erstellt ein Student.prototype Objekt das von Person.prototype erbt.
-// Hinweis: Ein häufiger Fehler ist der Einsatz von "new Person()" beim erstellen vomeines
-// Student.prototype. Das ist falsch aus einigen Gründen, nicht nur
-// das wir keinen Parameter der Person für "firstName" mitgeben können.
-// Der korrekte Ort für den Aufruf von Person ist oben, wo wir es
-// von Student aufrufen.
-Student.prototype = Object.create(Person.prototype); // See note below
-
-// Setzt die "constructor" Eigenschaft um auf Student zu referenzieren.
-Student.prototype.constructor = Student;
-
-// Ersetzt die "sayHello" Methode
-Student.prototype.sayHello = function(){
-  console.log("Hello, I'm " + this.firstName + ". I'm studying "
-              + this.subject + ".");
-};
-
-// Fügt die "sayGoodBye" Methode hinzu
-Student.prototype.sayGoodBye = function(){
-  console.log("Goodbye!");
-};
-
-// Beispieleinsatz:
-var student1 = new Student("Janet", "Applied Physics");
-student1.sayHello();   // "Hello, I'm Janet. I'm studying Applied Physics."
-student1.walk();       // "I am walking!"
-student1.sayGoodBye(); // "Goodbye!"
-
-// Check that instanceof works correctly
-console.log(student1 instanceof Person);  // true
-console.log(student1 instanceof Student); // true
-
- -

Unter Betrachtung der Zeile Student.prototype = Object.create(Person.prototype);: In älteren JavaScript Engines ohne Object.create, kann ein "polyfill" (auch "shim", siehe den verlinkten Artikel) oder eine Funktion, die dasselbe Ergebnis erzielt, verwendet werden:

- -
function createObject(proto) {
-    function ctor() { }
-    ctor.prototype = proto;
-    return new ctor();
-}
-
-// Einsatz:
-Student.prototype = createObject(Person.prototype);
-
- -
Lesen Sie Object.create, um mehr zum obigen Beispiel zu erfahren.
- -

Stellen sie sicher, dass this zum richtigen Objekt referenziert unabhängig davon, wie das Objekt erstellt wird. Es gibt eine einfache Methode dieses sicherzustellen:

- -
var Person = function(firstName) {
-  if (this instanceof Person) {
-    this.firstName = firstName
-  } else {
-    return new Person(firstName)
-  }
-}
- -

Datenkapselung

- -

Im obigen Beispiel muss die Student Klasse nicht wissen, wie die Methode walk() der Person Klasse implementiert ist, um sie verwenden zu können. Die Student Klasse muss die Methode nicht explizit definierten, solange Sie unverändert übernommen werden soll. Dabei handelt es sich um Datenkapselung, bei der jede Klasse ihre Daten und Methoden in einer Einheit bündeln.

- -

Information Hiding ist ein gängiges Feature in anderen Programmiersprachen, bei dem Methoden und Eigenschaften als privat oder geschützt definierten werden können. Obwohl Information Hiding mit JavaScript realisiert werden kann, ist es keine Voraussetzung für objektorientierte Programmierung.3

- -

Abstraktion

- -

Abstraktion ist ein Mechanismus, der die Modellierung eines Teils der Problemstellung erlaubt. Dazu kann Vererbung (Spezialisierung) oder Komposition eingesetzt werden. JavaScript ermöglicht die Spezialisierung mit Vererbung. Komposition wird realiseirt, indem Instanzen einer Klasse als Werte von Eigenschaften eines Objekts gesetzt werden.

- -

Die Function Klasse in JavaScript erbt von der Object Klasse (Spezialisierung). Die Function.prototype Eigenschaft ist eine Instanz der Object Klasse (Komposition).

- -
var foo = function(){};
-
-// logs "foo is a Function: true"
-console.log('foo is a Function: ' + (foo instanceof Function));
-
-// logs "foo.prototype is an Object: true"
-console.log('foo.prototype is an Object: ' + (foo.prototype instanceof Object));
- -

Polymorphismus

- -

Wie alle Methoden und Eigenschaften innerhalb der prototype Eigenschaft definiert werden, können unterschiedliche Klassen Methoden mit demselben Namen definieren. Methoden sind im Scope der Klasse, in der sie definiert sind, verfügbar. Das gilt solange die Klassen keine parent-child Beziehung besitzen (wenn die eine Klasse nicht innerhalb einer Kette von der anderen Klasse erbt).

- -

Anmerkungen

- -

Die im Artikel präsentierten Techniken umfassen nicht alle Möglichkeiten der objektorientierten Programmierung in JavaScript, da JavaScript sehr flexibel in der Umsetzung der objektorientierten Programmierung ist.

- -

Die vorgestellten Techniken zeigen nicht alle verfügbaren Hacks in JavaScript und mimen nicht die Implementierung der Objektorientiertheit in anderen Programmiersprachen.

- -

Es gibt weitere Techniken, welche eine fortgeschrittenere objektorientierte Programmierung in JavaScript ermöglichen. Diese gehen aber über den Umfang dieses einführenden Artikels hinaus.

- -

Referenzen

- -
    -
  1. Wikipedia. "Object-oriented programming" und "Objektorientierte Programmierung"
  2. -
  3. Wikipedia. "Prototype-based programming" und "Prototypenbasierte Programmierung"
  4. -
  5. Wikipedia. "Encapsulation (object-oriented programming)" und "Datenkapselung (Programmierung)"
  6. -
- -

Siehe auch

- - diff --git a/files/de/web/javascript/javascript_technologies_overview/index.html b/files/de/web/javascript/javascript_technologies_overview/index.html new file mode 100644 index 0000000000..ae24cb1ca3 --- /dev/null +++ b/files/de/web/javascript/javascript_technologies_overview/index.html @@ -0,0 +1,87 @@ +--- +title: JavaScript Technologieübersicht +slug: Web/JavaScript/JavaScript_technologieuebersicht +translation_of: Web/JavaScript/JavaScript_technologies_overview +--- +
{{JsSidebar("Introductory")}}
+ +

Einleitung

+ +

Während HTML die Struktur einer Webseite definiert und CSS den Style angibt, mit dem der Inhalt der Webseite dargestellt wird, ermöglicht JavaScript das Erstellen von interaktiven Webseiten und Rich Web Applications.

+ +

Der Begriff "JavaScript" umfasst im Kontext von Web-Browsern mehrere Elemente. Darunter befinden sich der Sprachkern (ECMAScript) und einige Web APIs, die auch das DOM (Document Object Model) enthalten.

+ +

Sprachkern von JavaScript (ECMAScript)

+ +

Der Sprachkern von JavaScript wurde vom ECMA TC39 Kommittee als die Sprache ECMAScript standardisiert. Die aktuellste Version der Spezifikation ist ECMAScript 5.1.

+ +

Der Sprachkern wird auch in Umgebungen außerhalb von Webbrowsern eingesetzt, wie zum Beispiel in node.js.

+ +

Was gehört alles zu ECMAScript?

+ +

Neben anderen Dingen definiert ECMAScript folgende Punkte:

+ + + +

Webbrowserunterstützung

+ +

Im August 2014 implementierten die aktuellen Versionen der verbreitesten Webbrowser ECMAScript 5.1. Es sind aber noch ältere Versionen in Verwendung, welche ECMAScript 3 und nur Teile von ECMAScript 5 implementieren. Moderne Webbrowsers implementieren bereits große Teile von ECMAScript 6.

+ +

Zukunft

+ +

Die vorgeschlagene vierte Version von ECMA-262 (ECMAScript 4 oder ES4) hätte das erste große Update von ECMAScript seit der dritten Version, welche in 1999 veröffentlicht wurde, sein sollen. Im August 2008 wurde der Vorschlag zur vierten Version von ECMAScript  unter dem Projekt ECMAScript Harmony reduziert, welches zum Beispiel Proxies oder das const Schlüsselwort definiert. Der Fortschirtt kann hier verfolgt werden. Die Veröffentlichung der sechsten Hauptversion des Standards wird im Jahr 2015 erwartet.

+ +

Internationalization API

+ +

Die ECMAScript Internationalization API Specification ist eine Erweiterung zur ECMAScript Sprachspezifikation, welche vom Ecma TC39 Kommittee standardisiert wird. Die Internationalization API bietet Textvergleiche (string Vergleiche), Formatierung von Zahlen, Datum und Zeit für JavaScript Applikationen, und lässt Applikationen die Sprache wählen, um die Funktionalität für die eigenen Bedürfnisse anpassen zu können. Der Standard wurde im Dezember 2012 freigegeben. Der Status über die Implementierung in Webbrowsern ist in der Documentation von Intl object aufgezeichnet.

+ +

Die Web APIs und der DOM

+ +

WebIDL

+ +

Die WebIDL specification verbindet die DOM Technologien und ECMAScript miteinander.

+ +

Der Kern des DOM

+ +

Das Document Object Model (DOM) ist eine plattform- und sprachunabhängige Konvention zur Repräsentation und Interaktion mit Objekten in HTML, XHTML und XML Dokumenten. Objekte im DOM Baum können über Methoden angesprochen und durch Aufrufen ihrer Methoden verändert werden. Das Core Document Object Model ist von der W3C standardisiert worden. Es definiert sprachspezifische Schnittstellen, welche HTML und XML Dokuments als Objekte abstrahieren und Mechanismen zur Manipulation dieser Abstraktion. Zusätzlich definiert der DOM auch:

+ + + +

Aus der Sicht von ECMAScript werden Objekte, die in der DOM Spezifikation definiert sind,  "host objects" genannt.

+ +

HTML DOM

+ +

HTML, die Markup-Sprache im Web, ist mit Bezug auf den DOM definiert. HTML liegt eine Schicht über den abstrakten Konzepten vom DOM Kern und definiert zusätzlich die Bedeutung von Elementen. Der HTML DOM beinhaltet zum Beispiel die className Eigenschaft von HTML Elementen oder APIs wie {{ domxref("document.body") }}.

+ +

Die HTML Spezifikation definiert auch Einschränkungen auf Documenten. So müssen zum Beispiel die direkten Kindelemente der ungeordneten Liste ul alle li Elemente sein, welche die Listeneinträge repräsentieren. Im Allgemeinen verbietet die Spezifikation auch die Verwendung von Elementen und Attributen, die nicht im Standard definiert sind.

+ +

Suchen Sie nach dem Document Objekt, Window Objekt, oder anderen DOM Elementen? Besuchen Sie die DOM Dokumentation.

+ +

Andere APIs

+ + + +

Webbrowserunterstützung

+ +

Jeder Webbrowser muss erfahren, dass der DOM ein Chaos ist. Die Einheitlichkeit der Webbrowserunterstützung variiert teilweise stark von Feature zu Feature. Die Ursache dafür ist, dass viele der wichtigen DOM Features kaum oder unklare Spezifikationen hatten. Zusätzlich implementieren verschiedene Webbrowser eigene inkompatible Features für überlappende Einsatzszenarien (wie das Event Model vom Internet Explorer). Der aktuelle Trend (Stand Juni 2011) ist, das die W3C und teilweise die WHATWG ältere Features detaillierter definieren, damit die Interoperabilität verbessert werden kann. Diesem Trend folgend verbessern Webbbrowser ihre Implementierungen basierend auf den detaillierten Spezifikationen.

+ +

Eine allgemeine aber möglicherweise nicht vollkommen zuverlässiger Ansatz für cross-browser Kompatibilität ist der Einsatz einer JavaScript Bibliothek. Diese Bibliotheken abstrahieren DOM Features und gewährleisten den APIs, dass sie in verschiedenen Webbrowsern einheitlich funktionieren. Einige der meistverbreitesten Frameworks sind jQuery, prototype, und YUI.

diff --git a/files/de/web/javascript/javascript_technologieuebersicht/index.html b/files/de/web/javascript/javascript_technologieuebersicht/index.html deleted file mode 100644 index ae24cb1ca3..0000000000 --- a/files/de/web/javascript/javascript_technologieuebersicht/index.html +++ /dev/null @@ -1,87 +0,0 @@ ---- -title: JavaScript Technologieübersicht -slug: Web/JavaScript/JavaScript_technologieuebersicht -translation_of: Web/JavaScript/JavaScript_technologies_overview ---- -
{{JsSidebar("Introductory")}}
- -

Einleitung

- -

Während HTML die Struktur einer Webseite definiert und CSS den Style angibt, mit dem der Inhalt der Webseite dargestellt wird, ermöglicht JavaScript das Erstellen von interaktiven Webseiten und Rich Web Applications.

- -

Der Begriff "JavaScript" umfasst im Kontext von Web-Browsern mehrere Elemente. Darunter befinden sich der Sprachkern (ECMAScript) und einige Web APIs, die auch das DOM (Document Object Model) enthalten.

- -

Sprachkern von JavaScript (ECMAScript)

- -

Der Sprachkern von JavaScript wurde vom ECMA TC39 Kommittee als die Sprache ECMAScript standardisiert. Die aktuellste Version der Spezifikation ist ECMAScript 5.1.

- -

Der Sprachkern wird auch in Umgebungen außerhalb von Webbrowsern eingesetzt, wie zum Beispiel in node.js.

- -

Was gehört alles zu ECMAScript?

- -

Neben anderen Dingen definiert ECMAScript folgende Punkte:

- - - -

Webbrowserunterstützung

- -

Im August 2014 implementierten die aktuellen Versionen der verbreitesten Webbrowser ECMAScript 5.1. Es sind aber noch ältere Versionen in Verwendung, welche ECMAScript 3 und nur Teile von ECMAScript 5 implementieren. Moderne Webbrowsers implementieren bereits große Teile von ECMAScript 6.

- -

Zukunft

- -

Die vorgeschlagene vierte Version von ECMA-262 (ECMAScript 4 oder ES4) hätte das erste große Update von ECMAScript seit der dritten Version, welche in 1999 veröffentlicht wurde, sein sollen. Im August 2008 wurde der Vorschlag zur vierten Version von ECMAScript  unter dem Projekt ECMAScript Harmony reduziert, welches zum Beispiel Proxies oder das const Schlüsselwort definiert. Der Fortschirtt kann hier verfolgt werden. Die Veröffentlichung der sechsten Hauptversion des Standards wird im Jahr 2015 erwartet.

- -

Internationalization API

- -

Die ECMAScript Internationalization API Specification ist eine Erweiterung zur ECMAScript Sprachspezifikation, welche vom Ecma TC39 Kommittee standardisiert wird. Die Internationalization API bietet Textvergleiche (string Vergleiche), Formatierung von Zahlen, Datum und Zeit für JavaScript Applikationen, und lässt Applikationen die Sprache wählen, um die Funktionalität für die eigenen Bedürfnisse anpassen zu können. Der Standard wurde im Dezember 2012 freigegeben. Der Status über die Implementierung in Webbrowsern ist in der Documentation von Intl object aufgezeichnet.

- -

Die Web APIs und der DOM

- -

WebIDL

- -

Die WebIDL specification verbindet die DOM Technologien und ECMAScript miteinander.

- -

Der Kern des DOM

- -

Das Document Object Model (DOM) ist eine plattform- und sprachunabhängige Konvention zur Repräsentation und Interaktion mit Objekten in HTML, XHTML und XML Dokumenten. Objekte im DOM Baum können über Methoden angesprochen und durch Aufrufen ihrer Methoden verändert werden. Das Core Document Object Model ist von der W3C standardisiert worden. Es definiert sprachspezifische Schnittstellen, welche HTML und XML Dokuments als Objekte abstrahieren und Mechanismen zur Manipulation dieser Abstraktion. Zusätzlich definiert der DOM auch:

- - - -

Aus der Sicht von ECMAScript werden Objekte, die in der DOM Spezifikation definiert sind,  "host objects" genannt.

- -

HTML DOM

- -

HTML, die Markup-Sprache im Web, ist mit Bezug auf den DOM definiert. HTML liegt eine Schicht über den abstrakten Konzepten vom DOM Kern und definiert zusätzlich die Bedeutung von Elementen. Der HTML DOM beinhaltet zum Beispiel die className Eigenschaft von HTML Elementen oder APIs wie {{ domxref("document.body") }}.

- -

Die HTML Spezifikation definiert auch Einschränkungen auf Documenten. So müssen zum Beispiel die direkten Kindelemente der ungeordneten Liste ul alle li Elemente sein, welche die Listeneinträge repräsentieren. Im Allgemeinen verbietet die Spezifikation auch die Verwendung von Elementen und Attributen, die nicht im Standard definiert sind.

- -

Suchen Sie nach dem Document Objekt, Window Objekt, oder anderen DOM Elementen? Besuchen Sie die DOM Dokumentation.

- -

Andere APIs

- - - -

Webbrowserunterstützung

- -

Jeder Webbrowser muss erfahren, dass der DOM ein Chaos ist. Die Einheitlichkeit der Webbrowserunterstützung variiert teilweise stark von Feature zu Feature. Die Ursache dafür ist, dass viele der wichtigen DOM Features kaum oder unklare Spezifikationen hatten. Zusätzlich implementieren verschiedene Webbrowser eigene inkompatible Features für überlappende Einsatzszenarien (wie das Event Model vom Internet Explorer). Der aktuelle Trend (Stand Juni 2011) ist, das die W3C und teilweise die WHATWG ältere Features detaillierter definieren, damit die Interoperabilität verbessert werden kann. Diesem Trend folgend verbessern Webbbrowser ihre Implementierungen basierend auf den detaillierten Spezifikationen.

- -

Eine allgemeine aber möglicherweise nicht vollkommen zuverlässiger Ansatz für cross-browser Kompatibilität ist der Einsatz einer JavaScript Bibliothek. Diese Bibliotheken abstrahieren DOM Features und gewährleisten den APIs, dass sie in verschiedenen Webbrowsern einheitlich funktionieren. Einige der meistverbreitesten Frameworks sind jQuery, prototype, und YUI.

diff --git a/files/de/web/javascript/memory_management/index.html b/files/de/web/javascript/memory_management/index.html new file mode 100644 index 0000000000..82f8977c23 --- /dev/null +++ b/files/de/web/javascript/memory_management/index.html @@ -0,0 +1,184 @@ +--- +title: Speicherverwaltung +slug: Web/JavaScript/Speicherverwaltung +tags: + - JavaScript +translation_of: Web/JavaScript/Memory_Management +--- +
{{JsSidebar("Advanced")}}
+ +

Einleitung

+ +

Bei Low-Level Programmiersprachen wie C, die zur systemnahen Programmierung eingesetzt werden, existieren Funktionen - wie z. B. malloc() und free() - womit explizit Speicher angefordert und wieder freigegeben werden kann. Bei JavaScript gibt es keine solchen Funktionen, sondern der benötigte Speicher wird bei der Erzeugung neuer Objekte (z. B. benutzerdefinierte Objekte oder vordefinierte Objekte wie String) zugewiesen. Die Speicherfreigabe erfolgt automatisch im Hintergrund durch die Garbage Collection (wörtlich: "Müllabfuhr"; automatische Speicherbereinigung). Dieser Automatismus führt oft zu Verwirrung und lässt so manchen Entwicklern irrtümlich glauben, man müsse sich über die Speicherverwaltung keine Gedanken machen.

+ +

Zyklus der Speichernutzung

+ +

Unabhängig von der eingesetzten Programmiersprache läuft der Zyklus für die Speichernutzung immer ungefähr gleich ab:

+ +
    +
  1. Alloziierung/Zuweisung des benötigten Speichers.
  2. +
  3. Benutzung des Speichers (lesen, schreiben).
  4. +
  5. Freigabe des alloziierten Speichers, wenn er nicht mehr benötigt wird.
  6. +
+ +

Der erste und zweite Schritt erfolgt bei allen Programmiersprachen explizit. Der letzte Schritt, die Freigabe des Speichers, wird bei Low-Level-Sprachen explizit und bei höheren Programmiersprachen wie JavaScript meist implizit vorgenommen.

+ +

Speicherzuweisung bei JavaScript

+ +

Initialisierung von Werten

+ +

Um dem Programmierer die Arbeit zu erleichtern, weist JavaScript bei der Zuweisung von Werten je nach Typ automatisch die benötigte Menge an Speicher zu:

+ +
+
var n = 123; // alloziiert Speicher für eine Number
+var s = "azerty"; // alloziiert Speicher für einen String
+
+var o = {
+  a: 1,
+  b: null
+}; // alloziiert Speicher für das Objekt und enthaltene Werte
+
+var a = [1, null, "abra"]; // (wie bei Objekten) alloziiert Speicher für das Array und enthaltene Werte
+
+function f(a){
+  return a + 2;
+} // alloziiert eine Function (die ein aufrufbares Objekt ist)
+
+// Funktions-Ausdrücke alloziieren ebenfalls ein Objekt
+someElement.addEventListener('click', function(){
+  someElement.style.backgroundColor = 'blue';
+}, false);
+
+
+ +

Allokation über Funktionsaufrufe

+ +

Einige Funktionen allozieren Objekte:

+ +
var d = new Date();
+var e = document.createElement('div'); // alloziiert ein DOM-Element
+
+ +

Andere Methoden allozieren neue Werte oder Objekte:

+ +
var s = "azerty";
+var s2 = s.substr(0, 3); // s2 ist ein neuer String
+// Da Strings immutable sind, weist JavaScript evtl. hier
+// keinen neuen Speicher zu, sondern merkt sich nur [0, 3],
+// dass s2 die ersten beiden Elemente von s enthält
+
+var a = ["ouais ouais", "nan nan"];
+var a2 = ["generation", "nan nan"];
+var a3 = a.concat(a2); // neues Array mit den 4 Elementen von a und a2
+
+ +

Werte

+ +

Bei der Zuweisung von Werten wird in den Speicher geschrieben und beim Abfragen von Werten der Speicher ausgelesen. Weist man also z. B. einer Objekteigenschaft einen Wert zu oder übergibt einen Wert als Argument an eine Funktion, wird dieser in den Speicher geschrieben und beim Abfragen des Werts der Speicher ausgelesen.

+ +

Freigabe des Speichers, wenn dieser nicht mehr benötigt wird

+ +

Bei diesem Vorgang tauchen am häufigsten Probleme mit der Speicherverwaltung auf, da es keine leichte Aufgabe ist, zu entscheiden, wann der benötigte Speicher tatsächlich nicht mehr gebraucht wird. Oftmals muss der Entwickler selbst bestimmen, an welcher Stelle die Freigabe eines Speicherbereichs erfolgen soll.

+ +

Höhere Programmiersprachen setzten häufig eine Softwarekomponente namens Garbage Collector ein, dessen Aufgabe darin besteht, die Speicherallokation zu überwachen und nicht mehr benötigten Speicher wieder freizugeben. Dieser Prozess basiert auf einer Abschätzung, da das zugrundeliegende Problem - zu entscheiden, wann Speicher nicht mehr benötigt wird - unentscheidbar ist (nicht durch einen Algorithmus lösbar).

+ +

Garbage Collection

+ +

Wie oben schon erwähnt, gibt es keine eindeutige Lösung für das zugrunde liegende Problem. Aus diesem Grund implementieren Garbage Collections einen beschränkten Algorithmus. Dieser Abschnitt liefert Informationen zum Verständnis der wichtigsten Algorithmen der Garbage Collection und deren Beschränkungen.

+ +

Referenzen

+ +

Der Grundgedanke auf dem Garbage Collection-Algorithmen hauptsächlich basieren, ist die Idee der Referenz. Im Zusammenhang mit der Speicherverwaltung spricht man davon, dass ein Objekt ein anderes Objekt referenziert, wenn ersteres (entweder implizit oder explizit) Zugriff auf letzteres hat. Zum Beispiel hat ein JavaScript-Objekt eine Referenz auf dessen Prototype (implizite Referenz) und dessen Eigenschaftswerte (explizite Referenz).

+ +

In diesem Kontext wird also der Begriff Objekt etwas breiter aufgefasst, als im Zusammenhang mit JavaScript-Objekten und beinhaltet außerdem auch Sichtbarkeitsbereiche von Funktionen (bzw. den globalen Sichtbarkeitsbereich).

+ +

Referenzzählung der Garbage Collection

+ +

Dies ist der naivste Algorithmus der Garbage Collection. Er reduziert einfach "ein Objekt wird nicht mehr benötigt" auf "kein anderes Objekt referenziert auf das Objekt". Ein Objekt wird also dann von der Garbage Collection entsorgt, wenn keine Referenzen auf das Objekt existieren.

+ +

Beispiel

+ +
var o = {
+  a: {
+    b:2
+  }
+}; // 2 Objekte wurden erstellt. Das eine referenziert auf das andere als dessen Eigenschaft.
+// Das Objekt a wird referenziert, weil es der Variablen o zugewiesen wurde.
+// Da auf alle Objekte irgendwie referenziert wird, kann keines entsogt werden
+
+var o2 = o; // Die Variable 'o2' ist das zweite Objekt mit einer Referenz auf das Objekt
+o = 1; // nun hat das Objekt, das sich ursprünglich in o befand eine einzige Referenz durch 'o2'
+
+var oa = o2.a; // Referenz auf die Eigenschaft 'a' des Objekts.
+// Nun hat das Objekt 2 Referenzen: Eine als Eigenschaft, die andere als Variable 'oa'
+
+o2 = "yo"; // Das objekt, welches sich anfangs in 'o' befand hat nun keine Referenzen mehr
+// und kann von der Garbage Collection entsorgt werden.
+// Jedoch wird die Eigenschaft 'a' noch immer durch die Variable 'oa' referenziert und kann daher nicht freigegeben werden
+
+oa = null; // Nun existieren keine Refrenzen mehr auf die Eigenschaft 'a'
+// und das Objekt kann entsorgt werden.
+
+ +

Beschränkung: gegenseitige Referenzen

+ +

Dieser naive Algorithmus ist deshalb beschränkt, weil Objekte, die gegenseitig aufeinender referenzieren, gar nicht mehr benötigt werden könnten, aber nicht entsorgt werden dürfen, da noch auf sie referenziert wird.

+ +
function f(){
+  var o = {};
+  var o2 = {};
+  o.a = o2; // o referenziert o2
+  o2.a = o; // o2 referenziert o
+
+  return "azerty";
+}
+
+f();
+// die Objekte werden erzeugt und referenzieren gegenseitig aufeinander.
+// Sie werden außerhalb des Sichtbarkeitsbereichs der Funktion nicht verwendet
+// und könnten daher nach der Funktionsausführung freigegeben werden
+// Der Referenzzählungsalgorithmus erkennt jedoch nur, dass auf beide Objekte
+// noch referenziert wird und entsorgt daher keines der beiden
+
+ +

Praxisbeispiel

+ +

Bei Internet Explorer 6, 7 ist bekannt, dass sie einen Garbage Collector mit Referenzzählung für DOM-Objekte einsetzen. Es gibt daher ein bekanntes Muster für die systematische Erzeugung von Speicherlecks:

+ +
var div = document.createElement("div");
+div.onclick = function(){
+  doSomething();
+}; // Das div hat eine Referenz über die Event-Handler-Eigenschaft 'onclick'.
+// Der Handler hat auch eine Referenz auf das div, da die div-Variable
+// innerhalb Sichtbarkeitsbereich der Funktion ansprechbar ist.
+// Dieser Kreislauf sorgt dafür, dass beide Objekte nicht entsorgt werden
+// und ein Speicherleck entsteht
+
+ +

Mark-and-Sweep-Algorithmus

+ +

Dieser Algorithmus reduziert die Definition "ein Objekt wird nicht mehr gebraucht" auf "ein Objekt ist nicht erreichbar".

+ +

Der Algorithmus nimmt an, dass ein Satz von root-Objekten (bei JavaScript das globale Objekt) existiert. Der Algorithmus sucht dann von diesen Anfangsobjekten aus alle referenzierten Objekte, dann von den referenzierten Objekten alle Objekte, die auf andere Objekte referenzieren und so weiter. Auf diese Weise erkennt der Algorithmus alle erreichbaren Objekte und sammelt alle unerreichbaren Objekte.

+ +

Dieser Algorithmus ist besser als der vorherige, da Objekte, die nicht referenziert sind als unerreichbar gelten, jedoch Objekte, die unerreichbar sind, nicht unbedingt keine Referenzen haben (gegenseitige Referenz).

+ +

Im Jahr 2012 arbeiten alle modernen Browser mit einem Mark-and-Sweep-Garbage Collector. Alle Verbesserungen der letzen Jahre im Bereich der Garbage Collection bei JavaScript (generational/incremental/concurrent/parallel garbage collection) sind Verbesserungen der Implementierung des Algorithmus, jedoch keine Änderungen des Algorithmus selbst oder der Definition von "ein Objekt wird nicht mehr gebraucht".

+ +

Gegenseitige Verweise stellen kein Problem mehr dar

+ +

Bei dem Beispiel oben zu gegenseitigen Verweisen wird auf die beiden Objekte nicht mehr von einem Objekt aus verwiesen, welches über das globale Objekt erreichbar ist. Daher werden sie vom Garbage Collector als unerreichbar angesehen.

+ +

Dasselbe gilt für das nächste Beispiel. Sobald das div und der Handler unerreichbar geworden sind, werden sie vom Gabage Collector entsorgt, obwohl sie noch gegenseitig aufeinander verweisen.

+ +

Einschränkung: Objekte müssen explizit unerreichbar gemacht werden

+ +

Obwohl dies als Einschränkung gilt, gibt es in der Praxis kaum solche Situationen und deshalb denkt kaum jemand über die Garbage Collection nach.

+ +

Weitere Informationen

+ + diff --git a/files/de/web/javascript/reference/classes/constructor/index.html b/files/de/web/javascript/reference/classes/constructor/index.html new file mode 100644 index 0000000000..5ab83ddcd5 --- /dev/null +++ b/files/de/web/javascript/reference/classes/constructor/index.html @@ -0,0 +1,165 @@ +--- +title: Konstruktor +slug: Web/JavaScript/Reference/Klassen/constructor +tags: + - ECMAScript 2015 + - JavaScript + - Klassen +translation_of: Web/JavaScript/Reference/Classes/constructor +--- +
{{jsSidebar("Classes")}}
+ +

Die constructor Methode ist eine spezielle Methode für das erzeugen und initialisieren von Objekten, die mit dem Schlüsselwort class erzeugt wurden.

+ +

Syntax

+ +
constructor([Argumente]) { ... }
+ +

Beschreibung

+ +

In einer Klasse kann es nur eine Methode mit dem Namen "constructor" geben. Eine {{jsxref("SyntaxError")}} Fehlermeldung wird geworfen, wenn in einer Klasse die constructor Methode mehr als einmal vorhanden ist.

+ +

Die constructor Methode kann mit dem Schlüsselwort super die constructor Methode der Eltern-Klasse aufrufen.

+ +

Wenn man keine constructor Methode erzeugt, wird eine Standardkonstruktor verwendet.

+ +

Beispiele

+ +

Verwendung der constructor Methode

+ +

Dieser Quellcode Ausschnitt wurden vom  classes Beispiel (live Demo) übernommen.

+ +
class Square extends Polygon {
+  constructor(length) {
+    // Hier wird die constructor Methode der Eltern-Klasse aufgerufen,
+    // für die Parameter width und height wurde der übergebene length Parameter verwendet
+    super(length, length);
+    // Anmerkung: In abgeleiteten Klassen, muss die super() Methode aufgerufen werden,
+    // bevor man das 'this' Objekt verwenden kann, da es sonst zu einen Referenz Fehler kommt
+    this.name = 'Square';
+  }
+
+  get area() {
+    return this.height * this.width;
+  }
+
+  set area(value) {
+    this.area = value;
+  }
+}
+ +

Standardkonstruktoren

+ +

Wenn man keine constructor Methode anlegt, wird eine Standardkonstruktor verwendet. Für Basis Klassen ist der Standard Konstruktor:

+ +
constructor() {}
+
+ +

Für vererbte Klassen, ist das der Standardkonstruktor:

+ +
constructor(...args) {
+  super(...args);
+}
+ +

Spezifikationen

+ + + + + + + + + + + + + + + + + + + +
SpezifikationStatusKommentar
{{SpecName('ES2015', '#sec-static-semantics-constructormethod', 'Constructor Method')}}{{Spec2('ES2015')}}Initiale Definition.
{{SpecName('ESDraft', '#sec-static-semantics-constructormethod', 'Constructor Method')}}{{Spec2('ESDraft')}} 
+ +

Browserkompatibilität

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support{{CompatChrome(42.0)}}{{CompatGeckoDesktop(45)}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
Default constructors{{CompatUnknown}}{{CompatGeckoDesktop(45)}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidAndroid WebviewFirefox Mobile (Gecko)IE MobileOpera MobileSafari MobileChrome for Android
Basic support{{CompatNo}}{{CompatChrome(42.0)}}{{CompatGeckoMobile(45)}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatChrome(42.0)}}
Default constructors{{CompatUnknown}}{{CompatUnknown}}{{CompatGeckoMobile(45)}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +

Siehe auch

+ + diff --git a/files/de/web/javascript/reference/classes/extends/index.html b/files/de/web/javascript/reference/classes/extends/index.html new file mode 100644 index 0000000000..29ed8c5e78 --- /dev/null +++ b/files/de/web/javascript/reference/classes/extends/index.html @@ -0,0 +1,172 @@ +--- +title: Erweitern +slug: Web/JavaScript/Reference/Klassen/extends +tags: + - Classes + - ECMAScript 2015 + - JavaScript +translation_of: Web/JavaScript/Reference/Classes/extends +--- +
{{jsSidebar("Classes")}}
+ +

Das extends Schlüsselwort wird in einer Klassendeklaration oder in einem Klassenausdruck verwendet, um eine, von einer anderen Klasse, abgeleitete Klasse zu erzeugen.

+ +

Syntax

+ +
class KindKlasse extends ElternKlasse { ... }
+ +

Beschreibung

+ +

Das Schlüsselwort extends kann verwendet werden, um von selbst erstellen Klassen als auch von standardmäßig eingebaute Objekte abzuleiten.

+ +

Das prototype Objekt, des zu erweiternden Objekt, muss entweder von Typ {{jsxref("Object")}} oder{{jsxref("null")}} sein.

+ +

Beispiele

+ +

Verwendung von extends

+ +

Das erste Beispiel erzeugt einen Klasse mit dem Namen Square, die von der Klasse Polygon abgeleitet ist. Dieses Beispiel wurde aus dieser live Demo (Quellcode) entnommen.

+ +
class Square extends Polygon {
+  constructor(length) {
+    // Hier wird die constructor Methode der Eltern-Klasse aufgerufen,
+    // für die Parameter width und height wurde der übergebene length Parameter verwendet
+    super(length, length);
+    // Anmerkung: In abgeleiteten Klassen, muss die super() Methode aufgerufen werden,
+    // bevor man das 'this' Objekt verwenden kann, da es sonst zu einen Referenz Fehler kommt
+    this.name = 'Square';
+  }
+
+  get area() {
+    return this.height * this.width;
+  }
+
+  set area(value) {
+    this.height = this.width = Math.sqrt(value);
+    this.area = value;
+  }
+}
+ +

Verwendung mit standardmäßig eingebautem Objekt

+ +

In diesem Beispiel wird das standardmäßig eingebaute {{jsxref("Date")}} Objekt erweitert. Dieses Beispiel wurde aus dieser live Demo (Quellcode) entnommen.

+ +
class myDate extends Date {
+  constructor() {
+    super();
+  }
+
+  getFormattedDate() {
+    var months = ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'];
+    return this.getDate() + "-" + months[this.getMonth()] + "-" + this.getFullYear();
+  }
+}
+ +

Ableiten von null

+ +

Das Ableiten von {{jsxref("null")}} funktioniert genauso wie mit jeder anderen Klasse, mit der Ausnahme, dass das prototype Objekt nicht von {{jsxref("Object.prototype")}} abgeleitet ist.

+ +
class nullExtends extends null {
+  constructor() {}
+}
+
+Object.getPrototypeOf(nullExtends); // Function.prototype
+Object.getPrototypeOf(nullExtends.prototype) // null
+ +

Spezifikationen

+ + + + + + + + + + + + + + + + + + + +
SpezifikationStatusKommentar
{{SpecName('ES2015', '#sec-class-definitions', 'extends')}}{{Spec2('ES2015')}}Initiale Definition.
{{SpecName('ESDraft', '#sec-class-definitions', 'extends')}}{{Spec2('ESDraft')}}
+ +

Browserkompatibilität

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support{{CompatChrome(42.0)}}{{CompatGeckoDesktop(45)}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
Array subclassing{{CompatChrome(43.0)}}{{CompatNo}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari MobileChrome for Android
Basic support{{CompatNo}}{{CompatGeckoMobile(45)}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatChrome(42.0)}}
Array subclassing{{CompatNo}}{{CompatNo}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatChrome(43.0)}}
+
+ +

Siehe auch

+ + diff --git a/files/de/web/javascript/reference/classes/index.html b/files/de/web/javascript/reference/classes/index.html new file mode 100644 index 0000000000..81bec0651a --- /dev/null +++ b/files/de/web/javascript/reference/classes/index.html @@ -0,0 +1,376 @@ +--- +title: Klassen +slug: Web/JavaScript/Reference/Klassen +tags: + - ECMAScript 2015 + - JavaScript + - Klassen + - Konstruktor + - Vererbung +translation_of: Web/JavaScript/Reference/Classes +--- +
{{JsSidebar("Classes")}}
+ +
JavaScript Klassen, eingeführt in ECMAScript 2015, sind syntaktischer Zucker für das bestehende, auf Prototypen basierende, Vererbungsmodell von JavaScript. Diese Syntaxerweiterung führt kein neues OOP-Modell in die Sprache ein. JS Klassen ermöglichen es, mit klarer und verständlicher Syntax Objekte zu erstellen und Vererbung in Javascript zu realisieren.
+ +

Klassendefinition

+ +

Klassen sind eigentlich Funktionen. Analog zu Funktionsausdrücken und Funktionsdeklarationen hat die Klassensyntax zwei Komponenten:

+ + + +

Klassendeklaration

+ +

Eine Möglichkeit, Klassen zu definieren ist eine Klassendeklaration. Diese wird eingeleitet durch das Schlüsselwort class, gefolgt vom Namen der Klasse (hier: "Rectangle").

+ +
class Rectangle {
+  constructor(height, width) {
+    this.height = height;
+    this.width = width;
+  }
+}
+ +

Hoisting

+ +

Ein wichtiger Unterschied zwischen Klassen- und Funktionsdeklarationen besteht im sogenannten {{Glossary("Hoisting")}}. Funktionsdeklarationen werden an den Anfang des Definitionsbereichs "gehoben", für Klassen gilt dies nicht. Das heißt, um auf eine Klasse zuzugreifen, muss sie zuvor definiert worden sein, sonst führt dies zu einem {{jsxref("ReferenceError")}}:

+ +
var p = new Polygon(); // ReferenceError
+
+class Polygon {}
+
+ +

Klassenausdruck

+ +

Ein Klassenausdruck ist eine weitere Möglichkeit eine Klasse zu definieren. Dabei ist es optional, hinter dem Schlüsselwort class einen Namen anzugeben. Sollte ein Name angegeben werden, so gilt dieser nur innerhalb des Klassenkörpers.

+ +
// unnamed
+var Polygon = class {
+  constructor(height, width) {
+    this.height = height;
+    this.width = width;
+  }
+};
+
+// named
+var Polygon = class Polygon {
+  constructor(height, width) {
+    this.height = height;
+    this.width = width;
+  }
+};
+
+ +

Klassenkörper und Methodendefinitionen

+ +

Der Körper der Klasse ist innerhalb der beiden geschweiften Klammern {}. Hier werden die Eigenschaften der Klasse definiert, wie Konstruktoren oder Methoden.

+ +

"Strict mode"

+ +

Der Inhalt der Klassendeklaration und des Klassenausdrucks werden im "strikten Modus" ausgeführt.

+ +

Konstruktor

+ +

Die Konstruktor-Methode ist eine spezielle Methode, um Objekte zu erzeugen und zu initialisieren. Eine Klasse kann nur eine spezielle Methode mit dem Namen "constructor" haben. Sollte es in einer Klasse mehrere "constructor"-Methoden geben, wird ein {{jsxref("SyntaxError")}} geworfen.

+ +

In der Konstruktor-Methode kann man mit dem Schlüsselwort "super", den Konstruktor der Elternklasse aufrufen.

+ +

Prototype Methoden

+ +

Siehe auch Methodendefinitionen.

+ +
class Polygon {
+  constructor(hoehe, breite) {
+    this.hoehe = hoehe;
+    this.breite = breite;
+  }
+
+  get flaeche() {
+    return this.berechneFlaeche();
+  }
+
+  berechneFlaeche() {
+    return this.hoehe * this.breite;
+  }
+}
+
+const quadrat = new Polygon(10, 10);
+
+console.log(quadrat.flaeche);
+ +

Statische Methoden

+ +

Das Schlüsselwort static definiert statische Methoden. Statische Methoden werden ohne Instanzierung einer Klasse aufgerufen und sind über eine erzeugte Instanz nicht aufrufbar. Oft werden in Applikationen statische Methoden für Hilfsfunktionen verwendet.

+ +
class Punkt {
+    constructor(x, y) {
+        this.x = x;
+        this.y = y;
+    }
+
+    static laenge(a, b) {
+        const dx = a.x - b.x;
+        const dy = a.y - b.y;
+
+        return Math.sqrt(dx*dx + dy*dy);
+    }
+}
+
+const p1 = new Punkt(5, 5);
+const p2 = new Punkt(10, 10);
+
+console.log(Punkt.laenge(p1, p2));
+ +

Boxing with prototype and static methods

+ +

Wird eine statische oder eine prototype-Methode aufgerufen, ohne dass ein Objekt in der Variable "this" liegt (oder mit "this" als Wahrheitswert, Zeichenkette, Nummer, undefiniert oder null), dann wird die Variable "this" im Funktionskörper undefined sein. Autoboxing wird nicht passieren. Das Verhalten wird das gleiche sein, sollte der Code nicht im "strict mode" geschrieben worden sein.

+ +
class Tier {
+  sprich() {
+    return this;
+  }
+  static iss() {
+    return this;
+  }
+}
+
+let obj = new Tier();
+let sprich = obj.sprich;
+sprich(); // undefined
+
+let iss = Tier.iss;
+iss(); // undefined
+ +

Falls wir den vorherigen Quelltext mit klassischen funktionsbasierten Klassen schreiben, wird Autoboxing stattfinden. Dies wird auf dem Wert passieren, der für "this" an die Funktion übergeben wurde.

+ +
function Tier() { }
+
+Tier.prototype.sprich = function() {
+  return this;
+}
+
+Tier.iss = function() {
+  return this;
+}
+
+let obj = new Tier();
+let sprich = obj.sprich;
+sprich(); // Globales Objekt
+
+let iss = Tier.iss;
+iss(); // Globales Objekt
+ +

Vererbung mittels extends

+ +

Das Schlüsselwort extends wird dafür verwendet, Klassendeklarationen und Klassenausdrücke zu erzeugen, die von einer anderen Klasse ableiten.

+ +
class Tier{
+  constructor(name) {
+    this.name = name;
+  }
+
+  sprich() {
+    console.log(this.name + ' macht ein Geräusch.');
+  }
+}
+
+class Hund extends Tier{
+  sprich() {
+    console.log(this.name + ' bellt.');
+  }
+}
+
+var h = new Hund('Wolfi');
+h.sprich();
+
+ +

Existiert in der Unterklasse ein Konstruktor, muss dieser zuerst super() aufrufen, bevor "this" verwendet werden kann.

+ +

Man kann auch traditionelle funktionsbasierte Klassen erweitern:

+ +
function Tier(name) {
+  this.name = name;
+}
+Tier.prototype.sprich = function () {
+  console.log(this.name + ' macht ein Geräusch.');
+}
+
+class Hund extends Tier {
+  sprich() {
+    super.sprich();
+    console.log(this.name + ' bellt.');
+  }
+}
+
+var h = new Hund('Wolfi');
+h.sprich();
+ +

Klassen können nicht von regulären (nicht konstruierbaren) Objekten erben. Falls von einem regulärem Objekt geerbt werden soll, kann {{jsxref("Object.setPrototypeOf()")}} verwendet werden:

+ +
var Tier = {
+  sprich() {
+    console.log(this.name + ' macht ein Geräusch.');
+  }
+};
+
+class Hund {
+  constructor(name) {
+    this.name = name;
+  }
+  sprich() {
+    console.log(this.name + ' bellt.');
+  }
+}
+
+Object.setPrototypeOf(Hund.prototype, Tier);
+
+var h = new Hund('Wolfi');
+h.sprich();
+ +

Species

+ +

Falls man zum Beispiel in einer selbst erzeugten Klasse MyArray den Konstruktor mit dem Konstruktor der {{jsxref("Array")}} Klasse überschreiben will, kann man dies mittels des species Musters erreichen.

+ +

Zum Beispiel, wenn man die {{jsxref("Array.map", "map()")}} Methode aufruft, wird der Default-Konstruktor der Klasse aufgerufen. Will man, dass stattdessen der Konstruktor der Elternklasse benutzt wird, kann man das {{jsxref("Symbol.species")}}-Symbol dafür verwenden:

+ +
class MyArray extends Array {
+  // Überschreibt species mit dem Konstruktor der Array-Klasses
+  static get [Symbol.species]() { return Array; }
+}
+var a = new MyArray(1,2,3);
+var mapped = a.map(x => x * x);
+
+console.log(mapped instanceof MyArray); // false
+console.log(mapped instanceof Array);   // true
+ +

Elternklasse Methoden mit super aufrufen

+ +

Das Schlüsselwort super kann verwendet werden, um Methoden der Elternklassen aufzurufen

+ +
class Katze{
+  constructor(name) {
+    this.name = name;
+  }
+
+  sprich() {
+    console.log(this.name + ' macht ein Geräusch.');
+  }
+}
+
+class Loewe extends Katze {
+  sprich() {
+    super.sprich();
+    console.log(this.name + ' brüllt.');
+  }
+}
+ +

Mix-ins

+ +

Abstrakte Subklassen oder mix-ins sind Vorlagen für Klassen. Eine ECMAScript-Klasse kann nur von einer einzigen Klasse ableiten, damit ist beispielsweise mehrfache Vererbung von Helferklassen nicht möglich. Die gewünschte Funktionalität muss von der Elternklasse bereitgestellt werden.

+ +

Eine Funktion die als Input eine Elternklasse nimmt und als Output eine davon abgeleitete Subklasse ausgibt, kann verwendet werden, um mix-ins in ECMAScript zu erzeugen:

+ +
var RechnerMixin = Base => class extends Base {
+  rechne() { }
+};
+
+var ZufallsGeneratorMixin = Base => class extends Base {
+  generiere() { }
+};
+ +

Eine Klasse die ein solches mix-in verwendet kann so erzeugt werden:

+ +
class Foo { }
+class Bar extends RechnerMixin(ZufallsGeneratorMixin(Foo)) { }
+ +

Spezifikationen

+ + + + + + + + + + + + + + + + + + + +
SpezifikationStatusKommentar
{{SpecName('ES2015', '#sec-class-definitions', 'Class definitions')}}{{Spec2('ES2015')}}Ursprüngliche Definition.
{{SpecName('ESDraft', '#sec-class-definitions', 'Class definitions')}}{{Spec2('ESDraft')}} 
+ +

Browserkompatibilität

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)EdgeInternet ExplorerOperaSafari
Basic support{{CompatChrome(42.0)}}[1]
+ {{CompatChrome(49.0)}}
{{CompatGeckoDesktop(45)}}13{{CompatNo}}{{CompatNo}}{{CompatSafari(9.0)}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
FunktionAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari MobileChrome für Android
Basis Unterstützung{{CompatNo}}{{CompatGeckoMobile(45)}}{{CompatUnknown}}{{CompatUnknown}}9{{CompatChrome(42.0)}}[1]
+ {{CompatChrome(49.0)}}
+
+ +

[1] Benötigt den strikten Modus. Der Support im nicht-strikte Modus verbirgt sich hinter der Flag "Experimentelle JavaScript-Funktionen", welche standardmäßig deaktiviert ist.

+ +

Siehe auch

+ + diff --git a/files/de/web/javascript/reference/classes/static/index.html b/files/de/web/javascript/reference/classes/static/index.html new file mode 100644 index 0000000000..9c13048498 --- /dev/null +++ b/files/de/web/javascript/reference/classes/static/index.html @@ -0,0 +1,136 @@ +--- +title: Statische Methoden +slug: Web/JavaScript/Reference/Klassen/static +tags: + - Classes + - ECMAScript 2015 + - JavaScript + - Static +translation_of: Web/JavaScript/Reference/Classes/static +--- +
{{jsSidebar("Classes")}}
+ +

Das static Schüsselwort definiert statische Methoden für eine Klasse.

+ +
{{EmbedInteractiveExample("pages/js/classes-static.html")}}
+ + + +

Syntax

+ +
static methodenName() { ... }
+ +

Beschreibung

+ +

Statische Methoden werden ohne Instanzierung einer Klasse aufgerufen und sind über eine erzeugte Instanz nicht aufrufbar. Oft werden in statische Methoden für Hilfsfunktionen verwendet.

+ +

Aufruf von statischen Methoden

+ +

Von einer anderen statischen Methode

+ +

Um eine statische Methode aus einer anderen statischen Methode der gleichen Klasse aufzurufen, kann das this Schlüsselwort verwendet werden.

+ +
class StaticMethodCall {
+    static staticMethod() {
+        return 'Static method has been called';
+    }
+    static anotherStaticMethod() {
+        return this.staticMethod() + ' from another static method';
+    }
+}
+StaticMethodCall.staticMethod();
+// 'Static method has been called'
+
+StaticMethodCall.anotherStaticMethod();
+// 'Static method has been called from another static method'
+ +

Für Klassenkonstruktoren und anderen Methoden

+ +

Statische Methoden sind mit dem this Schlüsselwort nicht direkt erreichbar von nicht statischen Methoden. Man kann sie mit dem Klassennamen aufrufen: KLASSENNAME.STATISCH_METHODE_NAME oder mit der Aufrufen einer Eigenschaft von constructor: this.constructor.STATISCH_METHODE_NAME.

+ +
class StaticMethodCall{
+    constructor(){
+        console.log(StaticMethodCall.staticMethod());
+        // 'static method has been called'
+
+        console.log(this.constructor.staticMethod());
+        // 'static method has been called'
+    }
+
+    static  staticMethod(){
+        return 'static method has been called.';
+    }
+}
+ +

Beispiele

+ +

Das folgende Beispiel demonstriert mehrere Dinge:

+ +
    +
  1. Wie eine statische Methode in einer Klasse implementiert wird.
  2. +
  3. Das von einer Klasse mit statischen Eigenschaften geerbt werden kann.
  4. +
  5. Wie eine statische Methode aufgerufen werden kann und wie nicht.
  6. +
+ +
class Triple {
+  static triple(n) {
+    if (n === undefined) {
+      n = 1;
+    }
+    return n * 3;
+  }
+}
+
+class BiggerTriple extends Triple {
+  static triple(n) {
+    return super.triple(n) * super.triple(n);
+  }
+}
+
+console.log(Triple.triple());        // 3
+console.log(Triple.triple(6));       // 18
+
+var tp = new Triple();
+
+console.log(BiggerTriple.triple(3));
+// 81 (not affected by parent's instantiation)
+
+console.log(tp.triple());
+// 'tp.triple is not a function'.
+
+ +

Spezifikationen

+ + + + + + + + + + + + + + + + + + + +
SpezifikationStatusKommentar
{{SpecName('ES2015', '#sec-class-definitions', 'Class definitions')}}{{Spec2('ES2015')}}Initiale Definition.
{{SpecName('ESDraft', '#sec-class-definitions', 'Class definitions')}}{{Spec2('ESDraft')}} 
+ +

Browserkompatibilität

+ + + +

{{Compat("javascript.classes.static")}}

+ +

Siehe auch

+ + diff --git a/files/de/web/javascript/reference/deprecated_and_obsolete_features/index.html b/files/de/web/javascript/reference/deprecated_and_obsolete_features/index.html new file mode 100644 index 0000000000..412bddc553 --- /dev/null +++ b/files/de/web/javascript/reference/deprecated_and_obsolete_features/index.html @@ -0,0 +1,291 @@ +--- +title: Veraltete und abgeschaffte Features +slug: Web/JavaScript/Reference/Veraltete_und_abgeschaffte_Features +translation_of: Web/JavaScript/Reference/Deprecated_and_obsolete_features +--- +
{{JsSidebar("More")}}
+ +

Diese Seite listet die Features JavaScriptes auf, die veraltet sind( das bedeutet, dass noch benutzbar, aber Entfernung geplant) und abgeschafft sind( das bedeutet: nicht länger benutzbar).

+ +

Veraltete Features

+ +

Diese veralteten Features können noch benutzt werden, aber sollten mit Vorsicht benutzt werden, da erwartet wird, dass sie in Futura endgültig abgeschafft werden. Man sollte daran arbeiten, sie von seinem Code zu entfernen.

+ +

RegExp-Eigenschaften

+ +

The following properties are deprecated. This does not affect their use in {{jsxref("String.replace", "replacement strings", "", 1)}}:

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
PropertyDescription
{{jsxref("RegExp.n", "$1-$9")}} +

Parenthesized substring matches, if any.
+ Warning: Using these properties can result in problems, since browser extensions can modify them. Avoid them!

+
{{jsxref("RegExp.input", "$_")}}See input.
{{jsxref("RegExp.multiline", "$*")}}See multiline.
{{jsxref("RegExp.lastMatch", "$&")}}See lastMatch.
{{jsxref("RegExp.lastParen", "$+")}}See lastParen.
{{jsxref("RegExp.leftContext", "$`")}}See leftContext.
{{jsxref("RegExp.rightContext", "$'")}}See rightContext.
{{jsxref("RegExp.input", "input")}}The string against which a regular expression is matched.
{{jsxref("RegExp.lastMatch", "lastMatch")}}The last matched characters.
{{jsxref("RegExp.lastParen", "lastParen")}}The last parenthesized substring match, if any.
{{jsxref("RegExp.leftContext", "leftContext")}}The substring preceding the most recent match.
{{jsxref("RegExp.rightContext", "rightContext")}}The substring following the most recent match.
+ +

The following are now properties of RegExp instances, no longer of the RegExp object:

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + +
PropertyDescription
{{jsxref("RegExp.global", "global")}}Whether or not to test the regular expression against all possible matches in a string, or only against the first.
{{jsxref("RegExp.ignoreCase", "ignoreCase")}}Whether or not to ignore case while attempting a match in a string.
{{jsxref("RegExp.lastIndex", "lastIndex")}}The index at which to start the next match.
{{jsxref("RegExp.multiline", "multiline")}}Whether or not to search in strings across multiple lines.
{{jsxref("RegExp.source", "source")}}The text of the pattern.
+ +

RegExp methods

+ + + +

Function properties

+ + + +

Legacy generator

+ + + +

Iterator

+ + + +

Object methods

+ + + +

Date methods

+ + + +

Functions

+ + + +

Proxy

+ + + +

let

+ + + +

Escape sequences

+ + + +

String methods

+ + + +

Obsolete features

+ +

These obsolete features have been entirely removed from JavaScript and can no longer be used as of the indicated version of JavaScript.

+ +

Object

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
PropertyDescription
{{jsxref("Global_Objects/Object/count", "__count__")}}Returns the number of enumerable properties directly on a user-defined object.
{{jsxref("Global_Objects/Object/Parent", "__parent__")}}Points to an object's context.
{{jsxref("Global_Objects/Object/eval", "Object.prototype.eval()")}}Evaluates a string of JavaScript code in the context of the specified object.
{{jsxref("Object.observe()")}}Asynchronously observing the changes to an object.
{{jsxref("Object.unobserve()")}}Remove observers.
{{jsxref("Object.getNotifier()")}}Creates an object that allows to synthetically trigger a change.
+ +

Function

+ + + + + + + + + + + + +
PropertyDescription
{{jsxref("Global_Objects/Function/arity", "arity")}}Number of formal arguments.
+ +

Array

+ + + + + + + + + + + + + + + + +
PropertyDescription
{{jsxref("Array.observe()")}}Asynchronously observing changes to Arrays.
{{jsxref("Array.unobserve()")}}Remove observers.
+ +

Number

+ + + +

ParallelArray

+ + + +

Statements

+ + + +

E4X

+ +

See E4X for more information.

+ +

Sharp variables

+ +

See Sharp variables in JavaScript for more information.

diff --git a/files/de/web/javascript/reference/deprecated_and_obsolete_features/the_legacy_iterator_protocol/index.html b/files/de/web/javascript/reference/deprecated_and_obsolete_features/the_legacy_iterator_protocol/index.html new file mode 100644 index 0000000000..017dcea16a --- /dev/null +++ b/files/de/web/javascript/reference/deprecated_and_obsolete_features/the_legacy_iterator_protocol/index.html @@ -0,0 +1,78 @@ +--- +title: The legacy Iterator protocol +slug: >- + Web/JavaScript/Reference/Veraltete_und_abgeschaffte_Features/The_legacy_Iterator_protocol +tags: + - ES2015 + - JavaScript + - Obsolet + - next() + - veralteter Iterator +translation_of: >- + Web/JavaScript/Reference/Deprecated_and_obsolete_features/The_legacy_Iterator_protocol +--- +
{{jsSidebar("More")}}
+ +
Kein Standard. Das veraltete Iterator-Protokoll war ein SpiderMonkey-spezifisches Feature, welches in Firefox 58 entfernt wurde. Als Alternative werden for..of Schleifen und das iterator protocol empfohlen.
+ +

Das veraltete Iterator-Protokoll

+ +

Vor Version 26 implementierte Firefox ein anderes Iterator-Protokoll, welches dem ES2015 Iterator protocol Standard entspricht.

+ +

Ein Objekt ist ein veralteter Iterator, wenn es eine next()  Methode mit den folgenden Semantiken implementiert, welches zum Ende der Iteration {{jsxref("Global_Objects/StopIteration", "StopIteration")}} wirft.

+ + + + + + + + + + + + +
PropertyValue
nextEine Funktion ohne Argumente, welche einen Wert zurückgibt.
+ +

Unterschied zwischen dem veralteten und dem ES2015 Iterator-Protokoll

+ + + +

Einfaches Beispiel mit dem alten Protokoll

+ +
function kreiereIterator(array){
+    var nextIndex = 0;
+
+    return {
+       next: function(){
+           if(nextIndex < array.length){
+               return array[nextIndex++];
+           else
+               throw new StopIteration();
+       }
+    }
+}
+
+var it = kreiereIterator(['yo', 'ya']);
+
+console.log(it.next()); // 'yo'
+console.log(it.next()); // 'ya'
+try{
+    console.log(it.next());
+}
+catch(e){
+    if(e instanceof StopIteration){
+         // Iteration beendet.
+    }
+}
+
+ +

Siehe auch

+ + diff --git a/files/de/web/javascript/reference/errors/already_has_pragma/index.html b/files/de/web/javascript/reference/errors/already_has_pragma/index.html new file mode 100644 index 0000000000..d297d3fea9 --- /dev/null +++ b/files/de/web/javascript/reference/errors/already_has_pragma/index.html @@ -0,0 +1,42 @@ +--- +title: 'Warning: -file- is being assigned a //# sourceMappingURL, but already has one' +slug: Web/JavaScript/Reference/Fehler/Already_has_pragma +tags: + - Error + - JavaScript + - Source maps + - Warning +translation_of: Web/JavaScript/Reference/Errors/Already_has_pragma +--- +
{{jsSidebar("Errors")}}
+ +

Fehlermeldung

+ +
Warning: -file- is being assigned a //# sourceMappingURL, but already has one.
+ +

Fehlertyp

+ +

Warnung. Die Ausführung von JavaScript wird nicht unterbrochen.

+ +

Was ist falsch gelaufen?

+ +

Eine Source Map wurde mehrere Male für eine JavaScript Quelle spezifiziert.

+ +

JavaScript Quellen sind oft kombiniert und minimiert, um diesen auf einem Server effizienter zu gestalten. Mit Source Maps ist es möglich den Quelltext, beim Debuggen, zu den originalen Quelldateien zu verfolgen. Es gibt zwei Möglichkeiten Source Maps zuzuweisen, einerseits mit einem Kommentar und andererseits mit dem setzen eines Headers in der JavaScriptdatei.

+ +

Beispiele

+ +

Setzen einer Source Map mit einem Kommentar in einer Datei:

+ +
//# sourceMappingURL=http://example.com/path/to/your/sourcemap.map
+ +

Oder alternativ mit dem setzen eines Headers in einer JavaScriptdatei:

+ +
X-SourceMap: /path/to/file.js.map
+ +

Siehe auch

+ + diff --git a/files/de/web/javascript/reference/errors/array_sort_argument/index.html b/files/de/web/javascript/reference/errors/array_sort_argument/index.html new file mode 100644 index 0000000000..2826cbe4c0 --- /dev/null +++ b/files/de/web/javascript/reference/errors/array_sort_argument/index.html @@ -0,0 +1,47 @@ +--- +title: 'TypeError: invalid Array.prototype.sort argument' +slug: Web/JavaScript/Reference/Fehler/Array_sort_argument +tags: + - Error + - JavaScript + - TypeError +translation_of: Web/JavaScript/Reference/Errors/Array_sort_argument +--- +
{{jsSidebar("Errors")}}
+ +

Fehlermeldung

+ +
TypeError: invalid Array.prototype.sort argument (Firefox)
+
+ +

Fehlertyp

+ +

{{jsxref("TypeError")}}

+ +

Was ist falsch gelaufen?

+ +

Das Argument von {{jsxref("Array.prototype.sort()")}} erwartet entweder {{jsxref("undefined")}} oder eine Funktion, welche die Operanden vergleicht.

+ +

Beispiele

+ +

Nicht valide Fälle

+ +
[1, 3, 2].sort(5);  // TypeError
+
+var cmp = { asc: (x, y) => x >= y, dsc: (x, y) => x <= y };
+[1, 3, 2].sort(cmp[this.key] || 'asc');  // TypeError
+
+ +

Valide Fälle

+ +
[1, 3, 2].sort();   // [1, 2, 3]
+
+
+var cmp = { asc: (x, y) => x >= y, dsc: (x, y) => x <= y };
+[1, 3, 2].sort(cmp[this.key || 'asc']); // [1, 2, 3]
+ +

Siehe auch

+ + diff --git a/files/de/web/javascript/reference/errors/bad_octal/index.html b/files/de/web/javascript/reference/errors/bad_octal/index.html new file mode 100644 index 0000000000..d021c0daa4 --- /dev/null +++ b/files/de/web/javascript/reference/errors/bad_octal/index.html @@ -0,0 +1,54 @@ +--- +title: 'Warning: 08/09 is not a legal ECMA-262 octal constant' +slug: Web/JavaScript/Reference/Fehler/Bad_octal +tags: + - Errors + - JavaScript + - SyntaxError + - Warning +translation_of: Web/JavaScript/Reference/Errors/Bad_octal +--- +
{{jsSidebar("Errors")}}
+ +

Fehlermeldung

+ +
Warning: SyntaxError: 08 is not a legal ECMA-262 octal constant.
+Warning: SyntaxError: 09 is not a legal ECMA-262 octal constant.
+
+ +

Fehlertyp

+ +

Warnung. Die Ausführung von JavaScript wird nicht gestoppt.

+ +

Was ist falsch gelaufen?

+ +

Dezimalliterale können mit einer Null (0) beginnen, gefolgt von anderen Dezimalziffern. en alle Ziffern nach der führenden 0 kleiner als 8 sind, wird die Zal als Oktalzahl interpretiert. Weil das nicht der Fall ist mit 08 und 09, warnt JavaScript.

+ +

Zu beachten ist, dass Oktalliterale und oktal maskierte Sequenzen veraltet sind und eine zusätzliche Veraltungswarnung enthalten. Mit ECMAScript 6 und später wird diese Syntak mit einer führenden Null gefolgt von einem großen oder kleinen lateinischen Buschstaben "O" (0o or 0O) benutzt. Sie dazu die Seite lexical grammar für mehr Informationen.

+ +

Beispiele

+ +

Ungültige Oktalzahlen

+ +
08;
+09;
+// SyntaxError: 08 is not a legal ECMA-262 octal constant
+// SyntaxError: "0"-prefixed octal literals and octal escape sequences
+// are deprecated
+ +

Gültige Oktalzahlen

+ +

Einsatz von einer führenden Null gefolgt von dem Buchstaben "o";

+ +
0O755;
+0o644;
+
+ +

Siehe auch

+ + diff --git a/files/de/web/javascript/reference/errors/bad_radix/index.html b/files/de/web/javascript/reference/errors/bad_radix/index.html new file mode 100644 index 0000000000..25c473eb93 --- /dev/null +++ b/files/de/web/javascript/reference/errors/bad_radix/index.html @@ -0,0 +1,61 @@ +--- +title: 'RangeError: radix must be an integer' +slug: Web/JavaScript/Reference/Fehler/Bad_radix +tags: + - Errors + - JavaScript + - RangeError +translation_of: Web/JavaScript/Reference/Errors/Bad_radix +--- +
{{jsSidebar("Errors")}}
+ +

Fehlermeldung

+ +
RangeError: radix must be an integer at least 2 and no greater than 36 (Firefox)
+RangeError: toString() radix argument must be between 2 and 36 (Chrome)
+
+ +

Fehlertyp

+ +

{{jsxref("RangeError")}}

+ +

Was ist falsch gelaufen?

+ +

Der optionale radix Parameter der {{jsxref("Number.prototype.toString()")}} Methode wurde spezifiziert. Dieser Wert muss eine ganze Zahl zwischen 2 und 36 sein, welche die Basis des Zahlensystems des repräsentierten Zahlwertes angibt. Zum Beispiel wird die Dezimalzahl (Basis 10) 169 im Hexadezimalsystem (Basis 16) als A9 repräsentiert.

+ +

Warum ist der Parameterwert auf 36 limitiert? Eine Basis größer als 10 nutzt als Ziffern Buchstaben; deswegen kann der Parameter nicht größer als 36 sein, weil das Lateinische Alphabet (welches im Englischen und vielen anderen Sprachen verwendet wird) nur 26 Buchstaben hat.

+ +

Die am meisten eingesetzten Basen sind:

+ + + +

Beispiele

+ +

Nicht valide Fälle

+ +
(42).toString(0);
+(42).toString(1);
+(42).toString(37);
+(42).toString(150);
+// You cannot use a string like this for formatting:
+(12071989).toString('MM-dd-yyyy');
+
+ +

Valide Fälle

+ +
(42).toString(2);     // "101010" (binary)
+(13).toString(8);     // "15"     (octal)
+(0x42).toString(10);  // "66"     (decimal)
+(100000).toString(16) // "186a0"  (hexadecimal)
+
+ +

Siehe auch

+ + diff --git a/files/de/web/javascript/reference/errors/bad_regexp_flag/index.html b/files/de/web/javascript/reference/errors/bad_regexp_flag/index.html new file mode 100644 index 0000000000..5bf381da53 --- /dev/null +++ b/files/de/web/javascript/reference/errors/bad_regexp_flag/index.html @@ -0,0 +1,105 @@ +--- +title: 'SyntaxError: invalid regular expression flag "x"' +slug: Web/JavaScript/Reference/Fehler/Bad_regexp_flag +tags: + - Error + - JavaScript + - SyntaxError +translation_of: Web/JavaScript/Reference/Errors/Bad_regexp_flag +--- +
{{jsSidebar("Errors")}}
+ +

Fehlermeldung

+ +
SyntaxError: invalid regular expression flag "x" (Firefox)
+SyntaxError: Invalid regular expression flags (Chrome)
+
+ +

Fehlertyp

+ +

{{jsxref("SyntaxError")}}

+ +

Was ist falsch gelaufen?

+ +

Es gibt nicht valide Flags in regulären Ausdrücken im Code. In einem regulärem Ausdrucksliteral, welches aus eine Muster umschlossen von Schrägstrichen ist, kommen die Flags nach dem zweiten Schrägstrich. Sie können auch in der Konstruktorfunktion des {{jsxref("RegExp")}} Objektes angegeben werden (zweiter Parameter). Flags für reguläre Ausdrücke können einfach oder zusammen in beliebiger Reihenfolge benutzt werden, jedoch gibt es in ECMAScript nur fünf.

+ +

Um ein Flag in regulären Ausdrücken einzufügen kann folgende Syntax benutzt werden:

+ +
var re = /pattern/flags;
+
+ +

oder

+ +
var re = new RegExp('pattern', 'flags');
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Flags von regulären Ausdrücken
FlagBeschreibung
gGlobale Suche.
iGroß- und Kleinschreibung nicht unterscheiden.
mSuche über mehrere Zeilen.
uUnicode; nimmt das Muster als eine Sequenz von Unicode Codepoints an.
yFührt eine "sticky" Suche durch, welche zutrifft, wenn der String von der Startposition aus auf das Muster zutrifft. Siehe {{jsxref("RegExp.sticky", "sticky")}}.
+ +

Beispiele

+ +

Es gibt nur fünf valide Flags für reguläre Ausdrücke.

+ +
/foo/bar;
+
+// SyntaxError: invalid regular expression flag "b"
+
+ +

Ist eine regulärer Ausdruck gewollt? Ein Ausdruck, der zwei Schrägstriche enthält wird als Literal für reguläre Ausdrücke interpretiert.

+ +
let obj = {
+  url: /docs/Web
+};
+
+// SyntaxError: invalid regular expression flag "W"
+
+ +

Oder war stattdessen ein String gemeint? Füge einfache oder doppelte Anführungszeichen hinzu, um ein Stringliteral zu erstellen.

+ +
let obj = {
+  url: '/docs/Web'
+};
+ +

Valide Flags für reguläre Ausdrücke

+ +

Siehe in der Tabelle oben für die fünf in JavaScript erlaubten validen Flags für reguläre Ausdrücke

+ +
/foo/g;
+/foo/gim;
+/foo/uy;
+
+ +

Siehe auch

+ + diff --git a/files/de/web/javascript/reference/errors/bad_return_or_yield/index.html b/files/de/web/javascript/reference/errors/bad_return_or_yield/index.html new file mode 100644 index 0000000000..e850455615 --- /dev/null +++ b/files/de/web/javascript/reference/errors/bad_return_or_yield/index.html @@ -0,0 +1,55 @@ +--- +title: 'SyntaxError: return not in function' +slug: Web/JavaScript/Reference/Fehler/Bad_return_or_yield +tags: + - Errors + - JavaScript + - SyntaxError +translation_of: Web/JavaScript/Reference/Errors/Bad_return_or_yield +--- +
{{jsSidebar("Errors")}}
+ +

Fehlermeldung

+ +
SyntaxError: return not in function
+SyntaxError: yield not in function
+
+ +

Fehlertyp

+ +

{{jsxref("SyntaxError")}}.

+ +

Was ist falsch gelaufen?

+ +

Ein return oder yield Statement wird außerhalb einer Funktion aufgerufen. Es kann sein, dass geschweifte Klammern fehlen. Die Statements return und yield müssen in einer Funktion sein, weil sie die Ausführung der Funktion beenden (oder pausieren und wieder starten) und dem Funktionsaufrufer einen spezifizierten Wert zurückgeben.

+ +

Beispiele

+ +
var cheer = function(score) {
+  if (score === 147)
+    return 'Maximum!';
+  };
+  if (score > 100) {
+    return 'Century!';
+  }
+}
+
+// SyntaxError: return not in function
+ +

Die geschweiften Klammern sehen auf den ersten Blick richtig aus, jedoch fehlt in dem Code eine { nach dem ersten if Statement. Korrekt währe es wir folgt:

+ +
var cheer = function(score) {
+  if (score === 147) {
+    return 'Maximum!';
+  }
+  if (score > 100) {
+    return 'Century!';
+  }
+};
+ +

Siehe auch

+ + diff --git a/files/de/web/javascript/reference/errors/called_on_incompatible_type/index.html b/files/de/web/javascript/reference/errors/called_on_incompatible_type/index.html new file mode 100644 index 0000000000..1915e1b829 --- /dev/null +++ b/files/de/web/javascript/reference/errors/called_on_incompatible_type/index.html @@ -0,0 +1,64 @@ +--- +title: X.prototype.y called on incompatible type +slug: Web/JavaScript/Reference/Fehler/Called_on_incompatible_type +tags: + - Error + - JavaScript + - TypeError +translation_of: Web/JavaScript/Reference/Errors/Called_on_incompatible_type +--- +
{{jsSidebar("Errors")}}
+ +

Fehlermeldung

+ +
TypeError: Function.prototype.toString called on incompatible object (Firefox)
+TypeError: Function.prototype.bind called on incompatible target (Firefox)
+TypeError: Method Set.prototype.add called on incompatible receiver undefined (Chrome)
+TypeError: Bind must be called on a function (Chrome)
+
+ +

Fehlertyp

+ +

{{jsxref("TypeError")}}

+ +

Was ist falsch gelaufen?

+ +

Wenn dieser Fehler auftritt, wird eine Funktion (auf eineem gegebenen Objekt) aufgerufen, wobei this nicht vom erwarteten Typ ist.

+ +

Dieser Fehler kann auftreten, wenn die {{jsxref("Function.prototype.call()")}} oder {{jsxref("Function.prototype.apply()")}} Methode mit einem this Argument genutzt werden, welches nicht dem erwarteten Typ entspricht.

+ +

Dieser Fehler kann auch auftreten, wenn eine Funktion (in einem Objekt gespeichert) als Argument in einer anderen Funktion genutzt wird. In diesem Fall ist das Objekt nicht this der Funktion. Um diesen Dall zu umgehen muss eine Lambda-Funktion unterstützt werden, welche den Aufruf markiert, oder die {{jsxref("Function.prototype.bind()")}} Funktion eingesetzt werden, um das richtige this Objekt zu nutzen.

+ +

Beispiele

+ +

Fehlerfälle

+ +
var mySet = new Set;
+['bar', 'baz'].forEach(mySet.add);
+// mySet.add ist eine Funktion, aber "mySet" wird so nicht erfasst.
+
+var myFun = function () {};
+['bar', 'baz'].forEach(myFun.bind);
+// myFun.bind ist eine Funktion, aber "myFun" wird nicht so erfasst.
+
+
+ +

Gültiger Fälle

+ +
var mySet = new Set;
+['bar', 'baz'].forEach(mySet.add.bind(mySet));
+// Das funktioniert, weil "mySet" als this an die Funktion gebunden wird.
+
+var myFun = function () {};
+['bar', 'baz'].forEach(x => myFun.bind(x));
+// Das funktioniert durch die "bind" Funktion. Es wird eine Lambda-Funktion erstellt, die die Argumente weiterleitet..
+
+
+ +

Siehe auch

+ + diff --git a/files/de/web/javascript/reference/errors/cant_access_lexical_declaration_before_init/index.html b/files/de/web/javascript/reference/errors/cant_access_lexical_declaration_before_init/index.html new file mode 100644 index 0000000000..16b976aef6 --- /dev/null +++ b/files/de/web/javascript/reference/errors/cant_access_lexical_declaration_before_init/index.html @@ -0,0 +1,60 @@ +--- +title: 'ReferenceError: can''t access lexical declaration`X'' before initialization' +slug: Web/JavaScript/Reference/Fehler/Cant_access_lexical_declaration_before_init +tags: + - Errors + - JavaScript + - ReferenceError +translation_of: Web/JavaScript/Reference/Errors/Cant_access_lexical_declaration_before_init +--- +
{{jsSidebar("Errors")}}
+ +

Fehlermeldung

+ +
ReferenceError: can't access lexical declaration `X' before initialization (Firefox)
+ReferenceError: 'x' is not defined (Chrome)
+
+ +

Fehlertyp

+ +

{{jsxref("ReferenceError")}}

+ +

Was ist falsch gelaufen?

+ +

Auf eine lexikalische Variable wurde zugegriffen bevor sie deklariert wurde. Das passiert in Blockstatements, in denen auf let oder const Variablen zugegriffen wird, bevor sie definiert wurden.

+ +

Beispiele

+ +

Falsche Fälle

+ +

In diesem Fall wird die Variable "foo" in einem Blockstatement mit let neu deklariert.

+ +
function test() {
+  let foo = 33;
+  if (true) {
+    let foo = (foo + 55);
+    // ReferenceError: can't access lexical
+    // declaration `foo' before initialization
+  }
+}
+test();
+
+ +

Richtige Fälle

+ +

Um "foo" im if-Statement zu ändern, muss  let entfernt werden, welche die Neudeklaration verursacht.

+ +
function test(){
+   let foo = 33;
+   if (true) {
+      foo = (foo + 55);
+   }
+}
+test();
+
+ +

Siehe auch

+ + diff --git a/files/de/web/javascript/reference/errors/cant_access_property/index.html b/files/de/web/javascript/reference/errors/cant_access_property/index.html new file mode 100644 index 0000000000..98471eb28e --- /dev/null +++ b/files/de/web/javascript/reference/errors/cant_access_property/index.html @@ -0,0 +1,59 @@ +--- +title: 'TypeError: can''t access property "x" of "y"' +slug: Web/JavaScript/Reference/Fehler/Cant_access_property +tags: + - Fehler + - JavaScript + - TypeError +translation_of: Web/JavaScript/Reference/Errors/Cant_access_property +--- +
{{jsSidebar("Errors")}}
+ +

Fehlermeldung

+ +
TypeError: Unable to get property {x} of undefined or null reference (Edge)
+TypeError: can't access property {x} of {y} (Firefox)
+TypeError: {y} is undefined, can't access property {x} of it (Firefox)
+TypeError: {y} is null, can't access property {x} of it (Firefox)
+
+Beispiele:
+TypeError: x is undefined, can't access property "prop" of it
+TypeError: x is null, can't access property "prop" of it
+TypeError: can't access property "prop" of undefined
+TypeError: can't access property "prop" of null
+
+ +

Fehlertyp

+ +

{{jsxref("TypeError")}}.

+ +

Was ist falsch gelaufen?

+ +

The Attributzugriff erfolgte über einen {{jsxref("undefined")}} oder {{jsxref("null")}} Wert

+ +

Beispiele

+ +

Invalide Fälle

+ +
// undefined und null sind Fälle auf denen die Methode substring nicht aufgerufen werden kann
+var foo = undefined;
+foo.substring(1); // TypeError: x is undefined, can't access property "substring" of it
+
+var foo = null;
+foo.substring(1); // TypeError: x is null, can't access property "substring" of it
+
+ +

Fehlerbehebung

+ +

Um den null pointer auf undefined oder null Werte zu beheben, kann beispielsweise der typeof Operator verwendet werden.

+ +
if (typeof foo !== 'undefined') {
+  // Hier wissen wir, dass foo definiert ist
+}
+ +

Siehe auch

+ + diff --git a/files/de/web/javascript/reference/errors/cant_define_property_object_not_extensible/index.html b/files/de/web/javascript/reference/errors/cant_define_property_object_not_extensible/index.html new file mode 100644 index 0000000000..691924f427 --- /dev/null +++ b/files/de/web/javascript/reference/errors/cant_define_property_object_not_extensible/index.html @@ -0,0 +1,64 @@ +--- +title: 'TypeError: can''t define property "x": "obj" is not extensible' +slug: Web/JavaScript/Reference/Fehler/Cant_define_property_object_not_extensible +tags: + - Error + - Errors + - JavaScript + - TypeError +translation_of: Web/JavaScript/Reference/Errors/Cant_define_property_object_not_extensible +--- +
{{jsSidebar("Errors")}}
+ +

Fehlermeldung

+ +
TypeError: can't define property "x": "obj" is not extensible (Firefox)
+TypeError: Cannot define property: "x", object is not extensible. (Chrome)
+
+ +

Fehlertyp

+ +

{{jsxref("TypeError")}}

+ +

Was ist falsch gelaufen?

+ +

Normalerweise ist ein Objekt erweiterbar und neue Eigenschaften können hinzugefügt werden. In diesem Fall markiert {{jsxref("Object.preventExtensions()")}} ein Objekt als nicht mehr erweiterbar, so dass ein Objekt nur noch die Eigenschaften haben kann, die es vor dem Aufruf hatte.

+ +

Beispiele

+ +

Im strict mode wird ein TypeError erzeugt, wenn versucht wird eine Eigenschaft zu einem nicht erweiterbaren Objekt hinzuzufügen. Im normalen Modus wird das Hinzufügen einfach ignoriert.

+ +
'use strict';
+
+var obj = {};
+Object.preventExtensions(obj);
+
+obj.x = 'foo';
+// TypeError: can't define property "x": "obj" is not extensible
+
+ +

Im strict mode und normalen Modus wird ein Fehler erzeugt, wenn {{jsxref("Object.defineProperty()")}} benutzt wird, um eine Eigenschaft zu einem nicht erweiterbaren Objekt hinzuzufügen.

+ +
var obj = { };
+Object.preventExtensions(obj);
+
+Object.defineProperty(obj,
+  'x', { value: "foo" }
+);
+// TypeError: can't define property "x": "obj" is not extensible
+
+ +

Um diesen Fehler zu vermeiden muss entweder der Aufruf von {{jsxref("Object.preventExtensions()")}} entfernt werden oder die Position des Aufrufes so verschoben werden, dass das Hinzufügen von Eigenschaften davor passiert und das Objekt erst danach als nicht erweiterbar markiert wird. Natürlich kann auch die neue Eigenschaft entfernt werden, wenn sie nicht benötigt wird.

+ +
'use strict';
+
+var obj = {};
+obj.x = 'foo'; // add property first and only then prevent extensions
+
+Object.preventExtensions(obj);
+ +

Siehe auch

+ + diff --git a/files/de/web/javascript/reference/errors/cant_delete/index.html b/files/de/web/javascript/reference/errors/cant_delete/index.html new file mode 100644 index 0000000000..fe09735071 --- /dev/null +++ b/files/de/web/javascript/reference/errors/cant_delete/index.html @@ -0,0 +1,58 @@ +--- +title: 'TypeError: property "x" is non-configurable and can''t be deleted' +slug: Web/JavaScript/Reference/Fehler/Cant_delete +tags: + - Errors + - JavaScript + - Strict Mode + - TypeError +translation_of: Web/JavaScript/Reference/Errors/Cant_delete +--- +
{{jsSidebar("Errors")}}
+ +

Fehlermeldung

+ +
TypeError: property "x" is non-configurable and can't be deleted. (Firefox)
+TypeError: Cannot delete property 'x' of #<Object> (Chrome)
+
+ +

Fehlertyp

+ +

{{jsxref("TypeError")}} nur im strict mode.

+ +

Was ist falsch gelaufen?

+ +

Es wurde versucht eine EIgenschaft zu löschen, obwohl die Eigenschaft nicht Konfigurierbar (non-configurable) ist. Das configurable Attribut gibt an, ob ein Eigenschaft von einem Objekt gelöscht werden kann und ob ein Attribut (anders als writable) geändert werden kann.

+ +

Dieser Fehler ist nur tritt nur im strict mode auf. In non-strict Quelltext, gibt die Operation false zurück.

+ +

Beispiele

+ +

Nicht Konfigurierbare Eigenschaften sind nicht sehr häufig, aber sie können mit {{jsxref("Object.defineProperty()")}} oder {{jsxref("Object.freeze()")}} erstellt werden.

+ +
'use strict';
+var obj = Object.freeze({name: 'Elsa', score: 157});
+delete obj.score;  // TypeError
+
+'use strict';
+var obj = {};
+Object.defineProperty(obj, 'foo', {value: 2, configurable: false});
+delete obj.foo;  // TypeError
+
+'use strict';
+var frozenArray = Object.freeze([0, 1, 2]);
+frozenArray.pop();  // TypeError
+
+ +

Es gibt auch einige nicht Konfigurierbare Eigenschaften, die in JavaScript eingebaut sind. Dazu zählen zum Beispiel die mathematischen Konstanten.

+ +
'use strict';
+delete Math.PI;  // TypeError
+ +

Siehe auch

+ + diff --git a/files/de/web/javascript/reference/errors/cant_redefine_property/index.html b/files/de/web/javascript/reference/errors/cant_redefine_property/index.html new file mode 100644 index 0000000000..80ef1e384b --- /dev/null +++ b/files/de/web/javascript/reference/errors/cant_redefine_property/index.html @@ -0,0 +1,51 @@ +--- +title: 'TypeError: can''t redefine non-configurable property "x"' +slug: Web/JavaScript/Reference/Fehler/Cant_redefine_property +tags: + - Error + - Errors + - JavaScript + - TypeError +translation_of: Web/JavaScript/Reference/Errors/Cant_redefine_property +--- +
{{jsSidebar("Errors")}}
+ +

Fehlermeldung

+ +
TypeError: can't redefine non-configurable property "x" (Firefox)
+TypeError: Cannot redefine property: "x" (Chrome)
+
+ +

Fehlertyp

+ +

{{jsxref("TypeError")}}

+ +

Was ist falsch gelaufen?

+ +

Es wurde versucht eine Eigenschaft erneut zu definieren, aber die Eigenschaft ist nicht konfigurierbar (non-configurable). Das configurable Attribut kontrolliert, ob eine Eigenschaft von einem Objekt gelöscht werden kann und seine Attribute (anders als writable) geändert werden können. Eigenschaften von einem Objekt, dass von einem Objekt-Initialisierer erstellt wurden, sind konfigurierbar. Immer, wenn zum Beispiel {{jsxref("Object.defineProperty()")}} eingesetzt wird, ist die Eigenschaft nicht ohne weiteres konfigurierbar.

+ +

Beispiele

+ +

Nicht konfigurierbare Eigenschaften mit Object.defineProperty erstellen

+ +

Die {{jsxref("Object.defineProperty()")}} Funktion erstellt nicht konfiguriertbare Eigenschaften wenn sie nicht extra als konfigurierbar spezifiziert sind.

+ +
var obj = Object.create({});
+Object.defineProperty(obj, "foo", {value: "bar"});
+
+Object.defineProperty(obj, "foo", {value: "baz"});
+// TypeError: can't redefine non-configurable property "foo"
+
+ +

Die "foo" Eigenschaft muss als Konfigurierbar eingestellt werden, wenn diese später im Quelltext erneut definiert bzw. überschrieben werden soll.

+ +
var obj = Object.create({});
+Object.defineProperty(obj, "foo", {value: "bar", configurable: true});
+Object.defineProperty(obj, "foo", {value: "baz", configurable: true});
+ +

Siehe auch

+ + diff --git a/files/de/web/javascript/reference/errors/cyclic_object_value/index.html b/files/de/web/javascript/reference/errors/cyclic_object_value/index.html new file mode 100644 index 0000000000..33bf4d508a --- /dev/null +++ b/files/de/web/javascript/reference/errors/cyclic_object_value/index.html @@ -0,0 +1,67 @@ +--- +title: 'TypeError: cyclic object value' +slug: Web/JavaScript/Reference/Fehler/Cyclic_object_value +tags: + - Error + - Errors + - JavaScript + - TypeError +translation_of: Web/JavaScript/Reference/Errors/Cyclic_object_value +--- +
{{jsSidebar("Errors")}}
+ +

Fehlermeldung

+ +
TypeError: cyclic object value (Firefox)
+TypeError: Converting circular structure to JSON (Chrome and Opera)
+TypeError: Circular reference in value argument not supported (Microsoft Edge)
+
+ +

Fehlertyp

+ +

{{jsxref("TypeError")}}

+ +

Was ist falsch gelaufen?

+ +

Wenn {{jsxref("JSON.stringify()")}} aufgerufen wird, kann eine zyklische Objektreferenzstruktur nicht zu eine String konvertiert werden.

+ +

Beispiele

+ +

In eine zyklischen Struktur wie folgender

+ +
var circularReference = {otherData: 123};
+circularReference.myself = circularReference;
+
+ +

wird {{jsxref("JSON.stringify()")}} nicht funktionieren

+ +
JSON.stringify(a);
+// TypeError: cyclic object value
+
+ +

Um zyklische Referenzen zu serialisieren, kann man eine Bibliotheken benutzen (z. B. cycle.js von Douglas Crockford) oder eine eigene Lösung implementieren, welche zyklische Referenzen findet und mit serialisierbaren Werten ersetzt (oder diese entfernt).

+ +

Das folgende Codebeispiel zeigt, wie man eine zyklische Referenz mit dem Einsatz des  replacer Parameters von {{jsxref("JSON.stringify()")}} findet und filtert (das bedeutet, es gehen Daten verloren):

+ +
const getCircularReplacer = () => {
+  const seen = new WeakSet;
+  return (key, value) => {
+    if (typeof value === "object" && value !== null) {
+      if (seen.has(value)) {
+        return;
+      }
+      seen.add(value);
+    }
+    return value;
+  };
+};
+
+JSON.stringify(circularReference, getCircularReplacer());
+// {"otherData":123}
+ +

Siehe auch

+ + diff --git a/files/de/web/javascript/reference/errors/dead_object/index.html b/files/de/web/javascript/reference/errors/dead_object/index.html new file mode 100644 index 0000000000..036e637ef4 --- /dev/null +++ b/files/de/web/javascript/reference/errors/dead_object/index.html @@ -0,0 +1,50 @@ +--- +title: 'TypeError: can''t access dead object' +slug: Web/JavaScript/Reference/Fehler/Dead_object +tags: + - Addon + - Error + - Errors + - JavaScript +translation_of: Web/JavaScript/Reference/Errors/Dead_object +--- +
{{JSSidebar("Errors")}}
+ +

Fehlermeldung

+ +
TypeError: can't access dead object
+
+ +

Fehlertyp

+ +

{{jsxref("TypeError")}}

+ +

Was ist falsch gelaufen?

+ +

Um die Speichernutzung zu verbessern und Speicherlücken zu vermeiden, verbietet Firefox Add-Ons Referenzen in das DOM Objekt zu speichern, nachdem das Elterndokument zerstört wurde. Ein totes Objekt hält eine starke Referenz zu einem DOM-Element, welche nach nach dem Zerstören in DOM existiert. Um dieses Problem zu vermeiden, sollte statt der Referenz zu einem DOM-Knoten im fremden Dokument die Referenz in einem Objekt, welches im Dokument selbst spezifiziert ist gespeichert werden und gesäubert werden, wenn das Dokument nicht mehr geladen ist, oder als weak Referenz gespeichert werden.

+ +

Prüfen, ob ein Objekt tot ist

+ +

Components.utils hat ein isDeadWrapper() Methode, welche in privilegiertem Quelltext verwendet werden sollte.

+ +
if (Components.utils.isDeadWrapper(window)) {
+  // dead
+}
+ +

Nicht privilegierter Quelltext hat keinen Zugriff auf Component.utils und sollt deswegen einfach den Fehler abfangen.

+ +
try {
+  String(window);
+}
+catch (e) {
+  console.log("window is likely dead");
+}
+ +

Siehe auch

+ + diff --git a/files/de/web/javascript/reference/errors/delete_in_strict_mode/index.html b/files/de/web/javascript/reference/errors/delete_in_strict_mode/index.html new file mode 100644 index 0000000000..042505e066 --- /dev/null +++ b/files/de/web/javascript/reference/errors/delete_in_strict_mode/index.html @@ -0,0 +1,70 @@ +--- +title: >- + SyntaxError: applying the 'delete' operator to an unqualified name is + deprecated +slug: Web/JavaScript/Reference/Fehler/Delete_in_strict_mode +tags: + - Error + - Errors + - JavaScript + - SyntaxError +translation_of: Web/JavaScript/Reference/Errors/Delete_in_strict_mode +--- +
{{jsSidebar("Errors")}}
+ +

Fehlermeldung

+ +
SyntaxError: applying the 'delete' operator to an unqualified name is deprecated (Firefox)
+SyntaxError: Delete of an unqualified identifier in strict mode. (Chrome)
+
+ +

Fehlertyp

+ +

{{jsxref("SyntaxError")}} nur im Strict Mode.

+ +

Was ist falsch gelaufen?

+ +

Normale Variablen können in JavaScript nicht mit dem delete Operator gelöscht werden. Im Strict Mode führt der Versuch des Löschens zu einem Fehler, weil es nicht erlaubt ist.

+ +

Der delete Operator kann nur Eigenschaften eines Objektes löschen. Objekteigenschaften müssen dafür Konfigurierbar sein.

+ +

Wie oft fälschlicherweise angenommen, hat die delete Operation nichts mit dem direkten freimachen von Speicher zu tun. Speicherverwaltung wird indirekt gemacht, mehr Informationen darüber auf den Seiten Speicherverwaltung und delete.

+ +

Der Fehler tritt nur im Strict Mode auf. In normalem Code gibt die Operation einfach false zurück.

+ +

Beispiele

+ +

Der Versuch eine einfache Variable zu Löschen funktioniert in JavaScript nicht unf führt im Strict Mode zu einem Fehler:

+ +
'use strict';
+
+var x;
+
+// ...
+
+delete x;
+
+// SyntaxError: applying the 'delete' operator to an unqualified name
+// is deprecated
+
+ +

Um den Inhalt einer Variable zu leeren, kann man sie auf {{jsxref("null")}} setzen:

+ +
'use strict';
+
+var x;
+
+// ...
+
+x = null;
+
+// x can be garbage collected
+
+ +

Siehe auch

+ + diff --git a/files/de/web/javascript/reference/errors/deprecated_caller_or_arguments_usage/index.html b/files/de/web/javascript/reference/errors/deprecated_caller_or_arguments_usage/index.html new file mode 100644 index 0000000000..15bb0e68b6 --- /dev/null +++ b/files/de/web/javascript/reference/errors/deprecated_caller_or_arguments_usage/index.html @@ -0,0 +1,75 @@ +--- +title: 'ReferenceError: deprecated caller or arguments usage' +slug: Web/JavaScript/Reference/Fehler/Deprecated_caller_or_arguments_usage +tags: + - Errors + - JavaScript + - Strict Mode + - Warning +translation_of: Web/JavaScript/Reference/Errors/Deprecated_caller_or_arguments_usage +--- +
{{jsSidebar("Errors")}}
+ +

Fehlermeldung

+ +
Warning: ReferenceError: deprecated caller usage (Firefox)
+Warning: ReferenceError: deprecated arguments usage (Firefox)
+TypeError: 'callee' and 'caller' cannot be accessed in strict mode. (Safari)
+
+ +

Fehlertyp

+ +

Eine {{jsxref("ReferenceError")}} Warnung, die nur im Strict Mode auftaucht. Die JavaScript-Ausführung wird dadurch nicht angehalten.

+ +

Was ist falsch gelaufen?

+ +

Im Strict Mode wurden die Eigenschaften {{jsxref("Function.caller")}} oder {{jsxref("Function.arguments")}} benutzt, was nicht getan werden sollte. Sie sind veraltet, da sie den Funktionsaufruf verlieren, nicht standardisiert sind, schwer zu optimieren sind und möglicherweise leistungsschädigend sein können.

+ +

Beispiele

+ +

Veraltete function.caller oder arguments.callee.caller Eigenschaft

+ +

{{jsxref("Function.caller")}} und arguments.callee.caller sind veraltet (in den Referenzartikeln sind mehr Informationen dazu enthalten).

+ +
'use strict';
+
+function myFunc() {
+  if (myFunc.caller == null) {
+    return 'The function was called from the top!';
+  } else {
+    return 'This function\'s caller was ' + myFunc.caller;
+  }
+}
+
+myFunc();
+// Warning: ReferenceError: deprecated caller usage
+// "The function was called from the top!"
+ +

Function.arguments

+ +

{{jsxref("Function.arguments")}} ist veraltet (im Referenzartikel sind mehr Informationen dazu enthalten).

+ +
'use strict';
+
+function f(n) { g(n - 1); }
+
+function g(n) {
+  console.log('before: ' + g.arguments[0]);
+  if (n > 0) { f(n); }
+  console.log('after: ' + g.arguments[0]);
+}
+
+f(2);
+
+console.log('returned: ' + g.arguments);
+// Warning: ReferenceError: deprecated arguments usage
+
+ +

Siehe auch

+ + diff --git a/files/de/web/javascript/reference/errors/deprecated_expression_closures/index.html b/files/de/web/javascript/reference/errors/deprecated_expression_closures/index.html new file mode 100644 index 0000000000..b8c6e7ced8 --- /dev/null +++ b/files/de/web/javascript/reference/errors/deprecated_expression_closures/index.html @@ -0,0 +1,78 @@ +--- +title: 'Warning: expression closures are deprecated' +slug: Web/JavaScript/Reference/Fehler/Deprecated_expression_closures +tags: + - JavaScript + - Warning +translation_of: Web/JavaScript/Reference/Errors/Deprecated_expression_closures +--- +
{{jsSidebar("Errors")}}
+ +

Fehlermeldung

+ +
Warning: expression closures are deprecated
+
+ +

Fehlertyp

+ +

Warnung. Die Ausführung von JavaScript wird nicht angehalten.

+ +

Was ist falsch gelaufen?

+ +

Die nicht standardisierte Ausdrucks Closure Syntax (Kurzform der Funktionssyntax) ist veraltetet und sollte nicht mehr verwendet werden. Diese Syntax wird komplett entfernt ({{bug(1083458)}}) und Skripte die diese Benutzen erzeugen dann einen {{jsxref("SyntaxError")}}.

+ +

Beispiele

+ +

Veraltete Syntax

+ +

Ausdrucks Closures vermeiden geschweifte Klammern oder return Anweisungen in Funktionsdeklarationen oder in Methodendefinitionen in Objekten.

+ +
var x = function() 1;
+
+var obj = {
+  count: function() 1
+};
+
+ +

Standardsyntax

+ +

Um die nicht standardisierte Ausdrucks Closures Syntax zu Standard-ECMAScript Syntax zu konvertieren müssen geschweifte Klammern und ein return Statement hinzugefügt werden.

+ +
var x = function() { return 1; }
+
+var obj = {
+  count: function() { return 1; }
+};
+
+ +

Standardsyntax mit Arrowfunktionen

+ +

Alternativ können Arrow-Funktionen genutzt werden:

+ +
var x = () => 1;
+ +

Standardsyntax mit Kurzformmethodensyntax

+ +

Anweisungs Closures können auch in Gettern und Settern gefunden werden:

+ +
var obj = {
+  get x() 1,
+  set x(v) this.v = v
+};
+
+ +

Mit ES2015 Methodendefinitionen können diese folgendermaßen konvertiert werden :

+ +
var obj = {
+  get x() { return 1 },
+  set x(v) { this.v = v }
+};
+
+ +

Siehe auch

+ + diff --git a/files/de/web/javascript/reference/errors/deprecated_octal/index.html b/files/de/web/javascript/reference/errors/deprecated_octal/index.html new file mode 100644 index 0000000000..e153038950 --- /dev/null +++ b/files/de/web/javascript/reference/errors/deprecated_octal/index.html @@ -0,0 +1,67 @@ +--- +title: 'SyntaxError: "0"-prefixed octal literals and octal escape seq. are deprecated' +slug: Web/JavaScript/Reference/Fehler/Deprecated_octal +tags: + - Error + - JavaScript + - Strict Mode + - SyntaxError +translation_of: Web/JavaScript/Reference/Errors/Deprecated_octal +--- +
{{jsSidebar("Errors")}}
+ +

Fehlermeldung

+ +
SyntaxError:
+"0"-prefixed octal literals and octal escape sequences are deprecated;
+for octal literals use the "0o" prefix instead
+
+ +

Fehlertyp

+ +

{{jsxref("SyntaxError")}} nur im Strict Mode.

+ +

Was ist falsch gelaufen?

+ +

Oktalliterale und oktal maskierte Sequenzen sind veraltet und führen zu einem {{jsxref("SyntaxError")}} im Strict Mode. Ab ECMAScript 2015 wird in der standardisierten Syntax eine führende null gefolgt von einem kleinen oder großen lateinischen Buchstaben "O" verwendet (0o oder 0O).

+ +

Beispiele

+ +

Oktalliteral mit führender 0

+ +
"use strict";
+
+03;
+
+// SyntaxError: "0"-prefixed octal literals and octal escape sequences
+// are deprecated
+ +

Oktal maskierte Sequenz

+ +
"use strict";
+
+"\251";
+
+// SyntaxError: "0"-prefixed octal literals and octal escape sequences
+// are deprecated
+
+ +

Valide Oktalzahlen

+ +

Einsatz einer führenden null gefolgt von "o" oder "O":

+ +
0o3;
+
+ +

Statt oktal maskierte Sequenzen können hexadezimal maskierte Sequenzen benutzt werden:

+ +
'\xA9';
+ +

Siehe auch

+ + diff --git a/files/de/web/javascript/reference/errors/deprecated_source_map_pragma/index.html b/files/de/web/javascript/reference/errors/deprecated_source_map_pragma/index.html new file mode 100644 index 0000000000..1f87b2bd2d --- /dev/null +++ b/files/de/web/javascript/reference/errors/deprecated_source_map_pragma/index.html @@ -0,0 +1,58 @@ +--- +title: >- + SyntaxError: Using //@ to indicate sourceURL pragmas is deprecated. Use //# + instead +slug: Web/JavaScript/Reference/Fehler/Deprecated_source_map_pragma +tags: + - Errors + - JavaScript + - Source maps +translation_of: Web/JavaScript/Reference/Errors/Deprecated_source_map_pragma +--- +
{{jsSidebar("Errors")}}
+ +

Fehlermeldung

+ +
Warning: SyntaxError: Using //@ to indicate sourceURL pragmas is deprecated. Use //# instead
+
+Warning: SyntaxError: Using //@ to indicate sourceMappingURL pragmas is deprecated. Use //# instead
+
+ +

Fehlertyp

+ +

Eine Warnung die als {{jsxref("SyntaxError")}} auftritt. Die Ausführung von JavaScript wird nicht unterbrochen.

+ +

Was ist falsch gelaufen?

+ +

Es gibt eine veraltete Source-Map-Syntax im JavaScript Code.

+ +

JavaScript Code wird oft zusammengefügt und minimiert, um die Auslieferung durch einen Server effizienter zu machen. Mit Source-Maps kann beim Debuggen der ausgeführte Code auf die Original Codedateien übertragen werden.

+ +

Die Source-Map Spezifikation änderte die Syntax wegen eines Konflikts mit dem IE immer wenn die Seite nach //@cc_on war, interpretierte dieser es als bedingte Kompilierung in der IE JScript Umgebung. Der bedingte Kompilations Kommentar im IE ist eine relativ unbekannte Funktion, aber dieses machte Source-Maps von jQuery und anderen Bibliotheken kaputt.

+ +

Beispiele

+ +

Veraltete Syntax

+ +

Syntax mit dem veralteten "@" Zeichen.

+ +
//@ sourceMappingURL=http://example.com/path/to/your/sourcemap.map
+
+ +

Standard Syntax

+ +

Benutzt stattdessen ein "#" Zeichen.

+ +
//# sourceMappingURL=http://example.com/path/to/your/sourcemap.map
+ +

Alternativ kann ein {{HTTPHeader("SourceMap")}} Header zu der JavaScript Datei gesetzt werden, um einen solchen Kommentar zu vermeiden:

+ +
SourceMap: /path/to/file.js.map
+ +

Siehe auch

+ + diff --git a/files/de/web/javascript/reference/errors/deprecated_string_generics/index.html b/files/de/web/javascript/reference/errors/deprecated_string_generics/index.html new file mode 100644 index 0000000000..d495448759 --- /dev/null +++ b/files/de/web/javascript/reference/errors/deprecated_string_generics/index.html @@ -0,0 +1,104 @@ +--- +title: 'Warning: String.x is deprecated; use String.prototype.x instead' +slug: Web/JavaScript/Reference/Fehler/Deprecated_String_generics +tags: + - JavaScript + - Warning +translation_of: Web/JavaScript/Reference/Errors/Deprecated_String_generics +--- +
{{jsSidebar("Errors")}}
+ +

Fehlermeldung

+ +
Warning: String.charAt            is deprecated; use String.prototype.charAt            instead
+Warning: String.charCodeAt        is deprecated; use String.prototype.charCodeAt        instead
+Warning: String.concat            is deprecated; use String.prototype.concat            instead
+Warning: String.contains          is deprecated; use String.prototype.contains          instead
+Warning: String.endsWith          is deprecated; use String.prototype.endsWith          instead
+Warning: String.includes          is deprecated; use String.prototype.includes          instead
+Warning: String.indexOf           is deprecated; use String.prototype.indexOf           instead
+Warning: String.lastIndexOf       is deprecated; use String.prototype.lastIndexOf       instead
+Warning: String.localeCompare     is deprecated; use String.prototype.localeCompare     instead
+Warning: String.match             is deprecated; use String.prototype.match             instead
+Warning: String.normalize         is deprecated; use String.prototype.normalize         instead
+Warning: String.replace           is deprecated; use String.prototype.replace           instead
+Warning: String.search            is deprecated; use String.prototype.search            instead
+Warning: String.slice             is deprecated; use String.prototype.slice             instead
+Warning: String.split             is deprecated; use String.prototype.split             instead
+Warning: String.startsWith        is deprecated; use String.prototype.startsWith        instead
+Warning: String.substr            is deprecated; use String.prototype.substr            instead
+Warning: String.substring         is deprecated; use String.prototype.substring         instead
+Warning: String.toLocaleLowerCase is deprecated; use String.prototype.toLocaleLowerCase instead
+Warning: String.toLocaleUpperCase is deprecated; use String.prototype.toLocaleUpperCase instead
+Warning: String.toLowerCase       is deprecated; use String.prototype.toLowerCase       instead
+Warning: String.toUpperCase       is deprecated; use String.prototype.toUpperCase       instead
+Warning: String.trim              is deprecated; use String.prototype.trim              instead
+Warning: String.trimLeft          is deprecated; use String.prototype.trimLeft          instead
+Warning: String.trimRight         is deprecated; use String.prototype.trimRight         instead
+
+ +

Fehlertyp

+ +

Warnung. JavaScript unterbricht die Ausführung nicht.

+ +

Was ist falsch gelaufen?

+ +

Die nicht standardisierten generischen {{jsxref("String")}} Methoden sind veraltet und werden in Zukunft gelöscht (keine Browserübergreifende Unterstützung, nur in Firefox verfügbar). String-Generics stellen String-Instanzmethoden für das String-Objekt bereit, wodurch String-Methoden auf jedes Objekt angewendet werden können.

+ +

Firefox {{bug(1222552)}} dokumentiert das Entfernen von generischen String Methoden.

+ +

Beispiele

+ +

Fehlerfälle

+ +
var num = 15;
+String.replace(num, /5/, '2');
+ +

Gültige Fälle

+ +
var num = 15;
+String(num).replace(/5/, '2');
+
+ +

Shim

+ +

Das Folgende ist ein Shim zur Unterstützung nicht unterstützender Browser:

+ +
/*globals define*/
+// Assumes all supplied String instance methods already present
+// (one may use shims for these if not available)
+(function() {
+  'use strict';
+
+  var i,
+    // We could also build the array of methods with the following, but the
+    //   getOwnPropertyNames() method is non-shimable:
+    // Object.getOwnPropertyNames(String).filter(function(methodName) {
+    //   return typeof String[methodName] === 'function';
+    // });
+    methods = [
+      'contains', 'substring', 'toLowerCase', 'toUpperCase', 'charAt',
+      'charCodeAt', 'indexOf', 'lastIndexOf', 'startsWith', 'endsWith',
+      'trim', 'trimLeft', 'trimRight', 'toLocaleLowerCase', 'normalize',
+      'toLocaleUpperCase', 'localeCompare', 'match', 'search', 'slice',
+      'replace', 'split', 'substr', 'concat', 'localeCompare'
+    ],
+    methodCount = methods.length,
+    assignStringGeneric = function(methodName) {
+      var method = String.prototype[methodName];
+      String[methodName] = function(arg1) {
+        return method.apply(arg1, Array.prototype.slice.call(arguments, 1));
+      };
+    };
+
+  for (i = 0; i < methodCount; i++) {
+    assignStringGeneric(methods[i]);
+  }
+}());
+ +

Siehe auch

+ + diff --git a/files/de/web/javascript/reference/errors/deprecated_tolocaleformat/index.html b/files/de/web/javascript/reference/errors/deprecated_tolocaleformat/index.html new file mode 100644 index 0000000000..31cc81d9cc --- /dev/null +++ b/files/de/web/javascript/reference/errors/deprecated_tolocaleformat/index.html @@ -0,0 +1,90 @@ +--- +title: 'Warning: Date.prototype.toLocaleFormat is deprecated' +slug: Web/JavaScript/Reference/Fehler/Deprecated_toLocaleFormat +tags: + - JavaScript + - Warning +translation_of: Web/JavaScript/Reference/Errors/Deprecated_toLocaleFormat +--- +
{{jsSidebar("Errors")}}
+ +

Fehlermeldung

+ +
Warning: Date.prototype.toLocaleFormat is deprecated; consider using Intl.DateTimeFormat instead
+
+ +

Fehlertyp

+ +

Warnung. JavaScript stoppt die ausführung nicht an.

+ +

Was ist falsch gelaufen?

+ +

Die nicht standardisierte Methode {{jsxref("Date.prototype.toLocaleFormat")}} ist veraltet und sollte nicht mehr benutzt werden. Sie benutzt einen Formatstring mit dem selben Format, wie dei der C Funktion strftime(). Diese Funktion ist seit Firefox 58+ nicht mehr vorhanden.

+ +

Beispiele

+ +

Veraltete Syntax

+ +

Die {{jsxref("Date.prototype.toLocaleFormat")}} Methode ist veraltet und wird entfernt werden (keine browserübergreifende Unterstützung, nur in Firefox verfügbar).

+ +
var today = new Date();
+var date = today.toLocaleFormat('%A, %e. %B %Y');
+
+console.log(date);
+// In German locale
+// "Freitag, 10. März 2017"
+ +

Alternative Standardsyntax mit der ECMAScript Intl API

+ +

Der ECMA-402 Standard spezifiziert Standardobjekte und Methoden (ECMAScript Intl API), die sprachabhängige Datums- und Zeitformatierung erlauben (verfügbar in Chrome 24+, Firefox 29+, IE11+, Safari10+).

+ +

Man kan jetzt die {{jsxref("Date.prototype.toLocaleDateString")}} Methode einsetzen, um einen Zeitpunkt zu formatieren.

+ +
var today = new Date();
+var options = { weekday: 'long', year: 'numeric',
+                month: 'long', day: 'numeric' };
+var date = today.toLocaleDateString('de-DE', options);
+
+console.log(date);
+// "Freitag, 10. März 2017"
+
+ +

Oder man kann das {{jsxref("DateTimeFormat", "Intl.DateTimeFormat")}} Objekt einsetzen, welches die meisten Berechnungen zwischenspeichert, so dass das Formatieren schneller ist. Dieses ist nützlich, wenn Zeitpunkte in einer Schleife formatiert werden.

+ +
var options = { weekday: 'long', year: 'numeric',
+                month: 'long', day: 'numeric' };
+var dateFormatter = new Intl.DateTimeFormat('de-DE', options)
+
+var dates = [Date.UTC(2012, 11, 20, 3, 0, 0),
+             Date.UTC(2014, 04, 12, 8, 0, 0)];
+
+dates.forEach(date => console.log(dateFormatter.format(date)));
+
+// "Donnerstag, 20. Dezember 2012"
+// "Montag, 12. Mai 2014"
+
+ +

Alternative Standardsyntax mit Date Methoden

+ +

Das {{jsxref("Date")}} Objekt enthält einige Methoden, um einen Benutzerdefinierten Datumsstring zu erhalten.

+ +
(new Date()).toLocaleFormat("%Y%m%d");
+// "20170310"
+
+ +

Dieses kan konvertiert werde:

+ +
let now = new Date();
+let date = now.getFullYear() * 10000 +
+          (now.getMonth() + 1) * 100 + now.getDate();
+
+console.log(date);
+// "20170310"
+ +

Siehe auch

+ + diff --git a/files/de/web/javascript/reference/errors/equal_as_assign/index.html b/files/de/web/javascript/reference/errors/equal_as_assign/index.html new file mode 100644 index 0000000000..dbe5e55b02 --- /dev/null +++ b/files/de/web/javascript/reference/errors/equal_as_assign/index.html @@ -0,0 +1,54 @@ +--- +title: 'SyntaxError: test for equality (==) mistyped as assignment (=)?' +slug: Web/JavaScript/Reference/Fehler/Equal_as_assign +tags: + - Errors + - JavaScript + - SyntaxError +translation_of: Web/JavaScript/Reference/Errors/Equal_as_assign +--- +
{{jsSidebar("Errors")}}
+ +

Fehlermeldung

+ +
Warning: SyntaxError: test for equality (==) mistyped as assignment (=)?
+
+ +

Fehlertyp

+ +

{{jsxref("SyntaxError")}} Warnung nur im strict mode.

+ +

Was ist falsch gelaufen?

+ +

Es gibt eine Zuweisung (=) an der eigentlich ein Gleichheitsprüfung (==) erwartet wird. Um das Debuggen zu unterstützen, warnt JavaScript diesen Fakt (im strict mode).

+ +

Beispiele

+ +

Zuweisung in bedingten Ausdrücken

+ +

Es ist ratsam in bedingten Ausdrücken (wie z. B. if...else) keine einfachen Zuweisungen zu verwenden, weil beim lesen des Codes eine Zuweisung mit einer Gleichheitsprüfung verwechselt werden kann. Zum Beispiel sollte folgender Code nicht verwendet werden:

+ +
if (x = y) {
+  // do the right thing
+}
+
+ +

Wenn es notwendig ist eine Zuweisung in einem bedingten Ausdruck einzusetzen, ist es verbreitet, diese mit runden Klammern einzuklammern. Zum Beispiel:

+ +
if ((x = y)) {
+  // do the right thing
+}
+ +

Andernfalls kann es sein, dass eigentliche eine Vergleichsoperation gemeint war (z. B. == oder ===):

+ +
if (x == y) {
+  // do the right thing
+}
+ +

Siehe auch

+ + diff --git a/files/de/web/javascript/reference/errors/for-each-in_loops_are_deprecated/index.html b/files/de/web/javascript/reference/errors/for-each-in_loops_are_deprecated/index.html new file mode 100644 index 0000000000..2651ea45ba --- /dev/null +++ b/files/de/web/javascript/reference/errors/for-each-in_loops_are_deprecated/index.html @@ -0,0 +1,168 @@ +--- +title: 'Warning: JavaScript 1.6''s for-each-in loops are deprecated' +slug: Web/JavaScript/Reference/Fehler/For-each-in_loops_are_deprecated +tags: + - JavaScript + - Warning +translation_of: Web/JavaScript/Reference/Errors/For-each-in_loops_are_deprecated +--- +
{{jsSidebar("Errors")}}
+ +

Fehlermeldung

+ +
Warning: JavaScript 1.6's for-each-in loops are deprecated; consider using ES6 for-of instead
+
+ +

Fehlertyp

+ +

Warnung

+ +

Was ist falsch gelaufen?

+ +

Das {{jsxref("Statements/for_each...in", "for each (variable in obj)")}} Statement aus JavaScript 1.6 ist veraltet und wird in naher Zukunft entfernt.

+ +

Beispiele

+ +

Objektiteration

+ +

{{jsxref("Statements/for_each...in", "for each...in")}} wurde eingesetzt, um über spezifizierte Objektwerte zu iterieren.

+ +

Veraltete Syntax

+ +
var object = { a: 10, b: 20 };
+
+for each (var x in object) {
+  console.log(x);        // 10
+                         // 20
+}
+
+ +

Alternative Standardsyntax

+ +

Man kann die Standardschleife {{jsxref("Statements/for...in", "for...in")}} benutzen, um über spezifizierte Objektschlüssel zu iterieren und jeden Wert in der Schleife auszulesen:

+ +
var object = { a: 10, b: 20 };
+
+for (var key in object) {
+  var x = object[key];
+  console.log(x);        // 10
+                         // 20
+}
+
+ +

Oder man benutzt {{jsxref("Statements/for...of", "for...of")}} (ES2015) und {{jsxref("Object.values")}} (ES2017), um ein Array von spezifizerten Werten zu bekommen und über diese zu iterieren:

+ +
var object = { a: 10, b: 20 };
+
+for (var x of Object.values(object)) {
+  console.log(x);        // 10
+                         // 20
+}
+
+ +

Arrayiteration

+ +

{{jsxref("Statements/for_each...in", "for each...in")}} wurde eingesetzt, um über spezifizierte Arrayelemente zu iterieren.

+ +

Veraltete Syntax

+ +
var array = [10, 20, 30];
+
+for each (var x in array) {
+  console.log(x);        // 10
+                         // 20
+                         // 30
+}
+
+ +

Alternative Standardsyntax

+ +

Dieses ist mit der {{jsxref("Statements/for...of", "for...of Schleife")}} (ES2015) möglich.

+ +
var array = [10, 20, 30];
+
+for (var x of array) {
+  console.log(x);        // 10
+                         // 20
+                         // 30
+}
+
+ +

Iterieren über ein Arrays oder null

+ +

{{jsxref("Statements/for_each...in", "for each...in")}} tut nichts, wenn der übergebene Wert null oder undefined ist. {{jsxref("Statements/for...of", "for...of")}} erzeugt in diesem Fall einen Fehler.

+ +

Veraltete Syntax

+ +
function func(array) {
+  for each (var x in array) {
+    console.log(x);
+  }
+}
+func([10, 20]);        // 10
+                       // 20
+func(null);            // prints nothing
+func(undefined);       // prints nothing
+
+ +

Alternative Standardsyntax

+ +

Um das {{jsxref("Statements/for_each...in", "for each...in")}} Statement neu zu schreibe, so dass null oder undefined mit {{jsxref("Statements/for...of", "for...of")}} funktionieren, muss eine Bedingung um {{jsxref("Statements/for...of", "for...of")}} verfasst werden.

+ +
function func(array) {
+  if (array) {
+    for (var x of array) {
+      console.log(x);
+    }
+  }
+}
+func([10, 20]);        // 10
+                       // 20
+func(null);            // prints nothing
+func(undefined);       // prints nothing
+
+ +

Über Objekt-Schlüssel-Werte-Paare iterieren

+ +

Veraltete Syntax

+ +

Es gibt eine veraltete Dialekt, der das Iterieren über Objekt-Schlüssel-Werte-Paare mit {{jsxref("Statements/for_each...in", "for each...in")}} und mit dem veralteten {{jsxref("Iterator")}} Objekt erlaubt.

+ +
var object = { a: 10, b: 20 };
+
+for each (var [key, value] in Iterator(object)) {
+  console.log(key, value);  // "a", 10
+                            // "b", 20
+}
+
+ +

Alternative Standardsyntax

+ +

Man kann die Standardschleife {{jsxref("Statements/for...in", "for...in")}} benutzen, um über spezifizierte Objektschlüssel zu iterieren und jeden Wert in der Schleife auszulesen:

+ +
var object = { a: 10, b: 20 };
+
+for (var key in object) {
+  var value = object[key];
+  console.log(key, value);  // "a", 10
+                            // "b", 20
+}
+
+ +

Oder man benutzt {{jsxref("Statements/for...of", "for...of")}} (ES2015) und {{jsxref("Object.values")}} (ES2017), um ein Array von spezifizerten Werten zu bekommen und über diese zu iterieren:

+ +
var object = { a: 10, b: 20 };
+
+for (var [key, value] of Object.entries(object)) {
+  console.log(key, value);  // "a", 10
+                            // "b", 20
+}
+
+ +

Siehe auch

+ + diff --git a/files/de/web/javascript/reference/errors/getter_only/index.html b/files/de/web/javascript/reference/errors/getter_only/index.html new file mode 100644 index 0000000000..268ee0cbf1 --- /dev/null +++ b/files/de/web/javascript/reference/errors/getter_only/index.html @@ -0,0 +1,83 @@ +--- +title: 'TypeError: setting getter-only property "x"' +slug: Web/JavaScript/Reference/Fehler/Getter_only +tags: + - Error + - Errors + - JavaScript + - Strict Mode + - TypeError +translation_of: Web/JavaScript/Reference/Errors/Getter_only +--- +
{{jsSidebar("Errors")}}
+ +

Fehlermeldung

+ +
TypeError: setting getter-only property "x" (Firefox)
+TypeError: Cannot set property "prop" of #<Object> which has only a getter (Chrome)
+
+ +

Fehlertyp

+ +

{{jsxref("TypeError")}} nur im strict mode.

+ +

Was ist falsch gelaufen?

+ +

Wenn versucht wird einen neuen Wert einer Wichenschaft zuzuweisen, welche nur als Getter spezifiziert wurde. Wenn kein strict mode verwendet wird, wird dieses stillschweigend ignoriert, während im strict mode ein {{jsxref("TypeError")}} erzeugt wird.

+ +

Beispiele

+ +

Das folgende Beispiel zeigt, wie eine Eigenschaft als Getter eingestellt wird. Es wird kein Setter definiert, so dass ein TypeError erzeugt wird, wenn die temperature Eigenschaft mit dem Wert 30 beschrieben werden soll. Für mehr Details siehe auf der {{jsxref("Object.defineProperty()")}} Seite.

+ +
"use strict";
+
+function Archiver() {
+  var temperature = null;
+  Object.defineProperty(this, 'temperature', {
+    get: function() {
+      console.log('get!');
+      return temperature;
+    }
+  });
+}
+
+var arc = new Archiver();
+arc.temperature; // 'get!'
+
+arc.temperature = 30;
+// TypeError: setting getter-only property "temperature"
+ +

Um den Fehler zu beheben, muss einefach die Zeile 16 entfernt werden, weil dort der Versuch ist die temperature Eigenschaft zu beschreiben, oder es muss ein Setter definiert werden, wie zum Beispiel dieser:

+ +
"use strict";
+
+function Archiver() {
+  var temperature = null;
+  var archive = [];
+
+  Object.defineProperty(this, 'temperature', {
+    get: function() {
+      console.log('get!');
+      return temperature;
+    },
+    set: function(value) {
+      temperature = value;
+      archive.push({ val: temperature });
+    }
+  });
+
+  this.getArchive = function() { return archive; };
+}
+
+var arc = new Archiver();
+arc.temperature; // 'get!'
+arc.temperature = 11;
+arc.temperature = 13;
+arc.getArchive(); // [{ val: 11 }, { val: 13 }]
+ +

Siehe auch

+ + diff --git a/files/de/web/javascript/reference/errors/identifier_after_number/index.html b/files/de/web/javascript/reference/errors/identifier_after_number/index.html new file mode 100644 index 0000000000..64cb9cdfe3 --- /dev/null +++ b/files/de/web/javascript/reference/errors/identifier_after_number/index.html @@ -0,0 +1,53 @@ +--- +title: 'SyntaxError: identifier starts immediately after numeric literal' +slug: Web/JavaScript/Reference/Fehler/Identifier_after_number +tags: + - Error + - Errors + - JavaScript + - SyntaxError +translation_of: Web/JavaScript/Reference/Errors/Identifier_after_number +--- +
{{JSSidebar("Errors")}}
+ +

Fehlermeldung

+ +
SyntaxError: identifier starts immediately after numeric literal (Firefox)
+SyntaxError: Unexpected number (Chrome)
+
+ +

Fehlertyp

+ +

{{jsxref("SyntaxError")}}

+ +

Was ist falsch gelaufen?

+ +

Die Namen von Variablen, {{Glossary("Identifier", "Bezeichner")}} genannt, haben einige Regeln, die der Code erfüllen muss.

+ +

Ein Bezeichner in JavaScript muss mit einem Buchstaben, einem Unterstrich (_) oder einem Dollarzeichen ($) starten. Er kann nicht mit einer Ziffer beginnen. Nur nachfolgende Zeichen sind Ziffern (0-9).

+ +

Beispiele

+ +

Variablenname der mit einer Ziffer beginnt

+ +

Variablennamen dürfen in JavaScript nicht mit einer Zahl beginnen. Das folgende wird nciht funktionieren:

+ +
var 1life = 'foo';
+// SyntaxError: identifier starts immediately after numeric literal
+
+var foo = 1life;
+// SyntaxError: identifier starts immediately after numeric literal
+
+ +

Man muss die Variable neu benenne, um die führende Zahl im Namen zu vermeiden.

+ +
var life1 = 'foo';
+var foo = life1;
+
+ +

Siehe auch

+ + diff --git a/files/de/web/javascript/reference/errors/illegal_character/index.html b/files/de/web/javascript/reference/errors/illegal_character/index.html new file mode 100644 index 0000000000..e0c083022c --- /dev/null +++ b/files/de/web/javascript/reference/errors/illegal_character/index.html @@ -0,0 +1,80 @@ +--- +title: 'SyntaxError: illegal character' +slug: Web/JavaScript/Reference/Fehler/Illegal_character +tags: + - Error + - Errors + - JavaScript + - SyntaxError +translation_of: Web/JavaScript/Reference/Errors/Illegal_character +--- +
{{jsSidebar("Errors")}}
+ +

Fehlermeldung

+ +
SyntaxError: illegal character (Firefox)
+SyntaxError: Invalid or unexpected token (Chrome)
+
+ +

Fehlertyp

+ +

{{jsxref("SyntaxError")}}

+ +

Was ist falsch gelaufen?

+ +

Es gibt ein nicht valides oder nicht erwartetes Token, welches nicht an eine Position im Code passt. Man sollte einen Editor mit Syntaxhighlighting benutzten und vorsichtig nach Verwechselungen suchen, wie einem Minuszeichen ( - ) und einem Dashzeichen () oder einfachen Anführungszeichen ( " ) und anderen Anführungszeichen ().

+ +

Beispiele

+ +

Verwechseltes Zeichen

+ +

Einige Zeichen sehen sehr ähnlich aus, aber führen dazu, dass der Code nicht interpretiert werden kann. Bekannte Beispiele dafür sind Anführungszeichen, das Minus oder das Semikolon (griechisches Fragezeichen (U+37e) sieht genauso aus)

+ +
“This looks like a string”;  // SyntaxError: illegal character
+                             // “ und ” sind nicht ", aber sehen so aus
+
+42 – 13;                     // SyntaxError: illegal character
+                             // – sind nicht -, aber sieht so aus
+
+var foo = 'bar';             // SyntaxError: illegal character
+                             // <37e> sind nicht ;, aber sieht so aus
+
+ +

Das funktioniert:

+ +
"This is actually a string";
+42 - 13;
+var foo = 'bar';
+
+ +

Einige Editoren und IDEs werden darauf hinweisen oder dieses anderes hervorheben, aber nicht alle. Wenn manchmal so etwas im Code passiert und man in der Lage ist das Problem zu finden, ist es oft das beste die Zeile zu löschen und sie neu einzutippen.

+ +

Vergessene Zeichen

+ +

Es passiert schnell, dass man ein Zeichen vergisst.

+ +
var colors = ['#000', #333', '#666'];
+// SyntaxError: illegal character
+
+ +

Man muss das fehlende Anführungszeichen ergänzen '#333'.

+ +
var colors = ['#000', '#333', '#666'];
+ +

Nicht sichtbare Zeichen

+ +

Beim Kopieren und Einfügen von Code aus externen Quellen kann es nicht valide Zeichen geben. Zum Beispiel:

+ +
var foo = 'bar';​
+// SyntaxError: illegal character
+
+ +

Wenn man den Code in einem Editor wie Vim anschaut, bemerkt man, dass ein breitenloses Leerzeichen (ZWSP) (U+200B) benutzt wird.

+ +
var foo = 'bar';​<200b>
+ +

Siehe auch

+ + diff --git a/files/de/web/javascript/reference/errors/in_operator_no_object/index.html b/files/de/web/javascript/reference/errors/in_operator_no_object/index.html new file mode 100644 index 0000000000..6bace66437 --- /dev/null +++ b/files/de/web/javascript/reference/errors/in_operator_no_object/index.html @@ -0,0 +1,72 @@ +--- +title: 'TypeError: cannot use ''in'' operator to search for ''x'' in ''y''' +slug: Web/JavaScript/Reference/Fehler/in_operator_no_object +tags: + - Error + - Errors + - JavaScript + - TypeError +translation_of: Web/JavaScript/Reference/Errors/in_operator_no_object +--- +
{{jsSidebar("Errors")}}
+ +

Fehlermeldung

+ +
TypeError: right-hand side of 'in' should be an object, got 'x' (Firefox)
+TypeError: cannot use 'in' operator to search for 'x' in 'y' (Firefox, Chrome)
+
+ +

Fehlertyp

+ +

{{jsxref("TypeError")}}

+ +

Was ist falsch gelaufen?

+ +

Der in Operator kan nur für das Prüfen von Eigenschaften in Objekten genutzt werden. Man kann nicht in Strings, Nummern oder anderen primitiven Typen suchen.

+ +

Beispiele

+ +

Suchen in Strings

+ +

Im Vergleich zu anderen Programmiersprachen (z. B. Python) kann in Strings nicht mit dem in Operator gesucht werden.

+ +
"Hello" in "Hello World";
+// TypeError: cannot use 'in' operator to search for 'Hello' in 'Hello World'
+ +

Stattdessen kann zum Beispiel {{jsxref("String.prototype.indexOf()")}} eingesetzt werden.

+ +
"Hello World".indexOf("Hello") !== -1;
+// true
+ +

Der Operand kann nicht null oder undefined sein

+ +

Man muss sicherstellen, dass der Operand nicht {{jsxref("null")}} oder {{jsxref("undefined")}} ist.

+ +
var foo = null;
+"bar" in foo;
+// TypeError: cannot use 'in' operator to search for 'bar' in 'foo' (Chrome)
+// TypeError: right-hand side of 'in' should be an object, got null (Firefox)
+
+ +

Der in Operator erwartet immer ein Objekt.

+ +
var foo = { baz: "bar" };
+"bar" in foo; // false
+
+"PI" in Math; // true
+"pi" in Math; // false
+
+ +

Suchen in Arrays

+ +

Man muss vorsichtig sein, wenn der in Operator in {{jsxref("Array")}} Objekten genutzt wird. Der in Operator prüft die Indexnummern, aber nicht die Werte des Indizes.

+ +
var trees = ['redwood', 'bay', 'cedar', 'oak', 'maple'];
+3 in trees; // true
+"oak" in trees; // false
+ +

Siehe auch

+ + diff --git a/files/de/web/javascript/reference/errors/index.html b/files/de/web/javascript/reference/errors/index.html new file mode 100644 index 0000000000..67809031e7 --- /dev/null +++ b/files/de/web/javascript/reference/errors/index.html @@ -0,0 +1,29 @@ +--- +title: JavaScript Fehler Referenz +slug: Web/JavaScript/Reference/Fehler +tags: + - Debugging + - Error + - Errors + - Exception + - JavaScript + - exceptions +translation_of: Web/JavaScript/Reference/Errors +--- +

{{jsSidebar("Errors")}}

+ +

Unten ist eine Liste von Fehlern, die in JavaScript auftauchen können. Diese Fehler können beim Debuggen hilfreich sein, jedoch sind die Probleme nicht immer so klar. Die untenstehenden Seiten enthalten Details zu diesen Fehlern. Jeder Fehler ist ein Objekt, welches auf dem {{jsxref("Error")}} Objekt basieren und haben einen name und eine Fehlermeldung (message).

+ +

Fehler die in der Webconsole angezeigt werden enthalten manchmal einen Link zu einer der untenstehenden Seiten, um die Lösung von Problemen zu beschleunigen.

+ +

Liste von Fehlern

+ +

In dieser Liste ist jede Seite mit einem Namen (der Typ des Fehlers) und einer Fehlermeldung (eine detailliertere, verständlichere Meldung) aufgeführt. Diese beiden Eigenschaften eines Fehlers sind ein Einstiegspunkt für das Verständnis und das Lösen des Fehlers. Für mehr Informationen folge den folgenden Links!

+ +

{{ListSubPages("/en-US/docs/Web/JavaScript/Reference/Errors")}}

+ +

Siehe auch

+ + diff --git a/files/de/web/javascript/reference/errors/invalid_array_length/index.html b/files/de/web/javascript/reference/errors/invalid_array_length/index.html new file mode 100644 index 0000000000..34edeb2969 --- /dev/null +++ b/files/de/web/javascript/reference/errors/invalid_array_length/index.html @@ -0,0 +1,77 @@ +--- +title: 'RangeError: invalid array length' +slug: Web/JavaScript/Reference/Fehler/Invalid_array_length +tags: + - Errors + - JavaScript + - RangeError +translation_of: Web/JavaScript/Reference/Errors/Invalid_array_length +--- +
{{jsSidebar("Errors")}}
+ +

Fehlermeldung

+ +
RangeError: invalid array length (Firefox)
+RangeError: Invalid array length (Chrome)
+RangeError: Invalid array buffer length (Chrome)
+
+ +

Fehlertyp

+ +

{{jsxref("RangeError")}}

+ +

Was ist falsch gelaufen?

+ +

entweder:

+ + + +

Warum ist die Länge von Array and ArrayBuffer limitiert? Die length Eigenschaft von Array und ArrayBuffer ist mit einem vorzeichenlosen 32-bit Integer definiert, sodass nur Werte von 0 bis 232-1 gültig sind.

+ +

Wenn man ein Array mit dem Konstruktor erzeugen möchte, statt mit der Literalnotation, sollte man aufpassem, dass das erste Argument als Länge des Arrays interpretiert wird.

+ +

Man sollte die Länge festlegen, bevor man die length Eigenschaft setzt, oder mit dem ersten Argument im Konstruktor.

+ +

Beispiele

+ +

Ungültige Fälle

+ +
new Array(Math.pow(2, 40))
+new Array(-1)
+new ArrayBuffer(Math.pow(2, 32))
+new ArrayBuffer(-1)
+
+let a = [];
+a.length = a.length - 1;         // length Eigenschaft auf -1 gesetzt
+
+let b = new Array(Math.pow(2, 32) - 1);
+b.length = b.length + 1;         // length Eigenschaft auf 2^32 gesetzt
+
+ +

Gültige Fälle

+ +
[ Math.pow(2, 40) ]                     // [ 1099511627776 ]
+[ -1 ]                                  // [ -1 ]
+new ArrayBuffer(Math.pow(2, 32) - 1)
+new ArrayBuffer(0)
+
+let a = [];
+a.length = Math.max(0, a.length - 1);
+
+let b = new Array(Math.pow(2, 32) - 1);
+b.length = Math.min(0xffffffff, b.length + 1);
+
+// 0xffffffff ist die hexadecimal Notation für 2^32 - 1
+// kann auch als (-1 >>> 0) geschrieben werden
+
+ +

Siehe auch

+ + diff --git a/files/de/web/javascript/reference/errors/invalid_assignment_left-hand_side/index.html b/files/de/web/javascript/reference/errors/invalid_assignment_left-hand_side/index.html new file mode 100644 index 0000000000..6e727fb9a2 --- /dev/null +++ b/files/de/web/javascript/reference/errors/invalid_assignment_left-hand_side/index.html @@ -0,0 +1,53 @@ +--- +title: 'ReferenceError: invalid assignment left-hand side' +slug: Web/JavaScript/Reference/Fehler/Invalid_assignment_left-hand_side +tags: + - Errors + - JavaScript + - ReferenceError +translation_of: Web/JavaScript/Reference/Errors/Invalid_assignment_left-hand_side +--- +
{{jsSidebar("Errors")}}
+ +

Fehlermeldung

+ +
ReferenceError: invalid assignment left-hand side
+
+ +

Fehlertyp

+ +

{{jsxref("ReferenceError")}}.

+ +

Was ist falsch gelaufen?

+ +

Es gibt irgendwo eine unerwartete Zuweisung. Das kann zum Beispiel durch eine nicht Übereinstimmung des Zuweisungsoperators und eines Vergleichsoperators hervorgerufen werden. Während ein einzelnes "=" Zeichen einer Variable einen Wert zuweist, vergleichen  "==" und "===" zwei Werte.

+ +

Beispiele

+ +
if (Math.PI = 3 || Math.PI = 4) {
+  console.log('no way!');
+}
+// ReferenceError: invalid assignment left-hand side
+
+var str = 'Hello, '
++= 'is it me '
++= 'you\'re looking for?';
+// ReferenceError: invalid assignment left-hand side
+ +

In dem if Statement wird ein Vergleichsoperator ("==") und für die Stringverkettung ein plus ("+") Operator benötigt.

+ +
if (Math.PI == 3 || Math.PI == 4) {
+  console.log('no way!');
+}
+
+var str = 'Hello, '
++ 'from the '
++ 'other side!';
+
+ +

Siehe auch

+ + diff --git a/files/de/web/javascript/reference/errors/invalid_const_assignment/index.html b/files/de/web/javascript/reference/errors/invalid_const_assignment/index.html new file mode 100644 index 0000000000..812577360a --- /dev/null +++ b/files/de/web/javascript/reference/errors/invalid_const_assignment/index.html @@ -0,0 +1,90 @@ +--- +title: 'TypeError: invalid assignment to const "x"' +slug: Web/JavaScript/Reference/Fehler/Invalid_const_assignment +tags: + - Error + - JavaScript + - TypeError +translation_of: Web/JavaScript/Reference/Errors/Invalid_const_assignment +--- +
{{jsSidebar("Errors")}}
+ +

Fehlermeldung

+ +
TypeError: invalid assignment to const "x" (Firefox)
+TypeError: Assignment to constant variable. (Chrome)
+TypeError: Redeclaration of const 'x' (IE/Edge)
+
+ +

Fehlertyp

+ +

{{jsxref("TypeError")}}

+ +

Was ist falsch gelaufen?

+ +

Eine Konstante ist ein Wert, der nicht von einem Programm während der normalen Ausführung, geändert werden kann. Sie kann nicht durch erneutes Zuweisen und Neudeklarationen geändert werden. In JavaScript werden Konstanten mit dem const Schlüsselwort deklariert.

+ +

Beispiel

+ +

Nicht valide Neudeklaration

+ +

Weist eine Konstanten erneut einen Wert zu. Führt zu einem Fehler.

+ +
const COLUMNS = 80;
+
+// ...
+
+COLUMNS = 120; // TypeError: invalid assignment to const `COLUMNS'
+ +

Den Fehler auflösen

+ +

Es gibt mehrere Optionen, um den Fehler zu vermeiden. Überprüfen Sie, was mit der betreffenden Konstante erreicht werden sollte.

+ +

Umbenennen

+ +

Wenn Sie eine andere Konstante deklarieren möchten, wählen Sie einen anderen Namen und benennen Sie ihn um. Dieser konstante Name ist dann in diesem Bereich vergeben.

+ +
const COLUMNS = 80;
+const WIDE_COLUMNS = 120;
+ +

const, let or var?

+ +

Verwenden Sie nicht const, wenn Sie keine Konstante deklarieren wollten. Vielleicht soll eine Blockvariable mit let oder eine globale Variable mit var deklariert werden.

+ +
let columns = 80;
+
+// ...
+
+let columns = 120;
+
+ +

Gültigkeitsbereich

+ +

Prüfen Sie, ob Sie im richtigen Gültigkeitsbereich sind. Sollte diese Konstante in diesen Gültigkeitsbereich oder sollte diese zum Beispiel in eine Funktion.

+ +
const COLUMNS = 80;
+
+function setupBigScreenEnvironment() {
+  const COLUMNS = 120;
+}
+ +

const und Unveränderlichkeit

+ +

Die const Deklaration erstellt eine nur lesbare Referenz zu einem Wert. Das bedeutet nicht, dass der enthaltene Wert Unveränderbar ist, sondern nur, dass der Bezeichner nicht neu definiert werden kann. Wenn die Konstante zum Beispiel ein Objekt ist, kann das Objekt selbst verändert werden. Es bedeutet nur, dass der Wert in der Variable nicht verändert werden kann.

+ +
const obj = {foo: 'bar'};
+obj = {foo: 'baz'}; // TypeError: invalid assignment to const `obj'
+
+ +

Aber man kann die Eigenschaften der Variable verändern:

+ +
obj.foo = 'baz';
+obj; // Object { foo: "baz" }
+ +

Siehe auch

+ + diff --git a/files/de/web/javascript/reference/errors/invalid_date/index.html b/files/de/web/javascript/reference/errors/invalid_date/index.html new file mode 100644 index 0000000000..04954fe28f --- /dev/null +++ b/files/de/web/javascript/reference/errors/invalid_date/index.html @@ -0,0 +1,54 @@ +--- +title: 'RangeError: invalid date' +slug: Web/JavaScript/Reference/Fehler/Invalid_date +tags: + - Errors + - JavaScript + - RangeError +translation_of: Web/JavaScript/Reference/Errors/Invalid_date +--- +
{{jsSidebar("Errors")}}
+ +

Fehlermeldung

+ +
RangeError: invalid date (Firefox)
+RangeError: invalid time value (Chrome)
+RangeError: Provided date is not in valid range (Chrome)
+
+ +

Fehlertyp

+ +

{{jsxref("RangeError")}}

+ +

Was ist schief gelaufen?

+ +

Eine Zeichenfolge, die ein ungültiges Datum enthält, wurde  {{jsxref("Date")}} oder {{jsxref("Date.parse()")}} übergeben.

+ +

Beispiele

+ +

Nicht valide Fälle

+ +

Nicht erkennbare Strings oder Daten, welche nicht erlaubte Elementewerte im ISO formatierten String enthalten, geben gewöhnlich {{jsxref("NaN")}} zurück. Abhängig von der Implementierung kann es auch sein, dass nicht valide ISO Formate, einen RangeError: invalid date erzeugen, wie die folgenden Fällen in Firefox:

+ +
new Date('foo-bar 2014');
+new Date('2014-25-23').toISOString();
+new Date('foo-bar 2014').toString();
+
+ +

Das folgende gibt in Firefox {{jsxref("NaN")}} zurück.

+ +
Date.parse('foo-bar 2014'); // NaN
+ +

Für mehr Details, sollte die {{jsxref("Date.parse()")}} Dokumentation angesehen werden.

+ +

Valide Fälle

+ +
new Date('05 October 2011 14:48 UTC');
+ +

Siehe auch

+ + diff --git a/files/de/web/javascript/reference/errors/invalid_for-in_initializer/index.html b/files/de/web/javascript/reference/errors/invalid_for-in_initializer/index.html new file mode 100644 index 0000000000..bc4bf80c70 --- /dev/null +++ b/files/de/web/javascript/reference/errors/invalid_for-in_initializer/index.html @@ -0,0 +1,74 @@ +--- +title: 'SyntaxError: for-in loop head declarations may not have initializers' +slug: Web/JavaScript/Reference/Fehler/Invalid_for-in_initializer +tags: + - Error + - JavaScript + - Strict Mode + - SyntaxError +translation_of: Web/JavaScript/Reference/Errors/Invalid_for-in_initializer +--- +
{{jsSidebar("Errors")}}
+ +

Fehlermeldung

+ +
SyntaxError: for-in loop head declarations may not have initializers (Firefox)
+
+SyntaxError: for-in loop variable declaration may not have an initializer. (Chrome)
+
+ +

Fehlertyp

+ +

{{jsxref("SyntaxError")}} nur im Strict Mode.

+ +

Was ist falsch gelaufen?

+ +

Der Kopf einer for...in Schleife enthält einen Initialisierungsausdruck. Das ist, wenn eine Variable deklariert und mit einem Wert initialisiert wird (for(var i = 0 in obj)). Ohne Strict Mode wird die Initialisierung still ignoriert und verhält sich wie for(var i in obj). Im Strict Mode wird ein SyntaxError erzeugt.

+ +

Beispiele

+ +

Das Beispiel erzeugt einen SyntaxError:

+ +
"use strict";
+
+var obj = {a: 1, b: 2, c: 3 };
+
+for (var i = 0 in obj) {
+  console.log(obj[i]);
+}
+
+// SyntaxError: for-in loop head declarations may not have initializers
+
+ +

Valide for-in Schleife

+ +

Man kann die Initialisierung (i = 0) im Kopf der for-in Schleife entfernen.

+ +
"use strict";
+
+var obj = {a: 1, b: 2, c: 3 };
+
+for (var i in obj) {
+  console.log(obj[i]);
+}
+
+ +

Array Iteration

+ +

Die for...in Schleife sollte nicht für Array Iterationen benutzt werden. Zum Iterieren von durch ein {{jsxref("Array")}} sollte eine for Schleife statt einer for-in Schleife benutzt werden. Die for Schleife erlaubt es dann auch eine Initialisierung vorzunehmen:

+ +
var arr = [ "a", "b", "c" ]
+
+for (var i = 2; i < arr.length; i++) {
+  console.log(arr[i]);
+}
+
+// "c"
+ +

Siehe auch

+ + diff --git a/files/de/web/javascript/reference/errors/invalid_for-of_initializer/index.html b/files/de/web/javascript/reference/errors/invalid_for-of_initializer/index.html new file mode 100644 index 0000000000..3270387357 --- /dev/null +++ b/files/de/web/javascript/reference/errors/invalid_for-of_initializer/index.html @@ -0,0 +1,63 @@ +--- +title: >- + SyntaxError: a declaration in the head of a for-of loop can't have an + initializer +slug: Web/JavaScript/Reference/Fehler/Invalid_for-of_initializer +tags: + - Error + - JavaScript + - SyntaxError +translation_of: Web/JavaScript/Reference/Errors/Invalid_for-of_initializer +--- +
{{jsSidebar("Errors")}}
+ +

Fehlermeldung

+ +
SyntaxError: a declaration in the head of a for-of loop can't have an initializer (Firefox)
+
+SyntaxError: for-of loop variable declaration may not have an initializer. (Chrome)
+
+ +

Fehlertyp

+ +

{{jsxref("SyntaxError")}}

+ +

Was falsch gelaufen ist?

+ +

Der Kopf einer for...of Schleife enthält einen Initialisierungsausdruck. Das ist eine Variable die deklariert und initialisiert wird |for (var i = 0 of iterable)|. Dieses ist nicht erlaubt in for...of Schleifen. Manchmal ist eine for Schleife gemeint, die eine Initialisierung erlaubt.

+ +

Beispiele

+ +

Nicht valide for...of Schleife

+ +
let iterable = [10, 20, 30];
+
+for (let value = 50 of iterable) {
+  console.log(value);
+}
+
+// SyntaxError: a declaration in the head of a for-of loop can't
+// have an initializer
+ +

Valide for...of Schleife

+ +

Man muss die Initialisierung (value = 50) im Kopf der for...of Schleife entfernen. Wenn 50 als Offset gedacht ist, kann man eine Addition in den Körper der Schleife verschieben, wie im folgenden Beispiel:

+ +
let iterable = [10, 20, 30];
+
+for (let value of iterable) {
+  value += 50;
+  console.log(value);
+}
+// 60
+// 70
+// 80
+
+ +

Siehe auch

+ + diff --git a/files/de/web/javascript/reference/errors/invalid_right_hand_side_instanceof_operand/index.html b/files/de/web/javascript/reference/errors/invalid_right_hand_side_instanceof_operand/index.html new file mode 100644 index 0000000000..771838b428 --- /dev/null +++ b/files/de/web/javascript/reference/errors/invalid_right_hand_side_instanceof_operand/index.html @@ -0,0 +1,62 @@ +--- +title: 'TypeError: invalid ''instanceof'' operand ''x''' +slug: Web/JavaScript/Reference/Fehler/invalid_right_hand_side_instanceof_operand +tags: + - Error + - Errors + - JavaScript + - Reference + - TypeError +translation_of: Web/JavaScript/Reference/Errors/invalid_right_hand_side_instanceof_operand +--- +
{{jsSidebar("Errors")}}
+ +

Fehlermeldung

+ +
TypeError: invalid 'instanceof' operand "x" (Firefox)
+TypeError: "x" is not a function (Firefox)
+TypeError: Right-hand side of 'instanceof' is not an object (Chrome)
+TypeError: Right-hand side of 'instanceof' is not callable (Chrome)
+ +

Fehlertyp

+ +

{{jsxref("TypeError")}}

+ +

Was ist falsch gelaufen?

+ +

Der instanceof Operator erwartet als rechten Operand einen Konstruktorobjekt, z. B. ein Objekt, welches eine prototype Eigenschaft hat und aufrufbar ist.

+ +

Beispiele

+ +
"test" instanceof ""; // TypeError: invalid 'instanceof' operand ""
+42 instanceof 0;      // TypeError: invalid 'instanceof' operand 0
+
+function Foo() {}
+var f = Foo();        // Foo() is called and returns undefined
+var x = new Foo();
+
+x instanceof f;       // TypeError: invalid 'instanceof' operand f
+x instanceof x;       // TypeError: x is not a function
+
+ +

Um diesen Fehler zu beheben, kann entweder der instanceof Operator durch einen typeof Operator ersetzt werden, oder man muss sicher stellen, dass ein Funktionsname statt einem Resultat seines Aufrufes benutzt werden.

+ +
typeof "test" == "string"; // true
+typeof 42 == "number"      // true
+
+function Foo() {}
+var f = Foo;               // Do not call Foo.
+var x = new Foo();
+
+x instanceof f;            // true
+x instanceof Foo;          // true
+
+ +

Siehe auch

+ + + +

 

diff --git a/files/de/web/javascript/reference/errors/is_not_iterable/index.html b/files/de/web/javascript/reference/errors/is_not_iterable/index.html new file mode 100644 index 0000000000..21460882c7 --- /dev/null +++ b/files/de/web/javascript/reference/errors/is_not_iterable/index.html @@ -0,0 +1,103 @@ +--- +title: 'TypeError: ''x'' is not iterable' +slug: Web/JavaScript/Reference/Fehler/is_not_iterable +tags: + - Error + - JavaScript + - Reference + - TypeError +translation_of: Web/JavaScript/Reference/Errors/is_not_iterable +--- +
{{jsSidebar("Errors")}}
+ +

Fehlermeldung

+ +
TypeError: 'x' is not iterable (Firefox, Chrome)
+TypeError: 'x' is not a function or its return value is not iterable (Chrome)
+
+ +

Fehlertyp

+ +

{{jsxref("TypeError")}}

+ +

Was ist falsch gelaufen?

+ +

Der Wert, welcher auf der rechten Seite von for…of oder als Argument einer Funktion wie {{jsxref("Promise.all")}} oder {{jsxref("TypedArray.from")}} ist kein iterierbares Objekt. Ein iterierbares Objekt kann vom Standardtypen wie {{jsxref("Array")}}, {{jsxref("String")}} oder {{jsxref("Map")}} sein oder ein Objekt, welches das iterable Protokoll implementiert.

+ +

Beispiele

+ +

Über Objekteigenschaften iterieren

+ +

In JavaScript sind {{jsxref("Object", "Objekte")}} nicht iterierbar, außer sie implementieren das iterable Protokoll. Demnach kann man for…of nicht für das Iterieren von Objekteigenschaften benutzen.

+ +
var obj = { 'France': 'Paris', 'England': 'London' };
+for (let p of obj) { // TypeError: obj is not iterable
+    // …
+}
+
+ +

Stattdessen kann man {{jsxref("Object.keys")}} oder {{jsxref("Object.entries")}} benutzen, um über die Eigenschaften oder Einträge zu iterieren.

+ +
var obj = { 'France': 'Paris', 'England': 'London' };
+// Iterate over the property names:
+for (let country of obj.keys()) {
+    var capital = obj[country];
+    console.log(country, capital);
+}
+
+for (const [country, capital] of obj.entries())
+    console.log(country, capital);
+
+ +

Eine andere Option ist in diesem Fall der Einsatz einer {{jsxref("Map")}}:

+ +
var map = new Map;
+map.set('France', 'Paris');
+map.set('England', 'London');
+// Iterate over the property names:
+for (let country of map.keys()) {
+    let capital = map[country];
+    console.log(country, capital);
+}
+
+for (let capital of map.values())
+    console.log(capital);
+
+for (const [country, capital] of map.entries())
+    console.log(country, capital);
+
+ +

Über einen Generator iterieren

+ +

Generatoren sind Funktionen welche aufgerufen werden, um ein iterierbares Objekt zu produzieren.

+ +
function* generate(a, b) {
+  yield a;
+  yield b;
+}
+
+for (let x of generate) // TypeError: generate is not iterable
+    console.log(x);
+
+ +

Wenn dieser nicht aufgerufen wird, ist das korrespondierende {{jsxref("Function")}} Objekt des Generators aufrufbar, aber nicht iterierbar. Aufrufen des Generators Produziert ein iterierbares Objekt, welche über die Werte iteriert, die während der Ausführung des Generators zurückgegeben werden.

+ +
function* generate(a, b) {
+    yield a;
+    yield b;
+}
+
+for (let x of generate(1,2))
+    console.log(x);
+
+ +

Siehe auch

+ + diff --git a/files/de/web/javascript/reference/errors/json_bad_parse/index.html b/files/de/web/javascript/reference/errors/json_bad_parse/index.html new file mode 100644 index 0000000000..0aa5e6bdae --- /dev/null +++ b/files/de/web/javascript/reference/errors/json_bad_parse/index.html @@ -0,0 +1,112 @@ +--- +title: 'SyntaxError: JSON.parse: bad parsing' +slug: Web/JavaScript/Reference/Fehler/JSON_bad_parse +tags: + - Errors + - JSON + - JavaScript + - Method + - Property + - SyntaxError +translation_of: Web/JavaScript/Reference/Errors/JSON_bad_parse +--- +
{{jsSidebar("Errors")}}
+ +

Fehlermeldung

+ +
SyntaxError: JSON.parse: unterminated string literal
+SyntaxError: JSON.parse: bad control character in string literal
+SyntaxError: JSON.parse: bad character in string literal
+SyntaxError: JSON.parse: bad Unicode escape
+SyntaxError: JSON.parse: bad escape character
+SyntaxError: JSON.parse: unterminated string
+SyntaxError: JSON.parse: no number after minus sign
+SyntaxError: JSON.parse: unexpected non-digit
+SyntaxError: JSON.parse: missing digits after decimal point
+SyntaxError: JSON.parse: unterminated fractional number
+SyntaxError: JSON.parse: missing digits after exponent indicator
+SyntaxError: JSON.parse: missing digits after exponent sign
+SyntaxError: JSON.parse: exponent part is missing a number
+SyntaxError: JSON.parse: unexpected end of data
+SyntaxError: JSON.parse: unexpected keyword
+SyntaxError: JSON.parse: unexpected character
+SyntaxError: JSON.parse: end of data while reading object contents
+SyntaxError: JSON.parse: expected property name or '}'
+SyntaxError: JSON.parse: end of data when ',' or ']' was expected
+SyntaxError: JSON.parse: expected ',' or ']' after array element
+SyntaxError: JSON.parse: end of data when property name was expected
+SyntaxError: JSON.parse: expected double-quoted property name
+SyntaxError: JSON.parse: end of data after property name when ':' was expected
+SyntaxError: JSON.parse: expected ':' after property name in object
+SyntaxError: JSON.parse: end of data after property value in object
+SyntaxError: JSON.parse: expected ',' or '}' after property value in object
+SyntaxError: JSON.parse: expected ',' or '}' after property-value pair in object literal
+SyntaxError: JSON.parse: property names must be double-quoted strings
+SyntaxError: JSON.parse: expected property name or '}'
+SyntaxError: JSON.parse: unexpected character
+SyntaxError: JSON.parse: unexpected non-whitespace character after JSON data
+
+ +

Fehlertyp

+ +

{{jsxref("SyntaxError")}}

+ +

Was ist falsch gelaufen?

+ +

{{jsxref("JSON.parse()")}} übersetzt einen String zu JSON. Dieser String muss eine gültiges JSON enthalten. Ist die Syntax fehlerhaft, wird dieser Error ausgegeben.

+ +

Beispiele

+ +

JSON.parse() erlaubt keine angehängten Kommata

+ +

Beide Zeilen werden einen SyntaxError erzeugen:

+ +
JSON.parse('[1, 2, 3, 4,]');
+JSON.parse('{"foo": 1,}');
+// SyntaxError JSON.parse: unexpected character
+// at line 1 column 14 of the JSON data
+
+ +

Das letzte trennende Komma muss in JSON vermieden werden:

+ +
JSON.parse('[1, 2, 3, 4]');
+JSON.parse('{"foo": 1}');
+ +

Eigenschaftsnamen müssen Strings mit doppelten Anführungszeichen sein

+ +

Man kann keine einfachen Anführungszeichen für Eigenschaften benutzen (wie 'foo').

+ +
JSON.parse("{'foo': 1}");
+// SyntaxError: JSON.parse: expected property name or '}'
+// at line 1 column 2 of the JSON data
+ +

Stattdessen muss "foo" benutzt werden:

+ +
JSON.parse('{"foo": 1}');
+ +

Führende Nullen und Dezimalpunkte

+ +

Man kann keine führenden Nullen (wie 01) benutzen. Nach Dezimalpunkten muss mindestens eine Stelle stehen.

+ +
JSON.parse('{"foo": 01}');
+// SyntaxError: JSON.parse: expected ',' or '}' after property value
+// in object at line 1 column 2 of the JSON data
+
+JSON.parse('{"foo": 1.}');
+// SyntaxError: JSON.parse: unterminated fractional number
+// at line 1 column 2 of the JSON data
+
+ +

Stattdessen schreibe man nur 1, ohne eine Null (also 1, statt 01) und nutze mindestens eine Ziffer nach dem Dezimalpunkt:

+ +
JSON.parse('{"foo": 1}');
+JSON.parse('{"foo": 1.0}');
+
+ +

Siehe auch

+ + diff --git a/files/de/web/javascript/reference/errors/malformed_formal_parameter/index.html b/files/de/web/javascript/reference/errors/malformed_formal_parameter/index.html new file mode 100644 index 0000000000..65a89bb84a --- /dev/null +++ b/files/de/web/javascript/reference/errors/malformed_formal_parameter/index.html @@ -0,0 +1,61 @@ +--- +title: 'SyntaxError: Malformed formal parameter' +slug: Web/JavaScript/Reference/Fehler/Malformed_formal_parameter +tags: + - Error + - JavaScript + - SyntaxError +translation_of: Web/JavaScript/Reference/Errors/Malformed_formal_parameter +--- +
{{jsSidebar("Errors")}}
+ +

Fehlermeldung

+ +
SyntaxError: malformed formal parameter (Firefox)
+
+ +

Fehlertyp

+ +

{{jsxref("SyntaxError")}}

+ +

Was ist falsch gelaufen?

+ +

Es existiert ein Function() Konstruktor mit mindestend zwei übergebenen Parametern im Quelltext. Der letzte Parameter ist der Quelltext für die neu zu erstellende Funktion. Der ganze Rest bildet die liste der Parameter der neu zu erstellenden Funktion.

+ +

Die Liste der Parameter ist manchmal nicht valide. Das kann passieren, wenn versehendlich ein Schlüsselword, wie if oder var, für die namen der Parameter verwendet werden. Ein andere Grund kann eine falsche Interpunktion in der Argumentenliste verwendet wird. Auch ein falscher Wert wie eine Zahl oder ein Objekt kann die Ursache sein.

+ +

OK, das löst mein Problem. Aber warum hast du das nicht sofort gesagt?

+ +

Zugegeben, die Formulierung in der Fehlermeldung ist etwas seltsam. "formal parameter" ist eine andere Art "Funktionsargument oder "Funktionsparameter" zu sagen. Und wir verwenden das Wort "malformed", weil alle Firefox-Ingenieure sehr große Fans des Romans Gothic Horror sind.

+ +

Beispiele

+ +

Invalide Fälle

+ +
var f = Function('x y', 'return x + y;');
+// SyntaxError (missing a comma)
+
+var f = Function('x,', 'return x;');
+// SyntaxError (extraneous comma)
+
+var f = Function(37, "alert('OK')");
+// SyntaxError (numbers can't be argument names)
+
+ +

Valide Fälle

+ +
var f = Function('x, y', 'return x + y;');  // correctly punctuated
+
+var f = Function('x', "return x;');
+
+// if you can, avoid using Function - this is much faster
+var f = function(x) { return x; };
+
+ +

Siehe auch

+ + diff --git a/files/de/web/javascript/reference/errors/malformed_uri/index.html b/files/de/web/javascript/reference/errors/malformed_uri/index.html new file mode 100644 index 0000000000..cf831aa4a6 --- /dev/null +++ b/files/de/web/javascript/reference/errors/malformed_uri/index.html @@ -0,0 +1,66 @@ +--- +title: 'URIError: malformed URI sequence' +slug: Web/JavaScript/Reference/Fehler/Malformed_URI +tags: + - Error + - Errors + - JavaScript + - URIError +translation_of: Web/JavaScript/Reference/Errors/Malformed_URI +--- +
{{jsSidebar("Errors")}}
+ +

Fehlermeldung

+ +
URIError: malformed URI sequence (Firefox)
+URIError: URI malformed (Chrome)
+
+ +

Fehlertyp

+ +

{{jsxref("URIError")}}

+ +

Was ist falsch gelaufen?

+ +

Das URI-Kodieren oder -Dekodieren war nicht erfolgreich. Ein gegebenenes Argument der {{jsxref("decodeURI")}}-, {{jsxref("encodeURI")}}-, {{jsxref("encodeURIComponent")}}-, oder {{jsxref("decodeURIComponent")}}-Funktion ist nicht valide, wodurch die Funktion nicht richtig Kodieren oder Dekodieren kann.

+ +

Beispiele

+ +

Kodieren

+ +

Kodieren ersetzt bestimmte Zeichen durch eine Sequenz von einem, zwei, drei oder vier maskierten Zeichen, welche der UTF-8 Kodierung des Zeichens entsprechen. Ein {{jsxref("URIError")}} wird erzeugt, wenn versucht wird ein Zeichen zu kodieren, welches kein Teil des high-low-Paares ist, zum Beispiel:

+ +
encodeURI('\uD800');
+// "URIError: malformed URI sequence"
+
+encodeURI('\uDFFF');
+// "URIError: malformed URI sequence"
+
+ +

Ein high-low Paar ist ok. Zum Beispiel:

+ +
encodeURI('\uD800\uDFFF');
+// "%F0%90%8F%BF"
+ +

Dekodieren

+ +

Dekodieren ersetzt eine Sequenz maskierter Zeichen in einer URI-Komponente mit einem Zeichen, welches dieses repräsentiert. Wenn es kein solches Zeichen gibt, wird ein Fehler erzeugt:

+ +
decodeURIComponent('%E0%A4%A');
+// "URIError: malformed URI sequence"
+
+ +

Mit richiger Eingabe sollte es wie folgendermaßen aussehen:

+ +
decodeURIComponent('JavaScript_%D1%88%D0%B5%D0%BB%D0%BB%D1%8B');
+// "JavaScript_шеллы"
+ +

Siehe auch

+ + diff --git a/files/de/web/javascript/reference/errors/missing_bracket_after_list/index.html b/files/de/web/javascript/reference/errors/missing_bracket_after_list/index.html new file mode 100644 index 0000000000..b5fe14ae14 --- /dev/null +++ b/files/de/web/javascript/reference/errors/missing_bracket_after_list/index.html @@ -0,0 +1,56 @@ +--- +title: 'SyntaxError: missing ] after element list' +slug: Web/JavaScript/Reference/Fehler/Missing_bracket_after_list +tags: + - Errors + - JavaScript + - SyntaxError +translation_of: Web/JavaScript/Reference/Errors/Missing_bracket_after_list +--- +
{{jsSidebar("Errors")}}
+ +

Fehlermeldung

+ +
SyntaxError: missing ] after element list
+
+ +

Fehlertyp

+ +

{{jsxref("SyntaxError")}}.

+ +

Was ist falsch gelaufen?

+ +

Der Syntax der Array-Initialisierung enthält einen Fehler. Wahrscheinlich fehlt eine schließende eckige Klammer ("]") oder ein Komma (",").

+ +

Beispiele

+ +

Unvollständige Arrayinitialisierung

+ +
var list = [1, 2,
+
+var instruments = [
+  'Ukulele',
+  'Guitar',
+  'Piano'
+};
+
+var data = [{foo: 'bar'} {bar: 'foo'}];
+
+ +

Richtig wäre:

+ +
var list = [1, 2];
+
+var instruments = [
+ 'Ukulele',
+ 'Guitar',
+ 'Piano'
+];
+
+var data = [{foo: 'bar'}, {bar: 'foo'}];
+ +

Siehe auch

+ + diff --git a/files/de/web/javascript/reference/errors/missing_colon_after_property_id/index.html b/files/de/web/javascript/reference/errors/missing_colon_after_property_id/index.html new file mode 100644 index 0000000000..26d515a018 --- /dev/null +++ b/files/de/web/javascript/reference/errors/missing_colon_after_property_id/index.html @@ -0,0 +1,77 @@ +--- +title: 'SyntaxError: missing : after property id' +slug: Web/JavaScript/Reference/Fehler/Missing_colon_after_property_id +tags: + - Error + - Errors + - JavaScript + - SyntaxError +translation_of: Web/JavaScript/Reference/Errors/Missing_colon_after_property_id +--- +
{{jsSidebar("Errors")}}
+ +

Fehlermeldung

+ +
SyntaxError: missing : after property id
+
+ +

Fehlertyp

+ +

{{jsxref("SyntaxError")}}

+ +

Was ist falsch gelaufen?

+ +

Wenn Objekte mit der Objektinitialisierungs-Syntax erstellt werden, wird ein (:) eingesetzt, um bei Eiegenschaften Schlüssel und Werte zu trennen.

+ +
var obj = { propertyKey: 'value' };
+
+ +

Examples

+ +

Doppelpunkt vs. Gleichzeichen

+ +

Der Code funktioniert nicht, weil das Gleichzeichen nicht in dieser Form in der Objektinitialisierungs-Syntax genutzt werden kann.

+ +
var obj = { propertyKey = 'value' };
+// SyntaxError: missing : after property id
+
+ +

Richtig währe der Einsatz eines Doppelpunktes oder der Einsatz von eckigen Klammern, um eine Eigenschaft nach dem erstellen des Objektes zuzuweisen.

+ +
var obj = { propertyKey: 'value' };
+
+// or alternatively
+
+var obj = { };
+obj['propertyKey'] = 'value';
+
+ +

Leere Eigenschaften

+ +

Man kann nicht wie im Beispiel leere Eigenschaften erzeugen:

+ +
var obj = { propertyKey; };
+// SyntaxError: missing : after property id
+
+ +

Wenn eine Eigenschaft ohne Wert definiert werden soll, muss {{jsxref("null")}} als Wert genutzt werden.

+ +
var obj = { propertyKey: null };
+ +

Berechnete Eigenschaften

+ +

Wenn ein Eigenschaftsname aus einem Ausdruck berechnet wird, müssen eckige Klammern genutzt werden. Anderfalls kann der Eigenschaftname nicht errechnet werden:

+ +
var obj = { 'b'+'ar': 'foo' };
+// SyntaxError: missing : after property id
+
+ +

Man muss den Ausdruck in [] setzen:

+ +
var obj = { ['b'+'ar']: 'foo' };
+ +

Siehe auch

+ + diff --git a/files/de/web/javascript/reference/errors/missing_curly_after_function_body/index.html b/files/de/web/javascript/reference/errors/missing_curly_after_function_body/index.html new file mode 100644 index 0000000000..b5e0239a2f --- /dev/null +++ b/files/de/web/javascript/reference/errors/missing_curly_after_function_body/index.html @@ -0,0 +1,67 @@ +--- +title: 'SyntaxError: missing } after function body' +slug: Web/JavaScript/Reference/Fehler/Missing_curly_after_function_body +tags: + - Error + - Errors + - JavaScript + - SyntaxError +translation_of: Web/JavaScript/Reference/Errors/Missing_curly_after_function_body +--- +
{{jsSidebar("Errors")}}
+ +

Fehlermeldung

+ +
SyntaxError: missing } after function body
+
+ +

Fehlertyp

+ +

{{jsxref("SyntaxError")}}

+ +

Was ist falsch gelaufen?

+ +

Es gibt einen Syntaxfehler irgendwo beim erstellen von Funktionen. Man sollte prüfen, ob alle runden und geschweiften Klammern in der richtigen Reihenfolge sind. Einrückung und Formatierung des Codes hilft dabei den Fehler zu erkennen.

+ +

Beispiele

+ +

Schließende geschweifte Klammer vergessen

+ +

Oftmals fehlt eine geschweifte Klammer im Funktionsocde:

+ +
var charge = function() {
+  if (sunny) {
+    useSolarCells();
+  } else {
+    promptBikeRide();
+};
+
+ +

Richtig wäre:

+ +
var charge = function() {
+  if (sunny) {
+    useSolarCells();
+  } else {
+    promptBikeRide();
+  }
+};
+ +

Es kann deutlich verwirrender sein, wenn {{Glossary("IIFE")}}, Closures, oder andere Konstrukte, die viele verschiedene Klammern benutzt, eingesetzt werden, wie zum Beispiel:

+ +
(function() { if (true) { return false; } );
+
+ +

Oftmals hilft verschiedenes Einrücken oder doppeltes Prüfen der Einrückung, um den Fehler zu finden.

+ +
(function() {
+  if (true) {
+    return false;
+  }
+});
+ +

Siehe auch

+ + diff --git a/files/de/web/javascript/reference/errors/missing_curly_after_property_list/index.html b/files/de/web/javascript/reference/errors/missing_curly_after_property_list/index.html new file mode 100644 index 0000000000..41a82a9158 --- /dev/null +++ b/files/de/web/javascript/reference/errors/missing_curly_after_property_list/index.html @@ -0,0 +1,51 @@ +--- +title: 'SyntaxError: missing } after property list' +slug: Web/JavaScript/Reference/Fehler/Missing_curly_after_property_list +tags: + - Errors + - JavaScript + - SyntaxError +translation_of: Web/JavaScript/Reference/Errors/Missing_curly_after_property_list +--- +
{{jsSidebar("Errors")}}
+ +

Fehlermeldung

+ +
SyntaxError: missing } after property list
+
+ +

Fehlertyp

+ +

{{jsxref("SyntaxError")}}

+ +

Was ist falsch gelaufen?

+ +

Es gibt irgendwo in der Objektinitialisierungs-Syntax einen Fehler. Es könnte ein vergessenes Komma sein oder eine vergessene geschweifte Klammer. Es muss auch geprüft werden, die Reihenfolge der schließenden runden und geschweiften Klammern richtig ist. Den Code richtig einzurücken und zu formatieren hilft bei der Suche nach dem Fehler.

+ +

Beispiele

+ +

Vergessenes Komma

+ +

Häufig wird ein Komma bei der Objektinitialisierung vergessen:

+ +
var obj = {
+  a: 1,
+  b: { myProp: 2 }
+  c: 3
+};
+
+ +

Richtig wäre:

+ +
var obj = {
+  a: 1,
+  b: { myProp: 2 },
+  c: 3
+};
+
+ +

Siehe auch

+ + diff --git a/files/de/web/javascript/reference/errors/missing_formal_parameter/index.html b/files/de/web/javascript/reference/errors/missing_formal_parameter/index.html new file mode 100644 index 0000000000..19813f9c47 --- /dev/null +++ b/files/de/web/javascript/reference/errors/missing_formal_parameter/index.html @@ -0,0 +1,80 @@ +--- +title: 'SyntaxError: missing formal parameter' +slug: Web/JavaScript/Reference/Fehler/Missing_formal_parameter +tags: + - Error + - Errors + - JavaScript + - SyntaxError +translation_of: Web/JavaScript/Reference/Errors/Missing_formal_parameter +--- +
{{jsSidebar("Errors")}}
+ +

Fehlermeldung

+ +
SyntaxError: missing formal parameter (Firefox)
+
+ +

Fehlertyp

+ +

{{jsxref("SyntaxError")}}

+ +

Was ist falsch gelaufen?

+ +

"Formaler Parameter" ist eine andere Bezeichnung für Funktionsparameter. Einer Funktion fehlen valide Parameter. In der Deklaration einer Funktion müssen die Parameternamen {{Glossary("Identifier", "Bezeichner")}}, kein Wert einer Nummer, eines Strings oder eines Objektes. Deklarieren und Aufrufen von Funktionen sind zwei verschiedene Schritte. Deklarieren setzt Bezeichner als Parametername voraus und beim Ausführen (Aufrufen) der Funktion müssen Werte für die Funktion benutzt werden.

+ +

In {{glossary("JavaScript")}} können Bezeichner nur alphanumerische Zeichen (und "$" und "_") enthalten und können nicht mit einer Zahl beginnen. Ein Bezeichner unterscheidet sich von einem String, weil der String Daten sind und der Bezeichner teil des Codes.

+ +

Beispiele

+ +

Funktionsparameter müssen Bezeichner beim erstellen der Funktion sein. Alle diese Funktionsdeklarationen schlagen fehl, wenn ein Wert als Parameter benutzt wird:

+ +
function square(3) {
+  return number * number;
+};
+// SyntaxError: missing formal parameter
+
+function greet("Howdy") {
+  return greeting;
+};
+// SyntaxError: missing formal parameter
+
+function log({ obj: "value"}) {
+  console.log(arg)
+};
+// SyntaxError: missing formal parameter
+
+ +

Man muss einen Bezeichner für die Funktionsdeklarationen benutzen:

+ +
function square(number) {
+  return number * number;
+};
+
+function greet(greeting) {
+  return greeting;
+};
+
+function log(arg) {
+  console.log(arg)
+};
+ +

Danach kann man die Funktionen mit beliebigen Argumentwerten aufrufen:

+ +
square(2); // 4
+
+greet("Howdy"); // "Howdy"
+
+log({obj: "value"}); // Object { obj: "value" }
+
+ +

Siehe auch

+ + diff --git a/files/de/web/javascript/reference/errors/missing_initializer_in_const/index.html b/files/de/web/javascript/reference/errors/missing_initializer_in_const/index.html new file mode 100644 index 0000000000..49db779546 --- /dev/null +++ b/files/de/web/javascript/reference/errors/missing_initializer_in_const/index.html @@ -0,0 +1,58 @@ +--- +title: 'SyntaxError: missing = in const declaration' +slug: Web/JavaScript/Reference/Fehler/Missing_initializer_in_const +tags: + - Error + - JavaScript + - SyntaxError +translation_of: Web/JavaScript/Reference/Errors/Missing_initializer_in_const +--- +
{{jsSidebar("Errors")}}
+ +

Fehlermeldung

+ +
SyntaxError: missing = in const declaration (Firefox)
+SyntaxError: Missing initializer in const declaration (Chrome)
+
+ +

Fehlertyp

+ +

{{jsxref("SyntaxError")}}

+ +

Was ist falsch gelaufen?

+ +

Eine Konstante ist ein Wert, der während der normalen Ausführung des Programmes nicht geändert werden kann. Ihr kann kein neuer Wert zugewiesen werden und can nicht neu deklariert werden. In JavaScript werden Konstanten mit dem const Schlüsselwort deklariert. Ein Initialwert für eine Konstante wird benötigt, was bedeutet, dass der Wert im gleichen Statement wie bei der Deklaration zugewiesen werden muss (was Sinn ergibt, weil der Wert später nicht mehr geändert werden kann).

+ +

Beispiele

+ +

Fehlender Initialwert bei const

+ +

Anders wie bei var or let, muss man bei const Deklarationen einen Initialwert angeben. Folgendes erzeugt einen Fehler:

+ +
const COLUMNS;
+// SyntaxError: missing = in const declaration
+ +

Den Fehler beheben

+ +

Es gibt mehrere Möglichkeiten den Fehler zu beheben. Es muss geprüft werden, was mit der Konstanten erreicht werden soll.

+ +

Hinzufügen eines konstanten Wertes

+ +

Der Wert muss im gleichen Statement wie die Deklaration spezifiziert werden:

+ +
const COLUMNS = 80;
+ +

const, let oder var?

+ +

Es sollte kein const verwendet werden, wenn keine Konstante gemeint ist. Vielleicht ist eine Variable für den Block (let) oder eine global Variable (var) gemeint. Beide benötigen keinen Initialwert.

+ +
let columns;
+
+ +

Siehe auch

+ + diff --git a/files/de/web/javascript/reference/errors/missing_name_after_dot_operator/index.html b/files/de/web/javascript/reference/errors/missing_name_after_dot_operator/index.html new file mode 100644 index 0000000000..cb79bdcc03 --- /dev/null +++ b/files/de/web/javascript/reference/errors/missing_name_after_dot_operator/index.html @@ -0,0 +1,68 @@ +--- +title: 'SyntaxError: missing name after . operator' +slug: Web/JavaScript/Reference/Fehler/Missing_name_after_dot_operator +tags: + - Error + - Errors + - JavaScript + - SyntaxError +translation_of: Web/JavaScript/Reference/Errors/Missing_name_after_dot_operator +--- +
{{jsSidebar("Errors")}}
+ +

Fehlermeldung

+ +
SyntaxError: missing name after . operator
+
+ +

Fehlertyp

+ +

{{jsxref("SyntaxError")}}

+ +

Was ist falsch gelaufen?

+ +

Der Punktoperator (.) wird für den Zugriff auf Eigenschaften genutzt. Man muss den Namen der Eigenschaft spezifizieren, auf den man zugreifen möchte. Um berechnete Eigenschaftsnamen zu benutzen muss statt dem Punkt eckige Klammern genutzt werden. Das erlaubt es einen Ausdruck zu berechnen. Manchmal möchte man Konkatenation stattdessen erreichen. Dafür wird ein Plusoperator (+) genutzt werden.

+ +

Beispiele

+ +

Zugriff auf Eigenschaften

+ +

Zugriff auf Eigenschaften wird in JavaScript entweder mit einem Punkt oder eckigen Klammern erreicht, aber nicht beides. Eckige Klammern erlauben es auch Eigenschaftsnamen zu berechnen.

+ +
var obj = { foo: { bar: "baz", bar2: "baz2" } };
+var i = 2;
+
+obj.[foo].[bar]
+// SyntaxError: missing name after . operator
+
+obj.foo."bar"+i;
+// SyntaxError: missing name after . operator
+
+ +

Um das Problem zu lösen, muss auf das Objekt wie folgt zugegriffen werden:

+ +
obj.foo.bar; // "baz"
+// or alternatively
+obj["foo"]["bar"]; // "baz"
+
+// computed properties require square brackets
+obj.foo["bar" + i]; // "baz2"
+
+ +

Zugriff auf Eigenschaften vs. Konkatenation

+ +

Wenn man aus einer anderen Programmiersprache kommt (z. B. {{Glossary("PHP")}}), ist es einfach den Punktoperator (.) und den Konkatenationsoperator (+) zu vermischen.

+ +
console.log("Hello" . "world");
+
+// SyntaxError: missing name after . operator
+ +

Stattdessen muss man das Pluszeichen für Konkatenation benutzen:

+ +
console.log("Hello" + "World");
+ +

Siehe auch

+ + diff --git a/files/de/web/javascript/reference/errors/missing_parenthesis_after_argument_list/index.html b/files/de/web/javascript/reference/errors/missing_parenthesis_after_argument_list/index.html new file mode 100644 index 0000000000..a3da4b9edf --- /dev/null +++ b/files/de/web/javascript/reference/errors/missing_parenthesis_after_argument_list/index.html @@ -0,0 +1,42 @@ +--- +title: 'SyntaxError: missing ) after argument list' +slug: Web/JavaScript/Reference/Fehler/Missing_parenthesis_after_argument_list +tags: + - Errors + - JavaScript + - SyntaxError +translation_of: Web/JavaScript/Reference/Errors/Missing_parenthesis_after_argument_list +--- +
{{jsSidebar("Errors")}}
+ +

Fehlermeldung

+ +
SyntaxError: missing ) after argument list
+
+ +

Fehlertyp

+ +

{{jsxref("SyntaxError")}}.

+ +

Was ist falsch gelaufen?

+ +

Es gibt einen Fehler mit der Art wie die Funktion aufgerufen wird. Es kann sich hier zum Beispiel um einen Tippfehler, einem fehlenden Operator oder einen nicht richtig abgeschlossenen String handeln. 

+ +

Beispiele

+ +

Bei einem fehlenden "+" Operator,  um zwei Strings zu konkatinieren,erwartet JavaScript , dass nur "PI: " der Parameter für die "log" Funktion ist. Darum sollte danach die Funktion mit einer abschliessenden Klammer abgeschlossen werden. 

+ +
console.log("PI: " Math.PI);
+// SyntaxError: missing ) after argument list
+
+ +

Man kann den Fehler korrigieren, indem man den "+" Operator hinzufügt:

+ +
console.log("PI: " + Math.PI);
+// "PI: 3.141592653589793"
+ +

Siehe auch

+ + diff --git a/files/de/web/javascript/reference/errors/missing_parenthesis_after_condition/index.html b/files/de/web/javascript/reference/errors/missing_parenthesis_after_condition/index.html new file mode 100644 index 0000000000..295428a5b9 --- /dev/null +++ b/files/de/web/javascript/reference/errors/missing_parenthesis_after_condition/index.html @@ -0,0 +1,70 @@ +--- +title: 'SyntaxError: missing ) after condition' +slug: Web/JavaScript/Reference/Fehler/Missing_parenthesis_after_condition +tags: + - Error + - Errors + - JavaScript + - SyntaxError +translation_of: Web/JavaScript/Reference/Errors/Missing_parenthesis_after_condition +--- +
{{jsSidebar("Errors")}}
+ +

Fehlermeldung

+ +
SyntaxError: missing ) after condition
+
+ +

Fehlertyp

+ +

{{jsxref("SyntaxError")}}

+ +

Was ist falsch gelaufen?

+ +

Es gibt einen Fehler beim schreiben einer if Bedingung. In jeder Programmiersprache benötigt man Fallunterscheidungen abhängig von Eingaben. Das if Statement führt ein Statement auf, wenn eine Bedingung true wird. In JavaScript muss diese Bedingung in runden Klammern nach dem if Schlüsselwort geschrieben werden, wie dieses:

+ +
if (condition) {
+  // do something if the condition is true
+}
+ +

Beispiele

+ +

Es könnte nur ein Versehen sein, weshalb man alle runden Klammern im Code gründlich überprüfen sollte.

+ +
if (3 > Math.PI {
+  console.log("wait what?");
+}
+
+// SyntaxError: missing ) after condition
+
+ +

Um das Problem zu beheben, muss eine schließende runde Klammer nach der Bedingung geschrieben werden.

+ +
if (3 > Math.PI) {
+  console.log("wait what?");
+}
+ +

Wenn man aus einer anderen Programmiersprache kommt, passiert es schnell, dass Schlüsselwörter benutzt werden, die in JavaScript eine andere oder garkeine Bedeutung haben.

+ +
if (done is true) {
+ console.log("we are done!");
+}
+
+// SyntaxError: missing ) after condition
+
+ +

Stattdessen muss die richtige Vergleichsoperation benutzt werden. Zum Beispiel:

+ +
if (done === true) {
+ console.log("we are done!");
+}
+ +

Siehe auch

+ + diff --git a/files/de/web/javascript/reference/errors/missing_semicolon_before_statement/index.html b/files/de/web/javascript/reference/errors/missing_semicolon_before_statement/index.html new file mode 100644 index 0000000000..dcdf35ed94 --- /dev/null +++ b/files/de/web/javascript/reference/errors/missing_semicolon_before_statement/index.html @@ -0,0 +1,67 @@ +--- +title: 'SyntaxError: missing ; before statement' +slug: Web/JavaScript/Reference/Fehler/Missing_semicolon_before_statement +tags: + - Errors + - JavaScript + - SyntaxError +translation_of: Web/JavaScript/Reference/Errors/Missing_semicolon_before_statement +--- +
{{jsSidebar("Errors")}}
+ +

Fehlermeldung

+ +
SyntaxError: missing ; before statement
+
+ +

Fehlertyp

+ +

{{jsxref("SyntaxError")}}.

+ +

Was ist falsch gelaufen?

+ +

Es fehlt irgendwo ein Semikolon (;). JavaScript Statements müssen durch ein Semikolon beendet werden. Einige Statements sind von der automatischen Semikolon Einfügung (ASI) betroffen, aber in diesem Fall muss man ein Semikolon geliefert werden, damit JavaScript den Quelltext korrekt lesen kann.

+ +

Meistens ist dieser Fehler eine Folge aus einem anderen Fehler, wie ein nicht escaptes Zeichen in einem String oder der falsche Einsatz von var.  Es kann auch sein, dass man zu viele runde Klammern benutzt. Wenn dieser Fehler auftritt, sollte die Syntax gründlich geprüft werden.

+ +

Beispiele

+ +

Nicht escapte Strings

+ +

Dieser Fehler kann leicht auftreten, wenn ein String nicht richtig escapt wird und die JavaScript-Umgebung schon das Ende eines Strings erwartet. Zum Beispiel:

+ +
var foo = 'Tom's bar';
+// SyntaxError: missing ; before statement
+ +

Man kann doppelte Anführungszeichen benutzen oder das Apostroph escapen:

+ +
var foo = "Tom's bar";
+var foo = 'Tom\'s bar';
+
+ +

Eigenschaften mit var deklarieren

+ +

Man kann Eigenschaften eines Objektes oder Arrays nicht mit einem var deklarieren.

+ +
var obj = {};
+var obj.foo = 'hi'; // SyntaxError missing ; before statement
+
+var array = [];
+var array[0] = 'there'; // SyntaxError missing ; before statement
+
+ +

Stattdessen muss das var Schlüsselwort vermieden werden:

+ +
var obj = {};
+obj.foo = 'hi';
+
+var array = [];
+array[0] = 'there';
+
+ +

Siehe auch

+ + diff --git a/files/de/web/javascript/reference/errors/more_arguments_needed/index.html b/files/de/web/javascript/reference/errors/more_arguments_needed/index.html new file mode 100644 index 0000000000..3707c5446f --- /dev/null +++ b/files/de/web/javascript/reference/errors/more_arguments_needed/index.html @@ -0,0 +1,48 @@ +--- +title: 'TypeError: More arguments needed' +slug: Web/JavaScript/Reference/Fehler/More_arguments_needed +tags: + - Errors + - JavaScript + - TypeError +translation_of: Web/JavaScript/Reference/Errors/More_arguments_needed +--- +
{{jsSidebar("Errors")}}
+ +

Fehlermeldung

+ +
TypeError: Object.create requires more than 0 arguments
+TypeError: Object.setPrototypeOf requires more than 1 argument
+TypeError: Object.defineProperties requires more than 0 arguments
+
+ +

Fehlertyp

+ +

{{jsxref("TypeError")}}.

+ +

Was ist falsch gelaufen?

+ +

Es ist ein Fehler beim Aufrufen einer Funktion aufgetaucht. Es müssen mehr Argumente übergeben werden.

+ +

Beispiele

+ +

Die {{jsxref("Object.create()")}} Methode benötigt mindestens ein Argument und die {{jsxref("Object.setPrototypeOf()")}} Methode benötigt mindestens zwei Argumente:

+ +
var obj = Object.create();
+// TypeError: Object.create requires more than 0 arguments
+
+var obj = Object.setPrototypeOf({});
+// TypeError: Object.setPrototypeOf requires more than 1 argument
+
+ +

Dieser Fehler kann behoben werden, indem {{jsxref("null")}} als Eigenschaft gesetzt wird:

+ +
var obj = Object.create(null);
+
+var obj = Object.setPrototypeOf({}, null);
+ +

Siehe auch

+ + diff --git a/files/de/web/javascript/reference/errors/negative_repetition_count/index.html b/files/de/web/javascript/reference/errors/negative_repetition_count/index.html new file mode 100644 index 0000000000..53c153453f --- /dev/null +++ b/files/de/web/javascript/reference/errors/negative_repetition_count/index.html @@ -0,0 +1,44 @@ +--- +title: 'RangeError: repeat count must be non-negative' +slug: Web/JavaScript/Reference/Fehler/Negative_repetition_count +tags: + - Errors + - JavaScript + - RangeError +translation_of: Web/JavaScript/Reference/Errors/Negative_repetition_count +--- +
{{jsSidebar("Errors")}}
+ +

Fehlermeldung

+ +
RangeError: repeat count must be non-negative (Firefox)
+RangeError: Invalid count value (Chrome)
+
+ +

Fehlertyp

+ +

{{jsxref("RangeError")}}

+ +

Was ist falsch gelaufen?

+ +

Die {{jsxref("String.prototype.repeat()")}} Methode wurde benutzt. Sie hat einen count Parameter welche die Anzahl der Wiederholungen des Strings angibt. Dieser muss zwischen 0 und kleiner positiv {{jsxref("Infinity")}} sein und kann nicht negativ sein. Das erlaubte Intervall kann wie folgt beschrieben werden: [0, +∞).

+ +

Beispiele

+ +

Falsche Fälle

+ +
'abc'.repeat(-1); // RangeError 
+ +

Richtige Fälle

+ +
'abc'.repeat(0);    // ''
+'abc'.repeat(1);    // 'abc'
+'abc'.repeat(2);    // 'abcabc'
+'abc'.repeat(3.5);  // 'abcabcabc' (count will be converted to integer)
+
+ +

Siehe auch

+ + diff --git a/files/de/web/javascript/reference/errors/no_non-null_object/index.html b/files/de/web/javascript/reference/errors/no_non-null_object/index.html new file mode 100644 index 0000000000..a2c897c5cd --- /dev/null +++ b/files/de/web/javascript/reference/errors/no_non-null_object/index.html @@ -0,0 +1,66 @@ +--- +title: 'TypeError: "x" is not a non-null object' +slug: Web/JavaScript/Reference/Fehler/No_non-null_object +tags: + - Error + - Errors + - JavaScript + - TypeError +translation_of: Web/JavaScript/Reference/Errors/No_non-null_object +--- +
{{JSSidebar("Errors")}}
+ +

Fehlermeldung

+ +
TypeError: "x" is not a non-null object (Firefox)
+TypeError: Property description must be an object: "x" (Chrome)
+TypeError: Invalid value used in weak set (Chrome)
+
+ +

Fehlertyp

+ +

{{jsxref("TypeError")}}

+ +

Was ist falsch gelaufen?

+ +

Ein Objekt wird erwartete aber nicht übergeben. {{jsxref("null")}} ist kein Objekt und funktioniert nicht. In dieser Situation wird ein normales Objekt erwartet.

+ +

Beispiele

+ +

Eigehscgaftsbeschreibung erwartet

+ +

Wenn Methoden wie {{jsxref("Object.create()")}} oder {{jsxref("Object.defineProperty()")}} und {{jsxref("Object.defineProperties()")}} eingesetzt werden, wird als optionale Beschreibung ein Beschreibungsobjekt erwartet. Wenn kein Objekt übergeben wird (z. B. eine Zahl), wird ein Fehler erzeugt:

+ +
Object.defineProperty({}, 'key', 1);
+// TypeError: 1 is not a non-null object
+
+Object.defineProperty({}, 'key', null);
+// TypeError: null is not a non-null object
+
+ +

Ein valides Beschreibungsobjekt kann wie folgendes aussehen:

+ +
Object.defineProperty({}, 'key', { value: 'foo', writable: false });
+
+ +

WeakMap und WeakSet Objekte benötigen Objektschlüssel

+ +

{{jsxref("WeakMap")}} und {{jsxref("WeakSet")}} Objekte speichern Objektschlüssel. Man kann keine anderen Schlüssel verwenden.

+ +
var ws = new WeakSet();
+ws.add('foo');
+// TypeError: "foo" is not a non-null object
+ +

Stattdessen sollte folgendes verwendet werden:

+ +
ws.add({foo: 'bar'});
+ws.add(window);
+
+ +

Siehe auch

+ + diff --git a/files/de/web/javascript/reference/errors/no_properties/index.html b/files/de/web/javascript/reference/errors/no_properties/index.html new file mode 100644 index 0000000000..d5dc0328b6 --- /dev/null +++ b/files/de/web/javascript/reference/errors/no_properties/index.html @@ -0,0 +1,40 @@ +--- +title: 'TypeError: "x" has no properties' +slug: Web/JavaScript/Reference/Fehler/No_properties +tags: + - Errors + - JavaScript + - TypeError +translation_of: Web/JavaScript/Reference/Errors/No_properties +--- +
{{jsSidebar("Errors")}}
+ +

Fehlermeldung

+ +
TypeError: null has no properties
+TypeError: undefined has no properties
+
+ +

Fehlertyp

+ +

{{jsxref("TypeError")}}.

+ +

Was ist falsch gelaufen?

+ +

Weder {{jsxref("null")}} noch {{jsxref("undefined")}} besitzen Eigenschaften auf die man zugreifen könnte.

+ +

Beispiele

+ +
null.foo;
+// TypeError: null has no properties
+
+undefined.bar;
+// TypeError: undefined has no properties
+
+ +

Siehe auch

+ + diff --git a/files/de/web/javascript/reference/errors/no_variable_name/index.html b/files/de/web/javascript/reference/errors/no_variable_name/index.html new file mode 100644 index 0000000000..a3b63df55d --- /dev/null +++ b/files/de/web/javascript/reference/errors/no_variable_name/index.html @@ -0,0 +1,84 @@ +--- +title: 'SyntaxError: missing variable name' +slug: Web/JavaScript/Reference/Fehler/No_variable_name +tags: + - Error + - Errors + - JavaScript + - SyntaxError +translation_of: Web/JavaScript/Reference/Errors/No_variable_name +--- +
{{jsSidebar("Errors")}}
+ +

Fehlermeldung

+ +
SyntaxError: missing variable name (Firefox)
+SyntaxError: Unexpected token = (Chrome)
+ +

Fehlertyp

+ +

{{jsxref("SyntaxError")}}

+ +

Was ist falsch gelaufen?

+ +

Einer Variablen fehlt ein Name. Das wird zu einem {{jsxref("SyntaxError")}} im Code führen. Vermutlich ist ein Komma irgendwo falsch oder man kämpft mit einem Namen. Völlig verständlich! Dinge zu benennen ist so schwer.

+ +

Beispiele

+ +

Ein Variablenname fehlt

+ +
var = "foo";
+
+ +

Es ist schwer gute Variablennamen zu vergeben. Das geht allen so.

+ +
var ohGodWhy = "foo";
+ +

Reservierte Schlüsselwörter können kein Variablenname sein

+ +

Es gibt ein paar Namen, die reservierte Schlüsselwörter sind. Diese kann man nicht benutzen.

+ +
var debugger = "whoop";
+// SyntaxError: missing variable name
+
+ +

Deklarieren von mehreren Variablen

+ +

Man muss beim Deklarieren von mehreren Variablen besonders auf Kommas aufpassen. Gibt es ein überflüssiges Komma? Wurde aus Versehen ein Komma statt eines Semikolons verwendet?

+ +
var x, y = "foo",
+var x, = "foo"
+
+var first = document.getElementById('one'),
+var second = document.getElementById('two'),
+
+// SyntaxError: missing variable name
+
+ +

Die korrigierte Version:

+ +
var x, y = "foo";
+var x = "foo";
+
+var first = document.getElementById('one');
+var second = document.getElementById('two');
+ +

Arrays

+ +

{{jsxref("Array")}}-Literale in JavaScript benötigen eckige Klammern um die Werte. Folgendes funktioniert nicht:

+ +
var arr = 1,2,3,4,5;
+// SyntaxError: missing variable name
+
+ +

Richtig ist:

+ +
var arr = [1,2,3,4,5];
+ +

Siehe auch

+ + diff --git a/files/de/web/javascript/reference/errors/non_configurable_array_element/index.html b/files/de/web/javascript/reference/errors/non_configurable_array_element/index.html new file mode 100644 index 0000000000..771f480dda --- /dev/null +++ b/files/de/web/javascript/reference/errors/non_configurable_array_element/index.html @@ -0,0 +1,83 @@ +--- +title: 'TypeError: can''t delete non-configurable array element' +slug: Web/JavaScript/Reference/Fehler/Non_configurable_array_element +tags: + - Error + - Errors + - JavaScript + - TypeError +translation_of: Web/JavaScript/Reference/Errors/Non_configurable_array_element +--- +
{{jsSidebar("Errors")}}
+ +

Fehlermeldung

+ +
TypeError: can't delete non-configurable array element (Firefox)
+TypeError: Cannot delete property '2' of [object Array] (Chrome)
+
+ +

Fehlertyp

+ +

{{jsxref("TypeError")}}

+ +

Was ist falsch gelaufen?

+ +

Es wurde versucht die Länge eines Arrays zu kürzen obwohl eines der Arrayelemente nicht Konfigurierbar(non-configurable) ist. Beim Kürzen eines Arrays werden die Elemente hinter der neuen Länge gelöscht, was in dieser Situation nicht funktioniert.

+ +

Das configurable Attribut kontrolliert, ob eine Eigenschaft von einem Objekt gelöscht werden kann und seine Attribute (anders als writable) geändert werden können.

+ +

Eigenschaften von einem Objekt, dass von einem Array-Initialisierer erstellt wurden, sind konfigurierbar. Immer, wenn zum Beispiel {{jsxref("Object.defineProperty()")}} eingesetzt wird, ist die Eigenschaft nicht ohne weiteres konfigurierbar.

+ +

Beispiele

+ +

Nicht konfigurierbare Eigenschaften mit Object.defineProperty erstellen

+ +

Die {{jsxref("Object.defineProperty()")}} Funktion erstellt nicht konfiguriertbare Eigenschaften wenn sie nicht extra als konfigurierbar spezifiziert sind.

+ +
var arr = [];
+Object.defineProperty(arr, 0, {value: 0});
+Object.defineProperty(arr, 1, {value: "1"});
+
+arr.length = 1;
+// TypeError: can't delete non-configurable array element
+
+ +

Die Elemente müssen als Konfigurierbar eingestellt werden, wenn das Array später im Quelltext gekürzt werden soll.

+ +
var arr = [];
+Object.defineProperty(arr, 0, {value: 0, configurable: true});
+Object.defineProperty(arr, 1, {value: "1", configurable: true});
+
+arr.length = 1;
+
+ +

Ein Array versiegeln (seal)

+ +

Die {{jsxref("Object.seal()")}} Funktion markiert alle existirenden Elements als nicht Konfugurierbar.

+ +
var arr = [1,2,3];
+Object.seal(arr);
+
+arr.length = 1;
+// TypeError: can't delete non-configurable array element
+
+ +

Man muss den Aufruf von {{jsxref("Object.seal()")}} entfernen oder ein Kopie des Arrays machen. Im fall einer Kopie führt das Kürzen des kopierten Arrays zu keiner Änderung des Original Arrays.

+ +
var arr = [1,2,3];
+Object.seal(arr);
+
+// Copy the initial array to shorten the copy
+var copy = Array.from(arr);
+copy.length = 1;
+// arr.length == 3
+
+ +

Siehe auch

+ + diff --git a/files/de/web/javascript/reference/errors/not_a_codepoint/index.html b/files/de/web/javascript/reference/errors/not_a_codepoint/index.html new file mode 100644 index 0000000000..8d72c3be4b --- /dev/null +++ b/files/de/web/javascript/reference/errors/not_a_codepoint/index.html @@ -0,0 +1,55 @@ +--- +title: 'RangeError: argument is not a valid code point' +slug: Web/JavaScript/Reference/Fehler/Not_a_codepoint +tags: + - Errors + - JavaScript + - RangeError +translation_of: Web/JavaScript/Reference/Errors/Not_a_codepoint +--- +
{{jsSidebar("Errors")}}
+ +

Fehlermeldung

+ +
RangeError: {0} is not a valid code point (Firefox)
+RangeError: Invalid code point {0} (Chrome)
+
+ +

Fehlertyp

+ +

{{jsxref("RangeError")}}

+ +

Was ist falsch gelaufen?

+ +

Die {{jsxref("String.fromCodePoint()")}} Methode erwartet gültige Codepoint.

+ +

Ein Codepoint  ist ein Wert im Unicode Coderaum, der als Integer im Wertebereich zwischen 0 und 0x10FFFF liegt.

+ +

Die Verwendung von {{jsxref("NaN")}} , negativen Integern (-1), nicht Integern (3.14) und Werten die größer als 0x10FFFF (1114111) sind, werden einen Fehler bei dieser Methode produzieren.

+ +

Beispiele

+ +

Ungültige Fälle

+ +
String.fromCodePoint('_');      // RangeError
+String.fromCodePoint(Infinity); // RangeError
+String.fromCodePoint(-1);       // RangeError
+String.fromCodePoint(3.14);     // RangeError
+String.fromCodePoint(3e-2);     // RangeError
+String.fromCodePoint(NaN);      // RangeError
+ +

Gültige Fälle

+ +
String.fromCodePoint(42);       // "*"
+String.fromCodePoint(65, 90);   // "AZ"
+String.fromCodePoint(0x404);    // "\u0404"
+String.fromCodePoint(0x2F804);  // "\uD87E\uDC04"
+String.fromCodePoint(194564);   // "\uD87E\uDC04"
+String.fromCodePoint(0x1D306, 0x61, 0x1D307) // "\uD834\uDF06a\uD834\uDF07"
+
+ +

Siehe auch

+ + diff --git a/files/de/web/javascript/reference/errors/not_a_constructor/index.html b/files/de/web/javascript/reference/errors/not_a_constructor/index.html new file mode 100644 index 0000000000..42858cf706 --- /dev/null +++ b/files/de/web/javascript/reference/errors/not_a_constructor/index.html @@ -0,0 +1,97 @@ +--- +title: 'TypeError: "x" is not a constructor' +slug: Web/JavaScript/Reference/Fehler/Not_a_constructor +tags: + - Fehler + - JavaScript + - TypeError +translation_of: Web/JavaScript/Reference/Errors/Not_a_constructor +--- +
{{jsSidebar("Errors")}}
+ +

Fehlermeldung

+ +
TypeError: "x" is not a constructor
+
+TypeError: Math is not a constructor
+TypeError: JSON is not a constructor
+TypeError: Symbol is not a constructor
+TypeError: Reflect is not a constructor
+TypeError: Intl is not a constructor
+TypeError: SIMD is not a constructor
+TypeError: Atomics is not a constructor
+
+ +

Fehlertyp

+ +

{{jsxref("TypeError")}}

+ +

Was ist falsch gelaufen?

+ +

Es wurde versucht auf ein Objekt oder eine Variable zuzugreifen welche kein Konstruktor ist. Mehr darüber, was ein Konstruktur ist, finden Sie unter {{Glossary("constructor")}} oder in der Beschreibung des new Operators.

+ +

Es gibt viele globale Objekte, wie {{jsxref("String")}} oder {{jsxref("Array")}}, welche mittels new erstellt werden können. Jedoch funktioniert das bei einigen Objekten nicht und deren Eigenschaften und Methoden sind statisch.

+ +

Die folgenden Standard build-in Objekte sind keine Konstruktoren: {{jsxref("Math")}}, {{jsxref("JSON")}}, {{jsxref("Symbol")}}, {{jsxref("Reflect")}}, {{jsxref("Intl")}}, {{jsxref("SIMD")}}, {{jsxref("Atomics")}}.

+ +

Generelle Funktionen können ebenso nicht als Konstruktor verwendet werden.

+ +

Beispiele

+ +

Ungültige Fälle

+ +
var Car = 1;
+new Car();
+// TypeError: Car is not a constructor
+
+new Math();
+// TypeError: Math is not a constructor
+
+new Symbol();
+// TypeError: Symbol is not a constructor
+
+function* f() {};
+var obj = new f;
+// TypeError: f is not a constructor
+
+ +

Ein car Konstruktor

+ +

Stellen Sie sich vor, Sie erstellen ein Objekt vom Typ vars. Sie wollen dieses Objekt als Car bezeichen und es soll Eigenschaften für make, model und year besitzt. Um dies zu erreichen, schreiben Sie die folgende Funktion:

+ +
function Car(make, model, year) {
+  this.make = make;
+  this.model = model;
+  this.year = year;
+}
+
+ +

Jetzt können Sie wie folgt ein Objekt mit dem Namen mycar erstellen:

+ +
var mycar = new Car('Eagle', 'Talon TSi', 1993);
+ +

Promises

+ +

Bei Rückgabe eines Promises, welches sofort im Status resolved oder rejected ist, brauchen Sie kein neues Promise mit new Promise(...) erstellen und damit zu arbeiten. 

+ +

Folgendes ist nicht erlaubt (der Promise Konstruktor wird nicht korrekt aufgerufen) und wirft eine TypeError: this is not a constructor Exception.

+ +
return new Promise.resolve(true);
+
+ +

Verwenden Sie stattdessen Promise.resolve() oder die statische Methode Promise.reject():

+ +
// Das ist erlaubt, aber unnötig lang:
+return new Promise((resolve, reject) => { resolve(true); })
+
+// Alternative Verwendung der statische Methoden:
+return Promise.resolve(true);
+return Promise.reject(false);
+
+ +

Siehe auch

+ + diff --git a/files/de/web/javascript/reference/errors/not_a_function/index.html b/files/de/web/javascript/reference/errors/not_a_function/index.html new file mode 100644 index 0000000000..a8b66dff17 --- /dev/null +++ b/files/de/web/javascript/reference/errors/not_a_function/index.html @@ -0,0 +1,124 @@ +--- +title: 'TypeError: "x" is not a function' +slug: Web/JavaScript/Reference/Fehler/Not_a_function +tags: + - Errors + - JavaScript + - TypeError +translation_of: Web/JavaScript/Reference/Errors/Not_a_function +--- +
{{jsSidebar("Errors")}}
+ +

Fehlermeldung

+ +
TypeError: "x" is not a function
+
+ +

Fehlertyp

+ +

{{jsxref("TypeError")}}.

+ +

Was ist falsch gelaufen?

+ +

Es wird versucht, ein Wert wie eine Funktion aufzurufen, da aber der Wert eigentlich keine Funktion ist, kommt es zu diesem Fehler. Manchmal erwartet das Programm, dass eine Funktion erstellt wird, was aber nicht der Fall ist.

+ +

Vielleicht ist ein Tippfehler im Funktionsnamen. Manchmal besitzt das aufgerufene Objekt eine Funktion aber auch nicht. Zum Beispiel besitzen JavaScript Objekte keine map Funktion, aber JavaScript Arrays haben diese Funktion.

+ +

Es gibt viele eingebaute Funktionen, die eine (Callback-) Funktion benötigen. Es muss eine Funktion bereitgestellt werden, damit diese Methoden normal funktionieren:

+ + + +

Beispiele

+ +

Ein Schreibfehler im Funktionsnamen

+ +

In diesem Fall passiert es viel zu oft, dass im Name ein Schreibfehler enthält:

+ +
var x = document.getElementByID('foo');
+// TypeError: document.getElementByID is not a function
+
+ +

Der korrekte Funktionsname ist getElementById:

+ +
var x = document.getElementById('foo');
+
+ +

Funktion wird auf dem falschen Objekt aufgerufen

+ +

Für bestimmte Methoden musst eine (callback) Funktion benutzt werden, die nur bei spezifizierten Objekten funktionieren. In diesem Beispiel wird {{jsxref("Array.prototype.map()")}} verwendet, welche nur mit {{jsxref("Array")}} Objekten funktioniert.

+ +
var obj = {a: 13, b: 37, c: 42};
+
+obj.map(function(num) {
+  return num * 2;
+});
+
+// TypeError: "x" is not a function
+ +

Stattdessen muss ein Array verwendet werden:

+ +
var numbers = [1, 4, 9];
+
+numbers.map(function(num) {
+  return num * 2;
+});
+
+// Array [2, 8, 18]
+
+ +

Funktionen teilen einen Namen mit einer existierenden Eigenschaft

+ +

Manchmal, wenn eine Klasse geschrieben wird, haben eine Eigenschaft und eine Funktion den gleichen Namen. Nach dem Aufruf der Funktion denkt der Compiler, dass die Funktion nicht mehr existiert.

+ +
var Dog = function () {
+ this.age = 11;
+ this.color = "black";
+ this.name = "Ralph";
+ return this;
+}
+
+Dog.prototype.name = function(name) {
+ this.name = name;
+ return this;
+}
+
+
+var myNewDog = new Dog();
+myNewDog.name("Cassidy"); //Uncaught TypeError: myNewDog.name is not a function
+
+ +

Stattdessen kann ein anderer Eigenschaftsname benutzt werden:

+ +
var Dog = function () {
+ this.age = 11;
+ this.color = "black";
+ this.dogName = "Ralph"; //Using this.dogName instead of .name
+ return this;
+}
+
+Dog.prototype.name = function(name) {
+ this.dogName = name;
+ return this;
+}
+
+
+var myNewDog = new Dog();
+myNewDog.name("Cassidy"); //Dog { age: 11, color: 'black', dogName: 'Cassidy' }
+
+ +

Siehe auch

+ + diff --git a/files/de/web/javascript/reference/errors/not_defined/index.html b/files/de/web/javascript/reference/errors/not_defined/index.html new file mode 100644 index 0000000000..030c47536b --- /dev/null +++ b/files/de/web/javascript/reference/errors/not_defined/index.html @@ -0,0 +1,70 @@ +--- +title: 'ReferenceError: "x" is not defined' +slug: Web/JavaScript/Reference/Fehler/Not_defined +tags: + - Error + - JavaScript + - ReferenceError +translation_of: Web/JavaScript/Reference/Errors/Not_defined +--- +
{{jsSidebar("Errors")}}
+ +

Fehlermeldung

+ +
ReferenceError: "x" is not defined
+
+ +

Fehlertyp

+ +

{{jsxref("ReferenceError")}}.

+ +

Was ist falsch gelaufen?

+ +

Es gibt eine Referenz auf eine Variable, die nicht existiert. Diese Variable muss deklariert werden; oder man muss sicherstellen, dass sie im Skript zugänglich ist; oder sich im aktuellen {{Glossary("scope")}} befindet.

+ +
+

Hinweis: Wenn Sie eine Bibliothek nutzen (wie z.B. jQuery), stellen Sie sicher, dass diese tatsächlich geladen ist, bevor Sie auf dessen Variablen (z. B. "$") zugreifen. Schreiben Sie das {{HTMLElement("script")}} Element, welches die Bibliothek lädt vor den Code, der die Bibliothek verwendet.

+
+ +

Beispiele

+ +

Variable nicht deklariert

+ +
foo.substring(1); // ReferenceError: foo is not defined
+
+ +

Die "foo" Variable ist nirgends deklariert. Die Variable muss ein String sein, damit die Methode {{jsxref("String.prototype.substring()")}} funktioniert.

+ +
var foo = "bar";
+foo.substring(1); // "ar"
+ +

Falscher Gültigkeitsbereich

+ +

Eine Variable muss im aktuellem Kontext verfügbar sein. Variablen, die innerhalb einer Funktion definiert sind, können nicht von außerhalb erreicht werden, da diese nur im Gültigkeitsbereich der Funktion existieren.

+ +
function numbers() {
+  var num1 = 2,
+      num2 = 3;
+  return num1 + num2;
+}
+
+console.log(num1); // ReferenceError "num1" is not defined.
+ +

Wobei aus einer Methode kann man auf alle Variablen und Methoden zugreifen, die im gleichen Gültigkeitsbereich definiert worden sind. Kurz gesagt, eine Methode, die im globalen Gültigkeitsbereich definiert worden ist, kann auf alle Variablen zugreifen, die im globalen Gültigkeitsbereich definiert wurden.

+ +
var num1 = 2,
+    num2 = 3;
+
+function numbers() {
+  return num1 + num2;
+}
+
+console.log(numbers()); // 5
+ +

Siehe auch

+ + diff --git a/files/de/web/javascript/reference/errors/precision_range/index.html b/files/de/web/javascript/reference/errors/precision_range/index.html new file mode 100644 index 0000000000..d03b4203c5 --- /dev/null +++ b/files/de/web/javascript/reference/errors/precision_range/index.html @@ -0,0 +1,96 @@ +--- +title: 'RangeError: precision is out of range' +slug: Web/JavaScript/Reference/Fehler/Precision_range +tags: + - Errors + - JavaScript + - RangeError +translation_of: Web/JavaScript/Reference/Errors/Precision_range +--- +
{{jsSidebar("Errors")}}
+ +

Fehlermeldung

+ +
RangeError: precision {0} out of range (Firefox)
+RangeError: toExponential() argument must be between 0 and 20 (Chrome)
+RangeError: toFixed() digits argument must be between 0 and 20 (Chrome)
+RangeError: toPrecision() argument must be between 1 and 21 (Chrome)
+
+ +

Fehlertyp

+ +

{{jsxref("RangeError")}}

+ +

Was ist falsch gelaufen?

+ +

Das übergebene Argument für die Genauigkeit ist, für einer der folgenden Funktionen, ausserhalb des gültigen Bereiches:

+ + + +

Der gülitge Bereich für diese Methoden liegt im normal Fall zwischen 0 und 20 (oder 21). Wobei die ECMAScript Spezifikation erlaubt eine Erweiterung de Bereiches.

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
MethodFirefox (SpiderMonkey)Chrome, Opera (V8)
{{jsxref("Number.prototype.toExponential()")}}0 bis 1000 bis 20
{{jsxref("Number.prototype.toFixed()")}}-20 bis1000 bis 20
{{jsxref("Number.prototype.toPrecision()")}}1 bis 1001 bis 21
+ +

Beispiele

+ +

Ungültige Fälle

+ +
77.1234.toExponential(-1);  // RangeError
+77.1234.toExponential(101); // RangeError
+
+2.34.toFixed(-100);         // RangeError
+2.34.toFixed(1001);         // RangeError
+
+1234.5.toPrecision(-1);     // RangeError
+1234.5.toPrecision(101);    // RangeError
+
+ +

Gültige Fälle

+ +
77.1234.toExponential(4); // 7.7123e+1
+77.1234.toExponential(2); // 7.71e+1
+
+2.34.toFixed(1); // 2.3
+2.35.toFixed(1); // 2.4 (zu beachten ist, das in diesem Fall aufgerundet wird)
+
+5.123456.toPrecision(5); // 5.1235
+5.123456.toPrecision(2); // 5.1
+5.123456.toPrecision(1); // 5
+
+ +

Siehe auch

+ + diff --git a/files/de/web/javascript/reference/errors/property_access_denied/index.html b/files/de/web/javascript/reference/errors/property_access_denied/index.html new file mode 100644 index 0000000000..d4feb4feb7 --- /dev/null +++ b/files/de/web/javascript/reference/errors/property_access_denied/index.html @@ -0,0 +1,47 @@ +--- +title: 'Error: Permission denied to access property "x"' +slug: Web/JavaScript/Reference/Fehler/Property_access_denied +tags: + - Error + - Errors + - JavaScript + - Security +translation_of: Web/JavaScript/Reference/Errors/Property_access_denied +--- +
{{jsSidebar("Errors")}}
+ +

Fehlermeldung

+ +
Error: Permission denied to access property "x"
+
+ +

Fehlertyp

+ +

{{jsxref("Error")}}.

+ +

Was ist falsch gelaufen?

+ +

Es wurde versucht auf ein Objekt zuzugreifen, wofür man nicht ausreichend berechtig ist. In den meisten Fällen handelt es sich um ein {{HTMLElement("iframe")}} Element, das von einer anderen Domäne geladen wurde und die Same-Origin Policy verletzt.

+ +

Beispiele

+ +
<!DOCTYPE html>
+<html>
+  <head>
+    <iframe id="myframe" src="http://www1.w3c-test.org/common/blank.html"></iframe>
+    <script>
+      onload = function() {
+        console.log(frames[0].document);
+        // Error: Permission denied to access property "document"
+      }
+    </script>
+  </head>
+  <body></body>
+</html>
+ +

Siehe auch

+ + diff --git a/files/de/web/javascript/reference/errors/read-only/index.html b/files/de/web/javascript/reference/errors/read-only/index.html new file mode 100644 index 0000000000..bb56305880 --- /dev/null +++ b/files/de/web/javascript/reference/errors/read-only/index.html @@ -0,0 +1,78 @@ +--- +title: 'TypeError: "x" is read-only' +slug: Web/JavaScript/Reference/Fehler/Read-only +tags: + - Errors + - JavaScript + - TypeError +translation_of: Web/JavaScript/Reference/Errors/Read-only +--- +
{{jsSidebar("Errors")}}
+ +

Fehlermeldung

+ +
TypeError: "x" is read-only (Firefox)
+TypeError: 0 is read-only (Firefox)
+TypeError: Cannot assign to read only property 'x' of #<Object> (Chrome)
+TypeError: Cannot assign to read only property '0' of [object Array] (Chrome)
+
+ +

Fehlertyp

+ +

{{jsxref("TypeError")}}

+ +

Was ist falsch gelaufen?

+ +

Die globale Variable oder Objekteigenschaften werden als nur lesbare Eigenschaften definiert (technisch wird das mit der writable Eigenschaft erreicht).

+ +

Der Fehler tritt nur im strict mode auf. Im normalen Modus wird eine Zuweisung still ignoriert.

+ +

Beispiele

+ +

Nicht valide Fälle

+ +

Nur lesbare Eigenschaften sind nicht sehr weit verbreitet, aber sie können mit {{jsxref("Object.defineProperty()")}} oder {{jsxref("Object.freeze()")}} erstellt werden.

+ +
'use strict';
+var obj = Object.freeze({name: 'Elsa', score: 157});
+obj.score = 0;  // TypeError
+
+'use strict';
+Object.defineProperty(this, 'LUNG_COUNT', {value: 2, writable: false});
+LUNG_COUNT = 3;  // TypeError
+
+'use strict';
+var frozenArray = Object.freeze([0, 1, 2]);
+frozenArray[0]++;  // TypeError
+
+ +

Zudem gibt es ein paar standard Eigenschaft in JavaScript, die nicht überschrieben werden können. Da währen zum Beispiel mathematische Konstanten.

+ +
'use strict';
+Math.PI = 4;  // TypeError
+
+ +

Die globale Variable undefined ist auch nur lesbar, sodass der berüchtigte Fehler "undefined is not a function" nicht wie folgt umgangen werden kann:

+ +
'use strict';
+undefined = function() {};  // TypeError: "undefined" is read-only
+
+ +

Valide Fälle

+ +
'use strict';
+var obj = Object.freeze({name: 'Score', points: 157});
+obj = {name: obj.name, points: 0};   // replacing it with a new object works
+
+'use strict';
+var LUNG_COUNT = 2;  // a `var` works, because it's not read-only
+LUNG_COUNT = 3;  // ok (anatomically unlikely, though)
+
+ +

Siehe auch

+ + diff --git a/files/de/web/javascript/reference/errors/redeclared_parameter/index.html b/files/de/web/javascript/reference/errors/redeclared_parameter/index.html new file mode 100644 index 0000000000..e80836e50f --- /dev/null +++ b/files/de/web/javascript/reference/errors/redeclared_parameter/index.html @@ -0,0 +1,61 @@ +--- +title: 'SyntaxError: redeclaration of formal parameter "x"' +slug: Web/JavaScript/Reference/Fehler/Redeclared_parameter +tags: + - Errors + - JavaScript + - SyntaxError +translation_of: Web/JavaScript/Reference/Errors/Redeclared_parameter +--- +
{{jsSidebar("Errors")}}
+ +

Fehlermeldung

+ +
SyntaxError: redeclaration of formal parameter "x" (Firefox)
+SyntaxError: Identifier "x" has already been declared (Chrome)
+
+ +

Fehlertyp

+ +

{{jsxref("SyntaxError")}}

+ +

Was ist falsch gelaufen?

+ +

Der selbe Variablenname wird für einen Funktionsparameter benutzt und dann in einer let Zuweisung im Funktionskörper wieder neu deklariert. Das Neudeklarieren der gleichen Variablen in der selben Funktion oder im selben Block mit let ist in JavaScript nicht erlaubt.

+ +

Beispiele

+ +

In diesem Fall wird der Parameter "arg" neu deklariert.

+ +
function f(arg) {
+  let arg = 'foo';
+}
+
+// SyntaxError: redeclaration of formal parameter "arg"
+
+ +

Wenn der Wert von "arg" im Funktionskörper geändert werden soll, kann das getan werden, aber ohne die selbe Variable neu zu deklarieren. Oder anders gesagt, man kann das let Schlüsselwort weg lassen. Wenn eine neue Variable erstellt werden soll, muss sie umbenannt werden, damit es keine Konflikte mit dem Funktionsparameter mehr gibt.

+ +
function f(arg) {
+  arg = 'foo';
+}
+
+function f(arg) {
+  let bar = 'foo';
+}
+
+ +

Kompatibilitätshinweise

+ + + +

Siehe auch

+ + diff --git a/files/de/web/javascript/reference/errors/reduce_of_empty_array_with_no_initial_value/index.html b/files/de/web/javascript/reference/errors/reduce_of_empty_array_with_no_initial_value/index.html new file mode 100644 index 0000000000..a1a9a43748 --- /dev/null +++ b/files/de/web/javascript/reference/errors/reduce_of_empty_array_with_no_initial_value/index.html @@ -0,0 +1,88 @@ +--- +title: 'TypeError: Reduce of empty array with no initial value' +slug: Web/JavaScript/Reference/Fehler/Reduce_of_empty_array_with_no_initial_value +tags: + - Error + - JavaScript + - Reference + - TypeError +translation_of: Web/JavaScript/Reference/Errors/Reduce_of_empty_array_with_no_initial_value +--- +
{{jsSidebar("Errors")}}
+ +

Fehlermeldung

+ +
TypeError: reduce of empty array with no initial value
+
+ +

Fehlertyp

+ +

{{jsxref("TypeError")}}

+ +

Was ist falsch gelaufen?

+ +

In JavaScript gibt es einige Reduktionsfunktionen:

+ + + +

Diese Funktionen haben den optionalen initialValue Parameter (welcher als erster Parameter beim ersten Aufruf der callback Funktion benutzt wird). Immer, wenn dieser Wert nicht angegeben wird, wird das erste Element des {{jsxref("Array", "Arrays")}} oder {{jsxref("TypedArray", "TypedArrays")}} als Initialwert benutzt. Dieser Fehler tritt auf, wenn das Array leer ist, weil es in diesem Fall keinen Initialwert gibt.

+ +

Beispiele

+ +

Nicht valide Fälle

+ +

Dieses Problem tritt öfter bei einer Kombination mit einem Filter ({{jsxref("Array.prototype.filter()")}}, {{jsxref("TypedArray.prototype.filter()")}}), welcher Elemente aus der Liste entfernt. Dieser lässt kein Element als Initialwert in der Liste zurück.

+ +
var ints = [0, -1, -2, -3, -4, -5];
+ints.filter(x => x > 0)         // Entfernt alle Elemente
+    .reduce((x, y) => x + y)    // no more elements to use for the initial value.
+ +

Der gleiche Fehler kann bei einem Tippfehler passieren oder, bei einer unerwarteten Anzahl von Elementen in einer Liste.

+ +
var names = document.getElementsByClassName("names");
+var name_list = Array.prototype.reduce.call(names, (acc, name) => acc + ", " + name);
+
+ +

Valide Fälle

+ +

Diese Problem kann mit zwei Wegen gelöst werden.

+ +

Ein Weg ist es, einen initialValue als neutrales Element des Operators anzugeben, so wie 0 bei der Addition, 1 bei der Multiplikation oder ein leerer String bei einer Konkatination.

+ +
var ints = [0, -1, -2, -3, -4, -5];
+ints.filter(x => x < 0)         // removes all elements
+    .reduce((x, y) => x + y, 0) // the initial value is the neutral element of the addition
+
+ +

Ein anderer Weg ist es den Fall eines leeren Arrays schon vor dem Aufruf von reduce zu behandeln oder einen Dummywert als Initialwert in der callback-Funktion zu benutzen.

+ +
var names = document.getElementsByClassName("names");
+
+var name_list1 = "";
+if (names1.length >= 1)
+  name_list1 = Array.prototype.reduce.call(names, (acc, name) => acc + ", " + name);
+// name_list1 == "" when names is empty.
+
+var name_list2 = Array.prototype.reduce.call(names, (acc, name) => {
+  if (acc == "") // initial value
+    return name;
+  return acc + ", " + name;
+}, "");
+// name_list2 == "" when names is empty.
+
+ +

Siehe auch

+ + diff --git a/files/de/web/javascript/reference/errors/reserved_identifier/index.html b/files/de/web/javascript/reference/errors/reserved_identifier/index.html new file mode 100644 index 0000000000..a483f4cd1a --- /dev/null +++ b/files/de/web/javascript/reference/errors/reserved_identifier/index.html @@ -0,0 +1,80 @@ +--- +title: 'SyntaxError: "x" is a reserved identifier' +slug: Web/JavaScript/Reference/Fehler/Reserved_identifier +tags: + - Error + - Errors + - JavaScript + - SyntaxError +translation_of: Web/JavaScript/Reference/Errors/Reserved_identifier +--- +
{{jsSidebar("Errors")}}
+ +

Fehlermeldung

+ +
SyntaxError: "x" is a reserved identifier (Firefox)
+SyntaxError: Unexpected reserved word (Chrome)
+ +

Fehlertyp

+ +

{{jsxref("SyntaxError")}}

+ +

Was ist falsch gelaufen?

+ +

Reservierte Schlüsselwörter führen zu einem Fehler, wenn sie als Bezeichner verwendet werden. Im Strict Mode und im Normalen Mode führen folgende Schlüsselwörter zu einem Fehler:

+ + + +

Die folgenden Schlüsselwörter führen nur im Strict Mode zu einem Fehler:

+ + + +

Beispiele

+ +

Reservierte Schlüsselwörter im Strict und Normalen Mode

+ +

Derenum Bezeichner ist generell reserviert.

+ +
var enum = { RED: 0, GREEN: 1, BLUE: 2 };
+// SyntaxError: enum is a reserved identifier
+
+ +

Im Strict Mode sind weitere Bezeichner reserviert.

+ +
"use strict";
+var package = ["potatoes", "rice", "fries"];
+// SyntaxError: package is a reserved identifier
+
+ +

Man muss die Variablen umbenennen.

+ +
var colorEnum = { RED: 0, GREEN: 1, BLUE: 2 };
+var list = ["potatoes", "rice", "fries"];
+ +

Ältere Browser aktualisieren

+ +

Wenn ein alter Browser eingesetzt wird, der zum Beispiel noch nicht let oder class implementiert, muss der Browser aktualisiert werden, so dass er diese neuen Sprachfunktionen unterstützt.

+ +
"use strict";
+class DocArchiver {}
+
+// SyntaxError: class is a reserved identifier
+// (throws in older browsers only, e.g. Firefox 44 and older)
+
+ +

Siehe auch

+ + diff --git a/files/de/web/javascript/reference/errors/resulting_string_too_large/index.html b/files/de/web/javascript/reference/errors/resulting_string_too_large/index.html new file mode 100644 index 0000000000..e3f0246d13 --- /dev/null +++ b/files/de/web/javascript/reference/errors/resulting_string_too_large/index.html @@ -0,0 +1,49 @@ +--- +title: 'RangeError: repeat count must be less than infinity' +slug: Web/JavaScript/Reference/Fehler/Resulting_string_too_large +tags: + - Errors + - JavaScript + - RangeError +translation_of: Web/JavaScript/Reference/Errors/Resulting_string_too_large +--- +
{{jsSidebar("Errors")}}
+ +

Fehlermeldung

+ +
RangeError: repeat count must be less than infinity and not overflow maximum string size (Firefox)
+
+RangeError: Invalid count value (Chrome)
+
+ +

Fehlertyp

+ +

{{jsxref("RangeError")}}

+ +

Was ist falsch gelaufen?

+ +

Die {{jsxref("String.prototype.repeat()")}} Methode wurde benutzt. Sie hat einen count Parameter welche die Anzahl der Wiederholungen des Strings angibt. Dieser muss zwischen 0 und kleiner positiv {{jsxref("Infinity")}} sein und kann nicht negativ sein. Das erlaubte Intervall kann wie folgt beschrieben werden: [0, +∞).

+ +

Der Ergebnisstring kann zudem nicht länger als die maximale Stringlänge sein, welche sich je nach JavaScript-Umgebung unterscheiden kann. In Firefox (SpiderMonkey) ist die maximale Stringlänge 228 -1 (0xFFFFFFF).

+ +

Beispiele

+ +

Falsche Fälle

+ +
'abc'.repeat(Infinity); // RangeError
+'a'.repeat(2**28);      // RangeError
+
+ +

Richtige Fälle

+ +
'abc'.repeat(0);    // ''
+'abc'.repeat(1);    // 'abc'
+'abc'.repeat(2);    // 'abcabc'
+'abc'.repeat(3.5);  // 'abcabcabc' (count will be converted to integer)
+
+ +

Siehe auch

+ + diff --git a/files/de/web/javascript/reference/errors/stmt_after_return/index.html b/files/de/web/javascript/reference/errors/stmt_after_return/index.html new file mode 100644 index 0000000000..be395c3b83 --- /dev/null +++ b/files/de/web/javascript/reference/errors/stmt_after_return/index.html @@ -0,0 +1,77 @@ +--- +title: 'Warning: unreachable code after return statement' +slug: Web/JavaScript/Reference/Fehler/Stmt_after_return +tags: + - JavaScript + - Warning +translation_of: Web/JavaScript/Reference/Errors/Stmt_after_return +--- +
{{jsSidebar("Errors")}}
+ +

Fehlermeldung

+ +
Warning: unreachable code after return statement (Firefox)
+
+ +

Fehlertyp

+ +

Warnung

+ +

Was ist falsch gelaufen?

+ +

Nicht erreichbarer Code nach einem return Statement tritt in folgenden Fällen auf:

+ + + +

Wenn eine Anweisung nach einer gültigen return Anweisung existiert, dann wird diese Warnmeldung ausgegeben, um aufzuzeigen, das der nachfolgende Quellcode nie ausgeführt wird.

+ +

Warum sollte man Semikolons am Ende einer return Anweisung verwenden? Da im Falle einer return Anweisung ohne Semikolon, die Absicht des Entwicklers nicht klar ist. Es stellt sich die Frage, ob die Anweisung nach dem return als Rückgabewert der Methode zu sehen ist, oder sollte die Ausführung gleich beim return beendet werden. Hier zeigt die Warnung an, dass es sich um einen uneindeutige Situation handelt.

+ +

Warnungen werden nicht erzeugt wenn nach einem semikolonlosen return folgende Anweisungen folgen:

+ + + +

Beispiele

+ +

Fehlerfälle

+ +
function f() {
+  var x = 3;
+  x += 4;
+  return x;   // die return Anweisung beendet die Methode sofort.
+  x -= 3;     // somit ist dieser Code nicht erreichbar und wird nie ausgeführt
+}
+
+function f() {
+  return     // diese Zeile ist äquivalent zu `return;`
+    3 + 4;   // somit kann diese Code-Zeile nie erreicht werden
+}
+
+ +

Gültige Fälle

+ +
function f() {
+  var x = 3;
+  x += 4;
+  x -= 3;
+  return x;  // OK: return ist die letzte Anweisung in der Methode
+}
+
+function f() {
+  return 3 + 4  // OK: return ohne Semikolon, aber mit einem Ausdruck auf der gleiche Zeile
+}
+
+ +

Siehe auch

+ + diff --git a/files/de/web/javascript/reference/errors/strict_non_simple_params/index.html b/files/de/web/javascript/reference/errors/strict_non_simple_params/index.html new file mode 100644 index 0000000000..a288a81a10 --- /dev/null +++ b/files/de/web/javascript/reference/errors/strict_non_simple_params/index.html @@ -0,0 +1,111 @@ +--- +title: 'SyntaxError: "use strict" not allowed in function with non-simple parameters' +slug: Web/JavaScript/Reference/Fehler/Strict_Non_Simple_Params +tags: + - Errors + - JavaScript + - TypeError +translation_of: Web/JavaScript/Reference/Errors/Strict_Non_Simple_Params +--- +
{{jsSidebar("Errors")}}
+ +

Fehlermeldung

+ +
Firefox:
+SyntaxError: "use strict" not allowed in function with default parameter
+SyntaxError: "use strict" not allowed in function with rest parameter
+SyntaxError: "use strict" not allowed in function with destructuring parameter
+
+Chrome:
+SyntaxError: Illegal 'use strict' directive in function with non-simple parameter list
+
+ +

Fehlertyp

+ +

{{jsxref("SyntaxError")}}.

+ +

Was ist falsch gelaufen?

+ +

Eine "use strict" Direktive steht am Anfang einer Funktion, die einen der folgende Parameter hat:

+ + + +

Eine "use strict" Direktive ist am Anfang solcher Funktionen durch die ECMAScript Spezifikation nicht erlaubt.

+ +

Beispiele

+ +

Funktionsstatement

+ +

In diesem Fall hat die Funktion sum zwei Standardparameter a=1 und b=2:

+ +
function sum(a = 1, b = 2) {
+  // SyntaxError: "use strict" not allowed in function with default parameter
+  'use strict';
+  return a + b;
+}
+
+ +

Wenn die Funktion im Strict Mode sein soll und das Skript oder die umschließende FUnktion auch für den Strict Mode in Ordnung ist, kann man die "use strict" Direktive nach außen verschieben:

+ +
'use strict';
+function sum(a = 1, b = 2) {
+  return a + b;
+}
+
+ +

Funktionsausdruck

+ +

Bei eine Funktionsausdruck kann ein andere Workaround genutzt werden:

+ +
var sum = function sum([a, b]) {
+  // SyntaxError: "use strict" not allowed in function with destructuring parameter
+  'use strict';
+  return a + b;
+};
+
+ +

Dieses kann zu folgendem Ausdruck konvertiert werden:

+ +
var sum = (function() {
+  'use strict';
+  return function sum([a, b]) {
+    return a + b;
+  };
+})();
+
+ +

Pfeilfunktionen

+ +

Wenn eine Pfeilfunktion auf die this Variable zugreift, so kann eine umschließende Pfeilfunktion benutzt werden:

+ +
var callback = (...args) => {
+  // SyntaxError: "use strict" not allowed in function with rest parameter
+  'use strict';
+  return this.run(args);
+};
+
+ +

Dieses kann zu folgendem Ausdruck konvertiert werden:

+ +
var callback = (() => {
+  'use strict';
+  return (...args) => {
+    return this.run(args);
+  };
+})();
+
+ +

Siehe auch

+ + diff --git a/files/de/web/javascript/reference/errors/too_much_recursion/index.html b/files/de/web/javascript/reference/errors/too_much_recursion/index.html new file mode 100644 index 0000000000..0010afd90a --- /dev/null +++ b/files/de/web/javascript/reference/errors/too_much_recursion/index.html @@ -0,0 +1,54 @@ +--- +title: 'InternalError: too much recursion' +slug: Web/JavaScript/Reference/Fehler/Too_much_recursion +tags: + - Errors + - InternalError + - JavaScript +translation_of: Web/JavaScript/Reference/Errors/Too_much_recursion +--- +
{{jsSidebar("Errors")}}
+ +

Fehlermeldung

+ +
InternalError: too much recursion
+
+ +

Fehlertyp

+ +

{{jsxref("InternalError")}}.

+ +

Was ist falsch gelaufen?

+ +

Eine Funktion, die sich selbst aufruft, wird rekursive Funktion genannt. In manchen Fällen ist Rekursion mit einer Schleife vergleichbar. Beide führen den gleichen Code mehrfach aus und beide brauchen eine Abbruchbedingung (um Endlosschleifen bzw. Endlosrekursion zu vermeiden). Wenn zu tiefe Rekursion oder Endlosrekursion auftritt, erzeugt JavaScript diesen Fehler.

+ +

Beispiele

+ +

Diese rekursive Methode wird bis zur Abbruchbedingung 10 mal durchlaufen.

+ +
function schleife(x) {
+  if (x >= 10) // "x >= 10" ist die Abbruchsbedingung
+    return;
+  // zu wiederholende Codezeilen
+  schleife(x + 1); // rekursiver Methodenaufruf
+}
+schleife(0);
+ +

Wird die Abbruchsbedingung auf eine zu hohe Wert gesetzt, ist die Rekursionstiefe zu hoch und es wird einen Fehler erzeugt:

+ +
function boeseSchleife(x) {
+  if (x >= 1000000000000)
+    return;
+  // zu wiederholende Codezeilen
+  boeseSchleife(x + 1);
+}
+boeseSchleife(0);
+
+// InternalError: too much recursion
+ +

Siehe auch

+ + diff --git a/files/de/web/javascript/reference/errors/typed_array_invalid_arguments/index.html b/files/de/web/javascript/reference/errors/typed_array_invalid_arguments/index.html new file mode 100644 index 0000000000..2e7fa8f0b3 --- /dev/null +++ b/files/de/web/javascript/reference/errors/typed_array_invalid_arguments/index.html @@ -0,0 +1,77 @@ +--- +title: 'TypeError: invalid arguments' +slug: Web/JavaScript/Reference/Fehler/Typed_array_invalid_arguments +tags: + - Error + - Errors + - JavaScript + - TypeError +translation_of: Web/JavaScript/Reference/Errors/Typed_array_invalid_arguments +--- +
{{jsSidebar("Errors")}}
+ +

Fehlermeldung

+ +
TypeError: invalid arguments (Firefox)
+ +

Fehlertyp

+ +

{{jsxref("TypeError")}}

+ +

Was ist falsch gelaufen?

+ +

Der Typed Array Konstruktor erwartet entweder

+ + + +

um ein neues Typed Array zu erstelltn. Andere Argumente im Konstruktor erstellen kein valides Typed Array.

+ +

Beispiele

+ +

Typed Arrays, zum Beispiel ein {{jsxref("Uint8Array")}}, können nicht von einem String erstellt werden. Tatsächlich können String nicht in typisierten Arrays enthalten sein.

+ +
var ta = new Uint8Array("nope");
+// TypeError: invalid arguments
+
+ +

Verschiedene Wege um ein valides {{jsxref("Uint8Array")}} Objekt zu erstellen:

+ +
// From a length
+var uint8 = new Uint8Array(2);
+uint8[0] = 42;
+console.log(uint8[0]); // 42
+console.log(uint8.length); // 2
+console.log(uint8.BYTES_PER_ELEMENT); // 1
+
+// From an array
+var arr = new Uint8Array([21,31]);
+console.log(arr[1]); // 31
+
+// From another TypedArray
+var x = new Uint8Array([21, 31]);
+var y = new Uint8Array(x);
+console.log(y[0]); // 21
+
+// From an ArrayBuffer
+var buffer = new ArrayBuffer(8);
+var z = new Uint8Array(buffer, 1, 4);
+
+// From an iterable
+var iterable = function*(){ yield* [1,2,3]; }();
+var uint8 = new Uint8Array(iterable);
+// Uint8Array[1, 2, 3]
+
+ +

Siehe auch

+ + diff --git a/files/de/web/javascript/reference/errors/undeclared_var/index.html b/files/de/web/javascript/reference/errors/undeclared_var/index.html new file mode 100644 index 0000000000..b7c8b09165 --- /dev/null +++ b/files/de/web/javascript/reference/errors/undeclared_var/index.html @@ -0,0 +1,67 @@ +--- +title: 'ReferenceError: assignment to undeclared variable "x"' +slug: Web/JavaScript/Reference/Fehler/Undeclared_var +tags: + - Errors + - JavaScript + - ReferenceError + - Strict Mode +translation_of: Web/JavaScript/Reference/Errors/Undeclared_var +--- +
{{jsSidebar("Errors")}}
+ +

Fehlermeldung

+ +
ReferenceError: assignment to undeclared variable "x" (Firefox)
+ReferenceError: "x" is not defined (Chrome)
+ReferenceError: Variable undefined in strict mode (Edge)
+
+ +

Fehlertyp

+ +

{{jsxref("ReferenceError")}} Warnung nur im Strict mode.

+ +

Was ist falsch gelaufen?

+ +

Ein Wert wurde zu einer nicht deklarierten Variablen hinzugefügt. Oder mit anderen Worten, es gibt eine Zuweisung ohne das Schlüsselwort var. Es gibt einige Unterschiede zwischen deklarierten und nicht deklarierten Variablen, die zu unerwarteten Ergebnissen führen kann und weshalb der Fehler im Strict Mode erscheint.

+ +

Drei Dinge über deklarierte und nicht deklarierte Variablen:

+ + + +

Mehr Details und Beispiele findet man auf der var Referenzseite.

+ +

Fehler mit nicht deklarierten Variablenzuweisungen gibt es nur im Strict Mode Code. Außerhalb davon wird die Warnung einfach Ignoriert.

+ +

Beispiele

+ +

Falsche Fälle

+ +

In diesem Fall ist die "bar" eine nicht deklarierte Variable.

+ +
function foo() {
+  'use strict';
+  bar = true;
+}
+foo(); // ReferenceError: assignment to undeclared variable bar
+
+ +

Richtige Fälle

+ +

Um "bar" zu einer deklarierten Variable zu machen, kann das Schlüsselwort var eingesetzt werden.

+ +
function foo() {
+  'use strict';
+  var bar = true;
+}
+foo();
+ +

Siehe auch

+ + diff --git a/files/de/web/javascript/reference/errors/undefined_prop/index.html b/files/de/web/javascript/reference/errors/undefined_prop/index.html new file mode 100644 index 0000000000..fe83564f59 --- /dev/null +++ b/files/de/web/javascript/reference/errors/undefined_prop/index.html @@ -0,0 +1,63 @@ +--- +title: 'ReferenceError: reference to undefined property "x"' +slug: Web/JavaScript/Reference/Fehler/Undefined_prop +tags: + - Errors + - JavaScript + - ReferenceError + - Strict Mode +translation_of: Web/JavaScript/Reference/Errors/Undefined_prop +--- +
{{jsSidebar("Errors")}}
+ +

Fehlermeldung

+ +
ReferenceError: reference to undefined property "x" (Firefox)
+
+ +

Fehlertyp

+ +

{{jsxref("ReferenceError")}} Fehlermeldung tritt nur im  strikten Modus auf.

+ +

Was ist falsch gelaufen?

+ +

Es wird versucht auf eine Eigenschaft zuzugreifen, die nicht existiert. Es gibt zwei Arten um auf Eigenschaften zuzugreifen, siehe Eigenschaften Zugriffsfunktionen auf den Referenzseiten für weitere Details.

+ +

Fehler aufgrund von leeren Eigenschaftsreferenzen treten nur im Quellcode auf, der im strikten Modus geschrieben ist. Im Quellcode der nicht im strikten Modus geschrieben ist, wird der Fehler ohne Meldung ignoriert.

+ +

Beispiele

+ +

Ungültige Fälle

+ +

In diesem Fall ist die Eigenschaft "bar" undefiniert.

+ +
"use strict";
+
+var foo = {};
+foo.bar; // ReferenceError: reference to undefined property "bar"
+
+ +

Gültige Fälle

+ +

Um Fehler zu vermeiden muss man eine Eigenschaft "bar" definieren oder überprüfen, ob die Eigenschaft "bar" existiert, bevor man auf diese zugreift. (z.B.: mit Hilfe der Funktion {{jsxref("Object.prototype.hasOwnProperty()")}}).

+ +
"use strict";
+
+var foo = {};
+
+// Definiert die bar Eigenschaft
+
+foo.bar = "Mond";
+console.log(foo.bar); // "Mond"
+
+// Testet vor dem Zugriff, ob bar existiert.
+
+if (foo.hasOwnProperty("bar")) {
+  console.log(foo.bar);
+}
+ +

Siehe auch

+ + diff --git a/files/de/web/javascript/reference/errors/unexpected_token/index.html b/files/de/web/javascript/reference/errors/unexpected_token/index.html new file mode 100644 index 0000000000..3aff253bfd --- /dev/null +++ b/files/de/web/javascript/reference/errors/unexpected_token/index.html @@ -0,0 +1,47 @@ +--- +title: 'SyntaxError: Unexpected token' +slug: Web/JavaScript/Reference/Fehler/Unexpected_token +tags: + - Fehler + - JavaScript + - Syntaxfehler +translation_of: Web/JavaScript/Reference/Errors/Unexpected_token +--- +
{{jsSidebar("Errors")}}
+ +

Fehlermeldung

+ +
SyntaxError: expected expression, got "x"
+SyntaxError: expected property name, got "x"
+SyntaxError: expected target, got "x"
+SyntaxError: expected rest argument name, got "x"
+SyntaxError: expected closing parenthesis, got "x"
+SyntaxError: expected '=>' after argument list, got "x"
+
+ +

Fehlertyp

+ +

{{jsxref("SyntaxError")}}

+ +

Was ist falsch gelaufen?

+ +

Es wurde eine bestimmte Sprachenstruktur erwartet, aber etwas anderes wurde übermittelt. Es kann sich dabei um einen einfachen Tippfehler handeln.

+ +

Beispiele

+ +

Expression expected (Ausdruck erwartet)

+ +

Zum Beispiel sind Kommas am Ende eines Befehls nicht erlaubt.

+ +
for (let i = 0; i < 5,; i++) {
+  console.log(i);
+}
+// SyntaxError: expected expression, got ')'
+
+ +

Richtig wäre das Komma auszulassen oder ein weiteren Ausdruck hinzuzufügen:

+ +
for (let i = 0; i < 5; i++) {
+  console.log(i);
+}
+
diff --git a/files/de/web/javascript/reference/errors/unexpected_type/index.html b/files/de/web/javascript/reference/errors/unexpected_type/index.html new file mode 100644 index 0000000000..601ec21d43 --- /dev/null +++ b/files/de/web/javascript/reference/errors/unexpected_type/index.html @@ -0,0 +1,67 @@ +--- +title: 'TypeError: "x" is (not) "y"' +slug: Web/JavaScript/Reference/Fehler/Unexpected_type +tags: + - Errors + - JavaScript + - TypeError +translation_of: Web/JavaScript/Reference/Errors/Unexpected_type +--- +
{{jsSidebar("Errors")}}
+ +

Fehlermeldung

+ +
TypeError: "x" is (not) "y"
+
+Examples:
+TypeError: "x" is undefined
+TypeError: "x" is null
+TypeError: "undefined" is not an object
+TypeError: "x" is not an object or null
+TypeError: "x" is not a symbol
+
+ +

Fehlertyp

+ +

{{jsxref("TypeError")}}.

+ +

Was ist falsch gelaufen?

+ +

Der Typ einer Variable ist unpassend. Dieser Fall tritt oft bei {{jsxref("undefined")}}- oder {{jsxref("null")}}-Werten auf.

+ +

Außerdem benötigen bestimmte Metodhen wie {{jsxref("Object.create()")}} oder {{jsxref("Symbol.keyFor()")}} einen bestimmten Typ, der bereitgestellt werden muss.

+ +

Beispiele

+ +

Ungültige Fälle

+ +
// Undefinierte und null-Fälle, bei denen die Substring-Methode nicht funktioniert
+var foo = ;
+foo.substring(1); // TypeError: foo is undefined
+
+var foo = null;
+foo.substring(1); // TypeError: foo is null
+
+
+// Bestimmte Methoden erfordern einen bestimmten Typ
+var foo = {}
+Symbol.keyFor(foo); // TypeError: foo is not a symbol
+
+var foo = 'bar'
+Object.create(foo); // TypeError: "foo" is not an object or null
+
+ +

Den Fehler beheben?

+ +

Um den Nullzeiger auf undefined- oder null-Werte zu beheben, kann z. B. der "typeof"-Operator verwendt werden.

+ +
if (typeof foo !== 'undefined') {
+  // Nun wissen wir, dass foo definiert ist, und können weitermachen.
+}
+ +

Siehe auch

+ + diff --git a/files/de/web/javascript/reference/errors/unnamed_function_statement/index.html b/files/de/web/javascript/reference/errors/unnamed_function_statement/index.html new file mode 100644 index 0000000000..6c148b6ff0 --- /dev/null +++ b/files/de/web/javascript/reference/errors/unnamed_function_statement/index.html @@ -0,0 +1,115 @@ +--- +title: 'SyntaxError: function statement requires a name' +slug: Web/JavaScript/Reference/Fehler/Unnamed_function_statement +tags: + - Error + - Errors + - JavaScript + - SyntaxError +translation_of: Web/JavaScript/Reference/Errors/Unnamed_function_statement +--- +
{{jsSidebar("Errors")}}
+ +

Fehlermeldung

+ +
SyntaxError: function statement requires a name [Firefox]
+SyntaxError: Unexpected token ( [Chrome]
+
+ +

Fehlertyp

+ +

{{jsxref("SyntaxError")}}

+ +

Was ist falsch gelaufen?

+ +

Es gibt eine Funktionsstatement im Code, welches einen Namen benötigt. Man muss überprüfen, wie Funktionen definiert sind und ob diese einen Namen benötigen oder ob diese Funktion ein Funktionsausdruck ist (eine {{Glossary("IIFE")}}) oder ob die Funktion im richtigen Kontext geschrieben ist.

+ +

Beispiele

+ +

Statements vs Ausdrücke

+ +

Ein Funktionsstatement (oder Funktionsdeklaration) benötigt einen Namen. Folgendes funktioniert nicht:

+ +
function () {
+  return 'Hello world';
+}
+// SyntaxError: function statement requires a name
+
+ +

Man kann stattdessen ein Funktionsausdruck (Zuweisung) nutzen:

+ +
var greet = function() {
+  return 'Hello world';
+};
+ +

Manchmal soll auch eine auch eine IIFE (Immediately Invoked Function Expression) sein, welche eine Funktion ist, die nach der Definition direkt ausgeführt wird. Dafür müssen ein paar mehr Klammern benutzt werden:

+ +
(function () {
+
+})();
+ +

Funktionen mit Labeln

+ +

Wenn man ein Funktionslabel benutzt, muss ein Funktionsnamen nach dem function Schlüsselwort stehen. Folgendes funktioniert nicht:

+ +
function Greeter() {
+  german: function () {
+    return "Moin";
+  }
+}
+// SyntaxError: function statement requires a name
+
+ +

Das folgende funktioniert:

+ +
function Greeter() {
+  german: function g() {
+    return "Moin";
+  }
+}
+ +

Objektmethoden

+ +

Wenn man eine Methode für ein Objekt erstellen möchte, muss ein Objekt erstellt werden. Die folgende Syntax ohne einen Namen nach dem function Schlüsselwort ist zulässig.

+ +
var greeter = {
+  german: function () {
+    return "Moin";
+  }
+};
+ +

Callback Syntax

+ +

Zudem sollte die Syntax bei Callbackfunktionen geprüft werden. Komma- und Klammersetzung kann schnell schwierig werden.

+ +
promise.then(
+  function() {
+    console.log("success");
+  });
+  function() {
+    console.log("error");
+}
+// SyntaxError: function statement requires a name
+
+ +

Richtig ist folgendes:

+ +
promise.then(
+  function() {
+    console.log("success");
+  },
+  function() {
+    console.log("error");
+  }
+);
+
+ +

Siehe auch

+ + diff --git a/files/de/web/javascript/reference/errors/unterminated_string_literal/index.html b/files/de/web/javascript/reference/errors/unterminated_string_literal/index.html new file mode 100644 index 0000000000..3d60240b51 --- /dev/null +++ b/files/de/web/javascript/reference/errors/unterminated_string_literal/index.html @@ -0,0 +1,67 @@ +--- +title: 'SyntaxError: unterminated string literal' +slug: Web/JavaScript/Reference/Fehler/Unterminated_string_literal +tags: + - Errors + - JavaScript + - SyntaxError +translation_of: Web/JavaScript/Reference/Errors/Unterminated_string_literal +--- +
{{jsSidebar("Errors")}}
+ +

Fehlermeldung

+ +
SyntaxError: unterminated string literal
+
+ +

Fehlertyp

+ +

{{jsxref("SyntaxError")}}

+ +

Was ist falsch gelaufen?

+ +

Es gibt irgendwo einen nicht beendeten {{jsxref("String")}}. Stringliterale müssen mit einfachen (') oder doppelten (") Anführungszeichen umschlossen sein. JavaScript unterscheidet nicht zwischen Strings, die mit einfachen oder doppelten Anführungszeichen umschlossen sind. Maskierte Sequenzen funktionieren in Strings mit einfachen und doppelten Anführungszeichen. Um den Fehler zu beheben, sollte folgendes überprüft werden:

+ + + +

Beispiele

+ +

MehrereZeilen

+ +

Man kann Strings nicht über mehrere Zeilen in JavaScript schreiben:

+ +
var longString = 'This is a very long string which needs
+                  to wrap across multiple lines because
+                  otherwise my code is unreadable.';
+// SyntaxError: unterminated string literal
+ +

Stattdessen muss ein + Operator, ein Backslask oder ein Templateliteral eingesetzt werden. Die + Operator Variante sieht wie folgt aus:

+ +
var longString = 'This is a very long string which needs ' +
+                 'to wrap across multiple lines because ' +
+                 'otherwise my code is unreadable.';
+
+ +

Oder man benutzt ein Backslash Zeichen ("\") am ende jeder Zeile, um anzudeuten, dass der String in der nächsten Zeile weiter geht. Man muss sicherstellen, dass keine Leerzeichen oder andere Zeichen nach dem Backslash stehen (ausgenommen der Zeilenumbruch) oder als Einrückung, ansonsten wird es nicht funktionieren. Diese Form sieht wie folgt aus:

+ +
var longString = 'This is a very long string which needs \
+to wrap across multiple lines because \
+otherwise my code is unreadable.';
+
+ +

Eine andere Möglichkeit ist der Einsatz von Templateliteralen, welche in ECMAScript 2015 Umgebungen unterstützt werden:

+ +
var longString = `This is a very long string which needs
+                  to wrap across multiple lines because
+                  otherwise my code is unreadable.`;
+ +

Siehe auch

+ + diff --git a/files/de/web/javascript/reference/errors/var_hides_argument/index.html b/files/de/web/javascript/reference/errors/var_hides_argument/index.html new file mode 100644 index 0000000000..f06a1d5220 --- /dev/null +++ b/files/de/web/javascript/reference/errors/var_hides_argument/index.html @@ -0,0 +1,56 @@ +--- +title: 'TypeError: variable "x" redeclares argument' +slug: Web/JavaScript/Reference/Fehler/Var_hides_argument +tags: + - Errors + - JavaScript + - Strict Mode + - TypeError +translation_of: Web/JavaScript/Reference/Errors/Var_hides_argument +--- +
{{jsSidebar("Errors")}}
+ +

Fehlermeldung

+ +
TypeError: variable "x" redeclares argument (Firefox)
+
+ +

Fehlertyp

+ +

{{jsxref("TypeError")}} Warnung nur im strict mode.

+ +

Was ist falsch gelaufen?

+ +

Der selbe Variablenname für einen Funktionsparameter und einer Neudeklaration mit einer var Zuweisung im Funktionskörper ist vorhanden. Dieses ist ein Namenskonflikt, weshalb JavaScript eine Warnung erzeugt.

+ +

Dieser Fehler ist eine Warnung, die nur im strict mode auftaucht. Ist man nicht im strict mode, so wird die Neudeklaration still ignoriert.

+ +

Beispiele

+ +

Nicht balider Fall

+ +

In diesem Fall wird die Variable "arg" neu deklariert.

+ +
'use strict';
+
+function f(arg) {
+  var arg = 'foo';
+}
+
+ +

Valider Fall

+ +

Um diese Warnung zu vermeiden kann das var Statement weggelassen werden, weil die Variable schon existiert. In anderen Fällen kann der Funktionsparameter oder die Variable umbenannt werden.

+ +
'use strict';
+
+function f(arg) {
+  arg = 'foo';
+}
+
+ +

Siehe auch

+ + diff --git a/files/de/web/javascript/reference/fehler/already_has_pragma/index.html b/files/de/web/javascript/reference/fehler/already_has_pragma/index.html deleted file mode 100644 index d297d3fea9..0000000000 --- a/files/de/web/javascript/reference/fehler/already_has_pragma/index.html +++ /dev/null @@ -1,42 +0,0 @@ ---- -title: 'Warning: -file- is being assigned a //# sourceMappingURL, but already has one' -slug: Web/JavaScript/Reference/Fehler/Already_has_pragma -tags: - - Error - - JavaScript - - Source maps - - Warning -translation_of: Web/JavaScript/Reference/Errors/Already_has_pragma ---- -
{{jsSidebar("Errors")}}
- -

Fehlermeldung

- -
Warning: -file- is being assigned a //# sourceMappingURL, but already has one.
- -

Fehlertyp

- -

Warnung. Die Ausführung von JavaScript wird nicht unterbrochen.

- -

Was ist falsch gelaufen?

- -

Eine Source Map wurde mehrere Male für eine JavaScript Quelle spezifiziert.

- -

JavaScript Quellen sind oft kombiniert und minimiert, um diesen auf einem Server effizienter zu gestalten. Mit Source Maps ist es möglich den Quelltext, beim Debuggen, zu den originalen Quelldateien zu verfolgen. Es gibt zwei Möglichkeiten Source Maps zuzuweisen, einerseits mit einem Kommentar und andererseits mit dem setzen eines Headers in der JavaScriptdatei.

- -

Beispiele

- -

Setzen einer Source Map mit einem Kommentar in einer Datei:

- -
//# sourceMappingURL=http://example.com/path/to/your/sourcemap.map
- -

Oder alternativ mit dem setzen eines Headers in einer JavaScriptdatei:

- -
X-SourceMap: /path/to/file.js.map
- -

Siehe auch

- - diff --git a/files/de/web/javascript/reference/fehler/array_sort_argument/index.html b/files/de/web/javascript/reference/fehler/array_sort_argument/index.html deleted file mode 100644 index 2826cbe4c0..0000000000 --- a/files/de/web/javascript/reference/fehler/array_sort_argument/index.html +++ /dev/null @@ -1,47 +0,0 @@ ---- -title: 'TypeError: invalid Array.prototype.sort argument' -slug: Web/JavaScript/Reference/Fehler/Array_sort_argument -tags: - - Error - - JavaScript - - TypeError -translation_of: Web/JavaScript/Reference/Errors/Array_sort_argument ---- -
{{jsSidebar("Errors")}}
- -

Fehlermeldung

- -
TypeError: invalid Array.prototype.sort argument (Firefox)
-
- -

Fehlertyp

- -

{{jsxref("TypeError")}}

- -

Was ist falsch gelaufen?

- -

Das Argument von {{jsxref("Array.prototype.sort()")}} erwartet entweder {{jsxref("undefined")}} oder eine Funktion, welche die Operanden vergleicht.

- -

Beispiele

- -

Nicht valide Fälle

- -
[1, 3, 2].sort(5);  // TypeError
-
-var cmp = { asc: (x, y) => x >= y, dsc: (x, y) => x <= y };
-[1, 3, 2].sort(cmp[this.key] || 'asc');  // TypeError
-
- -

Valide Fälle

- -
[1, 3, 2].sort();   // [1, 2, 3]
-
-
-var cmp = { asc: (x, y) => x >= y, dsc: (x, y) => x <= y };
-[1, 3, 2].sort(cmp[this.key || 'asc']); // [1, 2, 3]
- -

Siehe auch

- - diff --git a/files/de/web/javascript/reference/fehler/bad_octal/index.html b/files/de/web/javascript/reference/fehler/bad_octal/index.html deleted file mode 100644 index d021c0daa4..0000000000 --- a/files/de/web/javascript/reference/fehler/bad_octal/index.html +++ /dev/null @@ -1,54 +0,0 @@ ---- -title: 'Warning: 08/09 is not a legal ECMA-262 octal constant' -slug: Web/JavaScript/Reference/Fehler/Bad_octal -tags: - - Errors - - JavaScript - - SyntaxError - - Warning -translation_of: Web/JavaScript/Reference/Errors/Bad_octal ---- -
{{jsSidebar("Errors")}}
- -

Fehlermeldung

- -
Warning: SyntaxError: 08 is not a legal ECMA-262 octal constant.
-Warning: SyntaxError: 09 is not a legal ECMA-262 octal constant.
-
- -

Fehlertyp

- -

Warnung. Die Ausführung von JavaScript wird nicht gestoppt.

- -

Was ist falsch gelaufen?

- -

Dezimalliterale können mit einer Null (0) beginnen, gefolgt von anderen Dezimalziffern. en alle Ziffern nach der führenden 0 kleiner als 8 sind, wird die Zal als Oktalzahl interpretiert. Weil das nicht der Fall ist mit 08 und 09, warnt JavaScript.

- -

Zu beachten ist, dass Oktalliterale und oktal maskierte Sequenzen veraltet sind und eine zusätzliche Veraltungswarnung enthalten. Mit ECMAScript 6 und später wird diese Syntak mit einer führenden Null gefolgt von einem großen oder kleinen lateinischen Buschstaben "O" (0o or 0O) benutzt. Sie dazu die Seite lexical grammar für mehr Informationen.

- -

Beispiele

- -

Ungültige Oktalzahlen

- -
08;
-09;
-// SyntaxError: 08 is not a legal ECMA-262 octal constant
-// SyntaxError: "0"-prefixed octal literals and octal escape sequences
-// are deprecated
- -

Gültige Oktalzahlen

- -

Einsatz von einer führenden Null gefolgt von dem Buchstaben "o";

- -
0O755;
-0o644;
-
- -

Siehe auch

- - diff --git a/files/de/web/javascript/reference/fehler/bad_radix/index.html b/files/de/web/javascript/reference/fehler/bad_radix/index.html deleted file mode 100644 index 25c473eb93..0000000000 --- a/files/de/web/javascript/reference/fehler/bad_radix/index.html +++ /dev/null @@ -1,61 +0,0 @@ ---- -title: 'RangeError: radix must be an integer' -slug: Web/JavaScript/Reference/Fehler/Bad_radix -tags: - - Errors - - JavaScript - - RangeError -translation_of: Web/JavaScript/Reference/Errors/Bad_radix ---- -
{{jsSidebar("Errors")}}
- -

Fehlermeldung

- -
RangeError: radix must be an integer at least 2 and no greater than 36 (Firefox)
-RangeError: toString() radix argument must be between 2 and 36 (Chrome)
-
- -

Fehlertyp

- -

{{jsxref("RangeError")}}

- -

Was ist falsch gelaufen?

- -

Der optionale radix Parameter der {{jsxref("Number.prototype.toString()")}} Methode wurde spezifiziert. Dieser Wert muss eine ganze Zahl zwischen 2 und 36 sein, welche die Basis des Zahlensystems des repräsentierten Zahlwertes angibt. Zum Beispiel wird die Dezimalzahl (Basis 10) 169 im Hexadezimalsystem (Basis 16) als A9 repräsentiert.

- -

Warum ist der Parameterwert auf 36 limitiert? Eine Basis größer als 10 nutzt als Ziffern Buchstaben; deswegen kann der Parameter nicht größer als 36 sein, weil das Lateinische Alphabet (welches im Englischen und vielen anderen Sprachen verwendet wird) nur 26 Buchstaben hat.

- -

Die am meisten eingesetzten Basen sind:

- - - -

Beispiele

- -

Nicht valide Fälle

- -
(42).toString(0);
-(42).toString(1);
-(42).toString(37);
-(42).toString(150);
-// You cannot use a string like this for formatting:
-(12071989).toString('MM-dd-yyyy');
-
- -

Valide Fälle

- -
(42).toString(2);     // "101010" (binary)
-(13).toString(8);     // "15"     (octal)
-(0x42).toString(10);  // "66"     (decimal)
-(100000).toString(16) // "186a0"  (hexadecimal)
-
- -

Siehe auch

- - diff --git a/files/de/web/javascript/reference/fehler/bad_regexp_flag/index.html b/files/de/web/javascript/reference/fehler/bad_regexp_flag/index.html deleted file mode 100644 index 5bf381da53..0000000000 --- a/files/de/web/javascript/reference/fehler/bad_regexp_flag/index.html +++ /dev/null @@ -1,105 +0,0 @@ ---- -title: 'SyntaxError: invalid regular expression flag "x"' -slug: Web/JavaScript/Reference/Fehler/Bad_regexp_flag -tags: - - Error - - JavaScript - - SyntaxError -translation_of: Web/JavaScript/Reference/Errors/Bad_regexp_flag ---- -
{{jsSidebar("Errors")}}
- -

Fehlermeldung

- -
SyntaxError: invalid regular expression flag "x" (Firefox)
-SyntaxError: Invalid regular expression flags (Chrome)
-
- -

Fehlertyp

- -

{{jsxref("SyntaxError")}}

- -

Was ist falsch gelaufen?

- -

Es gibt nicht valide Flags in regulären Ausdrücken im Code. In einem regulärem Ausdrucksliteral, welches aus eine Muster umschlossen von Schrägstrichen ist, kommen die Flags nach dem zweiten Schrägstrich. Sie können auch in der Konstruktorfunktion des {{jsxref("RegExp")}} Objektes angegeben werden (zweiter Parameter). Flags für reguläre Ausdrücke können einfach oder zusammen in beliebiger Reihenfolge benutzt werden, jedoch gibt es in ECMAScript nur fünf.

- -

Um ein Flag in regulären Ausdrücken einzufügen kann folgende Syntax benutzt werden:

- -
var re = /pattern/flags;
-
- -

oder

- -
var re = new RegExp('pattern', 'flags');
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Flags von regulären Ausdrücken
FlagBeschreibung
gGlobale Suche.
iGroß- und Kleinschreibung nicht unterscheiden.
mSuche über mehrere Zeilen.
uUnicode; nimmt das Muster als eine Sequenz von Unicode Codepoints an.
yFührt eine "sticky" Suche durch, welche zutrifft, wenn der String von der Startposition aus auf das Muster zutrifft. Siehe {{jsxref("RegExp.sticky", "sticky")}}.
- -

Beispiele

- -

Es gibt nur fünf valide Flags für reguläre Ausdrücke.

- -
/foo/bar;
-
-// SyntaxError: invalid regular expression flag "b"
-
- -

Ist eine regulärer Ausdruck gewollt? Ein Ausdruck, der zwei Schrägstriche enthält wird als Literal für reguläre Ausdrücke interpretiert.

- -
let obj = {
-  url: /docs/Web
-};
-
-// SyntaxError: invalid regular expression flag "W"
-
- -

Oder war stattdessen ein String gemeint? Füge einfache oder doppelte Anführungszeichen hinzu, um ein Stringliteral zu erstellen.

- -
let obj = {
-  url: '/docs/Web'
-};
- -

Valide Flags für reguläre Ausdrücke

- -

Siehe in der Tabelle oben für die fünf in JavaScript erlaubten validen Flags für reguläre Ausdrücke

- -
/foo/g;
-/foo/gim;
-/foo/uy;
-
- -

Siehe auch

- - diff --git a/files/de/web/javascript/reference/fehler/bad_return_or_yield/index.html b/files/de/web/javascript/reference/fehler/bad_return_or_yield/index.html deleted file mode 100644 index e850455615..0000000000 --- a/files/de/web/javascript/reference/fehler/bad_return_or_yield/index.html +++ /dev/null @@ -1,55 +0,0 @@ ---- -title: 'SyntaxError: return not in function' -slug: Web/JavaScript/Reference/Fehler/Bad_return_or_yield -tags: - - Errors - - JavaScript - - SyntaxError -translation_of: Web/JavaScript/Reference/Errors/Bad_return_or_yield ---- -
{{jsSidebar("Errors")}}
- -

Fehlermeldung

- -
SyntaxError: return not in function
-SyntaxError: yield not in function
-
- -

Fehlertyp

- -

{{jsxref("SyntaxError")}}.

- -

Was ist falsch gelaufen?

- -

Ein return oder yield Statement wird außerhalb einer Funktion aufgerufen. Es kann sein, dass geschweifte Klammern fehlen. Die Statements return und yield müssen in einer Funktion sein, weil sie die Ausführung der Funktion beenden (oder pausieren und wieder starten) und dem Funktionsaufrufer einen spezifizierten Wert zurückgeben.

- -

Beispiele

- -
var cheer = function(score) {
-  if (score === 147)
-    return 'Maximum!';
-  };
-  if (score > 100) {
-    return 'Century!';
-  }
-}
-
-// SyntaxError: return not in function
- -

Die geschweiften Klammern sehen auf den ersten Blick richtig aus, jedoch fehlt in dem Code eine { nach dem ersten if Statement. Korrekt währe es wir folgt:

- -
var cheer = function(score) {
-  if (score === 147) {
-    return 'Maximum!';
-  }
-  if (score > 100) {
-    return 'Century!';
-  }
-};
- -

Siehe auch

- - diff --git a/files/de/web/javascript/reference/fehler/called_on_incompatible_type/index.html b/files/de/web/javascript/reference/fehler/called_on_incompatible_type/index.html deleted file mode 100644 index 1915e1b829..0000000000 --- a/files/de/web/javascript/reference/fehler/called_on_incompatible_type/index.html +++ /dev/null @@ -1,64 +0,0 @@ ---- -title: X.prototype.y called on incompatible type -slug: Web/JavaScript/Reference/Fehler/Called_on_incompatible_type -tags: - - Error - - JavaScript - - TypeError -translation_of: Web/JavaScript/Reference/Errors/Called_on_incompatible_type ---- -
{{jsSidebar("Errors")}}
- -

Fehlermeldung

- -
TypeError: Function.prototype.toString called on incompatible object (Firefox)
-TypeError: Function.prototype.bind called on incompatible target (Firefox)
-TypeError: Method Set.prototype.add called on incompatible receiver undefined (Chrome)
-TypeError: Bind must be called on a function (Chrome)
-
- -

Fehlertyp

- -

{{jsxref("TypeError")}}

- -

Was ist falsch gelaufen?

- -

Wenn dieser Fehler auftritt, wird eine Funktion (auf eineem gegebenen Objekt) aufgerufen, wobei this nicht vom erwarteten Typ ist.

- -

Dieser Fehler kann auftreten, wenn die {{jsxref("Function.prototype.call()")}} oder {{jsxref("Function.prototype.apply()")}} Methode mit einem this Argument genutzt werden, welches nicht dem erwarteten Typ entspricht.

- -

Dieser Fehler kann auch auftreten, wenn eine Funktion (in einem Objekt gespeichert) als Argument in einer anderen Funktion genutzt wird. In diesem Fall ist das Objekt nicht this der Funktion. Um diesen Dall zu umgehen muss eine Lambda-Funktion unterstützt werden, welche den Aufruf markiert, oder die {{jsxref("Function.prototype.bind()")}} Funktion eingesetzt werden, um das richtige this Objekt zu nutzen.

- -

Beispiele

- -

Fehlerfälle

- -
var mySet = new Set;
-['bar', 'baz'].forEach(mySet.add);
-// mySet.add ist eine Funktion, aber "mySet" wird so nicht erfasst.
-
-var myFun = function () {};
-['bar', 'baz'].forEach(myFun.bind);
-// myFun.bind ist eine Funktion, aber "myFun" wird nicht so erfasst.
-
-
- -

Gültiger Fälle

- -
var mySet = new Set;
-['bar', 'baz'].forEach(mySet.add.bind(mySet));
-// Das funktioniert, weil "mySet" als this an die Funktion gebunden wird.
-
-var myFun = function () {};
-['bar', 'baz'].forEach(x => myFun.bind(x));
-// Das funktioniert durch die "bind" Funktion. Es wird eine Lambda-Funktion erstellt, die die Argumente weiterleitet..
-
-
- -

Siehe auch

- - diff --git a/files/de/web/javascript/reference/fehler/cant_access_lexical_declaration_before_init/index.html b/files/de/web/javascript/reference/fehler/cant_access_lexical_declaration_before_init/index.html deleted file mode 100644 index 16b976aef6..0000000000 --- a/files/de/web/javascript/reference/fehler/cant_access_lexical_declaration_before_init/index.html +++ /dev/null @@ -1,60 +0,0 @@ ---- -title: 'ReferenceError: can''t access lexical declaration`X'' before initialization' -slug: Web/JavaScript/Reference/Fehler/Cant_access_lexical_declaration_before_init -tags: - - Errors - - JavaScript - - ReferenceError -translation_of: Web/JavaScript/Reference/Errors/Cant_access_lexical_declaration_before_init ---- -
{{jsSidebar("Errors")}}
- -

Fehlermeldung

- -
ReferenceError: can't access lexical declaration `X' before initialization (Firefox)
-ReferenceError: 'x' is not defined (Chrome)
-
- -

Fehlertyp

- -

{{jsxref("ReferenceError")}}

- -

Was ist falsch gelaufen?

- -

Auf eine lexikalische Variable wurde zugegriffen bevor sie deklariert wurde. Das passiert in Blockstatements, in denen auf let oder const Variablen zugegriffen wird, bevor sie definiert wurden.

- -

Beispiele

- -

Falsche Fälle

- -

In diesem Fall wird die Variable "foo" in einem Blockstatement mit let neu deklariert.

- -
function test() {
-  let foo = 33;
-  if (true) {
-    let foo = (foo + 55);
-    // ReferenceError: can't access lexical
-    // declaration `foo' before initialization
-  }
-}
-test();
-
- -

Richtige Fälle

- -

Um "foo" im if-Statement zu ändern, muss  let entfernt werden, welche die Neudeklaration verursacht.

- -
function test(){
-   let foo = 33;
-   if (true) {
-      foo = (foo + 55);
-   }
-}
-test();
-
- -

Siehe auch

- - diff --git a/files/de/web/javascript/reference/fehler/cant_access_property/index.html b/files/de/web/javascript/reference/fehler/cant_access_property/index.html deleted file mode 100644 index 98471eb28e..0000000000 --- a/files/de/web/javascript/reference/fehler/cant_access_property/index.html +++ /dev/null @@ -1,59 +0,0 @@ ---- -title: 'TypeError: can''t access property "x" of "y"' -slug: Web/JavaScript/Reference/Fehler/Cant_access_property -tags: - - Fehler - - JavaScript - - TypeError -translation_of: Web/JavaScript/Reference/Errors/Cant_access_property ---- -
{{jsSidebar("Errors")}}
- -

Fehlermeldung

- -
TypeError: Unable to get property {x} of undefined or null reference (Edge)
-TypeError: can't access property {x} of {y} (Firefox)
-TypeError: {y} is undefined, can't access property {x} of it (Firefox)
-TypeError: {y} is null, can't access property {x} of it (Firefox)
-
-Beispiele:
-TypeError: x is undefined, can't access property "prop" of it
-TypeError: x is null, can't access property "prop" of it
-TypeError: can't access property "prop" of undefined
-TypeError: can't access property "prop" of null
-
- -

Fehlertyp

- -

{{jsxref("TypeError")}}.

- -

Was ist falsch gelaufen?

- -

The Attributzugriff erfolgte über einen {{jsxref("undefined")}} oder {{jsxref("null")}} Wert

- -

Beispiele

- -

Invalide Fälle

- -
// undefined und null sind Fälle auf denen die Methode substring nicht aufgerufen werden kann
-var foo = undefined;
-foo.substring(1); // TypeError: x is undefined, can't access property "substring" of it
-
-var foo = null;
-foo.substring(1); // TypeError: x is null, can't access property "substring" of it
-
- -

Fehlerbehebung

- -

Um den null pointer auf undefined oder null Werte zu beheben, kann beispielsweise der typeof Operator verwendet werden.

- -
if (typeof foo !== 'undefined') {
-  // Hier wissen wir, dass foo definiert ist
-}
- -

Siehe auch

- - diff --git a/files/de/web/javascript/reference/fehler/cant_define_property_object_not_extensible/index.html b/files/de/web/javascript/reference/fehler/cant_define_property_object_not_extensible/index.html deleted file mode 100644 index 691924f427..0000000000 --- a/files/de/web/javascript/reference/fehler/cant_define_property_object_not_extensible/index.html +++ /dev/null @@ -1,64 +0,0 @@ ---- -title: 'TypeError: can''t define property "x": "obj" is not extensible' -slug: Web/JavaScript/Reference/Fehler/Cant_define_property_object_not_extensible -tags: - - Error - - Errors - - JavaScript - - TypeError -translation_of: Web/JavaScript/Reference/Errors/Cant_define_property_object_not_extensible ---- -
{{jsSidebar("Errors")}}
- -

Fehlermeldung

- -
TypeError: can't define property "x": "obj" is not extensible (Firefox)
-TypeError: Cannot define property: "x", object is not extensible. (Chrome)
-
- -

Fehlertyp

- -

{{jsxref("TypeError")}}

- -

Was ist falsch gelaufen?

- -

Normalerweise ist ein Objekt erweiterbar und neue Eigenschaften können hinzugefügt werden. In diesem Fall markiert {{jsxref("Object.preventExtensions()")}} ein Objekt als nicht mehr erweiterbar, so dass ein Objekt nur noch die Eigenschaften haben kann, die es vor dem Aufruf hatte.

- -

Beispiele

- -

Im strict mode wird ein TypeError erzeugt, wenn versucht wird eine Eigenschaft zu einem nicht erweiterbaren Objekt hinzuzufügen. Im normalen Modus wird das Hinzufügen einfach ignoriert.

- -
'use strict';
-
-var obj = {};
-Object.preventExtensions(obj);
-
-obj.x = 'foo';
-// TypeError: can't define property "x": "obj" is not extensible
-
- -

Im strict mode und normalen Modus wird ein Fehler erzeugt, wenn {{jsxref("Object.defineProperty()")}} benutzt wird, um eine Eigenschaft zu einem nicht erweiterbaren Objekt hinzuzufügen.

- -
var obj = { };
-Object.preventExtensions(obj);
-
-Object.defineProperty(obj,
-  'x', { value: "foo" }
-);
-// TypeError: can't define property "x": "obj" is not extensible
-
- -

Um diesen Fehler zu vermeiden muss entweder der Aufruf von {{jsxref("Object.preventExtensions()")}} entfernt werden oder die Position des Aufrufes so verschoben werden, dass das Hinzufügen von Eigenschaften davor passiert und das Objekt erst danach als nicht erweiterbar markiert wird. Natürlich kann auch die neue Eigenschaft entfernt werden, wenn sie nicht benötigt wird.

- -
'use strict';
-
-var obj = {};
-obj.x = 'foo'; // add property first and only then prevent extensions
-
-Object.preventExtensions(obj);
- -

Siehe auch

- - diff --git a/files/de/web/javascript/reference/fehler/cant_delete/index.html b/files/de/web/javascript/reference/fehler/cant_delete/index.html deleted file mode 100644 index fe09735071..0000000000 --- a/files/de/web/javascript/reference/fehler/cant_delete/index.html +++ /dev/null @@ -1,58 +0,0 @@ ---- -title: 'TypeError: property "x" is non-configurable and can''t be deleted' -slug: Web/JavaScript/Reference/Fehler/Cant_delete -tags: - - Errors - - JavaScript - - Strict Mode - - TypeError -translation_of: Web/JavaScript/Reference/Errors/Cant_delete ---- -
{{jsSidebar("Errors")}}
- -

Fehlermeldung

- -
TypeError: property "x" is non-configurable and can't be deleted. (Firefox)
-TypeError: Cannot delete property 'x' of #<Object> (Chrome)
-
- -

Fehlertyp

- -

{{jsxref("TypeError")}} nur im strict mode.

- -

Was ist falsch gelaufen?

- -

Es wurde versucht eine EIgenschaft zu löschen, obwohl die Eigenschaft nicht Konfigurierbar (non-configurable) ist. Das configurable Attribut gibt an, ob ein Eigenschaft von einem Objekt gelöscht werden kann und ob ein Attribut (anders als writable) geändert werden kann.

- -

Dieser Fehler ist nur tritt nur im strict mode auf. In non-strict Quelltext, gibt die Operation false zurück.

- -

Beispiele

- -

Nicht Konfigurierbare Eigenschaften sind nicht sehr häufig, aber sie können mit {{jsxref("Object.defineProperty()")}} oder {{jsxref("Object.freeze()")}} erstellt werden.

- -
'use strict';
-var obj = Object.freeze({name: 'Elsa', score: 157});
-delete obj.score;  // TypeError
-
-'use strict';
-var obj = {};
-Object.defineProperty(obj, 'foo', {value: 2, configurable: false});
-delete obj.foo;  // TypeError
-
-'use strict';
-var frozenArray = Object.freeze([0, 1, 2]);
-frozenArray.pop();  // TypeError
-
- -

Es gibt auch einige nicht Konfigurierbare Eigenschaften, die in JavaScript eingebaut sind. Dazu zählen zum Beispiel die mathematischen Konstanten.

- -
'use strict';
-delete Math.PI;  // TypeError
- -

Siehe auch

- - diff --git a/files/de/web/javascript/reference/fehler/cant_redefine_property/index.html b/files/de/web/javascript/reference/fehler/cant_redefine_property/index.html deleted file mode 100644 index 80ef1e384b..0000000000 --- a/files/de/web/javascript/reference/fehler/cant_redefine_property/index.html +++ /dev/null @@ -1,51 +0,0 @@ ---- -title: 'TypeError: can''t redefine non-configurable property "x"' -slug: Web/JavaScript/Reference/Fehler/Cant_redefine_property -tags: - - Error - - Errors - - JavaScript - - TypeError -translation_of: Web/JavaScript/Reference/Errors/Cant_redefine_property ---- -
{{jsSidebar("Errors")}}
- -

Fehlermeldung

- -
TypeError: can't redefine non-configurable property "x" (Firefox)
-TypeError: Cannot redefine property: "x" (Chrome)
-
- -

Fehlertyp

- -

{{jsxref("TypeError")}}

- -

Was ist falsch gelaufen?

- -

Es wurde versucht eine Eigenschaft erneut zu definieren, aber die Eigenschaft ist nicht konfigurierbar (non-configurable). Das configurable Attribut kontrolliert, ob eine Eigenschaft von einem Objekt gelöscht werden kann und seine Attribute (anders als writable) geändert werden können. Eigenschaften von einem Objekt, dass von einem Objekt-Initialisierer erstellt wurden, sind konfigurierbar. Immer, wenn zum Beispiel {{jsxref("Object.defineProperty()")}} eingesetzt wird, ist die Eigenschaft nicht ohne weiteres konfigurierbar.

- -

Beispiele

- -

Nicht konfigurierbare Eigenschaften mit Object.defineProperty erstellen

- -

Die {{jsxref("Object.defineProperty()")}} Funktion erstellt nicht konfiguriertbare Eigenschaften wenn sie nicht extra als konfigurierbar spezifiziert sind.

- -
var obj = Object.create({});
-Object.defineProperty(obj, "foo", {value: "bar"});
-
-Object.defineProperty(obj, "foo", {value: "baz"});
-// TypeError: can't redefine non-configurable property "foo"
-
- -

Die "foo" Eigenschaft muss als Konfigurierbar eingestellt werden, wenn diese später im Quelltext erneut definiert bzw. überschrieben werden soll.

- -
var obj = Object.create({});
-Object.defineProperty(obj, "foo", {value: "bar", configurable: true});
-Object.defineProperty(obj, "foo", {value: "baz", configurable: true});
- -

Siehe auch

- - diff --git a/files/de/web/javascript/reference/fehler/cyclic_object_value/index.html b/files/de/web/javascript/reference/fehler/cyclic_object_value/index.html deleted file mode 100644 index 33bf4d508a..0000000000 --- a/files/de/web/javascript/reference/fehler/cyclic_object_value/index.html +++ /dev/null @@ -1,67 +0,0 @@ ---- -title: 'TypeError: cyclic object value' -slug: Web/JavaScript/Reference/Fehler/Cyclic_object_value -tags: - - Error - - Errors - - JavaScript - - TypeError -translation_of: Web/JavaScript/Reference/Errors/Cyclic_object_value ---- -
{{jsSidebar("Errors")}}
- -

Fehlermeldung

- -
TypeError: cyclic object value (Firefox)
-TypeError: Converting circular structure to JSON (Chrome and Opera)
-TypeError: Circular reference in value argument not supported (Microsoft Edge)
-
- -

Fehlertyp

- -

{{jsxref("TypeError")}}

- -

Was ist falsch gelaufen?

- -

Wenn {{jsxref("JSON.stringify()")}} aufgerufen wird, kann eine zyklische Objektreferenzstruktur nicht zu eine String konvertiert werden.

- -

Beispiele

- -

In eine zyklischen Struktur wie folgender

- -
var circularReference = {otherData: 123};
-circularReference.myself = circularReference;
-
- -

wird {{jsxref("JSON.stringify()")}} nicht funktionieren

- -
JSON.stringify(a);
-// TypeError: cyclic object value
-
- -

Um zyklische Referenzen zu serialisieren, kann man eine Bibliotheken benutzen (z. B. cycle.js von Douglas Crockford) oder eine eigene Lösung implementieren, welche zyklische Referenzen findet und mit serialisierbaren Werten ersetzt (oder diese entfernt).

- -

Das folgende Codebeispiel zeigt, wie man eine zyklische Referenz mit dem Einsatz des  replacer Parameters von {{jsxref("JSON.stringify()")}} findet und filtert (das bedeutet, es gehen Daten verloren):

- -
const getCircularReplacer = () => {
-  const seen = new WeakSet;
-  return (key, value) => {
-    if (typeof value === "object" && value !== null) {
-      if (seen.has(value)) {
-        return;
-      }
-      seen.add(value);
-    }
-    return value;
-  };
-};
-
-JSON.stringify(circularReference, getCircularReplacer());
-// {"otherData":123}
- -

Siehe auch

- - diff --git a/files/de/web/javascript/reference/fehler/dead_object/index.html b/files/de/web/javascript/reference/fehler/dead_object/index.html deleted file mode 100644 index 036e637ef4..0000000000 --- a/files/de/web/javascript/reference/fehler/dead_object/index.html +++ /dev/null @@ -1,50 +0,0 @@ ---- -title: 'TypeError: can''t access dead object' -slug: Web/JavaScript/Reference/Fehler/Dead_object -tags: - - Addon - - Error - - Errors - - JavaScript -translation_of: Web/JavaScript/Reference/Errors/Dead_object ---- -
{{JSSidebar("Errors")}}
- -

Fehlermeldung

- -
TypeError: can't access dead object
-
- -

Fehlertyp

- -

{{jsxref("TypeError")}}

- -

Was ist falsch gelaufen?

- -

Um die Speichernutzung zu verbessern und Speicherlücken zu vermeiden, verbietet Firefox Add-Ons Referenzen in das DOM Objekt zu speichern, nachdem das Elterndokument zerstört wurde. Ein totes Objekt hält eine starke Referenz zu einem DOM-Element, welche nach nach dem Zerstören in DOM existiert. Um dieses Problem zu vermeiden, sollte statt der Referenz zu einem DOM-Knoten im fremden Dokument die Referenz in einem Objekt, welches im Dokument selbst spezifiziert ist gespeichert werden und gesäubert werden, wenn das Dokument nicht mehr geladen ist, oder als weak Referenz gespeichert werden.

- -

Prüfen, ob ein Objekt tot ist

- -

Components.utils hat ein isDeadWrapper() Methode, welche in privilegiertem Quelltext verwendet werden sollte.

- -
if (Components.utils.isDeadWrapper(window)) {
-  // dead
-}
- -

Nicht privilegierter Quelltext hat keinen Zugriff auf Component.utils und sollt deswegen einfach den Fehler abfangen.

- -
try {
-  String(window);
-}
-catch (e) {
-  console.log("window is likely dead");
-}
- -

Siehe auch

- - diff --git a/files/de/web/javascript/reference/fehler/delete_in_strict_mode/index.html b/files/de/web/javascript/reference/fehler/delete_in_strict_mode/index.html deleted file mode 100644 index 042505e066..0000000000 --- a/files/de/web/javascript/reference/fehler/delete_in_strict_mode/index.html +++ /dev/null @@ -1,70 +0,0 @@ ---- -title: >- - SyntaxError: applying the 'delete' operator to an unqualified name is - deprecated -slug: Web/JavaScript/Reference/Fehler/Delete_in_strict_mode -tags: - - Error - - Errors - - JavaScript - - SyntaxError -translation_of: Web/JavaScript/Reference/Errors/Delete_in_strict_mode ---- -
{{jsSidebar("Errors")}}
- -

Fehlermeldung

- -
SyntaxError: applying the 'delete' operator to an unqualified name is deprecated (Firefox)
-SyntaxError: Delete of an unqualified identifier in strict mode. (Chrome)
-
- -

Fehlertyp

- -

{{jsxref("SyntaxError")}} nur im Strict Mode.

- -

Was ist falsch gelaufen?

- -

Normale Variablen können in JavaScript nicht mit dem delete Operator gelöscht werden. Im Strict Mode führt der Versuch des Löschens zu einem Fehler, weil es nicht erlaubt ist.

- -

Der delete Operator kann nur Eigenschaften eines Objektes löschen. Objekteigenschaften müssen dafür Konfigurierbar sein.

- -

Wie oft fälschlicherweise angenommen, hat die delete Operation nichts mit dem direkten freimachen von Speicher zu tun. Speicherverwaltung wird indirekt gemacht, mehr Informationen darüber auf den Seiten Speicherverwaltung und delete.

- -

Der Fehler tritt nur im Strict Mode auf. In normalem Code gibt die Operation einfach false zurück.

- -

Beispiele

- -

Der Versuch eine einfache Variable zu Löschen funktioniert in JavaScript nicht unf führt im Strict Mode zu einem Fehler:

- -
'use strict';
-
-var x;
-
-// ...
-
-delete x;
-
-// SyntaxError: applying the 'delete' operator to an unqualified name
-// is deprecated
-
- -

Um den Inhalt einer Variable zu leeren, kann man sie auf {{jsxref("null")}} setzen:

- -
'use strict';
-
-var x;
-
-// ...
-
-x = null;
-
-// x can be garbage collected
-
- -

Siehe auch

- - diff --git a/files/de/web/javascript/reference/fehler/deprecated_caller_or_arguments_usage/index.html b/files/de/web/javascript/reference/fehler/deprecated_caller_or_arguments_usage/index.html deleted file mode 100644 index 15bb0e68b6..0000000000 --- a/files/de/web/javascript/reference/fehler/deprecated_caller_or_arguments_usage/index.html +++ /dev/null @@ -1,75 +0,0 @@ ---- -title: 'ReferenceError: deprecated caller or arguments usage' -slug: Web/JavaScript/Reference/Fehler/Deprecated_caller_or_arguments_usage -tags: - - Errors - - JavaScript - - Strict Mode - - Warning -translation_of: Web/JavaScript/Reference/Errors/Deprecated_caller_or_arguments_usage ---- -
{{jsSidebar("Errors")}}
- -

Fehlermeldung

- -
Warning: ReferenceError: deprecated caller usage (Firefox)
-Warning: ReferenceError: deprecated arguments usage (Firefox)
-TypeError: 'callee' and 'caller' cannot be accessed in strict mode. (Safari)
-
- -

Fehlertyp

- -

Eine {{jsxref("ReferenceError")}} Warnung, die nur im Strict Mode auftaucht. Die JavaScript-Ausführung wird dadurch nicht angehalten.

- -

Was ist falsch gelaufen?

- -

Im Strict Mode wurden die Eigenschaften {{jsxref("Function.caller")}} oder {{jsxref("Function.arguments")}} benutzt, was nicht getan werden sollte. Sie sind veraltet, da sie den Funktionsaufruf verlieren, nicht standardisiert sind, schwer zu optimieren sind und möglicherweise leistungsschädigend sein können.

- -

Beispiele

- -

Veraltete function.caller oder arguments.callee.caller Eigenschaft

- -

{{jsxref("Function.caller")}} und arguments.callee.caller sind veraltet (in den Referenzartikeln sind mehr Informationen dazu enthalten).

- -
'use strict';
-
-function myFunc() {
-  if (myFunc.caller == null) {
-    return 'The function was called from the top!';
-  } else {
-    return 'This function\'s caller was ' + myFunc.caller;
-  }
-}
-
-myFunc();
-// Warning: ReferenceError: deprecated caller usage
-// "The function was called from the top!"
- -

Function.arguments

- -

{{jsxref("Function.arguments")}} ist veraltet (im Referenzartikel sind mehr Informationen dazu enthalten).

- -
'use strict';
-
-function f(n) { g(n - 1); }
-
-function g(n) {
-  console.log('before: ' + g.arguments[0]);
-  if (n > 0) { f(n); }
-  console.log('after: ' + g.arguments[0]);
-}
-
-f(2);
-
-console.log('returned: ' + g.arguments);
-// Warning: ReferenceError: deprecated arguments usage
-
- -

Siehe auch

- - diff --git a/files/de/web/javascript/reference/fehler/deprecated_expression_closures/index.html b/files/de/web/javascript/reference/fehler/deprecated_expression_closures/index.html deleted file mode 100644 index b8c6e7ced8..0000000000 --- a/files/de/web/javascript/reference/fehler/deprecated_expression_closures/index.html +++ /dev/null @@ -1,78 +0,0 @@ ---- -title: 'Warning: expression closures are deprecated' -slug: Web/JavaScript/Reference/Fehler/Deprecated_expression_closures -tags: - - JavaScript - - Warning -translation_of: Web/JavaScript/Reference/Errors/Deprecated_expression_closures ---- -
{{jsSidebar("Errors")}}
- -

Fehlermeldung

- -
Warning: expression closures are deprecated
-
- -

Fehlertyp

- -

Warnung. Die Ausführung von JavaScript wird nicht angehalten.

- -

Was ist falsch gelaufen?

- -

Die nicht standardisierte Ausdrucks Closure Syntax (Kurzform der Funktionssyntax) ist veraltetet und sollte nicht mehr verwendet werden. Diese Syntax wird komplett entfernt ({{bug(1083458)}}) und Skripte die diese Benutzen erzeugen dann einen {{jsxref("SyntaxError")}}.

- -

Beispiele

- -

Veraltete Syntax

- -

Ausdrucks Closures vermeiden geschweifte Klammern oder return Anweisungen in Funktionsdeklarationen oder in Methodendefinitionen in Objekten.

- -
var x = function() 1;
-
-var obj = {
-  count: function() 1
-};
-
- -

Standardsyntax

- -

Um die nicht standardisierte Ausdrucks Closures Syntax zu Standard-ECMAScript Syntax zu konvertieren müssen geschweifte Klammern und ein return Statement hinzugefügt werden.

- -
var x = function() { return 1; }
-
-var obj = {
-  count: function() { return 1; }
-};
-
- -

Standardsyntax mit Arrowfunktionen

- -

Alternativ können Arrow-Funktionen genutzt werden:

- -
var x = () => 1;
- -

Standardsyntax mit Kurzformmethodensyntax

- -

Anweisungs Closures können auch in Gettern und Settern gefunden werden:

- -
var obj = {
-  get x() 1,
-  set x(v) this.v = v
-};
-
- -

Mit ES2015 Methodendefinitionen können diese folgendermaßen konvertiert werden :

- -
var obj = {
-  get x() { return 1 },
-  set x(v) { this.v = v }
-};
-
- -

Siehe auch

- - diff --git a/files/de/web/javascript/reference/fehler/deprecated_octal/index.html b/files/de/web/javascript/reference/fehler/deprecated_octal/index.html deleted file mode 100644 index e153038950..0000000000 --- a/files/de/web/javascript/reference/fehler/deprecated_octal/index.html +++ /dev/null @@ -1,67 +0,0 @@ ---- -title: 'SyntaxError: "0"-prefixed octal literals and octal escape seq. are deprecated' -slug: Web/JavaScript/Reference/Fehler/Deprecated_octal -tags: - - Error - - JavaScript - - Strict Mode - - SyntaxError -translation_of: Web/JavaScript/Reference/Errors/Deprecated_octal ---- -
{{jsSidebar("Errors")}}
- -

Fehlermeldung

- -
SyntaxError:
-"0"-prefixed octal literals and octal escape sequences are deprecated;
-for octal literals use the "0o" prefix instead
-
- -

Fehlertyp

- -

{{jsxref("SyntaxError")}} nur im Strict Mode.

- -

Was ist falsch gelaufen?

- -

Oktalliterale und oktal maskierte Sequenzen sind veraltet und führen zu einem {{jsxref("SyntaxError")}} im Strict Mode. Ab ECMAScript 2015 wird in der standardisierten Syntax eine führende null gefolgt von einem kleinen oder großen lateinischen Buchstaben "O" verwendet (0o oder 0O).

- -

Beispiele

- -

Oktalliteral mit führender 0

- -
"use strict";
-
-03;
-
-// SyntaxError: "0"-prefixed octal literals and octal escape sequences
-// are deprecated
- -

Oktal maskierte Sequenz

- -
"use strict";
-
-"\251";
-
-// SyntaxError: "0"-prefixed octal literals and octal escape sequences
-// are deprecated
-
- -

Valide Oktalzahlen

- -

Einsatz einer führenden null gefolgt von "o" oder "O":

- -
0o3;
-
- -

Statt oktal maskierte Sequenzen können hexadezimal maskierte Sequenzen benutzt werden:

- -
'\xA9';
- -

Siehe auch

- - diff --git a/files/de/web/javascript/reference/fehler/deprecated_source_map_pragma/index.html b/files/de/web/javascript/reference/fehler/deprecated_source_map_pragma/index.html deleted file mode 100644 index 1f87b2bd2d..0000000000 --- a/files/de/web/javascript/reference/fehler/deprecated_source_map_pragma/index.html +++ /dev/null @@ -1,58 +0,0 @@ ---- -title: >- - SyntaxError: Using //@ to indicate sourceURL pragmas is deprecated. Use //# - instead -slug: Web/JavaScript/Reference/Fehler/Deprecated_source_map_pragma -tags: - - Errors - - JavaScript - - Source maps -translation_of: Web/JavaScript/Reference/Errors/Deprecated_source_map_pragma ---- -
{{jsSidebar("Errors")}}
- -

Fehlermeldung

- -
Warning: SyntaxError: Using //@ to indicate sourceURL pragmas is deprecated. Use //# instead
-
-Warning: SyntaxError: Using //@ to indicate sourceMappingURL pragmas is deprecated. Use //# instead
-
- -

Fehlertyp

- -

Eine Warnung die als {{jsxref("SyntaxError")}} auftritt. Die Ausführung von JavaScript wird nicht unterbrochen.

- -

Was ist falsch gelaufen?

- -

Es gibt eine veraltete Source-Map-Syntax im JavaScript Code.

- -

JavaScript Code wird oft zusammengefügt und minimiert, um die Auslieferung durch einen Server effizienter zu machen. Mit Source-Maps kann beim Debuggen der ausgeführte Code auf die Original Codedateien übertragen werden.

- -

Die Source-Map Spezifikation änderte die Syntax wegen eines Konflikts mit dem IE immer wenn die Seite nach //@cc_on war, interpretierte dieser es als bedingte Kompilierung in der IE JScript Umgebung. Der bedingte Kompilations Kommentar im IE ist eine relativ unbekannte Funktion, aber dieses machte Source-Maps von jQuery und anderen Bibliotheken kaputt.

- -

Beispiele

- -

Veraltete Syntax

- -

Syntax mit dem veralteten "@" Zeichen.

- -
//@ sourceMappingURL=http://example.com/path/to/your/sourcemap.map
-
- -

Standard Syntax

- -

Benutzt stattdessen ein "#" Zeichen.

- -
//# sourceMappingURL=http://example.com/path/to/your/sourcemap.map
- -

Alternativ kann ein {{HTTPHeader("SourceMap")}} Header zu der JavaScript Datei gesetzt werden, um einen solchen Kommentar zu vermeiden:

- -
SourceMap: /path/to/file.js.map
- -

Siehe auch

- - diff --git a/files/de/web/javascript/reference/fehler/deprecated_string_generics/index.html b/files/de/web/javascript/reference/fehler/deprecated_string_generics/index.html deleted file mode 100644 index d495448759..0000000000 --- a/files/de/web/javascript/reference/fehler/deprecated_string_generics/index.html +++ /dev/null @@ -1,104 +0,0 @@ ---- -title: 'Warning: String.x is deprecated; use String.prototype.x instead' -slug: Web/JavaScript/Reference/Fehler/Deprecated_String_generics -tags: - - JavaScript - - Warning -translation_of: Web/JavaScript/Reference/Errors/Deprecated_String_generics ---- -
{{jsSidebar("Errors")}}
- -

Fehlermeldung

- -
Warning: String.charAt            is deprecated; use String.prototype.charAt            instead
-Warning: String.charCodeAt        is deprecated; use String.prototype.charCodeAt        instead
-Warning: String.concat            is deprecated; use String.prototype.concat            instead
-Warning: String.contains          is deprecated; use String.prototype.contains          instead
-Warning: String.endsWith          is deprecated; use String.prototype.endsWith          instead
-Warning: String.includes          is deprecated; use String.prototype.includes          instead
-Warning: String.indexOf           is deprecated; use String.prototype.indexOf           instead
-Warning: String.lastIndexOf       is deprecated; use String.prototype.lastIndexOf       instead
-Warning: String.localeCompare     is deprecated; use String.prototype.localeCompare     instead
-Warning: String.match             is deprecated; use String.prototype.match             instead
-Warning: String.normalize         is deprecated; use String.prototype.normalize         instead
-Warning: String.replace           is deprecated; use String.prototype.replace           instead
-Warning: String.search            is deprecated; use String.prototype.search            instead
-Warning: String.slice             is deprecated; use String.prototype.slice             instead
-Warning: String.split             is deprecated; use String.prototype.split             instead
-Warning: String.startsWith        is deprecated; use String.prototype.startsWith        instead
-Warning: String.substr            is deprecated; use String.prototype.substr            instead
-Warning: String.substring         is deprecated; use String.prototype.substring         instead
-Warning: String.toLocaleLowerCase is deprecated; use String.prototype.toLocaleLowerCase instead
-Warning: String.toLocaleUpperCase is deprecated; use String.prototype.toLocaleUpperCase instead
-Warning: String.toLowerCase       is deprecated; use String.prototype.toLowerCase       instead
-Warning: String.toUpperCase       is deprecated; use String.prototype.toUpperCase       instead
-Warning: String.trim              is deprecated; use String.prototype.trim              instead
-Warning: String.trimLeft          is deprecated; use String.prototype.trimLeft          instead
-Warning: String.trimRight         is deprecated; use String.prototype.trimRight         instead
-
- -

Fehlertyp

- -

Warnung. JavaScript unterbricht die Ausführung nicht.

- -

Was ist falsch gelaufen?

- -

Die nicht standardisierten generischen {{jsxref("String")}} Methoden sind veraltet und werden in Zukunft gelöscht (keine Browserübergreifende Unterstützung, nur in Firefox verfügbar). String-Generics stellen String-Instanzmethoden für das String-Objekt bereit, wodurch String-Methoden auf jedes Objekt angewendet werden können.

- -

Firefox {{bug(1222552)}} dokumentiert das Entfernen von generischen String Methoden.

- -

Beispiele

- -

Fehlerfälle

- -
var num = 15;
-String.replace(num, /5/, '2');
- -

Gültige Fälle

- -
var num = 15;
-String(num).replace(/5/, '2');
-
- -

Shim

- -

Das Folgende ist ein Shim zur Unterstützung nicht unterstützender Browser:

- -
/*globals define*/
-// Assumes all supplied String instance methods already present
-// (one may use shims for these if not available)
-(function() {
-  'use strict';
-
-  var i,
-    // We could also build the array of methods with the following, but the
-    //   getOwnPropertyNames() method is non-shimable:
-    // Object.getOwnPropertyNames(String).filter(function(methodName) {
-    //   return typeof String[methodName] === 'function';
-    // });
-    methods = [
-      'contains', 'substring', 'toLowerCase', 'toUpperCase', 'charAt',
-      'charCodeAt', 'indexOf', 'lastIndexOf', 'startsWith', 'endsWith',
-      'trim', 'trimLeft', 'trimRight', 'toLocaleLowerCase', 'normalize',
-      'toLocaleUpperCase', 'localeCompare', 'match', 'search', 'slice',
-      'replace', 'split', 'substr', 'concat', 'localeCompare'
-    ],
-    methodCount = methods.length,
-    assignStringGeneric = function(methodName) {
-      var method = String.prototype[methodName];
-      String[methodName] = function(arg1) {
-        return method.apply(arg1, Array.prototype.slice.call(arguments, 1));
-      };
-    };
-
-  for (i = 0; i < methodCount; i++) {
-    assignStringGeneric(methods[i]);
-  }
-}());
- -

Siehe auch

- - diff --git a/files/de/web/javascript/reference/fehler/deprecated_tolocaleformat/index.html b/files/de/web/javascript/reference/fehler/deprecated_tolocaleformat/index.html deleted file mode 100644 index 31cc81d9cc..0000000000 --- a/files/de/web/javascript/reference/fehler/deprecated_tolocaleformat/index.html +++ /dev/null @@ -1,90 +0,0 @@ ---- -title: 'Warning: Date.prototype.toLocaleFormat is deprecated' -slug: Web/JavaScript/Reference/Fehler/Deprecated_toLocaleFormat -tags: - - JavaScript - - Warning -translation_of: Web/JavaScript/Reference/Errors/Deprecated_toLocaleFormat ---- -
{{jsSidebar("Errors")}}
- -

Fehlermeldung

- -
Warning: Date.prototype.toLocaleFormat is deprecated; consider using Intl.DateTimeFormat instead
-
- -

Fehlertyp

- -

Warnung. JavaScript stoppt die ausführung nicht an.

- -

Was ist falsch gelaufen?

- -

Die nicht standardisierte Methode {{jsxref("Date.prototype.toLocaleFormat")}} ist veraltet und sollte nicht mehr benutzt werden. Sie benutzt einen Formatstring mit dem selben Format, wie dei der C Funktion strftime(). Diese Funktion ist seit Firefox 58+ nicht mehr vorhanden.

- -

Beispiele

- -

Veraltete Syntax

- -

Die {{jsxref("Date.prototype.toLocaleFormat")}} Methode ist veraltet und wird entfernt werden (keine browserübergreifende Unterstützung, nur in Firefox verfügbar).

- -
var today = new Date();
-var date = today.toLocaleFormat('%A, %e. %B %Y');
-
-console.log(date);
-// In German locale
-// "Freitag, 10. März 2017"
- -

Alternative Standardsyntax mit der ECMAScript Intl API

- -

Der ECMA-402 Standard spezifiziert Standardobjekte und Methoden (ECMAScript Intl API), die sprachabhängige Datums- und Zeitformatierung erlauben (verfügbar in Chrome 24+, Firefox 29+, IE11+, Safari10+).

- -

Man kan jetzt die {{jsxref("Date.prototype.toLocaleDateString")}} Methode einsetzen, um einen Zeitpunkt zu formatieren.

- -
var today = new Date();
-var options = { weekday: 'long', year: 'numeric',
-                month: 'long', day: 'numeric' };
-var date = today.toLocaleDateString('de-DE', options);
-
-console.log(date);
-// "Freitag, 10. März 2017"
-
- -

Oder man kann das {{jsxref("DateTimeFormat", "Intl.DateTimeFormat")}} Objekt einsetzen, welches die meisten Berechnungen zwischenspeichert, so dass das Formatieren schneller ist. Dieses ist nützlich, wenn Zeitpunkte in einer Schleife formatiert werden.

- -
var options = { weekday: 'long', year: 'numeric',
-                month: 'long', day: 'numeric' };
-var dateFormatter = new Intl.DateTimeFormat('de-DE', options)
-
-var dates = [Date.UTC(2012, 11, 20, 3, 0, 0),
-             Date.UTC(2014, 04, 12, 8, 0, 0)];
-
-dates.forEach(date => console.log(dateFormatter.format(date)));
-
-// "Donnerstag, 20. Dezember 2012"
-// "Montag, 12. Mai 2014"
-
- -

Alternative Standardsyntax mit Date Methoden

- -

Das {{jsxref("Date")}} Objekt enthält einige Methoden, um einen Benutzerdefinierten Datumsstring zu erhalten.

- -
(new Date()).toLocaleFormat("%Y%m%d");
-// "20170310"
-
- -

Dieses kan konvertiert werde:

- -
let now = new Date();
-let date = now.getFullYear() * 10000 +
-          (now.getMonth() + 1) * 100 + now.getDate();
-
-console.log(date);
-// "20170310"
- -

Siehe auch

- - diff --git a/files/de/web/javascript/reference/fehler/equal_as_assign/index.html b/files/de/web/javascript/reference/fehler/equal_as_assign/index.html deleted file mode 100644 index dbe5e55b02..0000000000 --- a/files/de/web/javascript/reference/fehler/equal_as_assign/index.html +++ /dev/null @@ -1,54 +0,0 @@ ---- -title: 'SyntaxError: test for equality (==) mistyped as assignment (=)?' -slug: Web/JavaScript/Reference/Fehler/Equal_as_assign -tags: - - Errors - - JavaScript - - SyntaxError -translation_of: Web/JavaScript/Reference/Errors/Equal_as_assign ---- -
{{jsSidebar("Errors")}}
- -

Fehlermeldung

- -
Warning: SyntaxError: test for equality (==) mistyped as assignment (=)?
-
- -

Fehlertyp

- -

{{jsxref("SyntaxError")}} Warnung nur im strict mode.

- -

Was ist falsch gelaufen?

- -

Es gibt eine Zuweisung (=) an der eigentlich ein Gleichheitsprüfung (==) erwartet wird. Um das Debuggen zu unterstützen, warnt JavaScript diesen Fakt (im strict mode).

- -

Beispiele

- -

Zuweisung in bedingten Ausdrücken

- -

Es ist ratsam in bedingten Ausdrücken (wie z. B. if...else) keine einfachen Zuweisungen zu verwenden, weil beim lesen des Codes eine Zuweisung mit einer Gleichheitsprüfung verwechselt werden kann. Zum Beispiel sollte folgender Code nicht verwendet werden:

- -
if (x = y) {
-  // do the right thing
-}
-
- -

Wenn es notwendig ist eine Zuweisung in einem bedingten Ausdruck einzusetzen, ist es verbreitet, diese mit runden Klammern einzuklammern. Zum Beispiel:

- -
if ((x = y)) {
-  // do the right thing
-}
- -

Andernfalls kann es sein, dass eigentliche eine Vergleichsoperation gemeint war (z. B. == oder ===):

- -
if (x == y) {
-  // do the right thing
-}
- -

Siehe auch

- - diff --git a/files/de/web/javascript/reference/fehler/for-each-in_loops_are_deprecated/index.html b/files/de/web/javascript/reference/fehler/for-each-in_loops_are_deprecated/index.html deleted file mode 100644 index 2651ea45ba..0000000000 --- a/files/de/web/javascript/reference/fehler/for-each-in_loops_are_deprecated/index.html +++ /dev/null @@ -1,168 +0,0 @@ ---- -title: 'Warning: JavaScript 1.6''s for-each-in loops are deprecated' -slug: Web/JavaScript/Reference/Fehler/For-each-in_loops_are_deprecated -tags: - - JavaScript - - Warning -translation_of: Web/JavaScript/Reference/Errors/For-each-in_loops_are_deprecated ---- -
{{jsSidebar("Errors")}}
- -

Fehlermeldung

- -
Warning: JavaScript 1.6's for-each-in loops are deprecated; consider using ES6 for-of instead
-
- -

Fehlertyp

- -

Warnung

- -

Was ist falsch gelaufen?

- -

Das {{jsxref("Statements/for_each...in", "for each (variable in obj)")}} Statement aus JavaScript 1.6 ist veraltet und wird in naher Zukunft entfernt.

- -

Beispiele

- -

Objektiteration

- -

{{jsxref("Statements/for_each...in", "for each...in")}} wurde eingesetzt, um über spezifizierte Objektwerte zu iterieren.

- -

Veraltete Syntax

- -
var object = { a: 10, b: 20 };
-
-for each (var x in object) {
-  console.log(x);        // 10
-                         // 20
-}
-
- -

Alternative Standardsyntax

- -

Man kann die Standardschleife {{jsxref("Statements/for...in", "for...in")}} benutzen, um über spezifizierte Objektschlüssel zu iterieren und jeden Wert in der Schleife auszulesen:

- -
var object = { a: 10, b: 20 };
-
-for (var key in object) {
-  var x = object[key];
-  console.log(x);        // 10
-                         // 20
-}
-
- -

Oder man benutzt {{jsxref("Statements/for...of", "for...of")}} (ES2015) und {{jsxref("Object.values")}} (ES2017), um ein Array von spezifizerten Werten zu bekommen und über diese zu iterieren:

- -
var object = { a: 10, b: 20 };
-
-for (var x of Object.values(object)) {
-  console.log(x);        // 10
-                         // 20
-}
-
- -

Arrayiteration

- -

{{jsxref("Statements/for_each...in", "for each...in")}} wurde eingesetzt, um über spezifizierte Arrayelemente zu iterieren.

- -

Veraltete Syntax

- -
var array = [10, 20, 30];
-
-for each (var x in array) {
-  console.log(x);        // 10
-                         // 20
-                         // 30
-}
-
- -

Alternative Standardsyntax

- -

Dieses ist mit der {{jsxref("Statements/for...of", "for...of Schleife")}} (ES2015) möglich.

- -
var array = [10, 20, 30];
-
-for (var x of array) {
-  console.log(x);        // 10
-                         // 20
-                         // 30
-}
-
- -

Iterieren über ein Arrays oder null

- -

{{jsxref("Statements/for_each...in", "for each...in")}} tut nichts, wenn der übergebene Wert null oder undefined ist. {{jsxref("Statements/for...of", "for...of")}} erzeugt in diesem Fall einen Fehler.

- -

Veraltete Syntax

- -
function func(array) {
-  for each (var x in array) {
-    console.log(x);
-  }
-}
-func([10, 20]);        // 10
-                       // 20
-func(null);            // prints nothing
-func(undefined);       // prints nothing
-
- -

Alternative Standardsyntax

- -

Um das {{jsxref("Statements/for_each...in", "for each...in")}} Statement neu zu schreibe, so dass null oder undefined mit {{jsxref("Statements/for...of", "for...of")}} funktionieren, muss eine Bedingung um {{jsxref("Statements/for...of", "for...of")}} verfasst werden.

- -
function func(array) {
-  if (array) {
-    for (var x of array) {
-      console.log(x);
-    }
-  }
-}
-func([10, 20]);        // 10
-                       // 20
-func(null);            // prints nothing
-func(undefined);       // prints nothing
-
- -

Über Objekt-Schlüssel-Werte-Paare iterieren

- -

Veraltete Syntax

- -

Es gibt eine veraltete Dialekt, der das Iterieren über Objekt-Schlüssel-Werte-Paare mit {{jsxref("Statements/for_each...in", "for each...in")}} und mit dem veralteten {{jsxref("Iterator")}} Objekt erlaubt.

- -
var object = { a: 10, b: 20 };
-
-for each (var [key, value] in Iterator(object)) {
-  console.log(key, value);  // "a", 10
-                            // "b", 20
-}
-
- -

Alternative Standardsyntax

- -

Man kann die Standardschleife {{jsxref("Statements/for...in", "for...in")}} benutzen, um über spezifizierte Objektschlüssel zu iterieren und jeden Wert in der Schleife auszulesen:

- -
var object = { a: 10, b: 20 };
-
-for (var key in object) {
-  var value = object[key];
-  console.log(key, value);  // "a", 10
-                            // "b", 20
-}
-
- -

Oder man benutzt {{jsxref("Statements/for...of", "for...of")}} (ES2015) und {{jsxref("Object.values")}} (ES2017), um ein Array von spezifizerten Werten zu bekommen und über diese zu iterieren:

- -
var object = { a: 10, b: 20 };
-
-for (var [key, value] of Object.entries(object)) {
-  console.log(key, value);  // "a", 10
-                            // "b", 20
-}
-
- -

Siehe auch

- - diff --git a/files/de/web/javascript/reference/fehler/getter_only/index.html b/files/de/web/javascript/reference/fehler/getter_only/index.html deleted file mode 100644 index 268ee0cbf1..0000000000 --- a/files/de/web/javascript/reference/fehler/getter_only/index.html +++ /dev/null @@ -1,83 +0,0 @@ ---- -title: 'TypeError: setting getter-only property "x"' -slug: Web/JavaScript/Reference/Fehler/Getter_only -tags: - - Error - - Errors - - JavaScript - - Strict Mode - - TypeError -translation_of: Web/JavaScript/Reference/Errors/Getter_only ---- -
{{jsSidebar("Errors")}}
- -

Fehlermeldung

- -
TypeError: setting getter-only property "x" (Firefox)
-TypeError: Cannot set property "prop" of #<Object> which has only a getter (Chrome)
-
- -

Fehlertyp

- -

{{jsxref("TypeError")}} nur im strict mode.

- -

Was ist falsch gelaufen?

- -

Wenn versucht wird einen neuen Wert einer Wichenschaft zuzuweisen, welche nur als Getter spezifiziert wurde. Wenn kein strict mode verwendet wird, wird dieses stillschweigend ignoriert, während im strict mode ein {{jsxref("TypeError")}} erzeugt wird.

- -

Beispiele

- -

Das folgende Beispiel zeigt, wie eine Eigenschaft als Getter eingestellt wird. Es wird kein Setter definiert, so dass ein TypeError erzeugt wird, wenn die temperature Eigenschaft mit dem Wert 30 beschrieben werden soll. Für mehr Details siehe auf der {{jsxref("Object.defineProperty()")}} Seite.

- -
"use strict";
-
-function Archiver() {
-  var temperature = null;
-  Object.defineProperty(this, 'temperature', {
-    get: function() {
-      console.log('get!');
-      return temperature;
-    }
-  });
-}
-
-var arc = new Archiver();
-arc.temperature; // 'get!'
-
-arc.temperature = 30;
-// TypeError: setting getter-only property "temperature"
- -

Um den Fehler zu beheben, muss einefach die Zeile 16 entfernt werden, weil dort der Versuch ist die temperature Eigenschaft zu beschreiben, oder es muss ein Setter definiert werden, wie zum Beispiel dieser:

- -
"use strict";
-
-function Archiver() {
-  var temperature = null;
-  var archive = [];
-
-  Object.defineProperty(this, 'temperature', {
-    get: function() {
-      console.log('get!');
-      return temperature;
-    },
-    set: function(value) {
-      temperature = value;
-      archive.push({ val: temperature });
-    }
-  });
-
-  this.getArchive = function() { return archive; };
-}
-
-var arc = new Archiver();
-arc.temperature; // 'get!'
-arc.temperature = 11;
-arc.temperature = 13;
-arc.getArchive(); // [{ val: 11 }, { val: 13 }]
- -

Siehe auch

- - diff --git a/files/de/web/javascript/reference/fehler/identifier_after_number/index.html b/files/de/web/javascript/reference/fehler/identifier_after_number/index.html deleted file mode 100644 index 64cb9cdfe3..0000000000 --- a/files/de/web/javascript/reference/fehler/identifier_after_number/index.html +++ /dev/null @@ -1,53 +0,0 @@ ---- -title: 'SyntaxError: identifier starts immediately after numeric literal' -slug: Web/JavaScript/Reference/Fehler/Identifier_after_number -tags: - - Error - - Errors - - JavaScript - - SyntaxError -translation_of: Web/JavaScript/Reference/Errors/Identifier_after_number ---- -
{{JSSidebar("Errors")}}
- -

Fehlermeldung

- -
SyntaxError: identifier starts immediately after numeric literal (Firefox)
-SyntaxError: Unexpected number (Chrome)
-
- -

Fehlertyp

- -

{{jsxref("SyntaxError")}}

- -

Was ist falsch gelaufen?

- -

Die Namen von Variablen, {{Glossary("Identifier", "Bezeichner")}} genannt, haben einige Regeln, die der Code erfüllen muss.

- -

Ein Bezeichner in JavaScript muss mit einem Buchstaben, einem Unterstrich (_) oder einem Dollarzeichen ($) starten. Er kann nicht mit einer Ziffer beginnen. Nur nachfolgende Zeichen sind Ziffern (0-9).

- -

Beispiele

- -

Variablenname der mit einer Ziffer beginnt

- -

Variablennamen dürfen in JavaScript nicht mit einer Zahl beginnen. Das folgende wird nciht funktionieren:

- -
var 1life = 'foo';
-// SyntaxError: identifier starts immediately after numeric literal
-
-var foo = 1life;
-// SyntaxError: identifier starts immediately after numeric literal
-
- -

Man muss die Variable neu benenne, um die führende Zahl im Namen zu vermeiden.

- -
var life1 = 'foo';
-var foo = life1;
-
- -

Siehe auch

- - diff --git a/files/de/web/javascript/reference/fehler/illegal_character/index.html b/files/de/web/javascript/reference/fehler/illegal_character/index.html deleted file mode 100644 index e0c083022c..0000000000 --- a/files/de/web/javascript/reference/fehler/illegal_character/index.html +++ /dev/null @@ -1,80 +0,0 @@ ---- -title: 'SyntaxError: illegal character' -slug: Web/JavaScript/Reference/Fehler/Illegal_character -tags: - - Error - - Errors - - JavaScript - - SyntaxError -translation_of: Web/JavaScript/Reference/Errors/Illegal_character ---- -
{{jsSidebar("Errors")}}
- -

Fehlermeldung

- -
SyntaxError: illegal character (Firefox)
-SyntaxError: Invalid or unexpected token (Chrome)
-
- -

Fehlertyp

- -

{{jsxref("SyntaxError")}}

- -

Was ist falsch gelaufen?

- -

Es gibt ein nicht valides oder nicht erwartetes Token, welches nicht an eine Position im Code passt. Man sollte einen Editor mit Syntaxhighlighting benutzten und vorsichtig nach Verwechselungen suchen, wie einem Minuszeichen ( - ) und einem Dashzeichen () oder einfachen Anführungszeichen ( " ) und anderen Anführungszeichen ().

- -

Beispiele

- -

Verwechseltes Zeichen

- -

Einige Zeichen sehen sehr ähnlich aus, aber führen dazu, dass der Code nicht interpretiert werden kann. Bekannte Beispiele dafür sind Anführungszeichen, das Minus oder das Semikolon (griechisches Fragezeichen (U+37e) sieht genauso aus)

- -
“This looks like a string”;  // SyntaxError: illegal character
-                             // “ und ” sind nicht ", aber sehen so aus
-
-42 – 13;                     // SyntaxError: illegal character
-                             // – sind nicht -, aber sieht so aus
-
-var foo = 'bar';             // SyntaxError: illegal character
-                             // <37e> sind nicht ;, aber sieht so aus
-
- -

Das funktioniert:

- -
"This is actually a string";
-42 - 13;
-var foo = 'bar';
-
- -

Einige Editoren und IDEs werden darauf hinweisen oder dieses anderes hervorheben, aber nicht alle. Wenn manchmal so etwas im Code passiert und man in der Lage ist das Problem zu finden, ist es oft das beste die Zeile zu löschen und sie neu einzutippen.

- -

Vergessene Zeichen

- -

Es passiert schnell, dass man ein Zeichen vergisst.

- -
var colors = ['#000', #333', '#666'];
-// SyntaxError: illegal character
-
- -

Man muss das fehlende Anführungszeichen ergänzen '#333'.

- -
var colors = ['#000', '#333', '#666'];
- -

Nicht sichtbare Zeichen

- -

Beim Kopieren und Einfügen von Code aus externen Quellen kann es nicht valide Zeichen geben. Zum Beispiel:

- -
var foo = 'bar';​
-// SyntaxError: illegal character
-
- -

Wenn man den Code in einem Editor wie Vim anschaut, bemerkt man, dass ein breitenloses Leerzeichen (ZWSP) (U+200B) benutzt wird.

- -
var foo = 'bar';​<200b>
- -

Siehe auch

- - diff --git a/files/de/web/javascript/reference/fehler/in_operator_no_object/index.html b/files/de/web/javascript/reference/fehler/in_operator_no_object/index.html deleted file mode 100644 index 6bace66437..0000000000 --- a/files/de/web/javascript/reference/fehler/in_operator_no_object/index.html +++ /dev/null @@ -1,72 +0,0 @@ ---- -title: 'TypeError: cannot use ''in'' operator to search for ''x'' in ''y''' -slug: Web/JavaScript/Reference/Fehler/in_operator_no_object -tags: - - Error - - Errors - - JavaScript - - TypeError -translation_of: Web/JavaScript/Reference/Errors/in_operator_no_object ---- -
{{jsSidebar("Errors")}}
- -

Fehlermeldung

- -
TypeError: right-hand side of 'in' should be an object, got 'x' (Firefox)
-TypeError: cannot use 'in' operator to search for 'x' in 'y' (Firefox, Chrome)
-
- -

Fehlertyp

- -

{{jsxref("TypeError")}}

- -

Was ist falsch gelaufen?

- -

Der in Operator kan nur für das Prüfen von Eigenschaften in Objekten genutzt werden. Man kann nicht in Strings, Nummern oder anderen primitiven Typen suchen.

- -

Beispiele

- -

Suchen in Strings

- -

Im Vergleich zu anderen Programmiersprachen (z. B. Python) kann in Strings nicht mit dem in Operator gesucht werden.

- -
"Hello" in "Hello World";
-// TypeError: cannot use 'in' operator to search for 'Hello' in 'Hello World'
- -

Stattdessen kann zum Beispiel {{jsxref("String.prototype.indexOf()")}} eingesetzt werden.

- -
"Hello World".indexOf("Hello") !== -1;
-// true
- -

Der Operand kann nicht null oder undefined sein

- -

Man muss sicherstellen, dass der Operand nicht {{jsxref("null")}} oder {{jsxref("undefined")}} ist.

- -
var foo = null;
-"bar" in foo;
-// TypeError: cannot use 'in' operator to search for 'bar' in 'foo' (Chrome)
-// TypeError: right-hand side of 'in' should be an object, got null (Firefox)
-
- -

Der in Operator erwartet immer ein Objekt.

- -
var foo = { baz: "bar" };
-"bar" in foo; // false
-
-"PI" in Math; // true
-"pi" in Math; // false
-
- -

Suchen in Arrays

- -

Man muss vorsichtig sein, wenn der in Operator in {{jsxref("Array")}} Objekten genutzt wird. Der in Operator prüft die Indexnummern, aber nicht die Werte des Indizes.

- -
var trees = ['redwood', 'bay', 'cedar', 'oak', 'maple'];
-3 in trees; // true
-"oak" in trees; // false
- -

Siehe auch

- - diff --git a/files/de/web/javascript/reference/fehler/index.html b/files/de/web/javascript/reference/fehler/index.html deleted file mode 100644 index 67809031e7..0000000000 --- a/files/de/web/javascript/reference/fehler/index.html +++ /dev/null @@ -1,29 +0,0 @@ ---- -title: JavaScript Fehler Referenz -slug: Web/JavaScript/Reference/Fehler -tags: - - Debugging - - Error - - Errors - - Exception - - JavaScript - - exceptions -translation_of: Web/JavaScript/Reference/Errors ---- -

{{jsSidebar("Errors")}}

- -

Unten ist eine Liste von Fehlern, die in JavaScript auftauchen können. Diese Fehler können beim Debuggen hilfreich sein, jedoch sind die Probleme nicht immer so klar. Die untenstehenden Seiten enthalten Details zu diesen Fehlern. Jeder Fehler ist ein Objekt, welches auf dem {{jsxref("Error")}} Objekt basieren und haben einen name und eine Fehlermeldung (message).

- -

Fehler die in der Webconsole angezeigt werden enthalten manchmal einen Link zu einer der untenstehenden Seiten, um die Lösung von Problemen zu beschleunigen.

- -

Liste von Fehlern

- -

In dieser Liste ist jede Seite mit einem Namen (der Typ des Fehlers) und einer Fehlermeldung (eine detailliertere, verständlichere Meldung) aufgeführt. Diese beiden Eigenschaften eines Fehlers sind ein Einstiegspunkt für das Verständnis und das Lösen des Fehlers. Für mehr Informationen folge den folgenden Links!

- -

{{ListSubPages("/en-US/docs/Web/JavaScript/Reference/Errors")}}

- -

Siehe auch

- - diff --git a/files/de/web/javascript/reference/fehler/invalid_array_length/index.html b/files/de/web/javascript/reference/fehler/invalid_array_length/index.html deleted file mode 100644 index 34edeb2969..0000000000 --- a/files/de/web/javascript/reference/fehler/invalid_array_length/index.html +++ /dev/null @@ -1,77 +0,0 @@ ---- -title: 'RangeError: invalid array length' -slug: Web/JavaScript/Reference/Fehler/Invalid_array_length -tags: - - Errors - - JavaScript - - RangeError -translation_of: Web/JavaScript/Reference/Errors/Invalid_array_length ---- -
{{jsSidebar("Errors")}}
- -

Fehlermeldung

- -
RangeError: invalid array length (Firefox)
-RangeError: Invalid array length (Chrome)
-RangeError: Invalid array buffer length (Chrome)
-
- -

Fehlertyp

- -

{{jsxref("RangeError")}}

- -

Was ist falsch gelaufen?

- -

entweder:

- - - -

Warum ist die Länge von Array and ArrayBuffer limitiert? Die length Eigenschaft von Array und ArrayBuffer ist mit einem vorzeichenlosen 32-bit Integer definiert, sodass nur Werte von 0 bis 232-1 gültig sind.

- -

Wenn man ein Array mit dem Konstruktor erzeugen möchte, statt mit der Literalnotation, sollte man aufpassem, dass das erste Argument als Länge des Arrays interpretiert wird.

- -

Man sollte die Länge festlegen, bevor man die length Eigenschaft setzt, oder mit dem ersten Argument im Konstruktor.

- -

Beispiele

- -

Ungültige Fälle

- -
new Array(Math.pow(2, 40))
-new Array(-1)
-new ArrayBuffer(Math.pow(2, 32))
-new ArrayBuffer(-1)
-
-let a = [];
-a.length = a.length - 1;         // length Eigenschaft auf -1 gesetzt
-
-let b = new Array(Math.pow(2, 32) - 1);
-b.length = b.length + 1;         // length Eigenschaft auf 2^32 gesetzt
-
- -

Gültige Fälle

- -
[ Math.pow(2, 40) ]                     // [ 1099511627776 ]
-[ -1 ]                                  // [ -1 ]
-new ArrayBuffer(Math.pow(2, 32) - 1)
-new ArrayBuffer(0)
-
-let a = [];
-a.length = Math.max(0, a.length - 1);
-
-let b = new Array(Math.pow(2, 32) - 1);
-b.length = Math.min(0xffffffff, b.length + 1);
-
-// 0xffffffff ist die hexadecimal Notation für 2^32 - 1
-// kann auch als (-1 >>> 0) geschrieben werden
-
- -

Siehe auch

- - diff --git a/files/de/web/javascript/reference/fehler/invalid_assignment_left-hand_side/index.html b/files/de/web/javascript/reference/fehler/invalid_assignment_left-hand_side/index.html deleted file mode 100644 index 6e727fb9a2..0000000000 --- a/files/de/web/javascript/reference/fehler/invalid_assignment_left-hand_side/index.html +++ /dev/null @@ -1,53 +0,0 @@ ---- -title: 'ReferenceError: invalid assignment left-hand side' -slug: Web/JavaScript/Reference/Fehler/Invalid_assignment_left-hand_side -tags: - - Errors - - JavaScript - - ReferenceError -translation_of: Web/JavaScript/Reference/Errors/Invalid_assignment_left-hand_side ---- -
{{jsSidebar("Errors")}}
- -

Fehlermeldung

- -
ReferenceError: invalid assignment left-hand side
-
- -

Fehlertyp

- -

{{jsxref("ReferenceError")}}.

- -

Was ist falsch gelaufen?

- -

Es gibt irgendwo eine unerwartete Zuweisung. Das kann zum Beispiel durch eine nicht Übereinstimmung des Zuweisungsoperators und eines Vergleichsoperators hervorgerufen werden. Während ein einzelnes "=" Zeichen einer Variable einen Wert zuweist, vergleichen  "==" und "===" zwei Werte.

- -

Beispiele

- -
if (Math.PI = 3 || Math.PI = 4) {
-  console.log('no way!');
-}
-// ReferenceError: invalid assignment left-hand side
-
-var str = 'Hello, '
-+= 'is it me '
-+= 'you\'re looking for?';
-// ReferenceError: invalid assignment left-hand side
- -

In dem if Statement wird ein Vergleichsoperator ("==") und für die Stringverkettung ein plus ("+") Operator benötigt.

- -
if (Math.PI == 3 || Math.PI == 4) {
-  console.log('no way!');
-}
-
-var str = 'Hello, '
-+ 'from the '
-+ 'other side!';
-
- -

Siehe auch

- - diff --git a/files/de/web/javascript/reference/fehler/invalid_const_assignment/index.html b/files/de/web/javascript/reference/fehler/invalid_const_assignment/index.html deleted file mode 100644 index 812577360a..0000000000 --- a/files/de/web/javascript/reference/fehler/invalid_const_assignment/index.html +++ /dev/null @@ -1,90 +0,0 @@ ---- -title: 'TypeError: invalid assignment to const "x"' -slug: Web/JavaScript/Reference/Fehler/Invalid_const_assignment -tags: - - Error - - JavaScript - - TypeError -translation_of: Web/JavaScript/Reference/Errors/Invalid_const_assignment ---- -
{{jsSidebar("Errors")}}
- -

Fehlermeldung

- -
TypeError: invalid assignment to const "x" (Firefox)
-TypeError: Assignment to constant variable. (Chrome)
-TypeError: Redeclaration of const 'x' (IE/Edge)
-
- -

Fehlertyp

- -

{{jsxref("TypeError")}}

- -

Was ist falsch gelaufen?

- -

Eine Konstante ist ein Wert, der nicht von einem Programm während der normalen Ausführung, geändert werden kann. Sie kann nicht durch erneutes Zuweisen und Neudeklarationen geändert werden. In JavaScript werden Konstanten mit dem const Schlüsselwort deklariert.

- -

Beispiel

- -

Nicht valide Neudeklaration

- -

Weist eine Konstanten erneut einen Wert zu. Führt zu einem Fehler.

- -
const COLUMNS = 80;
-
-// ...
-
-COLUMNS = 120; // TypeError: invalid assignment to const `COLUMNS'
- -

Den Fehler auflösen

- -

Es gibt mehrere Optionen, um den Fehler zu vermeiden. Überprüfen Sie, was mit der betreffenden Konstante erreicht werden sollte.

- -

Umbenennen

- -

Wenn Sie eine andere Konstante deklarieren möchten, wählen Sie einen anderen Namen und benennen Sie ihn um. Dieser konstante Name ist dann in diesem Bereich vergeben.

- -
const COLUMNS = 80;
-const WIDE_COLUMNS = 120;
- -

const, let or var?

- -

Verwenden Sie nicht const, wenn Sie keine Konstante deklarieren wollten. Vielleicht soll eine Blockvariable mit let oder eine globale Variable mit var deklariert werden.

- -
let columns = 80;
-
-// ...
-
-let columns = 120;
-
- -

Gültigkeitsbereich

- -

Prüfen Sie, ob Sie im richtigen Gültigkeitsbereich sind. Sollte diese Konstante in diesen Gültigkeitsbereich oder sollte diese zum Beispiel in eine Funktion.

- -
const COLUMNS = 80;
-
-function setupBigScreenEnvironment() {
-  const COLUMNS = 120;
-}
- -

const und Unveränderlichkeit

- -

Die const Deklaration erstellt eine nur lesbare Referenz zu einem Wert. Das bedeutet nicht, dass der enthaltene Wert Unveränderbar ist, sondern nur, dass der Bezeichner nicht neu definiert werden kann. Wenn die Konstante zum Beispiel ein Objekt ist, kann das Objekt selbst verändert werden. Es bedeutet nur, dass der Wert in der Variable nicht verändert werden kann.

- -
const obj = {foo: 'bar'};
-obj = {foo: 'baz'}; // TypeError: invalid assignment to const `obj'
-
- -

Aber man kann die Eigenschaften der Variable verändern:

- -
obj.foo = 'baz';
-obj; // Object { foo: "baz" }
- -

Siehe auch

- - diff --git a/files/de/web/javascript/reference/fehler/invalid_date/index.html b/files/de/web/javascript/reference/fehler/invalid_date/index.html deleted file mode 100644 index 04954fe28f..0000000000 --- a/files/de/web/javascript/reference/fehler/invalid_date/index.html +++ /dev/null @@ -1,54 +0,0 @@ ---- -title: 'RangeError: invalid date' -slug: Web/JavaScript/Reference/Fehler/Invalid_date -tags: - - Errors - - JavaScript - - RangeError -translation_of: Web/JavaScript/Reference/Errors/Invalid_date ---- -
{{jsSidebar("Errors")}}
- -

Fehlermeldung

- -
RangeError: invalid date (Firefox)
-RangeError: invalid time value (Chrome)
-RangeError: Provided date is not in valid range (Chrome)
-
- -

Fehlertyp

- -

{{jsxref("RangeError")}}

- -

Was ist schief gelaufen?

- -

Eine Zeichenfolge, die ein ungültiges Datum enthält, wurde  {{jsxref("Date")}} oder {{jsxref("Date.parse()")}} übergeben.

- -

Beispiele

- -

Nicht valide Fälle

- -

Nicht erkennbare Strings oder Daten, welche nicht erlaubte Elementewerte im ISO formatierten String enthalten, geben gewöhnlich {{jsxref("NaN")}} zurück. Abhängig von der Implementierung kann es auch sein, dass nicht valide ISO Formate, einen RangeError: invalid date erzeugen, wie die folgenden Fällen in Firefox:

- -
new Date('foo-bar 2014');
-new Date('2014-25-23').toISOString();
-new Date('foo-bar 2014').toString();
-
- -

Das folgende gibt in Firefox {{jsxref("NaN")}} zurück.

- -
Date.parse('foo-bar 2014'); // NaN
- -

Für mehr Details, sollte die {{jsxref("Date.parse()")}} Dokumentation angesehen werden.

- -

Valide Fälle

- -
new Date('05 October 2011 14:48 UTC');
- -

Siehe auch

- - diff --git a/files/de/web/javascript/reference/fehler/invalid_for-in_initializer/index.html b/files/de/web/javascript/reference/fehler/invalid_for-in_initializer/index.html deleted file mode 100644 index bc4bf80c70..0000000000 --- a/files/de/web/javascript/reference/fehler/invalid_for-in_initializer/index.html +++ /dev/null @@ -1,74 +0,0 @@ ---- -title: 'SyntaxError: for-in loop head declarations may not have initializers' -slug: Web/JavaScript/Reference/Fehler/Invalid_for-in_initializer -tags: - - Error - - JavaScript - - Strict Mode - - SyntaxError -translation_of: Web/JavaScript/Reference/Errors/Invalid_for-in_initializer ---- -
{{jsSidebar("Errors")}}
- -

Fehlermeldung

- -
SyntaxError: for-in loop head declarations may not have initializers (Firefox)
-
-SyntaxError: for-in loop variable declaration may not have an initializer. (Chrome)
-
- -

Fehlertyp

- -

{{jsxref("SyntaxError")}} nur im Strict Mode.

- -

Was ist falsch gelaufen?

- -

Der Kopf einer for...in Schleife enthält einen Initialisierungsausdruck. Das ist, wenn eine Variable deklariert und mit einem Wert initialisiert wird (for(var i = 0 in obj)). Ohne Strict Mode wird die Initialisierung still ignoriert und verhält sich wie for(var i in obj). Im Strict Mode wird ein SyntaxError erzeugt.

- -

Beispiele

- -

Das Beispiel erzeugt einen SyntaxError:

- -
"use strict";
-
-var obj = {a: 1, b: 2, c: 3 };
-
-for (var i = 0 in obj) {
-  console.log(obj[i]);
-}
-
-// SyntaxError: for-in loop head declarations may not have initializers
-
- -

Valide for-in Schleife

- -

Man kann die Initialisierung (i = 0) im Kopf der for-in Schleife entfernen.

- -
"use strict";
-
-var obj = {a: 1, b: 2, c: 3 };
-
-for (var i in obj) {
-  console.log(obj[i]);
-}
-
- -

Array Iteration

- -

Die for...in Schleife sollte nicht für Array Iterationen benutzt werden. Zum Iterieren von durch ein {{jsxref("Array")}} sollte eine for Schleife statt einer for-in Schleife benutzt werden. Die for Schleife erlaubt es dann auch eine Initialisierung vorzunehmen:

- -
var arr = [ "a", "b", "c" ]
-
-for (var i = 2; i < arr.length; i++) {
-  console.log(arr[i]);
-}
-
-// "c"
- -

Siehe auch

- - diff --git a/files/de/web/javascript/reference/fehler/invalid_for-of_initializer/index.html b/files/de/web/javascript/reference/fehler/invalid_for-of_initializer/index.html deleted file mode 100644 index 3270387357..0000000000 --- a/files/de/web/javascript/reference/fehler/invalid_for-of_initializer/index.html +++ /dev/null @@ -1,63 +0,0 @@ ---- -title: >- - SyntaxError: a declaration in the head of a for-of loop can't have an - initializer -slug: Web/JavaScript/Reference/Fehler/Invalid_for-of_initializer -tags: - - Error - - JavaScript - - SyntaxError -translation_of: Web/JavaScript/Reference/Errors/Invalid_for-of_initializer ---- -
{{jsSidebar("Errors")}}
- -

Fehlermeldung

- -
SyntaxError: a declaration in the head of a for-of loop can't have an initializer (Firefox)
-
-SyntaxError: for-of loop variable declaration may not have an initializer. (Chrome)
-
- -

Fehlertyp

- -

{{jsxref("SyntaxError")}}

- -

Was falsch gelaufen ist?

- -

Der Kopf einer for...of Schleife enthält einen Initialisierungsausdruck. Das ist eine Variable die deklariert und initialisiert wird |for (var i = 0 of iterable)|. Dieses ist nicht erlaubt in for...of Schleifen. Manchmal ist eine for Schleife gemeint, die eine Initialisierung erlaubt.

- -

Beispiele

- -

Nicht valide for...of Schleife

- -
let iterable = [10, 20, 30];
-
-for (let value = 50 of iterable) {
-  console.log(value);
-}
-
-// SyntaxError: a declaration in the head of a for-of loop can't
-// have an initializer
- -

Valide for...of Schleife

- -

Man muss die Initialisierung (value = 50) im Kopf der for...of Schleife entfernen. Wenn 50 als Offset gedacht ist, kann man eine Addition in den Körper der Schleife verschieben, wie im folgenden Beispiel:

- -
let iterable = [10, 20, 30];
-
-for (let value of iterable) {
-  value += 50;
-  console.log(value);
-}
-// 60
-// 70
-// 80
-
- -

Siehe auch

- - diff --git a/files/de/web/javascript/reference/fehler/invalid_right_hand_side_instanceof_operand/index.html b/files/de/web/javascript/reference/fehler/invalid_right_hand_side_instanceof_operand/index.html deleted file mode 100644 index 771838b428..0000000000 --- a/files/de/web/javascript/reference/fehler/invalid_right_hand_side_instanceof_operand/index.html +++ /dev/null @@ -1,62 +0,0 @@ ---- -title: 'TypeError: invalid ''instanceof'' operand ''x''' -slug: Web/JavaScript/Reference/Fehler/invalid_right_hand_side_instanceof_operand -tags: - - Error - - Errors - - JavaScript - - Reference - - TypeError -translation_of: Web/JavaScript/Reference/Errors/invalid_right_hand_side_instanceof_operand ---- -
{{jsSidebar("Errors")}}
- -

Fehlermeldung

- -
TypeError: invalid 'instanceof' operand "x" (Firefox)
-TypeError: "x" is not a function (Firefox)
-TypeError: Right-hand side of 'instanceof' is not an object (Chrome)
-TypeError: Right-hand side of 'instanceof' is not callable (Chrome)
- -

Fehlertyp

- -

{{jsxref("TypeError")}}

- -

Was ist falsch gelaufen?

- -

Der instanceof Operator erwartet als rechten Operand einen Konstruktorobjekt, z. B. ein Objekt, welches eine prototype Eigenschaft hat und aufrufbar ist.

- -

Beispiele

- -
"test" instanceof ""; // TypeError: invalid 'instanceof' operand ""
-42 instanceof 0;      // TypeError: invalid 'instanceof' operand 0
-
-function Foo() {}
-var f = Foo();        // Foo() is called and returns undefined
-var x = new Foo();
-
-x instanceof f;       // TypeError: invalid 'instanceof' operand f
-x instanceof x;       // TypeError: x is not a function
-
- -

Um diesen Fehler zu beheben, kann entweder der instanceof Operator durch einen typeof Operator ersetzt werden, oder man muss sicher stellen, dass ein Funktionsname statt einem Resultat seines Aufrufes benutzt werden.

- -
typeof "test" == "string"; // true
-typeof 42 == "number"      // true
-
-function Foo() {}
-var f = Foo;               // Do not call Foo.
-var x = new Foo();
-
-x instanceof f;            // true
-x instanceof Foo;          // true
-
- -

Siehe auch

- - - -

 

diff --git a/files/de/web/javascript/reference/fehler/is_not_iterable/index.html b/files/de/web/javascript/reference/fehler/is_not_iterable/index.html deleted file mode 100644 index 21460882c7..0000000000 --- a/files/de/web/javascript/reference/fehler/is_not_iterable/index.html +++ /dev/null @@ -1,103 +0,0 @@ ---- -title: 'TypeError: ''x'' is not iterable' -slug: Web/JavaScript/Reference/Fehler/is_not_iterable -tags: - - Error - - JavaScript - - Reference - - TypeError -translation_of: Web/JavaScript/Reference/Errors/is_not_iterable ---- -
{{jsSidebar("Errors")}}
- -

Fehlermeldung

- -
TypeError: 'x' is not iterable (Firefox, Chrome)
-TypeError: 'x' is not a function or its return value is not iterable (Chrome)
-
- -

Fehlertyp

- -

{{jsxref("TypeError")}}

- -

Was ist falsch gelaufen?

- -

Der Wert, welcher auf der rechten Seite von for…of oder als Argument einer Funktion wie {{jsxref("Promise.all")}} oder {{jsxref("TypedArray.from")}} ist kein iterierbares Objekt. Ein iterierbares Objekt kann vom Standardtypen wie {{jsxref("Array")}}, {{jsxref("String")}} oder {{jsxref("Map")}} sein oder ein Objekt, welches das iterable Protokoll implementiert.

- -

Beispiele

- -

Über Objekteigenschaften iterieren

- -

In JavaScript sind {{jsxref("Object", "Objekte")}} nicht iterierbar, außer sie implementieren das iterable Protokoll. Demnach kann man for…of nicht für das Iterieren von Objekteigenschaften benutzen.

- -
var obj = { 'France': 'Paris', 'England': 'London' };
-for (let p of obj) { // TypeError: obj is not iterable
-    // …
-}
-
- -

Stattdessen kann man {{jsxref("Object.keys")}} oder {{jsxref("Object.entries")}} benutzen, um über die Eigenschaften oder Einträge zu iterieren.

- -
var obj = { 'France': 'Paris', 'England': 'London' };
-// Iterate over the property names:
-for (let country of obj.keys()) {
-    var capital = obj[country];
-    console.log(country, capital);
-}
-
-for (const [country, capital] of obj.entries())
-    console.log(country, capital);
-
- -

Eine andere Option ist in diesem Fall der Einsatz einer {{jsxref("Map")}}:

- -
var map = new Map;
-map.set('France', 'Paris');
-map.set('England', 'London');
-// Iterate over the property names:
-for (let country of map.keys()) {
-    let capital = map[country];
-    console.log(country, capital);
-}
-
-for (let capital of map.values())
-    console.log(capital);
-
-for (const [country, capital] of map.entries())
-    console.log(country, capital);
-
- -

Über einen Generator iterieren

- -

Generatoren sind Funktionen welche aufgerufen werden, um ein iterierbares Objekt zu produzieren.

- -
function* generate(a, b) {
-  yield a;
-  yield b;
-}
-
-for (let x of generate) // TypeError: generate is not iterable
-    console.log(x);
-
- -

Wenn dieser nicht aufgerufen wird, ist das korrespondierende {{jsxref("Function")}} Objekt des Generators aufrufbar, aber nicht iterierbar. Aufrufen des Generators Produziert ein iterierbares Objekt, welche über die Werte iteriert, die während der Ausführung des Generators zurückgegeben werden.

- -
function* generate(a, b) {
-    yield a;
-    yield b;
-}
-
-for (let x of generate(1,2))
-    console.log(x);
-
- -

Siehe auch

- - diff --git a/files/de/web/javascript/reference/fehler/json_bad_parse/index.html b/files/de/web/javascript/reference/fehler/json_bad_parse/index.html deleted file mode 100644 index 0aa5e6bdae..0000000000 --- a/files/de/web/javascript/reference/fehler/json_bad_parse/index.html +++ /dev/null @@ -1,112 +0,0 @@ ---- -title: 'SyntaxError: JSON.parse: bad parsing' -slug: Web/JavaScript/Reference/Fehler/JSON_bad_parse -tags: - - Errors - - JSON - - JavaScript - - Method - - Property - - SyntaxError -translation_of: Web/JavaScript/Reference/Errors/JSON_bad_parse ---- -
{{jsSidebar("Errors")}}
- -

Fehlermeldung

- -
SyntaxError: JSON.parse: unterminated string literal
-SyntaxError: JSON.parse: bad control character in string literal
-SyntaxError: JSON.parse: bad character in string literal
-SyntaxError: JSON.parse: bad Unicode escape
-SyntaxError: JSON.parse: bad escape character
-SyntaxError: JSON.parse: unterminated string
-SyntaxError: JSON.parse: no number after minus sign
-SyntaxError: JSON.parse: unexpected non-digit
-SyntaxError: JSON.parse: missing digits after decimal point
-SyntaxError: JSON.parse: unterminated fractional number
-SyntaxError: JSON.parse: missing digits after exponent indicator
-SyntaxError: JSON.parse: missing digits after exponent sign
-SyntaxError: JSON.parse: exponent part is missing a number
-SyntaxError: JSON.parse: unexpected end of data
-SyntaxError: JSON.parse: unexpected keyword
-SyntaxError: JSON.parse: unexpected character
-SyntaxError: JSON.parse: end of data while reading object contents
-SyntaxError: JSON.parse: expected property name or '}'
-SyntaxError: JSON.parse: end of data when ',' or ']' was expected
-SyntaxError: JSON.parse: expected ',' or ']' after array element
-SyntaxError: JSON.parse: end of data when property name was expected
-SyntaxError: JSON.parse: expected double-quoted property name
-SyntaxError: JSON.parse: end of data after property name when ':' was expected
-SyntaxError: JSON.parse: expected ':' after property name in object
-SyntaxError: JSON.parse: end of data after property value in object
-SyntaxError: JSON.parse: expected ',' or '}' after property value in object
-SyntaxError: JSON.parse: expected ',' or '}' after property-value pair in object literal
-SyntaxError: JSON.parse: property names must be double-quoted strings
-SyntaxError: JSON.parse: expected property name or '}'
-SyntaxError: JSON.parse: unexpected character
-SyntaxError: JSON.parse: unexpected non-whitespace character after JSON data
-
- -

Fehlertyp

- -

{{jsxref("SyntaxError")}}

- -

Was ist falsch gelaufen?

- -

{{jsxref("JSON.parse()")}} übersetzt einen String zu JSON. Dieser String muss eine gültiges JSON enthalten. Ist die Syntax fehlerhaft, wird dieser Error ausgegeben.

- -

Beispiele

- -

JSON.parse() erlaubt keine angehängten Kommata

- -

Beide Zeilen werden einen SyntaxError erzeugen:

- -
JSON.parse('[1, 2, 3, 4,]');
-JSON.parse('{"foo": 1,}');
-// SyntaxError JSON.parse: unexpected character
-// at line 1 column 14 of the JSON data
-
- -

Das letzte trennende Komma muss in JSON vermieden werden:

- -
JSON.parse('[1, 2, 3, 4]');
-JSON.parse('{"foo": 1}');
- -

Eigenschaftsnamen müssen Strings mit doppelten Anführungszeichen sein

- -

Man kann keine einfachen Anführungszeichen für Eigenschaften benutzen (wie 'foo').

- -
JSON.parse("{'foo': 1}");
-// SyntaxError: JSON.parse: expected property name or '}'
-// at line 1 column 2 of the JSON data
- -

Stattdessen muss "foo" benutzt werden:

- -
JSON.parse('{"foo": 1}');
- -

Führende Nullen und Dezimalpunkte

- -

Man kann keine führenden Nullen (wie 01) benutzen. Nach Dezimalpunkten muss mindestens eine Stelle stehen.

- -
JSON.parse('{"foo": 01}');
-// SyntaxError: JSON.parse: expected ',' or '}' after property value
-// in object at line 1 column 2 of the JSON data
-
-JSON.parse('{"foo": 1.}');
-// SyntaxError: JSON.parse: unterminated fractional number
-// at line 1 column 2 of the JSON data
-
- -

Stattdessen schreibe man nur 1, ohne eine Null (also 1, statt 01) und nutze mindestens eine Ziffer nach dem Dezimalpunkt:

- -
JSON.parse('{"foo": 1}');
-JSON.parse('{"foo": 1.0}');
-
- -

Siehe auch

- - diff --git a/files/de/web/javascript/reference/fehler/malformed_formal_parameter/index.html b/files/de/web/javascript/reference/fehler/malformed_formal_parameter/index.html deleted file mode 100644 index 65a89bb84a..0000000000 --- a/files/de/web/javascript/reference/fehler/malformed_formal_parameter/index.html +++ /dev/null @@ -1,61 +0,0 @@ ---- -title: 'SyntaxError: Malformed formal parameter' -slug: Web/JavaScript/Reference/Fehler/Malformed_formal_parameter -tags: - - Error - - JavaScript - - SyntaxError -translation_of: Web/JavaScript/Reference/Errors/Malformed_formal_parameter ---- -
{{jsSidebar("Errors")}}
- -

Fehlermeldung

- -
SyntaxError: malformed formal parameter (Firefox)
-
- -

Fehlertyp

- -

{{jsxref("SyntaxError")}}

- -

Was ist falsch gelaufen?

- -

Es existiert ein Function() Konstruktor mit mindestend zwei übergebenen Parametern im Quelltext. Der letzte Parameter ist der Quelltext für die neu zu erstellende Funktion. Der ganze Rest bildet die liste der Parameter der neu zu erstellenden Funktion.

- -

Die Liste der Parameter ist manchmal nicht valide. Das kann passieren, wenn versehendlich ein Schlüsselword, wie if oder var, für die namen der Parameter verwendet werden. Ein andere Grund kann eine falsche Interpunktion in der Argumentenliste verwendet wird. Auch ein falscher Wert wie eine Zahl oder ein Objekt kann die Ursache sein.

- -

OK, das löst mein Problem. Aber warum hast du das nicht sofort gesagt?

- -

Zugegeben, die Formulierung in der Fehlermeldung ist etwas seltsam. "formal parameter" ist eine andere Art "Funktionsargument oder "Funktionsparameter" zu sagen. Und wir verwenden das Wort "malformed", weil alle Firefox-Ingenieure sehr große Fans des Romans Gothic Horror sind.

- -

Beispiele

- -

Invalide Fälle

- -
var f = Function('x y', 'return x + y;');
-// SyntaxError (missing a comma)
-
-var f = Function('x,', 'return x;');
-// SyntaxError (extraneous comma)
-
-var f = Function(37, "alert('OK')");
-// SyntaxError (numbers can't be argument names)
-
- -

Valide Fälle

- -
var f = Function('x, y', 'return x + y;');  // correctly punctuated
-
-var f = Function('x', "return x;');
-
-// if you can, avoid using Function - this is much faster
-var f = function(x) { return x; };
-
- -

Siehe auch

- - diff --git a/files/de/web/javascript/reference/fehler/malformed_uri/index.html b/files/de/web/javascript/reference/fehler/malformed_uri/index.html deleted file mode 100644 index cf831aa4a6..0000000000 --- a/files/de/web/javascript/reference/fehler/malformed_uri/index.html +++ /dev/null @@ -1,66 +0,0 @@ ---- -title: 'URIError: malformed URI sequence' -slug: Web/JavaScript/Reference/Fehler/Malformed_URI -tags: - - Error - - Errors - - JavaScript - - URIError -translation_of: Web/JavaScript/Reference/Errors/Malformed_URI ---- -
{{jsSidebar("Errors")}}
- -

Fehlermeldung

- -
URIError: malformed URI sequence (Firefox)
-URIError: URI malformed (Chrome)
-
- -

Fehlertyp

- -

{{jsxref("URIError")}}

- -

Was ist falsch gelaufen?

- -

Das URI-Kodieren oder -Dekodieren war nicht erfolgreich. Ein gegebenenes Argument der {{jsxref("decodeURI")}}-, {{jsxref("encodeURI")}}-, {{jsxref("encodeURIComponent")}}-, oder {{jsxref("decodeURIComponent")}}-Funktion ist nicht valide, wodurch die Funktion nicht richtig Kodieren oder Dekodieren kann.

- -

Beispiele

- -

Kodieren

- -

Kodieren ersetzt bestimmte Zeichen durch eine Sequenz von einem, zwei, drei oder vier maskierten Zeichen, welche der UTF-8 Kodierung des Zeichens entsprechen. Ein {{jsxref("URIError")}} wird erzeugt, wenn versucht wird ein Zeichen zu kodieren, welches kein Teil des high-low-Paares ist, zum Beispiel:

- -
encodeURI('\uD800');
-// "URIError: malformed URI sequence"
-
-encodeURI('\uDFFF');
-// "URIError: malformed URI sequence"
-
- -

Ein high-low Paar ist ok. Zum Beispiel:

- -
encodeURI('\uD800\uDFFF');
-// "%F0%90%8F%BF"
- -

Dekodieren

- -

Dekodieren ersetzt eine Sequenz maskierter Zeichen in einer URI-Komponente mit einem Zeichen, welches dieses repräsentiert. Wenn es kein solches Zeichen gibt, wird ein Fehler erzeugt:

- -
decodeURIComponent('%E0%A4%A');
-// "URIError: malformed URI sequence"
-
- -

Mit richiger Eingabe sollte es wie folgendermaßen aussehen:

- -
decodeURIComponent('JavaScript_%D1%88%D0%B5%D0%BB%D0%BB%D1%8B');
-// "JavaScript_шеллы"
- -

Siehe auch

- - diff --git a/files/de/web/javascript/reference/fehler/missing_bracket_after_list/index.html b/files/de/web/javascript/reference/fehler/missing_bracket_after_list/index.html deleted file mode 100644 index b5fe14ae14..0000000000 --- a/files/de/web/javascript/reference/fehler/missing_bracket_after_list/index.html +++ /dev/null @@ -1,56 +0,0 @@ ---- -title: 'SyntaxError: missing ] after element list' -slug: Web/JavaScript/Reference/Fehler/Missing_bracket_after_list -tags: - - Errors - - JavaScript - - SyntaxError -translation_of: Web/JavaScript/Reference/Errors/Missing_bracket_after_list ---- -
{{jsSidebar("Errors")}}
- -

Fehlermeldung

- -
SyntaxError: missing ] after element list
-
- -

Fehlertyp

- -

{{jsxref("SyntaxError")}}.

- -

Was ist falsch gelaufen?

- -

Der Syntax der Array-Initialisierung enthält einen Fehler. Wahrscheinlich fehlt eine schließende eckige Klammer ("]") oder ein Komma (",").

- -

Beispiele

- -

Unvollständige Arrayinitialisierung

- -
var list = [1, 2,
-
-var instruments = [
-  'Ukulele',
-  'Guitar',
-  'Piano'
-};
-
-var data = [{foo: 'bar'} {bar: 'foo'}];
-
- -

Richtig wäre:

- -
var list = [1, 2];
-
-var instruments = [
- 'Ukulele',
- 'Guitar',
- 'Piano'
-];
-
-var data = [{foo: 'bar'}, {bar: 'foo'}];
- -

Siehe auch

- - diff --git a/files/de/web/javascript/reference/fehler/missing_colon_after_property_id/index.html b/files/de/web/javascript/reference/fehler/missing_colon_after_property_id/index.html deleted file mode 100644 index 26d515a018..0000000000 --- a/files/de/web/javascript/reference/fehler/missing_colon_after_property_id/index.html +++ /dev/null @@ -1,77 +0,0 @@ ---- -title: 'SyntaxError: missing : after property id' -slug: Web/JavaScript/Reference/Fehler/Missing_colon_after_property_id -tags: - - Error - - Errors - - JavaScript - - SyntaxError -translation_of: Web/JavaScript/Reference/Errors/Missing_colon_after_property_id ---- -
{{jsSidebar("Errors")}}
- -

Fehlermeldung

- -
SyntaxError: missing : after property id
-
- -

Fehlertyp

- -

{{jsxref("SyntaxError")}}

- -

Was ist falsch gelaufen?

- -

Wenn Objekte mit der Objektinitialisierungs-Syntax erstellt werden, wird ein (:) eingesetzt, um bei Eiegenschaften Schlüssel und Werte zu trennen.

- -
var obj = { propertyKey: 'value' };
-
- -

Examples

- -

Doppelpunkt vs. Gleichzeichen

- -

Der Code funktioniert nicht, weil das Gleichzeichen nicht in dieser Form in der Objektinitialisierungs-Syntax genutzt werden kann.

- -
var obj = { propertyKey = 'value' };
-// SyntaxError: missing : after property id
-
- -

Richtig währe der Einsatz eines Doppelpunktes oder der Einsatz von eckigen Klammern, um eine Eigenschaft nach dem erstellen des Objektes zuzuweisen.

- -
var obj = { propertyKey: 'value' };
-
-// or alternatively
-
-var obj = { };
-obj['propertyKey'] = 'value';
-
- -

Leere Eigenschaften

- -

Man kann nicht wie im Beispiel leere Eigenschaften erzeugen:

- -
var obj = { propertyKey; };
-// SyntaxError: missing : after property id
-
- -

Wenn eine Eigenschaft ohne Wert definiert werden soll, muss {{jsxref("null")}} als Wert genutzt werden.

- -
var obj = { propertyKey: null };
- -

Berechnete Eigenschaften

- -

Wenn ein Eigenschaftsname aus einem Ausdruck berechnet wird, müssen eckige Klammern genutzt werden. Anderfalls kann der Eigenschaftname nicht errechnet werden:

- -
var obj = { 'b'+'ar': 'foo' };
-// SyntaxError: missing : after property id
-
- -

Man muss den Ausdruck in [] setzen:

- -
var obj = { ['b'+'ar']: 'foo' };
- -

Siehe auch

- - diff --git a/files/de/web/javascript/reference/fehler/missing_curly_after_function_body/index.html b/files/de/web/javascript/reference/fehler/missing_curly_after_function_body/index.html deleted file mode 100644 index b5e0239a2f..0000000000 --- a/files/de/web/javascript/reference/fehler/missing_curly_after_function_body/index.html +++ /dev/null @@ -1,67 +0,0 @@ ---- -title: 'SyntaxError: missing } after function body' -slug: Web/JavaScript/Reference/Fehler/Missing_curly_after_function_body -tags: - - Error - - Errors - - JavaScript - - SyntaxError -translation_of: Web/JavaScript/Reference/Errors/Missing_curly_after_function_body ---- -
{{jsSidebar("Errors")}}
- -

Fehlermeldung

- -
SyntaxError: missing } after function body
-
- -

Fehlertyp

- -

{{jsxref("SyntaxError")}}

- -

Was ist falsch gelaufen?

- -

Es gibt einen Syntaxfehler irgendwo beim erstellen von Funktionen. Man sollte prüfen, ob alle runden und geschweiften Klammern in der richtigen Reihenfolge sind. Einrückung und Formatierung des Codes hilft dabei den Fehler zu erkennen.

- -

Beispiele

- -

Schließende geschweifte Klammer vergessen

- -

Oftmals fehlt eine geschweifte Klammer im Funktionsocde:

- -
var charge = function() {
-  if (sunny) {
-    useSolarCells();
-  } else {
-    promptBikeRide();
-};
-
- -

Richtig wäre:

- -
var charge = function() {
-  if (sunny) {
-    useSolarCells();
-  } else {
-    promptBikeRide();
-  }
-};
- -

Es kann deutlich verwirrender sein, wenn {{Glossary("IIFE")}}, Closures, oder andere Konstrukte, die viele verschiedene Klammern benutzt, eingesetzt werden, wie zum Beispiel:

- -
(function() { if (true) { return false; } );
-
- -

Oftmals hilft verschiedenes Einrücken oder doppeltes Prüfen der Einrückung, um den Fehler zu finden.

- -
(function() {
-  if (true) {
-    return false;
-  }
-});
- -

Siehe auch

- - diff --git a/files/de/web/javascript/reference/fehler/missing_curly_after_property_list/index.html b/files/de/web/javascript/reference/fehler/missing_curly_after_property_list/index.html deleted file mode 100644 index 41a82a9158..0000000000 --- a/files/de/web/javascript/reference/fehler/missing_curly_after_property_list/index.html +++ /dev/null @@ -1,51 +0,0 @@ ---- -title: 'SyntaxError: missing } after property list' -slug: Web/JavaScript/Reference/Fehler/Missing_curly_after_property_list -tags: - - Errors - - JavaScript - - SyntaxError -translation_of: Web/JavaScript/Reference/Errors/Missing_curly_after_property_list ---- -
{{jsSidebar("Errors")}}
- -

Fehlermeldung

- -
SyntaxError: missing } after property list
-
- -

Fehlertyp

- -

{{jsxref("SyntaxError")}}

- -

Was ist falsch gelaufen?

- -

Es gibt irgendwo in der Objektinitialisierungs-Syntax einen Fehler. Es könnte ein vergessenes Komma sein oder eine vergessene geschweifte Klammer. Es muss auch geprüft werden, die Reihenfolge der schließenden runden und geschweiften Klammern richtig ist. Den Code richtig einzurücken und zu formatieren hilft bei der Suche nach dem Fehler.

- -

Beispiele

- -

Vergessenes Komma

- -

Häufig wird ein Komma bei der Objektinitialisierung vergessen:

- -
var obj = {
-  a: 1,
-  b: { myProp: 2 }
-  c: 3
-};
-
- -

Richtig wäre:

- -
var obj = {
-  a: 1,
-  b: { myProp: 2 },
-  c: 3
-};
-
- -

Siehe auch

- - diff --git a/files/de/web/javascript/reference/fehler/missing_formal_parameter/index.html b/files/de/web/javascript/reference/fehler/missing_formal_parameter/index.html deleted file mode 100644 index 19813f9c47..0000000000 --- a/files/de/web/javascript/reference/fehler/missing_formal_parameter/index.html +++ /dev/null @@ -1,80 +0,0 @@ ---- -title: 'SyntaxError: missing formal parameter' -slug: Web/JavaScript/Reference/Fehler/Missing_formal_parameter -tags: - - Error - - Errors - - JavaScript - - SyntaxError -translation_of: Web/JavaScript/Reference/Errors/Missing_formal_parameter ---- -
{{jsSidebar("Errors")}}
- -

Fehlermeldung

- -
SyntaxError: missing formal parameter (Firefox)
-
- -

Fehlertyp

- -

{{jsxref("SyntaxError")}}

- -

Was ist falsch gelaufen?

- -

"Formaler Parameter" ist eine andere Bezeichnung für Funktionsparameter. Einer Funktion fehlen valide Parameter. In der Deklaration einer Funktion müssen die Parameternamen {{Glossary("Identifier", "Bezeichner")}}, kein Wert einer Nummer, eines Strings oder eines Objektes. Deklarieren und Aufrufen von Funktionen sind zwei verschiedene Schritte. Deklarieren setzt Bezeichner als Parametername voraus und beim Ausführen (Aufrufen) der Funktion müssen Werte für die Funktion benutzt werden.

- -

In {{glossary("JavaScript")}} können Bezeichner nur alphanumerische Zeichen (und "$" und "_") enthalten und können nicht mit einer Zahl beginnen. Ein Bezeichner unterscheidet sich von einem String, weil der String Daten sind und der Bezeichner teil des Codes.

- -

Beispiele

- -

Funktionsparameter müssen Bezeichner beim erstellen der Funktion sein. Alle diese Funktionsdeklarationen schlagen fehl, wenn ein Wert als Parameter benutzt wird:

- -
function square(3) {
-  return number * number;
-};
-// SyntaxError: missing formal parameter
-
-function greet("Howdy") {
-  return greeting;
-};
-// SyntaxError: missing formal parameter
-
-function log({ obj: "value"}) {
-  console.log(arg)
-};
-// SyntaxError: missing formal parameter
-
- -

Man muss einen Bezeichner für die Funktionsdeklarationen benutzen:

- -
function square(number) {
-  return number * number;
-};
-
-function greet(greeting) {
-  return greeting;
-};
-
-function log(arg) {
-  console.log(arg)
-};
- -

Danach kann man die Funktionen mit beliebigen Argumentwerten aufrufen:

- -
square(2); // 4
-
-greet("Howdy"); // "Howdy"
-
-log({obj: "value"}); // Object { obj: "value" }
-
- -

Siehe auch

- - diff --git a/files/de/web/javascript/reference/fehler/missing_initializer_in_const/index.html b/files/de/web/javascript/reference/fehler/missing_initializer_in_const/index.html deleted file mode 100644 index 49db779546..0000000000 --- a/files/de/web/javascript/reference/fehler/missing_initializer_in_const/index.html +++ /dev/null @@ -1,58 +0,0 @@ ---- -title: 'SyntaxError: missing = in const declaration' -slug: Web/JavaScript/Reference/Fehler/Missing_initializer_in_const -tags: - - Error - - JavaScript - - SyntaxError -translation_of: Web/JavaScript/Reference/Errors/Missing_initializer_in_const ---- -
{{jsSidebar("Errors")}}
- -

Fehlermeldung

- -
SyntaxError: missing = in const declaration (Firefox)
-SyntaxError: Missing initializer in const declaration (Chrome)
-
- -

Fehlertyp

- -

{{jsxref("SyntaxError")}}

- -

Was ist falsch gelaufen?

- -

Eine Konstante ist ein Wert, der während der normalen Ausführung des Programmes nicht geändert werden kann. Ihr kann kein neuer Wert zugewiesen werden und can nicht neu deklariert werden. In JavaScript werden Konstanten mit dem const Schlüsselwort deklariert. Ein Initialwert für eine Konstante wird benötigt, was bedeutet, dass der Wert im gleichen Statement wie bei der Deklaration zugewiesen werden muss (was Sinn ergibt, weil der Wert später nicht mehr geändert werden kann).

- -

Beispiele

- -

Fehlender Initialwert bei const

- -

Anders wie bei var or let, muss man bei const Deklarationen einen Initialwert angeben. Folgendes erzeugt einen Fehler:

- -
const COLUMNS;
-// SyntaxError: missing = in const declaration
- -

Den Fehler beheben

- -

Es gibt mehrere Möglichkeiten den Fehler zu beheben. Es muss geprüft werden, was mit der Konstanten erreicht werden soll.

- -

Hinzufügen eines konstanten Wertes

- -

Der Wert muss im gleichen Statement wie die Deklaration spezifiziert werden:

- -
const COLUMNS = 80;
- -

const, let oder var?

- -

Es sollte kein const verwendet werden, wenn keine Konstante gemeint ist. Vielleicht ist eine Variable für den Block (let) oder eine global Variable (var) gemeint. Beide benötigen keinen Initialwert.

- -
let columns;
-
- -

Siehe auch

- - diff --git a/files/de/web/javascript/reference/fehler/missing_name_after_dot_operator/index.html b/files/de/web/javascript/reference/fehler/missing_name_after_dot_operator/index.html deleted file mode 100644 index cb79bdcc03..0000000000 --- a/files/de/web/javascript/reference/fehler/missing_name_after_dot_operator/index.html +++ /dev/null @@ -1,68 +0,0 @@ ---- -title: 'SyntaxError: missing name after . operator' -slug: Web/JavaScript/Reference/Fehler/Missing_name_after_dot_operator -tags: - - Error - - Errors - - JavaScript - - SyntaxError -translation_of: Web/JavaScript/Reference/Errors/Missing_name_after_dot_operator ---- -
{{jsSidebar("Errors")}}
- -

Fehlermeldung

- -
SyntaxError: missing name after . operator
-
- -

Fehlertyp

- -

{{jsxref("SyntaxError")}}

- -

Was ist falsch gelaufen?

- -

Der Punktoperator (.) wird für den Zugriff auf Eigenschaften genutzt. Man muss den Namen der Eigenschaft spezifizieren, auf den man zugreifen möchte. Um berechnete Eigenschaftsnamen zu benutzen muss statt dem Punkt eckige Klammern genutzt werden. Das erlaubt es einen Ausdruck zu berechnen. Manchmal möchte man Konkatenation stattdessen erreichen. Dafür wird ein Plusoperator (+) genutzt werden.

- -

Beispiele

- -

Zugriff auf Eigenschaften

- -

Zugriff auf Eigenschaften wird in JavaScript entweder mit einem Punkt oder eckigen Klammern erreicht, aber nicht beides. Eckige Klammern erlauben es auch Eigenschaftsnamen zu berechnen.

- -
var obj = { foo: { bar: "baz", bar2: "baz2" } };
-var i = 2;
-
-obj.[foo].[bar]
-// SyntaxError: missing name after . operator
-
-obj.foo."bar"+i;
-// SyntaxError: missing name after . operator
-
- -

Um das Problem zu lösen, muss auf das Objekt wie folgt zugegriffen werden:

- -
obj.foo.bar; // "baz"
-// or alternatively
-obj["foo"]["bar"]; // "baz"
-
-// computed properties require square brackets
-obj.foo["bar" + i]; // "baz2"
-
- -

Zugriff auf Eigenschaften vs. Konkatenation

- -

Wenn man aus einer anderen Programmiersprache kommt (z. B. {{Glossary("PHP")}}), ist es einfach den Punktoperator (.) und den Konkatenationsoperator (+) zu vermischen.

- -
console.log("Hello" . "world");
-
-// SyntaxError: missing name after . operator
- -

Stattdessen muss man das Pluszeichen für Konkatenation benutzen:

- -
console.log("Hello" + "World");
- -

Siehe auch

- - diff --git a/files/de/web/javascript/reference/fehler/missing_parenthesis_after_argument_list/index.html b/files/de/web/javascript/reference/fehler/missing_parenthesis_after_argument_list/index.html deleted file mode 100644 index a3da4b9edf..0000000000 --- a/files/de/web/javascript/reference/fehler/missing_parenthesis_after_argument_list/index.html +++ /dev/null @@ -1,42 +0,0 @@ ---- -title: 'SyntaxError: missing ) after argument list' -slug: Web/JavaScript/Reference/Fehler/Missing_parenthesis_after_argument_list -tags: - - Errors - - JavaScript - - SyntaxError -translation_of: Web/JavaScript/Reference/Errors/Missing_parenthesis_after_argument_list ---- -
{{jsSidebar("Errors")}}
- -

Fehlermeldung

- -
SyntaxError: missing ) after argument list
-
- -

Fehlertyp

- -

{{jsxref("SyntaxError")}}.

- -

Was ist falsch gelaufen?

- -

Es gibt einen Fehler mit der Art wie die Funktion aufgerufen wird. Es kann sich hier zum Beispiel um einen Tippfehler, einem fehlenden Operator oder einen nicht richtig abgeschlossenen String handeln. 

- -

Beispiele

- -

Bei einem fehlenden "+" Operator,  um zwei Strings zu konkatinieren,erwartet JavaScript , dass nur "PI: " der Parameter für die "log" Funktion ist. Darum sollte danach die Funktion mit einer abschliessenden Klammer abgeschlossen werden. 

- -
console.log("PI: " Math.PI);
-// SyntaxError: missing ) after argument list
-
- -

Man kann den Fehler korrigieren, indem man den "+" Operator hinzufügt:

- -
console.log("PI: " + Math.PI);
-// "PI: 3.141592653589793"
- -

Siehe auch

- - diff --git a/files/de/web/javascript/reference/fehler/missing_parenthesis_after_condition/index.html b/files/de/web/javascript/reference/fehler/missing_parenthesis_after_condition/index.html deleted file mode 100644 index 295428a5b9..0000000000 --- a/files/de/web/javascript/reference/fehler/missing_parenthesis_after_condition/index.html +++ /dev/null @@ -1,70 +0,0 @@ ---- -title: 'SyntaxError: missing ) after condition' -slug: Web/JavaScript/Reference/Fehler/Missing_parenthesis_after_condition -tags: - - Error - - Errors - - JavaScript - - SyntaxError -translation_of: Web/JavaScript/Reference/Errors/Missing_parenthesis_after_condition ---- -
{{jsSidebar("Errors")}}
- -

Fehlermeldung

- -
SyntaxError: missing ) after condition
-
- -

Fehlertyp

- -

{{jsxref("SyntaxError")}}

- -

Was ist falsch gelaufen?

- -

Es gibt einen Fehler beim schreiben einer if Bedingung. In jeder Programmiersprache benötigt man Fallunterscheidungen abhängig von Eingaben. Das if Statement führt ein Statement auf, wenn eine Bedingung true wird. In JavaScript muss diese Bedingung in runden Klammern nach dem if Schlüsselwort geschrieben werden, wie dieses:

- -
if (condition) {
-  // do something if the condition is true
-}
- -

Beispiele

- -

Es könnte nur ein Versehen sein, weshalb man alle runden Klammern im Code gründlich überprüfen sollte.

- -
if (3 > Math.PI {
-  console.log("wait what?");
-}
-
-// SyntaxError: missing ) after condition
-
- -

Um das Problem zu beheben, muss eine schließende runde Klammer nach der Bedingung geschrieben werden.

- -
if (3 > Math.PI) {
-  console.log("wait what?");
-}
- -

Wenn man aus einer anderen Programmiersprache kommt, passiert es schnell, dass Schlüsselwörter benutzt werden, die in JavaScript eine andere oder garkeine Bedeutung haben.

- -
if (done is true) {
- console.log("we are done!");
-}
-
-// SyntaxError: missing ) after condition
-
- -

Stattdessen muss die richtige Vergleichsoperation benutzt werden. Zum Beispiel:

- -
if (done === true) {
- console.log("we are done!");
-}
- -

Siehe auch

- - diff --git a/files/de/web/javascript/reference/fehler/missing_semicolon_before_statement/index.html b/files/de/web/javascript/reference/fehler/missing_semicolon_before_statement/index.html deleted file mode 100644 index dcdf35ed94..0000000000 --- a/files/de/web/javascript/reference/fehler/missing_semicolon_before_statement/index.html +++ /dev/null @@ -1,67 +0,0 @@ ---- -title: 'SyntaxError: missing ; before statement' -slug: Web/JavaScript/Reference/Fehler/Missing_semicolon_before_statement -tags: - - Errors - - JavaScript - - SyntaxError -translation_of: Web/JavaScript/Reference/Errors/Missing_semicolon_before_statement ---- -
{{jsSidebar("Errors")}}
- -

Fehlermeldung

- -
SyntaxError: missing ; before statement
-
- -

Fehlertyp

- -

{{jsxref("SyntaxError")}}.

- -

Was ist falsch gelaufen?

- -

Es fehlt irgendwo ein Semikolon (;). JavaScript Statements müssen durch ein Semikolon beendet werden. Einige Statements sind von der automatischen Semikolon Einfügung (ASI) betroffen, aber in diesem Fall muss man ein Semikolon geliefert werden, damit JavaScript den Quelltext korrekt lesen kann.

- -

Meistens ist dieser Fehler eine Folge aus einem anderen Fehler, wie ein nicht escaptes Zeichen in einem String oder der falsche Einsatz von var.  Es kann auch sein, dass man zu viele runde Klammern benutzt. Wenn dieser Fehler auftritt, sollte die Syntax gründlich geprüft werden.

- -

Beispiele

- -

Nicht escapte Strings

- -

Dieser Fehler kann leicht auftreten, wenn ein String nicht richtig escapt wird und die JavaScript-Umgebung schon das Ende eines Strings erwartet. Zum Beispiel:

- -
var foo = 'Tom's bar';
-// SyntaxError: missing ; before statement
- -

Man kann doppelte Anführungszeichen benutzen oder das Apostroph escapen:

- -
var foo = "Tom's bar";
-var foo = 'Tom\'s bar';
-
- -

Eigenschaften mit var deklarieren

- -

Man kann Eigenschaften eines Objektes oder Arrays nicht mit einem var deklarieren.

- -
var obj = {};
-var obj.foo = 'hi'; // SyntaxError missing ; before statement
-
-var array = [];
-var array[0] = 'there'; // SyntaxError missing ; before statement
-
- -

Stattdessen muss das var Schlüsselwort vermieden werden:

- -
var obj = {};
-obj.foo = 'hi';
-
-var array = [];
-array[0] = 'there';
-
- -

Siehe auch

- - diff --git a/files/de/web/javascript/reference/fehler/more_arguments_needed/index.html b/files/de/web/javascript/reference/fehler/more_arguments_needed/index.html deleted file mode 100644 index 3707c5446f..0000000000 --- a/files/de/web/javascript/reference/fehler/more_arguments_needed/index.html +++ /dev/null @@ -1,48 +0,0 @@ ---- -title: 'TypeError: More arguments needed' -slug: Web/JavaScript/Reference/Fehler/More_arguments_needed -tags: - - Errors - - JavaScript - - TypeError -translation_of: Web/JavaScript/Reference/Errors/More_arguments_needed ---- -
{{jsSidebar("Errors")}}
- -

Fehlermeldung

- -
TypeError: Object.create requires more than 0 arguments
-TypeError: Object.setPrototypeOf requires more than 1 argument
-TypeError: Object.defineProperties requires more than 0 arguments
-
- -

Fehlertyp

- -

{{jsxref("TypeError")}}.

- -

Was ist falsch gelaufen?

- -

Es ist ein Fehler beim Aufrufen einer Funktion aufgetaucht. Es müssen mehr Argumente übergeben werden.

- -

Beispiele

- -

Die {{jsxref("Object.create()")}} Methode benötigt mindestens ein Argument und die {{jsxref("Object.setPrototypeOf()")}} Methode benötigt mindestens zwei Argumente:

- -
var obj = Object.create();
-// TypeError: Object.create requires more than 0 arguments
-
-var obj = Object.setPrototypeOf({});
-// TypeError: Object.setPrototypeOf requires more than 1 argument
-
- -

Dieser Fehler kann behoben werden, indem {{jsxref("null")}} als Eigenschaft gesetzt wird:

- -
var obj = Object.create(null);
-
-var obj = Object.setPrototypeOf({}, null);
- -

Siehe auch

- - diff --git a/files/de/web/javascript/reference/fehler/negative_repetition_count/index.html b/files/de/web/javascript/reference/fehler/negative_repetition_count/index.html deleted file mode 100644 index 53c153453f..0000000000 --- a/files/de/web/javascript/reference/fehler/negative_repetition_count/index.html +++ /dev/null @@ -1,44 +0,0 @@ ---- -title: 'RangeError: repeat count must be non-negative' -slug: Web/JavaScript/Reference/Fehler/Negative_repetition_count -tags: - - Errors - - JavaScript - - RangeError -translation_of: Web/JavaScript/Reference/Errors/Negative_repetition_count ---- -
{{jsSidebar("Errors")}}
- -

Fehlermeldung

- -
RangeError: repeat count must be non-negative (Firefox)
-RangeError: Invalid count value (Chrome)
-
- -

Fehlertyp

- -

{{jsxref("RangeError")}}

- -

Was ist falsch gelaufen?

- -

Die {{jsxref("String.prototype.repeat()")}} Methode wurde benutzt. Sie hat einen count Parameter welche die Anzahl der Wiederholungen des Strings angibt. Dieser muss zwischen 0 und kleiner positiv {{jsxref("Infinity")}} sein und kann nicht negativ sein. Das erlaubte Intervall kann wie folgt beschrieben werden: [0, +∞).

- -

Beispiele

- -

Falsche Fälle

- -
'abc'.repeat(-1); // RangeError 
- -

Richtige Fälle

- -
'abc'.repeat(0);    // ''
-'abc'.repeat(1);    // 'abc'
-'abc'.repeat(2);    // 'abcabc'
-'abc'.repeat(3.5);  // 'abcabcabc' (count will be converted to integer)
-
- -

Siehe auch

- - diff --git a/files/de/web/javascript/reference/fehler/no_non-null_object/index.html b/files/de/web/javascript/reference/fehler/no_non-null_object/index.html deleted file mode 100644 index a2c897c5cd..0000000000 --- a/files/de/web/javascript/reference/fehler/no_non-null_object/index.html +++ /dev/null @@ -1,66 +0,0 @@ ---- -title: 'TypeError: "x" is not a non-null object' -slug: Web/JavaScript/Reference/Fehler/No_non-null_object -tags: - - Error - - Errors - - JavaScript - - TypeError -translation_of: Web/JavaScript/Reference/Errors/No_non-null_object ---- -
{{JSSidebar("Errors")}}
- -

Fehlermeldung

- -
TypeError: "x" is not a non-null object (Firefox)
-TypeError: Property description must be an object: "x" (Chrome)
-TypeError: Invalid value used in weak set (Chrome)
-
- -

Fehlertyp

- -

{{jsxref("TypeError")}}

- -

Was ist falsch gelaufen?

- -

Ein Objekt wird erwartete aber nicht übergeben. {{jsxref("null")}} ist kein Objekt und funktioniert nicht. In dieser Situation wird ein normales Objekt erwartet.

- -

Beispiele

- -

Eigehscgaftsbeschreibung erwartet

- -

Wenn Methoden wie {{jsxref("Object.create()")}} oder {{jsxref("Object.defineProperty()")}} und {{jsxref("Object.defineProperties()")}} eingesetzt werden, wird als optionale Beschreibung ein Beschreibungsobjekt erwartet. Wenn kein Objekt übergeben wird (z. B. eine Zahl), wird ein Fehler erzeugt:

- -
Object.defineProperty({}, 'key', 1);
-// TypeError: 1 is not a non-null object
-
-Object.defineProperty({}, 'key', null);
-// TypeError: null is not a non-null object
-
- -

Ein valides Beschreibungsobjekt kann wie folgendes aussehen:

- -
Object.defineProperty({}, 'key', { value: 'foo', writable: false });
-
- -

WeakMap und WeakSet Objekte benötigen Objektschlüssel

- -

{{jsxref("WeakMap")}} und {{jsxref("WeakSet")}} Objekte speichern Objektschlüssel. Man kann keine anderen Schlüssel verwenden.

- -
var ws = new WeakSet();
-ws.add('foo');
-// TypeError: "foo" is not a non-null object
- -

Stattdessen sollte folgendes verwendet werden:

- -
ws.add({foo: 'bar'});
-ws.add(window);
-
- -

Siehe auch

- - diff --git a/files/de/web/javascript/reference/fehler/no_properties/index.html b/files/de/web/javascript/reference/fehler/no_properties/index.html deleted file mode 100644 index d5dc0328b6..0000000000 --- a/files/de/web/javascript/reference/fehler/no_properties/index.html +++ /dev/null @@ -1,40 +0,0 @@ ---- -title: 'TypeError: "x" has no properties' -slug: Web/JavaScript/Reference/Fehler/No_properties -tags: - - Errors - - JavaScript - - TypeError -translation_of: Web/JavaScript/Reference/Errors/No_properties ---- -
{{jsSidebar("Errors")}}
- -

Fehlermeldung

- -
TypeError: null has no properties
-TypeError: undefined has no properties
-
- -

Fehlertyp

- -

{{jsxref("TypeError")}}.

- -

Was ist falsch gelaufen?

- -

Weder {{jsxref("null")}} noch {{jsxref("undefined")}} besitzen Eigenschaften auf die man zugreifen könnte.

- -

Beispiele

- -
null.foo;
-// TypeError: null has no properties
-
-undefined.bar;
-// TypeError: undefined has no properties
-
- -

Siehe auch

- - diff --git a/files/de/web/javascript/reference/fehler/no_variable_name/index.html b/files/de/web/javascript/reference/fehler/no_variable_name/index.html deleted file mode 100644 index a3b63df55d..0000000000 --- a/files/de/web/javascript/reference/fehler/no_variable_name/index.html +++ /dev/null @@ -1,84 +0,0 @@ ---- -title: 'SyntaxError: missing variable name' -slug: Web/JavaScript/Reference/Fehler/No_variable_name -tags: - - Error - - Errors - - JavaScript - - SyntaxError -translation_of: Web/JavaScript/Reference/Errors/No_variable_name ---- -
{{jsSidebar("Errors")}}
- -

Fehlermeldung

- -
SyntaxError: missing variable name (Firefox)
-SyntaxError: Unexpected token = (Chrome)
- -

Fehlertyp

- -

{{jsxref("SyntaxError")}}

- -

Was ist falsch gelaufen?

- -

Einer Variablen fehlt ein Name. Das wird zu einem {{jsxref("SyntaxError")}} im Code führen. Vermutlich ist ein Komma irgendwo falsch oder man kämpft mit einem Namen. Völlig verständlich! Dinge zu benennen ist so schwer.

- -

Beispiele

- -

Ein Variablenname fehlt

- -
var = "foo";
-
- -

Es ist schwer gute Variablennamen zu vergeben. Das geht allen so.

- -
var ohGodWhy = "foo";
- -

Reservierte Schlüsselwörter können kein Variablenname sein

- -

Es gibt ein paar Namen, die reservierte Schlüsselwörter sind. Diese kann man nicht benutzen.

- -
var debugger = "whoop";
-// SyntaxError: missing variable name
-
- -

Deklarieren von mehreren Variablen

- -

Man muss beim Deklarieren von mehreren Variablen besonders auf Kommas aufpassen. Gibt es ein überflüssiges Komma? Wurde aus Versehen ein Komma statt eines Semikolons verwendet?

- -
var x, y = "foo",
-var x, = "foo"
-
-var first = document.getElementById('one'),
-var second = document.getElementById('two'),
-
-// SyntaxError: missing variable name
-
- -

Die korrigierte Version:

- -
var x, y = "foo";
-var x = "foo";
-
-var first = document.getElementById('one');
-var second = document.getElementById('two');
- -

Arrays

- -

{{jsxref("Array")}}-Literale in JavaScript benötigen eckige Klammern um die Werte. Folgendes funktioniert nicht:

- -
var arr = 1,2,3,4,5;
-// SyntaxError: missing variable name
-
- -

Richtig ist:

- -
var arr = [1,2,3,4,5];
- -

Siehe auch

- - diff --git a/files/de/web/javascript/reference/fehler/non_configurable_array_element/index.html b/files/de/web/javascript/reference/fehler/non_configurable_array_element/index.html deleted file mode 100644 index 771f480dda..0000000000 --- a/files/de/web/javascript/reference/fehler/non_configurable_array_element/index.html +++ /dev/null @@ -1,83 +0,0 @@ ---- -title: 'TypeError: can''t delete non-configurable array element' -slug: Web/JavaScript/Reference/Fehler/Non_configurable_array_element -tags: - - Error - - Errors - - JavaScript - - TypeError -translation_of: Web/JavaScript/Reference/Errors/Non_configurable_array_element ---- -
{{jsSidebar("Errors")}}
- -

Fehlermeldung

- -
TypeError: can't delete non-configurable array element (Firefox)
-TypeError: Cannot delete property '2' of [object Array] (Chrome)
-
- -

Fehlertyp

- -

{{jsxref("TypeError")}}

- -

Was ist falsch gelaufen?

- -

Es wurde versucht die Länge eines Arrays zu kürzen obwohl eines der Arrayelemente nicht Konfigurierbar(non-configurable) ist. Beim Kürzen eines Arrays werden die Elemente hinter der neuen Länge gelöscht, was in dieser Situation nicht funktioniert.

- -

Das configurable Attribut kontrolliert, ob eine Eigenschaft von einem Objekt gelöscht werden kann und seine Attribute (anders als writable) geändert werden können.

- -

Eigenschaften von einem Objekt, dass von einem Array-Initialisierer erstellt wurden, sind konfigurierbar. Immer, wenn zum Beispiel {{jsxref("Object.defineProperty()")}} eingesetzt wird, ist die Eigenschaft nicht ohne weiteres konfigurierbar.

- -

Beispiele

- -

Nicht konfigurierbare Eigenschaften mit Object.defineProperty erstellen

- -

Die {{jsxref("Object.defineProperty()")}} Funktion erstellt nicht konfiguriertbare Eigenschaften wenn sie nicht extra als konfigurierbar spezifiziert sind.

- -
var arr = [];
-Object.defineProperty(arr, 0, {value: 0});
-Object.defineProperty(arr, 1, {value: "1"});
-
-arr.length = 1;
-// TypeError: can't delete non-configurable array element
-
- -

Die Elemente müssen als Konfigurierbar eingestellt werden, wenn das Array später im Quelltext gekürzt werden soll.

- -
var arr = [];
-Object.defineProperty(arr, 0, {value: 0, configurable: true});
-Object.defineProperty(arr, 1, {value: "1", configurable: true});
-
-arr.length = 1;
-
- -

Ein Array versiegeln (seal)

- -

Die {{jsxref("Object.seal()")}} Funktion markiert alle existirenden Elements als nicht Konfugurierbar.

- -
var arr = [1,2,3];
-Object.seal(arr);
-
-arr.length = 1;
-// TypeError: can't delete non-configurable array element
-
- -

Man muss den Aufruf von {{jsxref("Object.seal()")}} entfernen oder ein Kopie des Arrays machen. Im fall einer Kopie führt das Kürzen des kopierten Arrays zu keiner Änderung des Original Arrays.

- -
var arr = [1,2,3];
-Object.seal(arr);
-
-// Copy the initial array to shorten the copy
-var copy = Array.from(arr);
-copy.length = 1;
-// arr.length == 3
-
- -

Siehe auch

- - diff --git a/files/de/web/javascript/reference/fehler/not_a_codepoint/index.html b/files/de/web/javascript/reference/fehler/not_a_codepoint/index.html deleted file mode 100644 index 8d72c3be4b..0000000000 --- a/files/de/web/javascript/reference/fehler/not_a_codepoint/index.html +++ /dev/null @@ -1,55 +0,0 @@ ---- -title: 'RangeError: argument is not a valid code point' -slug: Web/JavaScript/Reference/Fehler/Not_a_codepoint -tags: - - Errors - - JavaScript - - RangeError -translation_of: Web/JavaScript/Reference/Errors/Not_a_codepoint ---- -
{{jsSidebar("Errors")}}
- -

Fehlermeldung

- -
RangeError: {0} is not a valid code point (Firefox)
-RangeError: Invalid code point {0} (Chrome)
-
- -

Fehlertyp

- -

{{jsxref("RangeError")}}

- -

Was ist falsch gelaufen?

- -

Die {{jsxref("String.fromCodePoint()")}} Methode erwartet gültige Codepoint.

- -

Ein Codepoint  ist ein Wert im Unicode Coderaum, der als Integer im Wertebereich zwischen 0 und 0x10FFFF liegt.

- -

Die Verwendung von {{jsxref("NaN")}} , negativen Integern (-1), nicht Integern (3.14) und Werten die größer als 0x10FFFF (1114111) sind, werden einen Fehler bei dieser Methode produzieren.

- -

Beispiele

- -

Ungültige Fälle

- -
String.fromCodePoint('_');      // RangeError
-String.fromCodePoint(Infinity); // RangeError
-String.fromCodePoint(-1);       // RangeError
-String.fromCodePoint(3.14);     // RangeError
-String.fromCodePoint(3e-2);     // RangeError
-String.fromCodePoint(NaN);      // RangeError
- -

Gültige Fälle

- -
String.fromCodePoint(42);       // "*"
-String.fromCodePoint(65, 90);   // "AZ"
-String.fromCodePoint(0x404);    // "\u0404"
-String.fromCodePoint(0x2F804);  // "\uD87E\uDC04"
-String.fromCodePoint(194564);   // "\uD87E\uDC04"
-String.fromCodePoint(0x1D306, 0x61, 0x1D307) // "\uD834\uDF06a\uD834\uDF07"
-
- -

Siehe auch

- - diff --git a/files/de/web/javascript/reference/fehler/not_a_constructor/index.html b/files/de/web/javascript/reference/fehler/not_a_constructor/index.html deleted file mode 100644 index 42858cf706..0000000000 --- a/files/de/web/javascript/reference/fehler/not_a_constructor/index.html +++ /dev/null @@ -1,97 +0,0 @@ ---- -title: 'TypeError: "x" is not a constructor' -slug: Web/JavaScript/Reference/Fehler/Not_a_constructor -tags: - - Fehler - - JavaScript - - TypeError -translation_of: Web/JavaScript/Reference/Errors/Not_a_constructor ---- -
{{jsSidebar("Errors")}}
- -

Fehlermeldung

- -
TypeError: "x" is not a constructor
-
-TypeError: Math is not a constructor
-TypeError: JSON is not a constructor
-TypeError: Symbol is not a constructor
-TypeError: Reflect is not a constructor
-TypeError: Intl is not a constructor
-TypeError: SIMD is not a constructor
-TypeError: Atomics is not a constructor
-
- -

Fehlertyp

- -

{{jsxref("TypeError")}}

- -

Was ist falsch gelaufen?

- -

Es wurde versucht auf ein Objekt oder eine Variable zuzugreifen welche kein Konstruktor ist. Mehr darüber, was ein Konstruktur ist, finden Sie unter {{Glossary("constructor")}} oder in der Beschreibung des new Operators.

- -

Es gibt viele globale Objekte, wie {{jsxref("String")}} oder {{jsxref("Array")}}, welche mittels new erstellt werden können. Jedoch funktioniert das bei einigen Objekten nicht und deren Eigenschaften und Methoden sind statisch.

- -

Die folgenden Standard build-in Objekte sind keine Konstruktoren: {{jsxref("Math")}}, {{jsxref("JSON")}}, {{jsxref("Symbol")}}, {{jsxref("Reflect")}}, {{jsxref("Intl")}}, {{jsxref("SIMD")}}, {{jsxref("Atomics")}}.

- -

Generelle Funktionen können ebenso nicht als Konstruktor verwendet werden.

- -

Beispiele

- -

Ungültige Fälle

- -
var Car = 1;
-new Car();
-// TypeError: Car is not a constructor
-
-new Math();
-// TypeError: Math is not a constructor
-
-new Symbol();
-// TypeError: Symbol is not a constructor
-
-function* f() {};
-var obj = new f;
-// TypeError: f is not a constructor
-
- -

Ein car Konstruktor

- -

Stellen Sie sich vor, Sie erstellen ein Objekt vom Typ vars. Sie wollen dieses Objekt als Car bezeichen und es soll Eigenschaften für make, model und year besitzt. Um dies zu erreichen, schreiben Sie die folgende Funktion:

- -
function Car(make, model, year) {
-  this.make = make;
-  this.model = model;
-  this.year = year;
-}
-
- -

Jetzt können Sie wie folgt ein Objekt mit dem Namen mycar erstellen:

- -
var mycar = new Car('Eagle', 'Talon TSi', 1993);
- -

Promises

- -

Bei Rückgabe eines Promises, welches sofort im Status resolved oder rejected ist, brauchen Sie kein neues Promise mit new Promise(...) erstellen und damit zu arbeiten. 

- -

Folgendes ist nicht erlaubt (der Promise Konstruktor wird nicht korrekt aufgerufen) und wirft eine TypeError: this is not a constructor Exception.

- -
return new Promise.resolve(true);
-
- -

Verwenden Sie stattdessen Promise.resolve() oder die statische Methode Promise.reject():

- -
// Das ist erlaubt, aber unnötig lang:
-return new Promise((resolve, reject) => { resolve(true); })
-
-// Alternative Verwendung der statische Methoden:
-return Promise.resolve(true);
-return Promise.reject(false);
-
- -

Siehe auch

- - diff --git a/files/de/web/javascript/reference/fehler/not_a_function/index.html b/files/de/web/javascript/reference/fehler/not_a_function/index.html deleted file mode 100644 index a8b66dff17..0000000000 --- a/files/de/web/javascript/reference/fehler/not_a_function/index.html +++ /dev/null @@ -1,124 +0,0 @@ ---- -title: 'TypeError: "x" is not a function' -slug: Web/JavaScript/Reference/Fehler/Not_a_function -tags: - - Errors - - JavaScript - - TypeError -translation_of: Web/JavaScript/Reference/Errors/Not_a_function ---- -
{{jsSidebar("Errors")}}
- -

Fehlermeldung

- -
TypeError: "x" is not a function
-
- -

Fehlertyp

- -

{{jsxref("TypeError")}}.

- -

Was ist falsch gelaufen?

- -

Es wird versucht, ein Wert wie eine Funktion aufzurufen, da aber der Wert eigentlich keine Funktion ist, kommt es zu diesem Fehler. Manchmal erwartet das Programm, dass eine Funktion erstellt wird, was aber nicht der Fall ist.

- -

Vielleicht ist ein Tippfehler im Funktionsnamen. Manchmal besitzt das aufgerufene Objekt eine Funktion aber auch nicht. Zum Beispiel besitzen JavaScript Objekte keine map Funktion, aber JavaScript Arrays haben diese Funktion.

- -

Es gibt viele eingebaute Funktionen, die eine (Callback-) Funktion benötigen. Es muss eine Funktion bereitgestellt werden, damit diese Methoden normal funktionieren:

- - - -

Beispiele

- -

Ein Schreibfehler im Funktionsnamen

- -

In diesem Fall passiert es viel zu oft, dass im Name ein Schreibfehler enthält:

- -
var x = document.getElementByID('foo');
-// TypeError: document.getElementByID is not a function
-
- -

Der korrekte Funktionsname ist getElementById:

- -
var x = document.getElementById('foo');
-
- -

Funktion wird auf dem falschen Objekt aufgerufen

- -

Für bestimmte Methoden musst eine (callback) Funktion benutzt werden, die nur bei spezifizierten Objekten funktionieren. In diesem Beispiel wird {{jsxref("Array.prototype.map()")}} verwendet, welche nur mit {{jsxref("Array")}} Objekten funktioniert.

- -
var obj = {a: 13, b: 37, c: 42};
-
-obj.map(function(num) {
-  return num * 2;
-});
-
-// TypeError: "x" is not a function
- -

Stattdessen muss ein Array verwendet werden:

- -
var numbers = [1, 4, 9];
-
-numbers.map(function(num) {
-  return num * 2;
-});
-
-// Array [2, 8, 18]
-
- -

Funktionen teilen einen Namen mit einer existierenden Eigenschaft

- -

Manchmal, wenn eine Klasse geschrieben wird, haben eine Eigenschaft und eine Funktion den gleichen Namen. Nach dem Aufruf der Funktion denkt der Compiler, dass die Funktion nicht mehr existiert.

- -
var Dog = function () {
- this.age = 11;
- this.color = "black";
- this.name = "Ralph";
- return this;
-}
-
-Dog.prototype.name = function(name) {
- this.name = name;
- return this;
-}
-
-
-var myNewDog = new Dog();
-myNewDog.name("Cassidy"); //Uncaught TypeError: myNewDog.name is not a function
-
- -

Stattdessen kann ein anderer Eigenschaftsname benutzt werden:

- -
var Dog = function () {
- this.age = 11;
- this.color = "black";
- this.dogName = "Ralph"; //Using this.dogName instead of .name
- return this;
-}
-
-Dog.prototype.name = function(name) {
- this.dogName = name;
- return this;
-}
-
-
-var myNewDog = new Dog();
-myNewDog.name("Cassidy"); //Dog { age: 11, color: 'black', dogName: 'Cassidy' }
-
- -

Siehe auch

- - diff --git a/files/de/web/javascript/reference/fehler/not_defined/index.html b/files/de/web/javascript/reference/fehler/not_defined/index.html deleted file mode 100644 index 030c47536b..0000000000 --- a/files/de/web/javascript/reference/fehler/not_defined/index.html +++ /dev/null @@ -1,70 +0,0 @@ ---- -title: 'ReferenceError: "x" is not defined' -slug: Web/JavaScript/Reference/Fehler/Not_defined -tags: - - Error - - JavaScript - - ReferenceError -translation_of: Web/JavaScript/Reference/Errors/Not_defined ---- -
{{jsSidebar("Errors")}}
- -

Fehlermeldung

- -
ReferenceError: "x" is not defined
-
- -

Fehlertyp

- -

{{jsxref("ReferenceError")}}.

- -

Was ist falsch gelaufen?

- -

Es gibt eine Referenz auf eine Variable, die nicht existiert. Diese Variable muss deklariert werden; oder man muss sicherstellen, dass sie im Skript zugänglich ist; oder sich im aktuellen {{Glossary("scope")}} befindet.

- -
-

Hinweis: Wenn Sie eine Bibliothek nutzen (wie z.B. jQuery), stellen Sie sicher, dass diese tatsächlich geladen ist, bevor Sie auf dessen Variablen (z. B. "$") zugreifen. Schreiben Sie das {{HTMLElement("script")}} Element, welches die Bibliothek lädt vor den Code, der die Bibliothek verwendet.

-
- -

Beispiele

- -

Variable nicht deklariert

- -
foo.substring(1); // ReferenceError: foo is not defined
-
- -

Die "foo" Variable ist nirgends deklariert. Die Variable muss ein String sein, damit die Methode {{jsxref("String.prototype.substring()")}} funktioniert.

- -
var foo = "bar";
-foo.substring(1); // "ar"
- -

Falscher Gültigkeitsbereich

- -

Eine Variable muss im aktuellem Kontext verfügbar sein. Variablen, die innerhalb einer Funktion definiert sind, können nicht von außerhalb erreicht werden, da diese nur im Gültigkeitsbereich der Funktion existieren.

- -
function numbers() {
-  var num1 = 2,
-      num2 = 3;
-  return num1 + num2;
-}
-
-console.log(num1); // ReferenceError "num1" is not defined.
- -

Wobei aus einer Methode kann man auf alle Variablen und Methoden zugreifen, die im gleichen Gültigkeitsbereich definiert worden sind. Kurz gesagt, eine Methode, die im globalen Gültigkeitsbereich definiert worden ist, kann auf alle Variablen zugreifen, die im globalen Gültigkeitsbereich definiert wurden.

- -
var num1 = 2,
-    num2 = 3;
-
-function numbers() {
-  return num1 + num2;
-}
-
-console.log(numbers()); // 5
- -

Siehe auch

- - diff --git a/files/de/web/javascript/reference/fehler/precision_range/index.html b/files/de/web/javascript/reference/fehler/precision_range/index.html deleted file mode 100644 index d03b4203c5..0000000000 --- a/files/de/web/javascript/reference/fehler/precision_range/index.html +++ /dev/null @@ -1,96 +0,0 @@ ---- -title: 'RangeError: precision is out of range' -slug: Web/JavaScript/Reference/Fehler/Precision_range -tags: - - Errors - - JavaScript - - RangeError -translation_of: Web/JavaScript/Reference/Errors/Precision_range ---- -
{{jsSidebar("Errors")}}
- -

Fehlermeldung

- -
RangeError: precision {0} out of range (Firefox)
-RangeError: toExponential() argument must be between 0 and 20 (Chrome)
-RangeError: toFixed() digits argument must be between 0 and 20 (Chrome)
-RangeError: toPrecision() argument must be between 1 and 21 (Chrome)
-
- -

Fehlertyp

- -

{{jsxref("RangeError")}}

- -

Was ist falsch gelaufen?

- -

Das übergebene Argument für die Genauigkeit ist, für einer der folgenden Funktionen, ausserhalb des gültigen Bereiches:

- - - -

Der gülitge Bereich für diese Methoden liegt im normal Fall zwischen 0 und 20 (oder 21). Wobei die ECMAScript Spezifikation erlaubt eine Erweiterung de Bereiches.

- - - - - - - - - - - - - - - - - - - - - - - - - - -
MethodFirefox (SpiderMonkey)Chrome, Opera (V8)
{{jsxref("Number.prototype.toExponential()")}}0 bis 1000 bis 20
{{jsxref("Number.prototype.toFixed()")}}-20 bis1000 bis 20
{{jsxref("Number.prototype.toPrecision()")}}1 bis 1001 bis 21
- -

Beispiele

- -

Ungültige Fälle

- -
77.1234.toExponential(-1);  // RangeError
-77.1234.toExponential(101); // RangeError
-
-2.34.toFixed(-100);         // RangeError
-2.34.toFixed(1001);         // RangeError
-
-1234.5.toPrecision(-1);     // RangeError
-1234.5.toPrecision(101);    // RangeError
-
- -

Gültige Fälle

- -
77.1234.toExponential(4); // 7.7123e+1
-77.1234.toExponential(2); // 7.71e+1
-
-2.34.toFixed(1); // 2.3
-2.35.toFixed(1); // 2.4 (zu beachten ist, das in diesem Fall aufgerundet wird)
-
-5.123456.toPrecision(5); // 5.1235
-5.123456.toPrecision(2); // 5.1
-5.123456.toPrecision(1); // 5
-
- -

Siehe auch

- - diff --git a/files/de/web/javascript/reference/fehler/property_access_denied/index.html b/files/de/web/javascript/reference/fehler/property_access_denied/index.html deleted file mode 100644 index d4feb4feb7..0000000000 --- a/files/de/web/javascript/reference/fehler/property_access_denied/index.html +++ /dev/null @@ -1,47 +0,0 @@ ---- -title: 'Error: Permission denied to access property "x"' -slug: Web/JavaScript/Reference/Fehler/Property_access_denied -tags: - - Error - - Errors - - JavaScript - - Security -translation_of: Web/JavaScript/Reference/Errors/Property_access_denied ---- -
{{jsSidebar("Errors")}}
- -

Fehlermeldung

- -
Error: Permission denied to access property "x"
-
- -

Fehlertyp

- -

{{jsxref("Error")}}.

- -

Was ist falsch gelaufen?

- -

Es wurde versucht auf ein Objekt zuzugreifen, wofür man nicht ausreichend berechtig ist. In den meisten Fällen handelt es sich um ein {{HTMLElement("iframe")}} Element, das von einer anderen Domäne geladen wurde und die Same-Origin Policy verletzt.

- -

Beispiele

- -
<!DOCTYPE html>
-<html>
-  <head>
-    <iframe id="myframe" src="http://www1.w3c-test.org/common/blank.html"></iframe>
-    <script>
-      onload = function() {
-        console.log(frames[0].document);
-        // Error: Permission denied to access property "document"
-      }
-    </script>
-  </head>
-  <body></body>
-</html>
- -

Siehe auch

- - diff --git a/files/de/web/javascript/reference/fehler/read-only/index.html b/files/de/web/javascript/reference/fehler/read-only/index.html deleted file mode 100644 index bb56305880..0000000000 --- a/files/de/web/javascript/reference/fehler/read-only/index.html +++ /dev/null @@ -1,78 +0,0 @@ ---- -title: 'TypeError: "x" is read-only' -slug: Web/JavaScript/Reference/Fehler/Read-only -tags: - - Errors - - JavaScript - - TypeError -translation_of: Web/JavaScript/Reference/Errors/Read-only ---- -
{{jsSidebar("Errors")}}
- -

Fehlermeldung

- -
TypeError: "x" is read-only (Firefox)
-TypeError: 0 is read-only (Firefox)
-TypeError: Cannot assign to read only property 'x' of #<Object> (Chrome)
-TypeError: Cannot assign to read only property '0' of [object Array] (Chrome)
-
- -

Fehlertyp

- -

{{jsxref("TypeError")}}

- -

Was ist falsch gelaufen?

- -

Die globale Variable oder Objekteigenschaften werden als nur lesbare Eigenschaften definiert (technisch wird das mit der writable Eigenschaft erreicht).

- -

Der Fehler tritt nur im strict mode auf. Im normalen Modus wird eine Zuweisung still ignoriert.

- -

Beispiele

- -

Nicht valide Fälle

- -

Nur lesbare Eigenschaften sind nicht sehr weit verbreitet, aber sie können mit {{jsxref("Object.defineProperty()")}} oder {{jsxref("Object.freeze()")}} erstellt werden.

- -
'use strict';
-var obj = Object.freeze({name: 'Elsa', score: 157});
-obj.score = 0;  // TypeError
-
-'use strict';
-Object.defineProperty(this, 'LUNG_COUNT', {value: 2, writable: false});
-LUNG_COUNT = 3;  // TypeError
-
-'use strict';
-var frozenArray = Object.freeze([0, 1, 2]);
-frozenArray[0]++;  // TypeError
-
- -

Zudem gibt es ein paar standard Eigenschaft in JavaScript, die nicht überschrieben werden können. Da währen zum Beispiel mathematische Konstanten.

- -
'use strict';
-Math.PI = 4;  // TypeError
-
- -

Die globale Variable undefined ist auch nur lesbar, sodass der berüchtigte Fehler "undefined is not a function" nicht wie folgt umgangen werden kann:

- -
'use strict';
-undefined = function() {};  // TypeError: "undefined" is read-only
-
- -

Valide Fälle

- -
'use strict';
-var obj = Object.freeze({name: 'Score', points: 157});
-obj = {name: obj.name, points: 0};   // replacing it with a new object works
-
-'use strict';
-var LUNG_COUNT = 2;  // a `var` works, because it's not read-only
-LUNG_COUNT = 3;  // ok (anatomically unlikely, though)
-
- -

Siehe auch

- - diff --git a/files/de/web/javascript/reference/fehler/redeclared_parameter/index.html b/files/de/web/javascript/reference/fehler/redeclared_parameter/index.html deleted file mode 100644 index e80836e50f..0000000000 --- a/files/de/web/javascript/reference/fehler/redeclared_parameter/index.html +++ /dev/null @@ -1,61 +0,0 @@ ---- -title: 'SyntaxError: redeclaration of formal parameter "x"' -slug: Web/JavaScript/Reference/Fehler/Redeclared_parameter -tags: - - Errors - - JavaScript - - SyntaxError -translation_of: Web/JavaScript/Reference/Errors/Redeclared_parameter ---- -
{{jsSidebar("Errors")}}
- -

Fehlermeldung

- -
SyntaxError: redeclaration of formal parameter "x" (Firefox)
-SyntaxError: Identifier "x" has already been declared (Chrome)
-
- -

Fehlertyp

- -

{{jsxref("SyntaxError")}}

- -

Was ist falsch gelaufen?

- -

Der selbe Variablenname wird für einen Funktionsparameter benutzt und dann in einer let Zuweisung im Funktionskörper wieder neu deklariert. Das Neudeklarieren der gleichen Variablen in der selben Funktion oder im selben Block mit let ist in JavaScript nicht erlaubt.

- -

Beispiele

- -

In diesem Fall wird der Parameter "arg" neu deklariert.

- -
function f(arg) {
-  let arg = 'foo';
-}
-
-// SyntaxError: redeclaration of formal parameter "arg"
-
- -

Wenn der Wert von "arg" im Funktionskörper geändert werden soll, kann das getan werden, aber ohne die selbe Variable neu zu deklarieren. Oder anders gesagt, man kann das let Schlüsselwort weg lassen. Wenn eine neue Variable erstellt werden soll, muss sie umbenannt werden, damit es keine Konflikte mit dem Funktionsparameter mehr gibt.

- -
function f(arg) {
-  arg = 'foo';
-}
-
-function f(arg) {
-  let bar = 'foo';
-}
-
- -

Kompatibilitätshinweise

- - - -

Siehe auch

- - diff --git a/files/de/web/javascript/reference/fehler/reduce_of_empty_array_with_no_initial_value/index.html b/files/de/web/javascript/reference/fehler/reduce_of_empty_array_with_no_initial_value/index.html deleted file mode 100644 index a1a9a43748..0000000000 --- a/files/de/web/javascript/reference/fehler/reduce_of_empty_array_with_no_initial_value/index.html +++ /dev/null @@ -1,88 +0,0 @@ ---- -title: 'TypeError: Reduce of empty array with no initial value' -slug: Web/JavaScript/Reference/Fehler/Reduce_of_empty_array_with_no_initial_value -tags: - - Error - - JavaScript - - Reference - - TypeError -translation_of: Web/JavaScript/Reference/Errors/Reduce_of_empty_array_with_no_initial_value ---- -
{{jsSidebar("Errors")}}
- -

Fehlermeldung

- -
TypeError: reduce of empty array with no initial value
-
- -

Fehlertyp

- -

{{jsxref("TypeError")}}

- -

Was ist falsch gelaufen?

- -

In JavaScript gibt es einige Reduktionsfunktionen:

- - - -

Diese Funktionen haben den optionalen initialValue Parameter (welcher als erster Parameter beim ersten Aufruf der callback Funktion benutzt wird). Immer, wenn dieser Wert nicht angegeben wird, wird das erste Element des {{jsxref("Array", "Arrays")}} oder {{jsxref("TypedArray", "TypedArrays")}} als Initialwert benutzt. Dieser Fehler tritt auf, wenn das Array leer ist, weil es in diesem Fall keinen Initialwert gibt.

- -

Beispiele

- -

Nicht valide Fälle

- -

Dieses Problem tritt öfter bei einer Kombination mit einem Filter ({{jsxref("Array.prototype.filter()")}}, {{jsxref("TypedArray.prototype.filter()")}}), welcher Elemente aus der Liste entfernt. Dieser lässt kein Element als Initialwert in der Liste zurück.

- -
var ints = [0, -1, -2, -3, -4, -5];
-ints.filter(x => x > 0)         // Entfernt alle Elemente
-    .reduce((x, y) => x + y)    // no more elements to use for the initial value.
- -

Der gleiche Fehler kann bei einem Tippfehler passieren oder, bei einer unerwarteten Anzahl von Elementen in einer Liste.

- -
var names = document.getElementsByClassName("names");
-var name_list = Array.prototype.reduce.call(names, (acc, name) => acc + ", " + name);
-
- -

Valide Fälle

- -

Diese Problem kann mit zwei Wegen gelöst werden.

- -

Ein Weg ist es, einen initialValue als neutrales Element des Operators anzugeben, so wie 0 bei der Addition, 1 bei der Multiplikation oder ein leerer String bei einer Konkatination.

- -
var ints = [0, -1, -2, -3, -4, -5];
-ints.filter(x => x < 0)         // removes all elements
-    .reduce((x, y) => x + y, 0) // the initial value is the neutral element of the addition
-
- -

Ein anderer Weg ist es den Fall eines leeren Arrays schon vor dem Aufruf von reduce zu behandeln oder einen Dummywert als Initialwert in der callback-Funktion zu benutzen.

- -
var names = document.getElementsByClassName("names");
-
-var name_list1 = "";
-if (names1.length >= 1)
-  name_list1 = Array.prototype.reduce.call(names, (acc, name) => acc + ", " + name);
-// name_list1 == "" when names is empty.
-
-var name_list2 = Array.prototype.reduce.call(names, (acc, name) => {
-  if (acc == "") // initial value
-    return name;
-  return acc + ", " + name;
-}, "");
-// name_list2 == "" when names is empty.
-
- -

Siehe auch

- - diff --git a/files/de/web/javascript/reference/fehler/reserved_identifier/index.html b/files/de/web/javascript/reference/fehler/reserved_identifier/index.html deleted file mode 100644 index a483f4cd1a..0000000000 --- a/files/de/web/javascript/reference/fehler/reserved_identifier/index.html +++ /dev/null @@ -1,80 +0,0 @@ ---- -title: 'SyntaxError: "x" is a reserved identifier' -slug: Web/JavaScript/Reference/Fehler/Reserved_identifier -tags: - - Error - - Errors - - JavaScript - - SyntaxError -translation_of: Web/JavaScript/Reference/Errors/Reserved_identifier ---- -
{{jsSidebar("Errors")}}
- -

Fehlermeldung

- -
SyntaxError: "x" is a reserved identifier (Firefox)
-SyntaxError: Unexpected reserved word (Chrome)
- -

Fehlertyp

- -

{{jsxref("SyntaxError")}}

- -

Was ist falsch gelaufen?

- -

Reservierte Schlüsselwörter führen zu einem Fehler, wenn sie als Bezeichner verwendet werden. Im Strict Mode und im Normalen Mode führen folgende Schlüsselwörter zu einem Fehler:

- - - -

Die folgenden Schlüsselwörter führen nur im Strict Mode zu einem Fehler:

- - - -

Beispiele

- -

Reservierte Schlüsselwörter im Strict und Normalen Mode

- -

Derenum Bezeichner ist generell reserviert.

- -
var enum = { RED: 0, GREEN: 1, BLUE: 2 };
-// SyntaxError: enum is a reserved identifier
-
- -

Im Strict Mode sind weitere Bezeichner reserviert.

- -
"use strict";
-var package = ["potatoes", "rice", "fries"];
-// SyntaxError: package is a reserved identifier
-
- -

Man muss die Variablen umbenennen.

- -
var colorEnum = { RED: 0, GREEN: 1, BLUE: 2 };
-var list = ["potatoes", "rice", "fries"];
- -

Ältere Browser aktualisieren

- -

Wenn ein alter Browser eingesetzt wird, der zum Beispiel noch nicht let oder class implementiert, muss der Browser aktualisiert werden, so dass er diese neuen Sprachfunktionen unterstützt.

- -
"use strict";
-class DocArchiver {}
-
-// SyntaxError: class is a reserved identifier
-// (throws in older browsers only, e.g. Firefox 44 and older)
-
- -

Siehe auch

- - diff --git a/files/de/web/javascript/reference/fehler/resulting_string_too_large/index.html b/files/de/web/javascript/reference/fehler/resulting_string_too_large/index.html deleted file mode 100644 index e3f0246d13..0000000000 --- a/files/de/web/javascript/reference/fehler/resulting_string_too_large/index.html +++ /dev/null @@ -1,49 +0,0 @@ ---- -title: 'RangeError: repeat count must be less than infinity' -slug: Web/JavaScript/Reference/Fehler/Resulting_string_too_large -tags: - - Errors - - JavaScript - - RangeError -translation_of: Web/JavaScript/Reference/Errors/Resulting_string_too_large ---- -
{{jsSidebar("Errors")}}
- -

Fehlermeldung

- -
RangeError: repeat count must be less than infinity and not overflow maximum string size (Firefox)
-
-RangeError: Invalid count value (Chrome)
-
- -

Fehlertyp

- -

{{jsxref("RangeError")}}

- -

Was ist falsch gelaufen?

- -

Die {{jsxref("String.prototype.repeat()")}} Methode wurde benutzt. Sie hat einen count Parameter welche die Anzahl der Wiederholungen des Strings angibt. Dieser muss zwischen 0 und kleiner positiv {{jsxref("Infinity")}} sein und kann nicht negativ sein. Das erlaubte Intervall kann wie folgt beschrieben werden: [0, +∞).

- -

Der Ergebnisstring kann zudem nicht länger als die maximale Stringlänge sein, welche sich je nach JavaScript-Umgebung unterscheiden kann. In Firefox (SpiderMonkey) ist die maximale Stringlänge 228 -1 (0xFFFFFFF).

- -

Beispiele

- -

Falsche Fälle

- -
'abc'.repeat(Infinity); // RangeError
-'a'.repeat(2**28);      // RangeError
-
- -

Richtige Fälle

- -
'abc'.repeat(0);    // ''
-'abc'.repeat(1);    // 'abc'
-'abc'.repeat(2);    // 'abcabc'
-'abc'.repeat(3.5);  // 'abcabcabc' (count will be converted to integer)
-
- -

Siehe auch

- - diff --git a/files/de/web/javascript/reference/fehler/stmt_after_return/index.html b/files/de/web/javascript/reference/fehler/stmt_after_return/index.html deleted file mode 100644 index be395c3b83..0000000000 --- a/files/de/web/javascript/reference/fehler/stmt_after_return/index.html +++ /dev/null @@ -1,77 +0,0 @@ ---- -title: 'Warning: unreachable code after return statement' -slug: Web/JavaScript/Reference/Fehler/Stmt_after_return -tags: - - JavaScript - - Warning -translation_of: Web/JavaScript/Reference/Errors/Stmt_after_return ---- -
{{jsSidebar("Errors")}}
- -

Fehlermeldung

- -
Warning: unreachable code after return statement (Firefox)
-
- -

Fehlertyp

- -

Warnung

- -

Was ist falsch gelaufen?

- -

Nicht erreichbarer Code nach einem return Statement tritt in folgenden Fällen auf:

- - - -

Wenn eine Anweisung nach einer gültigen return Anweisung existiert, dann wird diese Warnmeldung ausgegeben, um aufzuzeigen, das der nachfolgende Quellcode nie ausgeführt wird.

- -

Warum sollte man Semikolons am Ende einer return Anweisung verwenden? Da im Falle einer return Anweisung ohne Semikolon, die Absicht des Entwicklers nicht klar ist. Es stellt sich die Frage, ob die Anweisung nach dem return als Rückgabewert der Methode zu sehen ist, oder sollte die Ausführung gleich beim return beendet werden. Hier zeigt die Warnung an, dass es sich um einen uneindeutige Situation handelt.

- -

Warnungen werden nicht erzeugt wenn nach einem semikolonlosen return folgende Anweisungen folgen:

- - - -

Beispiele

- -

Fehlerfälle

- -
function f() {
-  var x = 3;
-  x += 4;
-  return x;   // die return Anweisung beendet die Methode sofort.
-  x -= 3;     // somit ist dieser Code nicht erreichbar und wird nie ausgeführt
-}
-
-function f() {
-  return     // diese Zeile ist äquivalent zu `return;`
-    3 + 4;   // somit kann diese Code-Zeile nie erreicht werden
-}
-
- -

Gültige Fälle

- -
function f() {
-  var x = 3;
-  x += 4;
-  x -= 3;
-  return x;  // OK: return ist die letzte Anweisung in der Methode
-}
-
-function f() {
-  return 3 + 4  // OK: return ohne Semikolon, aber mit einem Ausdruck auf der gleiche Zeile
-}
-
- -

Siehe auch

- - diff --git a/files/de/web/javascript/reference/fehler/strict_non_simple_params/index.html b/files/de/web/javascript/reference/fehler/strict_non_simple_params/index.html deleted file mode 100644 index a288a81a10..0000000000 --- a/files/de/web/javascript/reference/fehler/strict_non_simple_params/index.html +++ /dev/null @@ -1,111 +0,0 @@ ---- -title: 'SyntaxError: "use strict" not allowed in function with non-simple parameters' -slug: Web/JavaScript/Reference/Fehler/Strict_Non_Simple_Params -tags: - - Errors - - JavaScript - - TypeError -translation_of: Web/JavaScript/Reference/Errors/Strict_Non_Simple_Params ---- -
{{jsSidebar("Errors")}}
- -

Fehlermeldung

- -
Firefox:
-SyntaxError: "use strict" not allowed in function with default parameter
-SyntaxError: "use strict" not allowed in function with rest parameter
-SyntaxError: "use strict" not allowed in function with destructuring parameter
-
-Chrome:
-SyntaxError: Illegal 'use strict' directive in function with non-simple parameter list
-
- -

Fehlertyp

- -

{{jsxref("SyntaxError")}}.

- -

Was ist falsch gelaufen?

- -

Eine "use strict" Direktive steht am Anfang einer Funktion, die einen der folgende Parameter hat:

- - - -

Eine "use strict" Direktive ist am Anfang solcher Funktionen durch die ECMAScript Spezifikation nicht erlaubt.

- -

Beispiele

- -

Funktionsstatement

- -

In diesem Fall hat die Funktion sum zwei Standardparameter a=1 und b=2:

- -
function sum(a = 1, b = 2) {
-  // SyntaxError: "use strict" not allowed in function with default parameter
-  'use strict';
-  return a + b;
-}
-
- -

Wenn die Funktion im Strict Mode sein soll und das Skript oder die umschließende FUnktion auch für den Strict Mode in Ordnung ist, kann man die "use strict" Direktive nach außen verschieben:

- -
'use strict';
-function sum(a = 1, b = 2) {
-  return a + b;
-}
-
- -

Funktionsausdruck

- -

Bei eine Funktionsausdruck kann ein andere Workaround genutzt werden:

- -
var sum = function sum([a, b]) {
-  // SyntaxError: "use strict" not allowed in function with destructuring parameter
-  'use strict';
-  return a + b;
-};
-
- -

Dieses kann zu folgendem Ausdruck konvertiert werden:

- -
var sum = (function() {
-  'use strict';
-  return function sum([a, b]) {
-    return a + b;
-  };
-})();
-
- -

Pfeilfunktionen

- -

Wenn eine Pfeilfunktion auf die this Variable zugreift, so kann eine umschließende Pfeilfunktion benutzt werden:

- -
var callback = (...args) => {
-  // SyntaxError: "use strict" not allowed in function with rest parameter
-  'use strict';
-  return this.run(args);
-};
-
- -

Dieses kann zu folgendem Ausdruck konvertiert werden:

- -
var callback = (() => {
-  'use strict';
-  return (...args) => {
-    return this.run(args);
-  };
-})();
-
- -

Siehe auch

- - diff --git a/files/de/web/javascript/reference/fehler/too_much_recursion/index.html b/files/de/web/javascript/reference/fehler/too_much_recursion/index.html deleted file mode 100644 index 0010afd90a..0000000000 --- a/files/de/web/javascript/reference/fehler/too_much_recursion/index.html +++ /dev/null @@ -1,54 +0,0 @@ ---- -title: 'InternalError: too much recursion' -slug: Web/JavaScript/Reference/Fehler/Too_much_recursion -tags: - - Errors - - InternalError - - JavaScript -translation_of: Web/JavaScript/Reference/Errors/Too_much_recursion ---- -
{{jsSidebar("Errors")}}
- -

Fehlermeldung

- -
InternalError: too much recursion
-
- -

Fehlertyp

- -

{{jsxref("InternalError")}}.

- -

Was ist falsch gelaufen?

- -

Eine Funktion, die sich selbst aufruft, wird rekursive Funktion genannt. In manchen Fällen ist Rekursion mit einer Schleife vergleichbar. Beide führen den gleichen Code mehrfach aus und beide brauchen eine Abbruchbedingung (um Endlosschleifen bzw. Endlosrekursion zu vermeiden). Wenn zu tiefe Rekursion oder Endlosrekursion auftritt, erzeugt JavaScript diesen Fehler.

- -

Beispiele

- -

Diese rekursive Methode wird bis zur Abbruchbedingung 10 mal durchlaufen.

- -
function schleife(x) {
-  if (x >= 10) // "x >= 10" ist die Abbruchsbedingung
-    return;
-  // zu wiederholende Codezeilen
-  schleife(x + 1); // rekursiver Methodenaufruf
-}
-schleife(0);
- -

Wird die Abbruchsbedingung auf eine zu hohe Wert gesetzt, ist die Rekursionstiefe zu hoch und es wird einen Fehler erzeugt:

- -
function boeseSchleife(x) {
-  if (x >= 1000000000000)
-    return;
-  // zu wiederholende Codezeilen
-  boeseSchleife(x + 1);
-}
-boeseSchleife(0);
-
-// InternalError: too much recursion
- -

Siehe auch

- - diff --git a/files/de/web/javascript/reference/fehler/typed_array_invalid_arguments/index.html b/files/de/web/javascript/reference/fehler/typed_array_invalid_arguments/index.html deleted file mode 100644 index 2e7fa8f0b3..0000000000 --- a/files/de/web/javascript/reference/fehler/typed_array_invalid_arguments/index.html +++ /dev/null @@ -1,77 +0,0 @@ ---- -title: 'TypeError: invalid arguments' -slug: Web/JavaScript/Reference/Fehler/Typed_array_invalid_arguments -tags: - - Error - - Errors - - JavaScript - - TypeError -translation_of: Web/JavaScript/Reference/Errors/Typed_array_invalid_arguments ---- -
{{jsSidebar("Errors")}}
- -

Fehlermeldung

- -
TypeError: invalid arguments (Firefox)
- -

Fehlertyp

- -

{{jsxref("TypeError")}}

- -

Was ist falsch gelaufen?

- -

Der Typed Array Konstruktor erwartet entweder

- - - -

um ein neues Typed Array zu erstelltn. Andere Argumente im Konstruktor erstellen kein valides Typed Array.

- -

Beispiele

- -

Typed Arrays, zum Beispiel ein {{jsxref("Uint8Array")}}, können nicht von einem String erstellt werden. Tatsächlich können String nicht in typisierten Arrays enthalten sein.

- -
var ta = new Uint8Array("nope");
-// TypeError: invalid arguments
-
- -

Verschiedene Wege um ein valides {{jsxref("Uint8Array")}} Objekt zu erstellen:

- -
// From a length
-var uint8 = new Uint8Array(2);
-uint8[0] = 42;
-console.log(uint8[0]); // 42
-console.log(uint8.length); // 2
-console.log(uint8.BYTES_PER_ELEMENT); // 1
-
-// From an array
-var arr = new Uint8Array([21,31]);
-console.log(arr[1]); // 31
-
-// From another TypedArray
-var x = new Uint8Array([21, 31]);
-var y = new Uint8Array(x);
-console.log(y[0]); // 21
-
-// From an ArrayBuffer
-var buffer = new ArrayBuffer(8);
-var z = new Uint8Array(buffer, 1, 4);
-
-// From an iterable
-var iterable = function*(){ yield* [1,2,3]; }();
-var uint8 = new Uint8Array(iterable);
-// Uint8Array[1, 2, 3]
-
- -

Siehe auch

- - diff --git a/files/de/web/javascript/reference/fehler/undeclared_var/index.html b/files/de/web/javascript/reference/fehler/undeclared_var/index.html deleted file mode 100644 index b7c8b09165..0000000000 --- a/files/de/web/javascript/reference/fehler/undeclared_var/index.html +++ /dev/null @@ -1,67 +0,0 @@ ---- -title: 'ReferenceError: assignment to undeclared variable "x"' -slug: Web/JavaScript/Reference/Fehler/Undeclared_var -tags: - - Errors - - JavaScript - - ReferenceError - - Strict Mode -translation_of: Web/JavaScript/Reference/Errors/Undeclared_var ---- -
{{jsSidebar("Errors")}}
- -

Fehlermeldung

- -
ReferenceError: assignment to undeclared variable "x" (Firefox)
-ReferenceError: "x" is not defined (Chrome)
-ReferenceError: Variable undefined in strict mode (Edge)
-
- -

Fehlertyp

- -

{{jsxref("ReferenceError")}} Warnung nur im Strict mode.

- -

Was ist falsch gelaufen?

- -

Ein Wert wurde zu einer nicht deklarierten Variablen hinzugefügt. Oder mit anderen Worten, es gibt eine Zuweisung ohne das Schlüsselwort var. Es gibt einige Unterschiede zwischen deklarierten und nicht deklarierten Variablen, die zu unerwarteten Ergebnissen führen kann und weshalb der Fehler im Strict Mode erscheint.

- -

Drei Dinge über deklarierte und nicht deklarierte Variablen:

- - - -

Mehr Details und Beispiele findet man auf der var Referenzseite.

- -

Fehler mit nicht deklarierten Variablenzuweisungen gibt es nur im Strict Mode Code. Außerhalb davon wird die Warnung einfach Ignoriert.

- -

Beispiele

- -

Falsche Fälle

- -

In diesem Fall ist die "bar" eine nicht deklarierte Variable.

- -
function foo() {
-  'use strict';
-  bar = true;
-}
-foo(); // ReferenceError: assignment to undeclared variable bar
-
- -

Richtige Fälle

- -

Um "bar" zu einer deklarierten Variable zu machen, kann das Schlüsselwort var eingesetzt werden.

- -
function foo() {
-  'use strict';
-  var bar = true;
-}
-foo();
- -

Siehe auch

- - diff --git a/files/de/web/javascript/reference/fehler/undefined_prop/index.html b/files/de/web/javascript/reference/fehler/undefined_prop/index.html deleted file mode 100644 index fe83564f59..0000000000 --- a/files/de/web/javascript/reference/fehler/undefined_prop/index.html +++ /dev/null @@ -1,63 +0,0 @@ ---- -title: 'ReferenceError: reference to undefined property "x"' -slug: Web/JavaScript/Reference/Fehler/Undefined_prop -tags: - - Errors - - JavaScript - - ReferenceError - - Strict Mode -translation_of: Web/JavaScript/Reference/Errors/Undefined_prop ---- -
{{jsSidebar("Errors")}}
- -

Fehlermeldung

- -
ReferenceError: reference to undefined property "x" (Firefox)
-
- -

Fehlertyp

- -

{{jsxref("ReferenceError")}} Fehlermeldung tritt nur im  strikten Modus auf.

- -

Was ist falsch gelaufen?

- -

Es wird versucht auf eine Eigenschaft zuzugreifen, die nicht existiert. Es gibt zwei Arten um auf Eigenschaften zuzugreifen, siehe Eigenschaften Zugriffsfunktionen auf den Referenzseiten für weitere Details.

- -

Fehler aufgrund von leeren Eigenschaftsreferenzen treten nur im Quellcode auf, der im strikten Modus geschrieben ist. Im Quellcode der nicht im strikten Modus geschrieben ist, wird der Fehler ohne Meldung ignoriert.

- -

Beispiele

- -

Ungültige Fälle

- -

In diesem Fall ist die Eigenschaft "bar" undefiniert.

- -
"use strict";
-
-var foo = {};
-foo.bar; // ReferenceError: reference to undefined property "bar"
-
- -

Gültige Fälle

- -

Um Fehler zu vermeiden muss man eine Eigenschaft "bar" definieren oder überprüfen, ob die Eigenschaft "bar" existiert, bevor man auf diese zugreift. (z.B.: mit Hilfe der Funktion {{jsxref("Object.prototype.hasOwnProperty()")}}).

- -
"use strict";
-
-var foo = {};
-
-// Definiert die bar Eigenschaft
-
-foo.bar = "Mond";
-console.log(foo.bar); // "Mond"
-
-// Testet vor dem Zugriff, ob bar existiert.
-
-if (foo.hasOwnProperty("bar")) {
-  console.log(foo.bar);
-}
- -

Siehe auch

- - diff --git a/files/de/web/javascript/reference/fehler/unexpected_token/index.html b/files/de/web/javascript/reference/fehler/unexpected_token/index.html deleted file mode 100644 index 3aff253bfd..0000000000 --- a/files/de/web/javascript/reference/fehler/unexpected_token/index.html +++ /dev/null @@ -1,47 +0,0 @@ ---- -title: 'SyntaxError: Unexpected token' -slug: Web/JavaScript/Reference/Fehler/Unexpected_token -tags: - - Fehler - - JavaScript - - Syntaxfehler -translation_of: Web/JavaScript/Reference/Errors/Unexpected_token ---- -
{{jsSidebar("Errors")}}
- -

Fehlermeldung

- -
SyntaxError: expected expression, got "x"
-SyntaxError: expected property name, got "x"
-SyntaxError: expected target, got "x"
-SyntaxError: expected rest argument name, got "x"
-SyntaxError: expected closing parenthesis, got "x"
-SyntaxError: expected '=>' after argument list, got "x"
-
- -

Fehlertyp

- -

{{jsxref("SyntaxError")}}

- -

Was ist falsch gelaufen?

- -

Es wurde eine bestimmte Sprachenstruktur erwartet, aber etwas anderes wurde übermittelt. Es kann sich dabei um einen einfachen Tippfehler handeln.

- -

Beispiele

- -

Expression expected (Ausdruck erwartet)

- -

Zum Beispiel sind Kommas am Ende eines Befehls nicht erlaubt.

- -
for (let i = 0; i < 5,; i++) {
-  console.log(i);
-}
-// SyntaxError: expected expression, got ')'
-
- -

Richtig wäre das Komma auszulassen oder ein weiteren Ausdruck hinzuzufügen:

- -
for (let i = 0; i < 5; i++) {
-  console.log(i);
-}
-
diff --git a/files/de/web/javascript/reference/fehler/unexpected_type/index.html b/files/de/web/javascript/reference/fehler/unexpected_type/index.html deleted file mode 100644 index 601ec21d43..0000000000 --- a/files/de/web/javascript/reference/fehler/unexpected_type/index.html +++ /dev/null @@ -1,67 +0,0 @@ ---- -title: 'TypeError: "x" is (not) "y"' -slug: Web/JavaScript/Reference/Fehler/Unexpected_type -tags: - - Errors - - JavaScript - - TypeError -translation_of: Web/JavaScript/Reference/Errors/Unexpected_type ---- -
{{jsSidebar("Errors")}}
- -

Fehlermeldung

- -
TypeError: "x" is (not) "y"
-
-Examples:
-TypeError: "x" is undefined
-TypeError: "x" is null
-TypeError: "undefined" is not an object
-TypeError: "x" is not an object or null
-TypeError: "x" is not a symbol
-
- -

Fehlertyp

- -

{{jsxref("TypeError")}}.

- -

Was ist falsch gelaufen?

- -

Der Typ einer Variable ist unpassend. Dieser Fall tritt oft bei {{jsxref("undefined")}}- oder {{jsxref("null")}}-Werten auf.

- -

Außerdem benötigen bestimmte Metodhen wie {{jsxref("Object.create()")}} oder {{jsxref("Symbol.keyFor()")}} einen bestimmten Typ, der bereitgestellt werden muss.

- -

Beispiele

- -

Ungültige Fälle

- -
// Undefinierte und null-Fälle, bei denen die Substring-Methode nicht funktioniert
-var foo = ;
-foo.substring(1); // TypeError: foo is undefined
-
-var foo = null;
-foo.substring(1); // TypeError: foo is null
-
-
-// Bestimmte Methoden erfordern einen bestimmten Typ
-var foo = {}
-Symbol.keyFor(foo); // TypeError: foo is not a symbol
-
-var foo = 'bar'
-Object.create(foo); // TypeError: "foo" is not an object or null
-
- -

Den Fehler beheben?

- -

Um den Nullzeiger auf undefined- oder null-Werte zu beheben, kann z. B. der "typeof"-Operator verwendt werden.

- -
if (typeof foo !== 'undefined') {
-  // Nun wissen wir, dass foo definiert ist, und können weitermachen.
-}
- -

Siehe auch

- - diff --git a/files/de/web/javascript/reference/fehler/unnamed_function_statement/index.html b/files/de/web/javascript/reference/fehler/unnamed_function_statement/index.html deleted file mode 100644 index 6c148b6ff0..0000000000 --- a/files/de/web/javascript/reference/fehler/unnamed_function_statement/index.html +++ /dev/null @@ -1,115 +0,0 @@ ---- -title: 'SyntaxError: function statement requires a name' -slug: Web/JavaScript/Reference/Fehler/Unnamed_function_statement -tags: - - Error - - Errors - - JavaScript - - SyntaxError -translation_of: Web/JavaScript/Reference/Errors/Unnamed_function_statement ---- -
{{jsSidebar("Errors")}}
- -

Fehlermeldung

- -
SyntaxError: function statement requires a name [Firefox]
-SyntaxError: Unexpected token ( [Chrome]
-
- -

Fehlertyp

- -

{{jsxref("SyntaxError")}}

- -

Was ist falsch gelaufen?

- -

Es gibt eine Funktionsstatement im Code, welches einen Namen benötigt. Man muss überprüfen, wie Funktionen definiert sind und ob diese einen Namen benötigen oder ob diese Funktion ein Funktionsausdruck ist (eine {{Glossary("IIFE")}}) oder ob die Funktion im richtigen Kontext geschrieben ist.

- -

Beispiele

- -

Statements vs Ausdrücke

- -

Ein Funktionsstatement (oder Funktionsdeklaration) benötigt einen Namen. Folgendes funktioniert nicht:

- -
function () {
-  return 'Hello world';
-}
-// SyntaxError: function statement requires a name
-
- -

Man kann stattdessen ein Funktionsausdruck (Zuweisung) nutzen:

- -
var greet = function() {
-  return 'Hello world';
-};
- -

Manchmal soll auch eine auch eine IIFE (Immediately Invoked Function Expression) sein, welche eine Funktion ist, die nach der Definition direkt ausgeführt wird. Dafür müssen ein paar mehr Klammern benutzt werden:

- -
(function () {
-
-})();
- -

Funktionen mit Labeln

- -

Wenn man ein Funktionslabel benutzt, muss ein Funktionsnamen nach dem function Schlüsselwort stehen. Folgendes funktioniert nicht:

- -
function Greeter() {
-  german: function () {
-    return "Moin";
-  }
-}
-// SyntaxError: function statement requires a name
-
- -

Das folgende funktioniert:

- -
function Greeter() {
-  german: function g() {
-    return "Moin";
-  }
-}
- -

Objektmethoden

- -

Wenn man eine Methode für ein Objekt erstellen möchte, muss ein Objekt erstellt werden. Die folgende Syntax ohne einen Namen nach dem function Schlüsselwort ist zulässig.

- -
var greeter = {
-  german: function () {
-    return "Moin";
-  }
-};
- -

Callback Syntax

- -

Zudem sollte die Syntax bei Callbackfunktionen geprüft werden. Komma- und Klammersetzung kann schnell schwierig werden.

- -
promise.then(
-  function() {
-    console.log("success");
-  });
-  function() {
-    console.log("error");
-}
-// SyntaxError: function statement requires a name
-
- -

Richtig ist folgendes:

- -
promise.then(
-  function() {
-    console.log("success");
-  },
-  function() {
-    console.log("error");
-  }
-);
-
- -

Siehe auch

- - diff --git a/files/de/web/javascript/reference/fehler/unterminated_string_literal/index.html b/files/de/web/javascript/reference/fehler/unterminated_string_literal/index.html deleted file mode 100644 index 3d60240b51..0000000000 --- a/files/de/web/javascript/reference/fehler/unterminated_string_literal/index.html +++ /dev/null @@ -1,67 +0,0 @@ ---- -title: 'SyntaxError: unterminated string literal' -slug: Web/JavaScript/Reference/Fehler/Unterminated_string_literal -tags: - - Errors - - JavaScript - - SyntaxError -translation_of: Web/JavaScript/Reference/Errors/Unterminated_string_literal ---- -
{{jsSidebar("Errors")}}
- -

Fehlermeldung

- -
SyntaxError: unterminated string literal
-
- -

Fehlertyp

- -

{{jsxref("SyntaxError")}}

- -

Was ist falsch gelaufen?

- -

Es gibt irgendwo einen nicht beendeten {{jsxref("String")}}. Stringliterale müssen mit einfachen (') oder doppelten (") Anführungszeichen umschlossen sein. JavaScript unterscheidet nicht zwischen Strings, die mit einfachen oder doppelten Anführungszeichen umschlossen sind. Maskierte Sequenzen funktionieren in Strings mit einfachen und doppelten Anführungszeichen. Um den Fehler zu beheben, sollte folgendes überprüft werden:

- - - -

Beispiele

- -

MehrereZeilen

- -

Man kann Strings nicht über mehrere Zeilen in JavaScript schreiben:

- -
var longString = 'This is a very long string which needs
-                  to wrap across multiple lines because
-                  otherwise my code is unreadable.';
-// SyntaxError: unterminated string literal
- -

Stattdessen muss ein + Operator, ein Backslask oder ein Templateliteral eingesetzt werden. Die + Operator Variante sieht wie folgt aus:

- -
var longString = 'This is a very long string which needs ' +
-                 'to wrap across multiple lines because ' +
-                 'otherwise my code is unreadable.';
-
- -

Oder man benutzt ein Backslash Zeichen ("\") am ende jeder Zeile, um anzudeuten, dass der String in der nächsten Zeile weiter geht. Man muss sicherstellen, dass keine Leerzeichen oder andere Zeichen nach dem Backslash stehen (ausgenommen der Zeilenumbruch) oder als Einrückung, ansonsten wird es nicht funktionieren. Diese Form sieht wie folgt aus:

- -
var longString = 'This is a very long string which needs \
-to wrap across multiple lines because \
-otherwise my code is unreadable.';
-
- -

Eine andere Möglichkeit ist der Einsatz von Templateliteralen, welche in ECMAScript 2015 Umgebungen unterstützt werden:

- -
var longString = `This is a very long string which needs
-                  to wrap across multiple lines because
-                  otherwise my code is unreadable.`;
- -

Siehe auch

- - diff --git a/files/de/web/javascript/reference/fehler/var_hides_argument/index.html b/files/de/web/javascript/reference/fehler/var_hides_argument/index.html deleted file mode 100644 index f06a1d5220..0000000000 --- a/files/de/web/javascript/reference/fehler/var_hides_argument/index.html +++ /dev/null @@ -1,56 +0,0 @@ ---- -title: 'TypeError: variable "x" redeclares argument' -slug: Web/JavaScript/Reference/Fehler/Var_hides_argument -tags: - - Errors - - JavaScript - - Strict Mode - - TypeError -translation_of: Web/JavaScript/Reference/Errors/Var_hides_argument ---- -
{{jsSidebar("Errors")}}
- -

Fehlermeldung

- -
TypeError: variable "x" redeclares argument (Firefox)
-
- -

Fehlertyp

- -

{{jsxref("TypeError")}} Warnung nur im strict mode.

- -

Was ist falsch gelaufen?

- -

Der selbe Variablenname für einen Funktionsparameter und einer Neudeklaration mit einer var Zuweisung im Funktionskörper ist vorhanden. Dieses ist ein Namenskonflikt, weshalb JavaScript eine Warnung erzeugt.

- -

Dieser Fehler ist eine Warnung, die nur im strict mode auftaucht. Ist man nicht im strict mode, so wird die Neudeklaration still ignoriert.

- -

Beispiele

- -

Nicht balider Fall

- -

In diesem Fall wird die Variable "arg" neu deklariert.

- -
'use strict';
-
-function f(arg) {
-  var arg = 'foo';
-}
-
- -

Valider Fall

- -

Um diese Warnung zu vermeiden kann das var Statement weggelassen werden, weil die Variable schon existiert. In anderen Fällen kann der Funktionsparameter oder die Variable umbenannt werden.

- -
'use strict';
-
-function f(arg) {
-  arg = 'foo';
-}
-
- -

Siehe auch

- - diff --git a/files/de/web/javascript/reference/functions/arrow_functions/index.html b/files/de/web/javascript/reference/functions/arrow_functions/index.html new file mode 100644 index 0000000000..a29b5ea3cf --- /dev/null +++ b/files/de/web/javascript/reference/functions/arrow_functions/index.html @@ -0,0 +1,360 @@ +--- +title: Pfeilfunktionen +slug: Web/JavaScript/Reference/Functions/Pfeilfunktionen +tags: + - ECMAScript 2015 + - Functions + - Intermediate + - JavaScript + - Reference +translation_of: Web/JavaScript/Reference/Functions/Arrow_functions +--- +
{{jsSidebar("Functions")}}
+ +

Der Ausdruck einer Pfeilfunktion hat eine kürzere Syntax als ein Funktionsausdruck und hat kein eigenes this, arguments, super, oder new.target. Solche Funktionsausdrücke sind am besten für Funktionen, die nicht als Methode genutzt werden, geeignet und können nicht als Konstruktoren verwendet werden.

+ +
{{EmbedInteractiveExample("pages/js/functions-arrow.html")}}
+ +

Syntax

+ +

Basis Syntax

+ +
(param1, param2, …, paramN) => { statements }
+(param1, param2, …, paramN) => expression
+// gleich zu: => { return expression; }
+
+// Klammern sind optional, wenn nur ein Parametername vorhanden ist:
+(singleParam) => { statements }
+singleParam => { statements }
+
+// Die Parameterliste für eine parameterlose Funktion muss mit einem Klammernpaar geschrieben werden
+() => { statements }
+
+ +

Fortgeschrittene Syntax

+ +
// Der Body kann eingeklammert werden, um ein Objektliteral Ausdruck zurück zu geben:
+params => ({foo: bar})
+
+// Rest Parameter und Default Parameter werden unterstützt
+(param1, param2, ...rest) => { statements }
+(param1 = defaultValue1, param2, …, paramN = defaultValueN) => {
+statements }
+
+// Destrukturierung in der Parameterliste ist ebenfalls unterstützt
+var f = ([a, b] = [1, 2], {x: c} = {x: a + b}) => a + b + c;
+f(); // 6
+
+ +

Beschreibung

+ +

Siehe auch "ES6 In Depth: Arrow functions" on hacks.mozilla.org.

+ +

Zwei Faktoren haben die Einführung von Pfeilfunktionen beeinflusst: kürzere Funktionen und dass this nicht gebunden ist.

+ +

Kürzere Funktionen

+ +
var elements = [
+  "Hydrogen",
+  "Helium",
+  "Lithium",
+  "Beryllium"
+];
+
+elements.map(function(element) {
+  return element.length
+}); // [8, 6, 7, 9]
+
+elements.map(element => {
+  return element.length
+}); // [8, 6, 7, 9]
+
+elements.map(({length}) => length); // [8, 6, 7, 9]
+ +

Keine Bindung von this

+ +

Vor (der Einführung von) Pfeilfunktionen definierte jede Funktion ihren eigenen this-Wert (d.h. ein neues Objekt im Falle eines Konstruktors; in strict mode Funktionsaufrufen nicht definiert; bzw. das kontextuelle Objekt, wenn die Funktion als eine "Objekt-Methode" aufgerufen wurde, usw.). Dies stellte sich innerhalb eines objektorientierten Programmierstils als lästig heraus.

+ +
function Person() {
+  // Der Person() Konstruktor definiert `this` als Instanz von sich selbst.
+  this.age = 0;
+
+  setInterval(function growUp() {
+    // Im nicht Strict Modus, definiert die growUp() Funktion `this`
+    // als das globale Objekt (weil das der Ort ist, an dem growUp() ausgeführt wird),
+    // das sich von dem `this`, welches vom Person() Konstruktor definiert wurde unterscheidet.
+    this.age++;
+  }, 1000);
+}
+
+var p = new Person();
+ +

In ECMAScript 3/5 konnte dies durch Zuweisung des Wertes von this an eine Variable, welche umschlossen werden konnte, behoben werden.

+ +
function Person() {
+  var that = this;
+  that.age = 0;
+
+  setInterval(function growUp() {
+    // Der Rückruf bezieht sich auf jene `that`-Variable,
+    // deren Wert das zu erwartende Objekt ist.
+    that.age++;
+  }, 1000);
+}
+ +

Alternativ könnte eine gebundene Funktion erstellt werden, sodass der passende this-Wert an die growUp()-Funktion übergeben würde.

+ +

Eine Pfeilfunktion erstellt keinen eigenen this Kontext, wodurch this die ursprüngliche Bedeutung des umschließenden Kontextes trägt. Somit funktioniert der folgende Code wie erwartet.

+ +
function Person(){
+  this.age = 0;
+
+  setInterval(() => {
+    this.age++; // |this| bezieht sich entsprechend auf das Person-Objekt
+  }, 1000);
+}
+
+var p = new Person();
+ +

Zusammenhang mit dem Strict Mode

+ +

Vorausgesetzt, dass this aus dem umschließenden lexikalischen Kontext kommt, werden Strict Mode Regeln bezüglich this einfach ignoriert.

+ +
var f = () => {'use strict'; return this};
+f() === window; // oder das globale Objekt
+ +

Die restlichen strict mode Regeln verhalten sich normal.

+ +

Aufruf durch call oder apply

+ +

Da this in Pfeilfunktionen nicht gebunden ist, können call() oder apply() Methoden nur Argumente übergeben; this wird ignoriert:

+ +
var adder = {
+  base : 1,
+
+  add : function(a) {
+    var f = v => v + this.base;
+    return f(a);
+  },
+
+  addThruCall: function(a) {
+    var f = v => v + this.base;
+    var b = {
+      base : 2
+    };
+
+    return f.call(b, a);
+  }
+};
+
+console.log(adder.add(1));         // Dies würde 2 ausgeben
+console.log(adder.addThruCall(1)); // Dies würde nach wie vor 2 ausgeben
+ +

Keine Bindung von Argumenten

+ +

Pfeilfunktionen haben kein eigenes arguments Objekt. Somit ist arguments einfach eine Referenz auf den Namen innerhalb des umschließenden Geltungsbereichs (scope).

+ +
var arguments = [1, 2, 3];
+var arr = () => arguments[0];
+
+arr(); // 1
+
+function foo(n) {
+  var f = () => arguments[0] + n; // implizite Argumenten-Bindung von foo
+  return f();
+}
+
+foo(1); // 2
+ +

In den meisten Fällen sind Rest Parameters eine gute Alternative zum Einsatz des arguments Objektes:

+ +
function foo(n) {
+  var f = (...args) => args[0] + n;
+  return f(10);
+}
+
+foo(1); // 11
+ +

Pfeilfunktionen als Methoden

+ +

Wie angegeben, sind Ausdrücke von Pfeilfunktionen am besten geeignet für nicht-methodische Funktionen. Man sehe, was geschieht, wenn versucht wird, sie als Methoden zu verwenden.

+ +
'use strict';
+
+var obj = {
+  i: 10,
+  b: () => console.log(this.i, this),
+  c: function() {
+    console.log( this.i, this)
+  }
+}
+obj.b(); // gibt undefined, Window {...} aus (oder das globale Objekt)
+obj.c(); // gibt 10, Object {...} aus
+ +

Pfeilfunktionen definieren (binden sozusagen) kein eigenes this. Ein anderes Beispiel, das {{jsxref("Object.defineProperty()")}} betrifft:

+ +
'use strict';
+
+var obj = {
+  a: 10
+};
+
+Object.defineProperty(obj, "b", {
+  get: () => {
+    console.log(this.a, typeof this.a, this);
+    return this.a+10; // stellt das globale Objekt 'Window' dar, 'this.a' gibt daher 'undefined' zurück
+  }
+});
+
+ +

Verwendung des new Operators

+ +

Pfeilfunktionen können nicht als Konstruktoren verwendet werden. Sie führen zu einem Fehler, wenn auf ihnen ein new angewendet wird.

+ +
var Foo = () => {};
+var foo = new Foo(); // TypeError: Foo is not a constructor
+
+ +

Einsatz der prototype Eigenschaft

+ +

Pfeilfunktionen haben keine prototype Eigenschaft.

+ +
var Foo = () => {};
+console.log(Foo.prototype); // undefined
+
+ +

Verwendung des Schlüsselwortes yield

+ +

Das yield-Schlüsselwort sollte im Körper einer Pfeilfunktion nicht verwendet werden (außer wenn dies innerhalb von darin weiter verschachtelten Funktionen erlaubt ist). Als Folge können Pfeilfunktionen nicht als Generatoren verwendet werden.

+ +

Funktionskörper

+ +

Pfeilfunktionen können entweder einen "knappen" oder einen gewöhnlichen "Blockkörper" haben.

+ +

In einem knappen Körper ist lediglich ein Ausdruck nötig und eine implizite Rückgabe wird angehängt. In einem Blockkörper muss eine explizite Rückgabe-Anweisung verwendet werden.

+ +
var func = x => x * x;
+// knappe Syntax, implizierte Rückgabe
+
+var func = (x, y) => { return x + y; };
+// mit Blockkörper, explizite Rückgabe wird benötigt
+
+ +

Rückgabe von Objekt-Literalen

+ +

Man bedenke, dass die Rückgabe von Objekt-Literalen unter Verwendung der knappen Syntax params => {object:literal} nicht so ausgeführt wird, wie man es erwarten würde:

+ +
var func = () => {  foo: 1  };
+// Der Aufruf von func() gibt undefined zurück!
+
+var func = () => {  foo: function() {}  };
+// SyntaxError: function-Anweisung erfordert einen Namen
+ +

Der Grund dafür ist, dass der Code in geschweiften Klammern ({}) als eine Sequenz von Anweisungen übersetzt wird (d.h. foo wird als Bezeichner behandelt und nicht als Schlüssel eines Objekt-Literals).

+ +

Man bedenke, das Objekt-Literal in Klammern zu setzen:

+ +
var func = () => ({ foo: 1 });
+ +

Zeilenumbruch

+ +

Pfeilfunktionen können keinen Zeilenumbruch zwischen Parametern und dem Pfeil haben.

+ +
var func = ()
+           => 1;
+// SyntaxError: Ausdruck erwartet, '=>' erhalten
+ +

Übersetzungsreihenfolge

+ +

Der Pfeil innerhalb einer Pfeilfunktion ist kein Operator. Allerdings haben Pfeilfunktionen im Vergleich zu gewöhnlichen Funktionen besondere Übersetzungsregeln, welche mit der Priorität von Operatoren (operator precedence) anders interagieren.

+ +
let callback;
+
+callback = callback || function() {}; // ok
+
+callback = callback || () => {};
+// SyntaxError: invalid arrow-function arguments
+
+callback = callback || (() => {});    // ok
+
+ +

Weitere Beispiele

+ +
// Eine leere Pfeilfunktion gibt undefined zurück
+let empty = () => {};
+
+(() => "foobar")()
+// Gibt "foobar" zurück
+// (Das ist eine Immediately Invoked Function Expression
+// siehe IIFE im Glossar
+
+var simple = a => a > 15 ? 15 : a;
+simple(16); // 15
+simple(10); // 10
+
+let max = (a, b) => a > b ? a : b;
+
+// Einfaches filtering, mapping, ... von Arrays
+
+var arr = [5, 6, 13, 0, 1, 18, 23];
+
+var sum = arr.reduce((a, b) => a + b);
+// 66
+
+var even = arr.filter(v => v % 2 == 0);
+// [6, 0, 18]
+
+var double = arr.map(v => v * 2);
+// [10, 12, 26, 0, 2, 36, 46]
+
+// Weitere knappe Zusicherungsketten (promise chains)
+promise.then(a => {
+  // ...
+}).then(b => {
+   // ...
+});
+
+// Parameterlose Pfeilfunktionen, welche visuell einfacher zu verstehen sind
+setTimeout( _ => {
+  console.log("I happen sooner");
+  setTimeout( _ => {
+    // deeper code
+    console.log("I happen later");
+  }, 1);
+}, 1);
+ +

Spezifikationen

+ + + + + + + + + + + + + + + + + + + +
SpezifikationStatusKommentar
{{SpecName('ES2015', '#sec-arrow-function-definitions', 'Arrow Function Definitions')}}{{Spec2('ES2015')}}Initiale Definition.
{{SpecName('ESDraft', '#sec-arrow-function-definitions', 'Arrow Function Definitions')}}{{Spec2('ESDraft')}} 
+ +

Browserkompatibilität

+ +
+ + +

{{Compat("javascript.functions.arrow_functions")}}

+
+ +

Siehe auch

+ + diff --git a/files/de/web/javascript/reference/functions/method_definitions/index.html b/files/de/web/javascript/reference/functions/method_definitions/index.html new file mode 100644 index 0000000000..bf4d432627 --- /dev/null +++ b/files/de/web/javascript/reference/functions/method_definitions/index.html @@ -0,0 +1,230 @@ +--- +title: Methoden Definitionen +slug: Web/JavaScript/Reference/Functions/Methoden_Definitionen +tags: + - ECMAScript 2015 + - Funktionen + - JavaScript + - Objekte + - Syntax +translation_of: Web/JavaScript/Reference/Functions/Method_definitions +--- +
{{JsSidebar("Functions")}}
+ +

Beginnend mit ECMAScript 2015 wurde eine kürzere Syntax für Methodendefinitionen in Objekt Initialisierungen eingeführt. Es ist eine Abkürzung für die Zuweisung einer Funktion an einen Methodennamen.

+ +

Syntax

+ +
var obj = {
+  property( parameters… ) {},
+  *generator( parameters… ) {},
+// also with computed keys:
+  [property]( parameters… ) {},
+  *[generator]( parameters… ) {},
+// compare ES5 getter/setter syntax:
+  get property() {},
+  set property(value) {}
+};
+
+ +

Beschreibung

+ +

Die Syntax der Kurzschreibweise ähnelt der in ECMAScript 2015 eingeführten Syntax der getter und setter.

+ +

Gegeben sei der folgende Quellcode:

+ +
var obj = {
+  foo: function() {},
+  bar: function() {}
+};
+ +

Jetzt können Sie das abkürzen zu:

+ +
var obj = {
+  foo() {},
+  bar() {}
+};
+ +
+

Hinweis: Die kurze Syntax benutzt benamte Funktionen statt anonymen Funktionen (wie in ...foo: function() {}...). Benamte Funktionen können sich vom Funktionskörper aus aufrufen (für anonyme Funktionen ist das unmöglich, weil sie keinen Bezeichner haben). Für mehr Details, siehe {{jsxref("Operators/function","function","#Beispiele")}}.

+
+ +

Kurze Generatormethoden

+ +

Generatormethoden können mit der kurzen Syntax ebenfalls definiert werden. Zu beachten ist, dass der Stern (*) in der kurzen Syntax nur vor dem Namen der Generatoreigenschaft geschrieben werden kann. * g(){} funktioniert, g *(){} funktioniert nicht.

+ +
// Using a named property (pre-ES2015)
+var obj2 = {
+  g: function*() {
+    var index = 0;
+    while(true)
+      yield index++;
+  }
+};
+
+// The same object using shorthand syntax
+var obj2 = {
+  * g() {
+    var index = 0;
+    while(true)
+      yield index++;
+  }
+};
+
+var it = obj2.g();
+console.log(it.next().value); // 0
+console.log(it.next().value); // 1
+ +

Methodendefinitionen die nicht konstruiert werden können

+ +

Alle Methodendefinitionen die keine Konstruktoren sind werden einen {{jsxref("TypeError")}} erzeugen,  wenn man versucht sie zu instantieren.

+ +
var obj = {
+  method() {},
+};
+new obj.method; // TypeError: obj.method is not a constructor
+
+var obj = {
+  * g() {}
+};
+new obj.g; // TypeError: obj.g is not a constructor (changed in ES2016)
+
+ +

Beispiele

+ +

Ein einfacher Testfall

+ +
var obj = {
+  a : "foo",
+  b(){ return this.a; }
+};
+console.log(obj.b()); // "foo"
+
+ +

Berechnete Eigenschaftsnamen

+ +

Die Kurzschreib-Syntax unterstützt auch berechnete Eigenschaftsnamen.

+ +
var bar = {
+  foo0 : function (){return 0;},
+  foo1(){return 1;},
+  ["foo" + 2](){return 2;},
+};
+
+console.log(bar.foo0()); // 0
+console.log(bar.foo1()); // 1
+console.log(bar.foo2()); // 2
+ +

Spezifikationen

+ + + + + + + + + + + + + + + + + + + + + + + + +
SpezifikationStatusKommentar
{{SpecName('ES2015', '#sec-method-definitions', 'Method definitions')}}{{Spec2('ES2015')}}Initiale Definition.
{{SpecName('ES7', '#sec-method-definitions', 'Method definitions')}}{{Spec2('ES7')}}Geändert, dass Generatormethoden ebenfalls nicht initialisierbar sind und einen Fehler schmeißen, wenn sie mit new eingesetzt werden.
{{SpecName('ESDraft', '#sec-method-definitions', 'Method definitions')}}{{Spec2('ESDraft')}} 
+ +

Browserkompatibilität

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Method definition shorthand{{CompatChrome("39")}}{{CompatGeckoDesktop("34")}}{{CompatNo}}{{CompatOpera("26")}}{{CompatNo}}
Generator methods are not constructable (ES2016){{CompatUnknown}}{{CompatGeckoDesktop("43")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Method definition shorthand{{CompatNo}}{{CompatNo}}{{CompatGeckoMobile("34")}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
Generator methods are not constructable (ES2016){{CompatUnknown}}{{CompatUnknown}}{{CompatGeckoMobile("43")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +

SpiderMonkey spezifische Hinweise

+ + + +

See also

+ + diff --git a/files/de/web/javascript/reference/functions/methoden_definitionen/index.html b/files/de/web/javascript/reference/functions/methoden_definitionen/index.html deleted file mode 100644 index bf4d432627..0000000000 --- a/files/de/web/javascript/reference/functions/methoden_definitionen/index.html +++ /dev/null @@ -1,230 +0,0 @@ ---- -title: Methoden Definitionen -slug: Web/JavaScript/Reference/Functions/Methoden_Definitionen -tags: - - ECMAScript 2015 - - Funktionen - - JavaScript - - Objekte - - Syntax -translation_of: Web/JavaScript/Reference/Functions/Method_definitions ---- -
{{JsSidebar("Functions")}}
- -

Beginnend mit ECMAScript 2015 wurde eine kürzere Syntax für Methodendefinitionen in Objekt Initialisierungen eingeführt. Es ist eine Abkürzung für die Zuweisung einer Funktion an einen Methodennamen.

- -

Syntax

- -
var obj = {
-  property( parameters… ) {},
-  *generator( parameters… ) {},
-// also with computed keys:
-  [property]( parameters… ) {},
-  *[generator]( parameters… ) {},
-// compare ES5 getter/setter syntax:
-  get property() {},
-  set property(value) {}
-};
-
- -

Beschreibung

- -

Die Syntax der Kurzschreibweise ähnelt der in ECMAScript 2015 eingeführten Syntax der getter und setter.

- -

Gegeben sei der folgende Quellcode:

- -
var obj = {
-  foo: function() {},
-  bar: function() {}
-};
- -

Jetzt können Sie das abkürzen zu:

- -
var obj = {
-  foo() {},
-  bar() {}
-};
- -
-

Hinweis: Die kurze Syntax benutzt benamte Funktionen statt anonymen Funktionen (wie in ...foo: function() {}...). Benamte Funktionen können sich vom Funktionskörper aus aufrufen (für anonyme Funktionen ist das unmöglich, weil sie keinen Bezeichner haben). Für mehr Details, siehe {{jsxref("Operators/function","function","#Beispiele")}}.

-
- -

Kurze Generatormethoden

- -

Generatormethoden können mit der kurzen Syntax ebenfalls definiert werden. Zu beachten ist, dass der Stern (*) in der kurzen Syntax nur vor dem Namen der Generatoreigenschaft geschrieben werden kann. * g(){} funktioniert, g *(){} funktioniert nicht.

- -
// Using a named property (pre-ES2015)
-var obj2 = {
-  g: function*() {
-    var index = 0;
-    while(true)
-      yield index++;
-  }
-};
-
-// The same object using shorthand syntax
-var obj2 = {
-  * g() {
-    var index = 0;
-    while(true)
-      yield index++;
-  }
-};
-
-var it = obj2.g();
-console.log(it.next().value); // 0
-console.log(it.next().value); // 1
- -

Methodendefinitionen die nicht konstruiert werden können

- -

Alle Methodendefinitionen die keine Konstruktoren sind werden einen {{jsxref("TypeError")}} erzeugen,  wenn man versucht sie zu instantieren.

- -
var obj = {
-  method() {},
-};
-new obj.method; // TypeError: obj.method is not a constructor
-
-var obj = {
-  * g() {}
-};
-new obj.g; // TypeError: obj.g is not a constructor (changed in ES2016)
-
- -

Beispiele

- -

Ein einfacher Testfall

- -
var obj = {
-  a : "foo",
-  b(){ return this.a; }
-};
-console.log(obj.b()); // "foo"
-
- -

Berechnete Eigenschaftsnamen

- -

Die Kurzschreib-Syntax unterstützt auch berechnete Eigenschaftsnamen.

- -
var bar = {
-  foo0 : function (){return 0;},
-  foo1(){return 1;},
-  ["foo" + 2](){return 2;},
-};
-
-console.log(bar.foo0()); // 0
-console.log(bar.foo1()); // 1
-console.log(bar.foo2()); // 2
- -

Spezifikationen

- - - - - - - - - - - - - - - - - - - - - - - - -
SpezifikationStatusKommentar
{{SpecName('ES2015', '#sec-method-definitions', 'Method definitions')}}{{Spec2('ES2015')}}Initiale Definition.
{{SpecName('ES7', '#sec-method-definitions', 'Method definitions')}}{{Spec2('ES7')}}Geändert, dass Generatormethoden ebenfalls nicht initialisierbar sind und einen Fehler schmeißen, wenn sie mit new eingesetzt werden.
{{SpecName('ESDraft', '#sec-method-definitions', 'Method definitions')}}{{Spec2('ESDraft')}} 
- -

Browserkompatibilität

- -
{{CompatibilityTable}}
- -
- - - - - - - - - - - - - - - - - - - - - - - - - - - -
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Method definition shorthand{{CompatChrome("39")}}{{CompatGeckoDesktop("34")}}{{CompatNo}}{{CompatOpera("26")}}{{CompatNo}}
Generator methods are not constructable (ES2016){{CompatUnknown}}{{CompatGeckoDesktop("43")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
-
- -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
FeatureAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Method definition shorthand{{CompatNo}}{{CompatNo}}{{CompatGeckoMobile("34")}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
Generator methods are not constructable (ES2016){{CompatUnknown}}{{CompatUnknown}}{{CompatGeckoMobile("43")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
-
- -

SpiderMonkey spezifische Hinweise

- - - -

See also

- - diff --git a/files/de/web/javascript/reference/functions/pfeilfunktionen/index.html b/files/de/web/javascript/reference/functions/pfeilfunktionen/index.html deleted file mode 100644 index a29b5ea3cf..0000000000 --- a/files/de/web/javascript/reference/functions/pfeilfunktionen/index.html +++ /dev/null @@ -1,360 +0,0 @@ ---- -title: Pfeilfunktionen -slug: Web/JavaScript/Reference/Functions/Pfeilfunktionen -tags: - - ECMAScript 2015 - - Functions - - Intermediate - - JavaScript - - Reference -translation_of: Web/JavaScript/Reference/Functions/Arrow_functions ---- -
{{jsSidebar("Functions")}}
- -

Der Ausdruck einer Pfeilfunktion hat eine kürzere Syntax als ein Funktionsausdruck und hat kein eigenes this, arguments, super, oder new.target. Solche Funktionsausdrücke sind am besten für Funktionen, die nicht als Methode genutzt werden, geeignet und können nicht als Konstruktoren verwendet werden.

- -
{{EmbedInteractiveExample("pages/js/functions-arrow.html")}}
- -

Syntax

- -

Basis Syntax

- -
(param1, param2, …, paramN) => { statements }
-(param1, param2, …, paramN) => expression
-// gleich zu: => { return expression; }
-
-// Klammern sind optional, wenn nur ein Parametername vorhanden ist:
-(singleParam) => { statements }
-singleParam => { statements }
-
-// Die Parameterliste für eine parameterlose Funktion muss mit einem Klammernpaar geschrieben werden
-() => { statements }
-
- -

Fortgeschrittene Syntax

- -
// Der Body kann eingeklammert werden, um ein Objektliteral Ausdruck zurück zu geben:
-params => ({foo: bar})
-
-// Rest Parameter und Default Parameter werden unterstützt
-(param1, param2, ...rest) => { statements }
-(param1 = defaultValue1, param2, …, paramN = defaultValueN) => {
-statements }
-
-// Destrukturierung in der Parameterliste ist ebenfalls unterstützt
-var f = ([a, b] = [1, 2], {x: c} = {x: a + b}) => a + b + c;
-f(); // 6
-
- -

Beschreibung

- -

Siehe auch "ES6 In Depth: Arrow functions" on hacks.mozilla.org.

- -

Zwei Faktoren haben die Einführung von Pfeilfunktionen beeinflusst: kürzere Funktionen und dass this nicht gebunden ist.

- -

Kürzere Funktionen

- -
var elements = [
-  "Hydrogen",
-  "Helium",
-  "Lithium",
-  "Beryllium"
-];
-
-elements.map(function(element) {
-  return element.length
-}); // [8, 6, 7, 9]
-
-elements.map(element => {
-  return element.length
-}); // [8, 6, 7, 9]
-
-elements.map(({length}) => length); // [8, 6, 7, 9]
- -

Keine Bindung von this

- -

Vor (der Einführung von) Pfeilfunktionen definierte jede Funktion ihren eigenen this-Wert (d.h. ein neues Objekt im Falle eines Konstruktors; in strict mode Funktionsaufrufen nicht definiert; bzw. das kontextuelle Objekt, wenn die Funktion als eine "Objekt-Methode" aufgerufen wurde, usw.). Dies stellte sich innerhalb eines objektorientierten Programmierstils als lästig heraus.

- -
function Person() {
-  // Der Person() Konstruktor definiert `this` als Instanz von sich selbst.
-  this.age = 0;
-
-  setInterval(function growUp() {
-    // Im nicht Strict Modus, definiert die growUp() Funktion `this`
-    // als das globale Objekt (weil das der Ort ist, an dem growUp() ausgeführt wird),
-    // das sich von dem `this`, welches vom Person() Konstruktor definiert wurde unterscheidet.
-    this.age++;
-  }, 1000);
-}
-
-var p = new Person();
- -

In ECMAScript 3/5 konnte dies durch Zuweisung des Wertes von this an eine Variable, welche umschlossen werden konnte, behoben werden.

- -
function Person() {
-  var that = this;
-  that.age = 0;
-
-  setInterval(function growUp() {
-    // Der Rückruf bezieht sich auf jene `that`-Variable,
-    // deren Wert das zu erwartende Objekt ist.
-    that.age++;
-  }, 1000);
-}
- -

Alternativ könnte eine gebundene Funktion erstellt werden, sodass der passende this-Wert an die growUp()-Funktion übergeben würde.

- -

Eine Pfeilfunktion erstellt keinen eigenen this Kontext, wodurch this die ursprüngliche Bedeutung des umschließenden Kontextes trägt. Somit funktioniert der folgende Code wie erwartet.

- -
function Person(){
-  this.age = 0;
-
-  setInterval(() => {
-    this.age++; // |this| bezieht sich entsprechend auf das Person-Objekt
-  }, 1000);
-}
-
-var p = new Person();
- -

Zusammenhang mit dem Strict Mode

- -

Vorausgesetzt, dass this aus dem umschließenden lexikalischen Kontext kommt, werden Strict Mode Regeln bezüglich this einfach ignoriert.

- -
var f = () => {'use strict'; return this};
-f() === window; // oder das globale Objekt
- -

Die restlichen strict mode Regeln verhalten sich normal.

- -

Aufruf durch call oder apply

- -

Da this in Pfeilfunktionen nicht gebunden ist, können call() oder apply() Methoden nur Argumente übergeben; this wird ignoriert:

- -
var adder = {
-  base : 1,
-
-  add : function(a) {
-    var f = v => v + this.base;
-    return f(a);
-  },
-
-  addThruCall: function(a) {
-    var f = v => v + this.base;
-    var b = {
-      base : 2
-    };
-
-    return f.call(b, a);
-  }
-};
-
-console.log(adder.add(1));         // Dies würde 2 ausgeben
-console.log(adder.addThruCall(1)); // Dies würde nach wie vor 2 ausgeben
- -

Keine Bindung von Argumenten

- -

Pfeilfunktionen haben kein eigenes arguments Objekt. Somit ist arguments einfach eine Referenz auf den Namen innerhalb des umschließenden Geltungsbereichs (scope).

- -
var arguments = [1, 2, 3];
-var arr = () => arguments[0];
-
-arr(); // 1
-
-function foo(n) {
-  var f = () => arguments[0] + n; // implizite Argumenten-Bindung von foo
-  return f();
-}
-
-foo(1); // 2
- -

In den meisten Fällen sind Rest Parameters eine gute Alternative zum Einsatz des arguments Objektes:

- -
function foo(n) {
-  var f = (...args) => args[0] + n;
-  return f(10);
-}
-
-foo(1); // 11
- -

Pfeilfunktionen als Methoden

- -

Wie angegeben, sind Ausdrücke von Pfeilfunktionen am besten geeignet für nicht-methodische Funktionen. Man sehe, was geschieht, wenn versucht wird, sie als Methoden zu verwenden.

- -
'use strict';
-
-var obj = {
-  i: 10,
-  b: () => console.log(this.i, this),
-  c: function() {
-    console.log( this.i, this)
-  }
-}
-obj.b(); // gibt undefined, Window {...} aus (oder das globale Objekt)
-obj.c(); // gibt 10, Object {...} aus
- -

Pfeilfunktionen definieren (binden sozusagen) kein eigenes this. Ein anderes Beispiel, das {{jsxref("Object.defineProperty()")}} betrifft:

- -
'use strict';
-
-var obj = {
-  a: 10
-};
-
-Object.defineProperty(obj, "b", {
-  get: () => {
-    console.log(this.a, typeof this.a, this);
-    return this.a+10; // stellt das globale Objekt 'Window' dar, 'this.a' gibt daher 'undefined' zurück
-  }
-});
-
- -

Verwendung des new Operators

- -

Pfeilfunktionen können nicht als Konstruktoren verwendet werden. Sie führen zu einem Fehler, wenn auf ihnen ein new angewendet wird.

- -
var Foo = () => {};
-var foo = new Foo(); // TypeError: Foo is not a constructor
-
- -

Einsatz der prototype Eigenschaft

- -

Pfeilfunktionen haben keine prototype Eigenschaft.

- -
var Foo = () => {};
-console.log(Foo.prototype); // undefined
-
- -

Verwendung des Schlüsselwortes yield

- -

Das yield-Schlüsselwort sollte im Körper einer Pfeilfunktion nicht verwendet werden (außer wenn dies innerhalb von darin weiter verschachtelten Funktionen erlaubt ist). Als Folge können Pfeilfunktionen nicht als Generatoren verwendet werden.

- -

Funktionskörper

- -

Pfeilfunktionen können entweder einen "knappen" oder einen gewöhnlichen "Blockkörper" haben.

- -

In einem knappen Körper ist lediglich ein Ausdruck nötig und eine implizite Rückgabe wird angehängt. In einem Blockkörper muss eine explizite Rückgabe-Anweisung verwendet werden.

- -
var func = x => x * x;
-// knappe Syntax, implizierte Rückgabe
-
-var func = (x, y) => { return x + y; };
-// mit Blockkörper, explizite Rückgabe wird benötigt
-
- -

Rückgabe von Objekt-Literalen

- -

Man bedenke, dass die Rückgabe von Objekt-Literalen unter Verwendung der knappen Syntax params => {object:literal} nicht so ausgeführt wird, wie man es erwarten würde:

- -
var func = () => {  foo: 1  };
-// Der Aufruf von func() gibt undefined zurück!
-
-var func = () => {  foo: function() {}  };
-// SyntaxError: function-Anweisung erfordert einen Namen
- -

Der Grund dafür ist, dass der Code in geschweiften Klammern ({}) als eine Sequenz von Anweisungen übersetzt wird (d.h. foo wird als Bezeichner behandelt und nicht als Schlüssel eines Objekt-Literals).

- -

Man bedenke, das Objekt-Literal in Klammern zu setzen:

- -
var func = () => ({ foo: 1 });
- -

Zeilenumbruch

- -

Pfeilfunktionen können keinen Zeilenumbruch zwischen Parametern und dem Pfeil haben.

- -
var func = ()
-           => 1;
-// SyntaxError: Ausdruck erwartet, '=>' erhalten
- -

Übersetzungsreihenfolge

- -

Der Pfeil innerhalb einer Pfeilfunktion ist kein Operator. Allerdings haben Pfeilfunktionen im Vergleich zu gewöhnlichen Funktionen besondere Übersetzungsregeln, welche mit der Priorität von Operatoren (operator precedence) anders interagieren.

- -
let callback;
-
-callback = callback || function() {}; // ok
-
-callback = callback || () => {};
-// SyntaxError: invalid arrow-function arguments
-
-callback = callback || (() => {});    // ok
-
- -

Weitere Beispiele

- -
// Eine leere Pfeilfunktion gibt undefined zurück
-let empty = () => {};
-
-(() => "foobar")()
-// Gibt "foobar" zurück
-// (Das ist eine Immediately Invoked Function Expression
-// siehe IIFE im Glossar
-
-var simple = a => a > 15 ? 15 : a;
-simple(16); // 15
-simple(10); // 10
-
-let max = (a, b) => a > b ? a : b;
-
-// Einfaches filtering, mapping, ... von Arrays
-
-var arr = [5, 6, 13, 0, 1, 18, 23];
-
-var sum = arr.reduce((a, b) => a + b);
-// 66
-
-var even = arr.filter(v => v % 2 == 0);
-// [6, 0, 18]
-
-var double = arr.map(v => v * 2);
-// [10, 12, 26, 0, 2, 36, 46]
-
-// Weitere knappe Zusicherungsketten (promise chains)
-promise.then(a => {
-  // ...
-}).then(b => {
-   // ...
-});
-
-// Parameterlose Pfeilfunktionen, welche visuell einfacher zu verstehen sind
-setTimeout( _ => {
-  console.log("I happen sooner");
-  setTimeout( _ => {
-    // deeper code
-    console.log("I happen later");
-  }, 1);
-}, 1);
- -

Spezifikationen

- - - - - - - - - - - - - - - - - - - -
SpezifikationStatusKommentar
{{SpecName('ES2015', '#sec-arrow-function-definitions', 'Arrow Function Definitions')}}{{Spec2('ES2015')}}Initiale Definition.
{{SpecName('ESDraft', '#sec-arrow-function-definitions', 'Arrow Function Definitions')}}{{Spec2('ESDraft')}} 
- -

Browserkompatibilität

- -
- - -

{{Compat("javascript.functions.arrow_functions")}}

-
- -

Siehe auch

- - diff --git a/files/de/web/javascript/reference/functions/rest_parameter/index.html b/files/de/web/javascript/reference/functions/rest_parameter/index.html deleted file mode 100644 index a529c7b1d6..0000000000 --- a/files/de/web/javascript/reference/functions/rest_parameter/index.html +++ /dev/null @@ -1,167 +0,0 @@ ---- -title: Rest Parameter -slug: Web/JavaScript/Reference/Functions/rest_parameter -tags: - - Functions - - JavaScript - - Rest - - Rest Parameter -translation_of: Web/JavaScript/Reference/Functions/rest_parameters ---- -
{{jsSidebar("Functions")}}
- -

Mit der Rest Parameter Syntax kann man beliebig viele Parameter als Array empfangen.

- -
{{EmbedInteractiveExample("pages/js/functions-restparameters.html")}}
- - - -

Syntax

- -
function f(a, b, ...restArgs) {
-  // ...
-}
-
- -

Beschreibung

- -

Wenn vor dem letzten Parameter einer Funktion ... steht wird aus diesem Parameter ein Array von 0 (inklusiv) bis zu restArgs.length (exklusiv), welches weitere der Funktion übergebene Parameter enthält.

- -

Im oberen Beispiel enthält das restArgs alle weiteren Argumente außer die ersten beiden, da diese bereits von den Variablen a und b erfasst werden.

- -

Unterschiede zwischen Rest Parametern und dem arguments Objekt

- -

Es gibt drei Hauptunterschiede zwischen Rest Parametern und dem arguments Objekt:

- - - -

Von arguments zu einem Array

- -

Rest Parameter wurden eingeführt, um Standardcode zu reduzieren, welche beim Einsatz von arguments anfällt

- -
// Before rest parameters, the following could be found:
-function f(a, b) {
-  var args = Array.prototype.slice.call(arguments, f.length);
-
-  // …
-}
-
-// to be equivalent of
-
-function f(a, b, ...args) {
-
-}
-
- -

Destrukturierte Rest Parameter

- -

Rest Parameter können destrukturiert werden, was bedeutet, dass sie in einzelne Variablen entpackt werden können. Siehe destrukturierende Zuweisung.

- -
function f(...[a, b, c]) {
-  return a + b + c;
-}
-
-f(1)          // NaN (b and c are undefined)
-f(1, 2, 3)    // 6
-f(1, 2, 3, 4) // 6 (the fourth parameter is not destructured)
- -

Beispiele

- -

Weil theArgs ein Array ist, ist die Anzahl der Argumente mit der length Eigenschaft gegeben:

- -
function fun1(...theArgs) {
-  console.log(theArgs.length);
-}
-
-fun1();  // 0
-fun1(5); // 1
-fun1(5, 6, 7); // 3
-
- -

Im nächsten Beispiel wird ein Rest Parameter eingesetzt, um alle Argumente außer dem ersten in einem Array zu sammeln. Jedes wird dann mit dem ersten Argument multipliziert und als Array zurückgegeben:

- -
function multiply(multiplier, ...theArgs) {
-  return theArgs.map(function(element) {
-    return multiplier * element;
-  });
-}
-
-var arr = multiply(2, 1, 2, 3);
-console.log(arr); // [2, 4, 6]
-
- -

Das folgende Beispiel zeigt, dass Array Methoden auf Rest Parameter jedoch nicht auf arguments Objekten eingesetzt werden können:

- -
function sortRestArgs(...theArgs) {
-  var sortedArgs = theArgs.sort();
-  return sortedArgs;
-}
-
-console.log(sortRestArgs(5, 3, 7, 1)); // shows 1, 3, 5, 7
-
-function sortArguments() {
-  var sortedArgs = arguments.sort();
-  return sortedArgs; // this will never happen
-}
-
-// throws a TypeError: arguments.sort is not a function
-console.log(sortArguments(5, 3, 7, 1));
-
- -

Um Array Methoden auf einem arguments Objekt zu benutzen, muss dieses in ein echtes Array konvertiert werden.

- -
function sortArguments() {
-  var args = Array.from(arguments);
-  var sortedArgs = args.sort();
-  return sortedArgs;
-}
-console.log(sortArguments(5, 3, 7, 1)); // 1, 3, 5, 7
-
- -

Spezifikationen

- - - - - - - - - - - - - - - - - - - -
SpezifikationStatusKommentar
{{SpecName('ES6', '#sec-function-definitions', 'Function Definitions')}}{{Spec2('ES6')}}Initiale Definition
{{SpecName('ESDraft', '#sec-function-definitions', 'Function Definitions')}}{{Spec2('ESDraft')}} 
- -

Browserkompatibilität

- -
-
- - -

{{Compat("javascript.functions.rest_parameters")}}

-
-
- -

Siehe auch

- - diff --git a/files/de/web/javascript/reference/functions/rest_parameters/index.html b/files/de/web/javascript/reference/functions/rest_parameters/index.html new file mode 100644 index 0000000000..a529c7b1d6 --- /dev/null +++ b/files/de/web/javascript/reference/functions/rest_parameters/index.html @@ -0,0 +1,167 @@ +--- +title: Rest Parameter +slug: Web/JavaScript/Reference/Functions/rest_parameter +tags: + - Functions + - JavaScript + - Rest + - Rest Parameter +translation_of: Web/JavaScript/Reference/Functions/rest_parameters +--- +
{{jsSidebar("Functions")}}
+ +

Mit der Rest Parameter Syntax kann man beliebig viele Parameter als Array empfangen.

+ +
{{EmbedInteractiveExample("pages/js/functions-restparameters.html")}}
+ + + +

Syntax

+ +
function f(a, b, ...restArgs) {
+  // ...
+}
+
+ +

Beschreibung

+ +

Wenn vor dem letzten Parameter einer Funktion ... steht wird aus diesem Parameter ein Array von 0 (inklusiv) bis zu restArgs.length (exklusiv), welches weitere der Funktion übergebene Parameter enthält.

+ +

Im oberen Beispiel enthält das restArgs alle weiteren Argumente außer die ersten beiden, da diese bereits von den Variablen a und b erfasst werden.

+ +

Unterschiede zwischen Rest Parametern und dem arguments Objekt

+ +

Es gibt drei Hauptunterschiede zwischen Rest Parametern und dem arguments Objekt:

+ + + +

Von arguments zu einem Array

+ +

Rest Parameter wurden eingeführt, um Standardcode zu reduzieren, welche beim Einsatz von arguments anfällt

+ +
// Before rest parameters, the following could be found:
+function f(a, b) {
+  var args = Array.prototype.slice.call(arguments, f.length);
+
+  // …
+}
+
+// to be equivalent of
+
+function f(a, b, ...args) {
+
+}
+
+ +

Destrukturierte Rest Parameter

+ +

Rest Parameter können destrukturiert werden, was bedeutet, dass sie in einzelne Variablen entpackt werden können. Siehe destrukturierende Zuweisung.

+ +
function f(...[a, b, c]) {
+  return a + b + c;
+}
+
+f(1)          // NaN (b and c are undefined)
+f(1, 2, 3)    // 6
+f(1, 2, 3, 4) // 6 (the fourth parameter is not destructured)
+ +

Beispiele

+ +

Weil theArgs ein Array ist, ist die Anzahl der Argumente mit der length Eigenschaft gegeben:

+ +
function fun1(...theArgs) {
+  console.log(theArgs.length);
+}
+
+fun1();  // 0
+fun1(5); // 1
+fun1(5, 6, 7); // 3
+
+ +

Im nächsten Beispiel wird ein Rest Parameter eingesetzt, um alle Argumente außer dem ersten in einem Array zu sammeln. Jedes wird dann mit dem ersten Argument multipliziert und als Array zurückgegeben:

+ +
function multiply(multiplier, ...theArgs) {
+  return theArgs.map(function(element) {
+    return multiplier * element;
+  });
+}
+
+var arr = multiply(2, 1, 2, 3);
+console.log(arr); // [2, 4, 6]
+
+ +

Das folgende Beispiel zeigt, dass Array Methoden auf Rest Parameter jedoch nicht auf arguments Objekten eingesetzt werden können:

+ +
function sortRestArgs(...theArgs) {
+  var sortedArgs = theArgs.sort();
+  return sortedArgs;
+}
+
+console.log(sortRestArgs(5, 3, 7, 1)); // shows 1, 3, 5, 7
+
+function sortArguments() {
+  var sortedArgs = arguments.sort();
+  return sortedArgs; // this will never happen
+}
+
+// throws a TypeError: arguments.sort is not a function
+console.log(sortArguments(5, 3, 7, 1));
+
+ +

Um Array Methoden auf einem arguments Objekt zu benutzen, muss dieses in ein echtes Array konvertiert werden.

+ +
function sortArguments() {
+  var args = Array.from(arguments);
+  var sortedArgs = args.sort();
+  return sortedArgs;
+}
+console.log(sortArguments(5, 3, 7, 1)); // 1, 3, 5, 7
+
+ +

Spezifikationen

+ + + + + + + + + + + + + + + + + + + +
SpezifikationStatusKommentar
{{SpecName('ES6', '#sec-function-definitions', 'Function Definitions')}}{{Spec2('ES6')}}Initiale Definition
{{SpecName('ESDraft', '#sec-function-definitions', 'Function Definitions')}}{{Spec2('ESDraft')}} 
+ +

Browserkompatibilität

+ +
+
+ + +

{{Compat("javascript.functions.rest_parameters")}}

+
+
+ +

Siehe auch

+ + diff --git a/files/de/web/javascript/reference/global_objects/array/prototypen/index.html b/files/de/web/javascript/reference/global_objects/array/prototypen/index.html deleted file mode 100644 index dcab74024e..0000000000 --- a/files/de/web/javascript/reference/global_objects/array/prototypen/index.html +++ /dev/null @@ -1,183 +0,0 @@ ---- -title: Array.Prototypen -slug: Web/JavaScript/Reference/Global_Objects/Array/Prototypen -tags: - - Array - - JavaScript - - Property -translation_of: Web/JavaScript/Reference/Global_Objects/Array/prototype ---- -
{{JSRef}}
- -

Die Array.prototype (Anordnung.Muster) Eigenschaft repräsentiert eine Schablone (Prototypen) des {{jsxref("Array")}} Konstrukteurs und erlaubt dir neue Eigenschaften und Methoden zu allen Array Objekten hinzuzufügen.

- -
// Wenn JavaScript eine first() Methode vom Grundsatz nicht unterstützt
-// füge eine neue Methode als Rückgabewert des ersten Elements als Array zurück
-
-if (!Array.prototype.first) {
-  Array.prototype.first = function() {
-    return this[0];
-  }
-}
- -

Beschreibung

- -

{{jsxref("Array")}} Instanzen erben vom Array.prototype. Wie mit allen Konstrukteuren kannst du das Konstrukteur Protoypen Objekt ändern, um alle {{jsxref("Array")}} Instanzen zu verändern. Ein Beispiel: du kannst neue Methoden und Eigenschaften zu allen Array-Objekten hinzufügen und diese damit erweitern. Dies wird zum Beispiel für {{Glossary("Polyfill", "polyfilling")}} genutzt.

- -

Ganz nebenbei: ein Array-Protoyp selbst ist ein {{jsxref("Array")}}:

- -
Array.isArray(Array.prototype); // true
-
- -

{{js_property_attributes(0, 0, 0)}}

- -

Eigenschaften

- -
-
Array.prototype.constructor
-
Beschreibt die Funktion um ein Objekt-Prototypen zu erstellen.
-
{{jsxref("Array.prototype.length")}}
-
Gibt die Nummer an Elementen in einem Array wieder.
-
{{jsxref("Array.@@unscopables", "Array.prototype[@@unscopables]")}}
-
Eine Symbol-beinhaltende Eigenschaft beschreibt das ausschließen von einem mit with eingebundenden Geltungsbereich.
-
- -

Methoden

- -

Mutationsmethoden

- -

Diese Methoden verändern ein Array:

- -
-
{{jsxref("Array.prototype.copyWithin()")}}
-
Kopiert einen Teil eines Array Elements innerhalb eines Array.
-
{{jsxref("Array.prototype.fill()")}}
-
Füllt alle Elemente eines Arrays von einem Start-Index zu einem Ende-Index mit einem festen Wert.
-
{{jsxref("Array.prototype.pop()")}}
-
Entfernt das letzte Element von einem Array und gibt dieses Element als Rückgabewert aus.
-
{{jsxref("Array.prototype.push()")}}
-
Fügt eins oder mehrere Elemente zu dem Ende des Arrays hinzu und gibt die neue Länge des Arrays zurück
-
{{jsxref("Array.prototype.reverse()")}}
-
Dreht die Reihenfolge der Elemente in einem Array um - das erste Element wird das letzte und das letzte Element wird das erste.
-
{{jsxref("Array.prototype.shift()")}}
-
Entfernt das erste Element innerhalb eines Array und gibt das Element als Rückgabewert aus.
-
{{jsxref("Array.prototype.sort()")}}
-
Sortiert innerhalb eines Arrays die Elemente und gibt das sortierte Array aus.
-
{{jsxref("Array.prototype.splice()")}}
-
Fügt Elemente von einem Array hinzu und/oder entfernt diese.
-
{{jsxref("Array.prototype.unshift()")}}
-
Fügt ein oder mehr Elemente an erster Stelle eines Array hinzu und gibt die Länge des neuen Arrays zurück.
-
- -

Zugriffsmethoden

- -

Diese Methoden verändern das Array nicht und geben als Rückgabewert eine Darstellung des Arrays an.

- -
-
{{jsxref("Array.prototype.concat()")}}
-
Gibt ein neues Array zusammengestellt von diesem Array und verknüpft mit anderen/ mehreren Array(s) und/ oder einem/ mehreren Wert(en).
-
{{jsxref("Array.prototype.includes()")}}
-
Überprüft, ob ein Array ein bestimmtes Element enthält und gibt als Rückgabewert true oder false an.
-
{{jsxref("Array.prototype.indexOf()")}}
-
Gibt die erste Stelle (Index) eines einzelnen, dem beschriebenen, Elements innerhalb eines Array an. Wenn das Element nicht gefunden wurde gibt er -1 zurück.
-
{{jsxref("Array.prototype.join()")}}
-
Verbindet alle Elemente eines Arrays zu einem String.
-
{{jsxref("Array.prototype.lastIndexOf()")}}
-
Gibt den letzten (höchsten) Index des beschriebenen Elements innerhalb eines Arrays aus, oder -1, wenn nichts gefunden wurde.
-
{{jsxref("Array.prototype.slice()")}}
-
Extrahiert einen Teil eines Arrays und gibt diesen als neues Array aus.
-
{{jsxref("Array.prototype.toSource()")}} {{non-standard_inline}}
-
Gibt ein Array-Literal des beschriebenen Arrays zurück; du kannst diesen Wert nutzen um ein neues Array zu erstellen. Überschreibt die {{jsxref("Object.prototype.toSource()")}} Methode.
-
{{jsxref("Array.prototype.toString()")}}
-
Gibt einen String zurück, welcher das Array und seine Elemente beinhaltet. Überschreibt die {{jsxref("Object.prototype.toString()")}} Methode.
-
{{jsxref("Array.prototype.toLocaleString()")}}
-
Gibt einen lokalen String zurück, welcher das Array und seine Elemente beschreibt. Überschreibt die {{jsxref("Object.prototype.toLocaleString()")}} Methode.
-
- -

Zählmethoden

- -

Einige Methoden nehmen als Argument eine Funktion an und führen diese während des Aufrufs des Arrays aus. Wenn diese Methoden aufgerufen werden, wird die Länge (length) des Arrays abgetastet und jedes Element außerhalb der dieser Länge innerhalb eines nicht aufgerufenen Callbacks hinzugefügt. Andere Änderungen zu einem Array (setzen eines Wertes oder das Löschen eines Elements) könnten Auswirkungen auf das Ergebnis der Operation haben, wenn die Methode das veränderte Element im Nachhinein besucht. Während das spezielle Verhalten dieser Methoden in einem solchen Fall gut definiert sind, solltest du dich dennoch nicht darauf verlassen, damit du andere, die deinen möglicherweise lesen - nicht verwirrt werden. Wenn du das Array verändern musst, solltest du das veränderte Array in ein neu erstelltes Array packen.

- -
-
{{jsxref("Array.prototype.entries()")}}
-
Gibt ein neues Array Zähl Objekt (Array Iterator Object) zurück, welches das key/value Paar für jeden Index in dem Array innehält.
-
{{jsxref("Array.prototype.every()")}}
-
Gibt true zurück, wenn alle Elemente in diesem Array die zu testende Funktion bestehen.
-
{{jsxref("Array.prototype.filter()")}}
-
Erstellt ein neues Array mit allen Elementen dieses Arrays für welches die Filter-Funktion innerhalb den Rückgabewert true benutzt.
-
{{jsxref("Array.prototype.find()")}}
-
Gibt den ersten gefundenen Wert innerhalb eines Arrays wieder, wenn ein Element innerhalb des Arrays die definierte Test-Funktion besteht oder undefined wenn nichts gefunden wurde.
-
{{jsxref("Array.prototype.findIndex()")}}
-
Gibt den gefundenen Index im Array an, wenn ein Element in dem Array die angegebene Test-Funktion besteht - oder -1, wenn nichts gefunden wurde.
-
{{jsxref("Array.prototype.forEach()")}}
-
Ruft eine Funktion für jedes Element in einem Array auf.
-
{{jsxref("Array.prototype.keys()")}}
-
-

Gibt einen neuen Array Iterator (Zeiger) aus, welcher die Schlüssel für jeden Index innerhalb des Arrays beinhaltet.

-
-
{{jsxref("Array.prototype.map()")}}
-
Erstellt ein neues Array mit den Ergebnissen der ausgeführten definierten Funktion an jedem Element in diesem Array.
-
{{jsxref("Array.prototype.reduce()")}}
-
Reduziert das Array auf einen einzigen Wert, indem es jeweils zwei Elemente durch die angegebene Funktion ausführt. Optional: als zweiten Paramater einen Startwert angeben.
-
{{jsxref("Array.prototype.reduceRight()")}}
-
Reduziert das Array auf einen einzigen Wert, indem es jeweils zwei Elemente durch die angegebene Funktion ausführt (von rechts nach links). Optional: als zweiten Paramater einen Startwert angeben.
-
{{jsxref("Array.prototype.some()")}}
-
-
Gibt true zurück, wenn mindestens ein Element in diesem Array den Test der definierten Funktion besteht.
-
-
{{jsxref("Array.prototype.values()")}}
-
Gibt einen neues Array Iterator Objekt zurück, welches die Werte für jeden Index in dem Array beinhaltet.
-
{{jsxref("Array.prototype.@@iterator()", "Array.prototype[@@iterator]()")}}
-
Gibt einen neues Array Iterator Objekt zurück, welches die Werte für jeden Index in dem Array beinhaltet.
-
- -

Generische Methoden (kein Standard)

- -

Vielen Methoden von den JavaScript Array Objekten sind für die allgemeine Anwendung an allem Objekten entwickelt wurden, welche "aussehen wie" Arrays. Der Grund ist, dass sie an allen Objekten angewandt werden könne, welche eine Längen-Eigenschaft besitzen, und welche nützlicherweise eine numerische Eigenschaft benennen (wie mit der array[5] Indizierung). Einige Methoden, solche wie {{jsxref("Array.join", "join")}}, lesen nur die Länge (length) und numerische Eigenschaften von dem Objekt an welches sie angewandt werden. Andere, wie {{jsxref("Array.reverse", "reverse")}}, erfordern eine Veränderung der numerischen Objekt- und Längen-Eigenschaften; diese Methoden können deshalb nicht von Objekten wie {{jsxref("String")}} aufgerufen werden, welche das künstliche Setzen ihrer Längen- (length)  oder numerischen Eigenschaft nicht erlauben.

- -

Spezifikationen

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SpezifikationStatusKommentar
{{SpecName('ES1')}}{{Spec2('ES1')}}Initiale Definition.
{{SpecName('ES5.1', '#sec-15.4.3.1', 'Array.prototype')}}{{Spec2('ES5.1')}} 
{{SpecName('ES6', '#sec-array.prototype', 'Array.prototype')}}{{Spec2('ES6')}}Hinzugefügt der copyWithin(), fill(), entries(), keys(), values(), find(), findIndex() Methoden.
{{SpecName('ES7', '#sec-array.prototype', 'Array.prototype')}}{{Spec2('ES7')}}Hinzugefügt der includes() Methode.
- -

Browserkompatibilität

- -
- - -

{{Compat("javascript.builtins.Array.prototype")}}

-
- -

Siehe auch

- - diff --git a/files/de/web/javascript/reference/global_objects/arraybuffer/prototype/index.html b/files/de/web/javascript/reference/global_objects/arraybuffer/prototype/index.html deleted file mode 100644 index ee766c3529..0000000000 --- a/files/de/web/javascript/reference/global_objects/arraybuffer/prototype/index.html +++ /dev/null @@ -1,69 +0,0 @@ ---- -title: ArrayBuffer.prototype -slug: Web/JavaScript/Reference/Global_Objects/ArrayBuffer/prototype -tags: - - ArrayBuffer - - JavaScript - - Property -translation_of: Web/JavaScript/Reference/Global_Objects/ArrayBuffer -translation_of_original: Web/JavaScript/Reference/Global_Objects/ArrayBuffer/prototype ---- -
{{JSRef}}
- -

Die ArrayBuffer.prototype Eigenschaft repräsentiert den Prototyp für das {{jsxref("ArrayBuffer")}} Objekt.

- -
{{js_property_attributes(0,0,0)}}
- -

Beschreibung

- -

ArrayBuffer Instanzen erben von ArrayBuffer.prototype. Wie bei allen Konstruktoren, kann der Prototype des Konstruktorobjekts geändert werden, um Änderungen für alle ArrayBuffer Instanzen zu übernehmen.

- -

Eigenschaften

- -
-
ArrayBuffer.prototype.constructor
-
Spezifiziert die Funktion, die das Prototypeobjekt erstellt. Der Initialwert ist der eingebaute Standard-ArrayBuffer-Konstruktor.
-
{{jsxref("ArrayBuffer.prototype.byteLength")}} {{readonlyInline}}
-
Die größe, in Bytes, des Arrays. Dieser wird bei der Erstellung des Arrays ermittelt und kan nicht geändert werden.
-
- -

Methoden

- -
-
{{jsxref("ArrayBuffer.prototype.slice()")}}
-
Gibt einen neuen ArrayBuffer zurück, welcher eine Kopie der Bytes des eigentlichen ArrayBuffer einthält. Die Kopie geht von begin (inklusiv) bis end (exclusiv). Wenn einer der Werte negativ ist, referenziert er auf den Index vom Ende des Arrays an und nicht vom Beginn des Arrays.
-
- -

Spezifikationen

- - - - - - - - - - - - - - - - - - - -
SpzifikationStatusKommentar
{{SpecName('ES6', '#sec-arraybuffer.prototype', 'ArrayBuffer.prototype')}}{{Spec2('ES6')}}Initiale Definition.
{{SpecName('ESDraft', '#sec-arraybuffer.prototype', 'ArrayBuffer.prototype')}}{{Spec2('ESDraft')}} 
- -

Browserkompatibilität

- - - -

{{Compat("javascript.builtins.ArrayBuffer.prototype")}}

- -

Siehe auch

- - diff --git a/files/de/web/javascript/reference/global_objects/asyncfunction/prototype/index.html b/files/de/web/javascript/reference/global_objects/asyncfunction/prototype/index.html deleted file mode 100644 index 2dc516ca5c..0000000000 --- a/files/de/web/javascript/reference/global_objects/asyncfunction/prototype/index.html +++ /dev/null @@ -1,61 +0,0 @@ ---- -title: AsyncFunction.prototype -slug: Web/JavaScript/Reference/Global_Objects/AsyncFunction/prototype -tags: - - Experimental - - JavaScript - - Property - - Prototype - - Reference -translation_of: Web/JavaScript/Reference/Global_Objects/AsyncFunction/prototype ---- -
{{JSRef}}
- -

Die AsyncFunction.prototype Eigenschaft repräsentiert den Prototypen des {{jsxref("AsyncFunction")}} Objektes.

- -

Beschreibung

- -

{{jsxref("AsyncFunction")}} Objekte erben von AsyncFunction.prototype. AsyncFunction.prototype kann nicht verändert werden.

- -

Eigenschaften

- -
-
AsyncFunction.constructor
-
Der Initialwert ist {{jsxref("AsyncFunction")}}.
-
AsyncFunction.prototype[@@toStringTag]
-
Gibt "AsyncFunction" zurück.
-
- -

Spezifikationen

- - - - - - - - - - - - - - - - -
SpezifikationStatusKommentar
{{SpecName('ESDraft', '#sec-async-function-constructor-prototype', 'AsyncFunction.prototype')}}{{Spec2('ESDraft')}}Initiale Definition in ES2017.
- -

Browserkompatibilität

- -
- - -

{{Compat("javascript.builtins.AsyncFunction.prototype")}}

-
- -

Siehe auch

- - diff --git a/files/de/web/javascript/reference/global_objects/atomics/notify/index.html b/files/de/web/javascript/reference/global_objects/atomics/notify/index.html new file mode 100644 index 0000000000..5ac06d7adc --- /dev/null +++ b/files/de/web/javascript/reference/global_objects/atomics/notify/index.html @@ -0,0 +1,93 @@ +--- +title: Atomics.notify() +slug: Web/JavaScript/Reference/Global_Objects/Atomics/wake +tags: + - Atomics + - JavaScript + - Method + - Shared Memory +translation_of: Web/JavaScript/Reference/Global_Objects/Atomics/notify +--- +
{{JSRef}}
+ +

Die statische Atomics.notify() Methode benachrichtigt Threads, die in einer Warteschlange schlafen.

+ +
+

Hinweis: Diese Operation funktioniert nur mit einem {{jsxref("Int32Array")}}.

+
+ +

Syntax

+ +
Atomics.notify(typedArray, index, count)
+
+ +

Parameter

+ +
+
typedArray
+
Ein geteiltes {{jsxref("Int32Array")}}.
+
index
+
Die Position im typedArray, an der aufgewacht wird.
+
count
+
Anzahl der aufzuweckenden Threads. Standard ist {{jsxref("Infinity", "+Infinity")}}.
+
+ +

Rückgabewert

+ +

Anzahl an geweckten Threads.

+ +

Exceptions

+ + + +

Beipsiele

+ +

Gegeben ist ein Int32Array:

+ +
var sab = new SharedArrayBuffer(1024);
+var int32 = new Int32Array(sab);
+
+ +

Ein lesender Thread schläft und wartet auf Position 0, ander der Wert 0 erwartet wird. Solange diese gegeben ist, geht es nicht weiter. Immer wenn ein neuer schreibender Thread einen neuen Wert speichert, wacht der Thread. Im Anschluss ist der neue Wert an der Position 0 (123).

+ +
Atomics.wait(int32, 0, 0);
+console.log(int32[0]); // 123
+ +

Ein schreibender Thread speichert einen neuen Wert und wacht den wartenden Tread nach dem Schreiben auf.

+ +
console.log(int32[0]); // 0;
+Atomics.store(int32, 0, 123);
+Atomics.notify(int32, 0, 1);
+ +

Spezifikationen

+ + + + + + + + + + + + + + +
SpezifikationStatusKommentar
{{SpecName('ESDraft', '#sec-atomics.notify', 'Atomics.notify')}}{{Spec2('ESDraft')}}Initiale Definition in ES2017.
+ +

Browserkompatibilität

+ + + +

{{Compat("javascript.builtins.Atomics.notify")}}

+ +

Siehe auch

+ + diff --git a/files/de/web/javascript/reference/global_objects/atomics/wake/index.html b/files/de/web/javascript/reference/global_objects/atomics/wake/index.html deleted file mode 100644 index 5ac06d7adc..0000000000 --- a/files/de/web/javascript/reference/global_objects/atomics/wake/index.html +++ /dev/null @@ -1,93 +0,0 @@ ---- -title: Atomics.notify() -slug: Web/JavaScript/Reference/Global_Objects/Atomics/wake -tags: - - Atomics - - JavaScript - - Method - - Shared Memory -translation_of: Web/JavaScript/Reference/Global_Objects/Atomics/notify ---- -
{{JSRef}}
- -

Die statische Atomics.notify() Methode benachrichtigt Threads, die in einer Warteschlange schlafen.

- -
-

Hinweis: Diese Operation funktioniert nur mit einem {{jsxref("Int32Array")}}.

-
- -

Syntax

- -
Atomics.notify(typedArray, index, count)
-
- -

Parameter

- -
-
typedArray
-
Ein geteiltes {{jsxref("Int32Array")}}.
-
index
-
Die Position im typedArray, an der aufgewacht wird.
-
count
-
Anzahl der aufzuweckenden Threads. Standard ist {{jsxref("Infinity", "+Infinity")}}.
-
- -

Rückgabewert

- -

Anzahl an geweckten Threads.

- -

Exceptions

- - - -

Beipsiele

- -

Gegeben ist ein Int32Array:

- -
var sab = new SharedArrayBuffer(1024);
-var int32 = new Int32Array(sab);
-
- -

Ein lesender Thread schläft und wartet auf Position 0, ander der Wert 0 erwartet wird. Solange diese gegeben ist, geht es nicht weiter. Immer wenn ein neuer schreibender Thread einen neuen Wert speichert, wacht der Thread. Im Anschluss ist der neue Wert an der Position 0 (123).

- -
Atomics.wait(int32, 0, 0);
-console.log(int32[0]); // 123
- -

Ein schreibender Thread speichert einen neuen Wert und wacht den wartenden Tread nach dem Schreiben auf.

- -
console.log(int32[0]); // 0;
-Atomics.store(int32, 0, 123);
-Atomics.notify(int32, 0, 1);
- -

Spezifikationen

- - - - - - - - - - - - - - -
SpezifikationStatusKommentar
{{SpecName('ESDraft', '#sec-atomics.notify', 'Atomics.notify')}}{{Spec2('ESDraft')}}Initiale Definition in ES2017.
- -

Browserkompatibilität

- - - -

{{Compat("javascript.builtins.Atomics.notify")}}

- -

Siehe auch

- - diff --git a/files/de/web/javascript/reference/global_objects/boolean/prototype/index.html b/files/de/web/javascript/reference/global_objects/boolean/prototype/index.html deleted file mode 100644 index 62a430fac2..0000000000 --- a/files/de/web/javascript/reference/global_objects/boolean/prototype/index.html +++ /dev/null @@ -1,84 +0,0 @@ ---- -title: Boolean.prototype -slug: Web/JavaScript/Reference/Global_Objects/Boolean/prototype -tags: - - Boolean - - JavaScript - - Property - - Prototype -translation_of: Web/JavaScript/Reference/Global_Objects/Boolean -translation_of_original: Web/JavaScript/Reference/Global_Objects/Boolean/prototype ---- -
{{JSRef}}
- -
Die Boolean.prototype Eigenschaft repräsentiert den Prototypen des  {{jsxref("Boolean")}} Konstruktors.
- -
 
- -
{{js_property_attributes(0, 0, 0)}}
- -
{{EmbedInteractiveExample("pages/js/boolean-constructor.html")}}
- - - -

Beschreibung

- -

{{jsxref("Boolean")}} Instanzen ergen von from Boolean.prototype. Man kann das prototype Objekt benutzen, um Eigenschaften und Methoden zu allen {{jsxref("Boolean")}} Instanzen hinzuzufügen.

- -

Eigenschaften

- -
-
Boolean.prototype.constructor
-
Gibt die Funktion, die einen Instanz des Prototypen erstellt zurück. Im Standardfall ist das die Funktion {{jsxref("Boolean")}}.
-
- -

Methoden

- -
-
{{jsxref("Boolean.prototype.toSource()")}} {{non-standard_inline}}
-
Gibt den Quelltext des {{jsxref("Boolean")}} Objektes als String zurück. Man kann diesen String benutzen um ein gleiches Objekt zu erstellen. Diese Methode überschreibt die {{jsxref("Object.prototype.toSource()")}} Methode.
-
{{jsxref("Boolean.prototype.toString()")}}
-
Gibt einen String "true" oder "false" zurück, abhängig vom Wert des Objektes. Diese Methode überschreibt die {{jsxref("Object.prototype.toString()")}} Methode.
-
{{jsxref("Boolean.prototype.valueOf()")}}
-
Gibt einen primitiven Wert des {{jsxref("Boolean")}} Objektes zurück. Diese Methode überschreibt die {{jsxref("Object.prototype.valueOf()")}} Methode.
-
- -

Spezifikationen

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SpezifikationStatusKommentar
{{SpecName('ES1')}}{{Spec2('ES1')}}Initiale Definition. Implementiert in JavaScript 1.0.
{{SpecName('ES5.1', '#sec-15.6.3.1', 'Boolean.prototype')}}{{Spec2('ES5.1')}} 
{{SpecName('ES6', '#sec-boolean.prototype', 'Boolean.prototype')}}{{Spec2('ES6')}} 
{{SpecName('ESDraft', '#sec-boolean.prototype', 'Boolean.prototype')}}{{Spec2('ESDraft')}} 
- -

Browserkompatibilität

- -
- - -

{{Compat("javascript.builtins.Boolean.prototype")}}

-
diff --git a/files/de/web/javascript/reference/global_objects/dataview/prototype/index.html b/files/de/web/javascript/reference/global_objects/dataview/prototype/index.html deleted file mode 100644 index e03aff8a8d..0000000000 --- a/files/de/web/javascript/reference/global_objects/dataview/prototype/index.html +++ /dev/null @@ -1,110 +0,0 @@ ---- -title: DataView.prototype -slug: Web/JavaScript/Reference/Global_Objects/DataView/prototype -tags: - - DataView - - JavaScript - - Prototype -translation_of: Web/JavaScript/Reference/Global_Objects/DataView -translation_of_original: Web/JavaScript/Reference/Global_Objects/DataView/prototype ---- -
{{JSRef}}
- -

Die DataView.prototype Eigenschaft repräsentiert den Prototypen für das {{jsxref("DataView")}} Objekt.

- -
{{js_property_attributes(0,0,0)}}
- -

Beschreibung

- -

DataView Instanzen erben von DataView.prototype. Wie bei allen Konstruktoren, können Änderungen am Prototypen Änderungen in allen DataView Instanzen zur folge haben.

- -

Eigenschaften

- -
-
DataView.prototype.constructor
-
Spezifiziert die Funktion, die ein Objekt des Prototypen erstellt. Der initialwert ist der Standard eingebaute DataView Konstruktor
-
{{jsxref("DataView.prototype.buffer")}} {{readonlyInline}}
-
Der {{jsxref("ArrayBuffer")}}, der von dieser Ansicht repräsentiert wird. Wird bei der Erstellung erzeugt und deswegen kann nur lesend darauf zugegriffen werden.
-
{{jsxref("DataView.prototype.byteLength")}} {{readonlyInline}}
-
Die Länge (in Bytes) von dieser Ansicht, von Beginn des {{jsxref("ArrayBuffer")}}. Wird bei der Erstellung erzeugt und deswegen kann nur lesend darauf zugegriffen werden.
-
{{jsxref("DataView.prototype.byteOffset")}} {{readonlyInline}}
-
Das Offset (in Bytes) von dieser Ansicht, von Beginn des {{jsxref("ArrayBuffer")}}. Wird bei der Erstellung erzeugt und deswegen kann nur lesend darauf zugegriffen werden.
-
- -

Methoden

- -

Lesend

- -
-
{{jsxref("DataView.prototype.getInt8()")}}
-
Gibt eine 8-Bit ganze Zahl mit Vorzeichen (byte) eines spezifizierten Byte-Offsets vom Start der Ansicht zurück.
-
{{jsxref("DataView.prototype.getUint8()")}}
-
Gibt eine 8-Bit vorzeichenlose ganze Zahl (unsigned byte) eines spezifizierten Byte-Offsets vom Start der Ansicht zurück.
-
{{jsxref("DataView.prototype.getInt16()")}}
-
Gibt eine 16-Bit ganze Zahl mit Vorzeichen (short) eines spezifizierten Byte-Offsets vom Start der Ansicht zurück.
-
{{jsxref("DataView.prototype.getUint16()")}}
-
Gibt eine 16-Bit vorzeichenlose ganze Zahl (unsigned short) eines spezifizierten Byte-Offsets vom Start der Ansicht zurück.
-
{{jsxref("DataView.prototype.getInt32()")}}
-
Gibt eine 32-Bit ganze Zahl mit Vorzeichen (long) eines spezifizierten Byte-Offsets vom Start der Ansicht zurück.
-
{{jsxref("DataView.prototype.getUint32()")}}
-
Gibt eine 32-Bit vorzeichenlose ganze Zahl (unsigned long) eines spezifizierten Byte-Offsets vom Start der Ansicht zurück.
-
{{jsxref("DataView.prototype.getFloat32()")}}
-
Gibt eine 32-Bit Gleitkommazahl mit Vorzeichen (float) eines spezifizierten Byte-Offsets vom Start der Ansicht zurück
-
{{jsxref("DataView.prototype.getFloat64()")}}
-
Gibt eine 64-Bit Gleitkommazahl mit Vorzeichen (double) eines spezifizierten Byte-Offsets vom Start der Ansicht zurück
-
- -

Schreibend

- -
-
{{jsxref("DataView.prototype.setInt8()")}}
-
Speichert eine ganze 8-Bit Zahl mit Vorzeichen (byte) an einem spezifizierten Offset vom Start der Ansicht.
-
{{jsxref("DataView.prototype.setUint8()")}}
-
Speichert eine ganze vorzeichenlose 8-Bit Zahl (unsigned byte) an einem spezifizierten Offset vom Start der Ansicht.
-
{{jsxref("DataView.prototype.setInt16()")}}
-
Speichert eine ganze 16-Bit Zahl mit Vorzeichen (short) an einem spezifizierten Offset vom Start der Ansicht.
-
{{jsxref("DataView.prototype.setUint16()")}}
-
Speichert eine ganze vorzeichenlose 16-Bit Zahl (unsigned short) an einem spezifizierten Offset vom Start der Ansicht.
-
{{jsxref("DataView.prototype.setInt32()")}}
-
Speichert eine ganze 32-Bit Zahl mit Vorzeichen (long) an einem spezifizierten Offset vom Start der Ansicht.
-
{{jsxref("DataView.prototype.setUint32()")}}
-
Speichert eine ganze vorzeichenlose 32-Bit Zahl (unsigned long) an einem spezifizierten Offset vom Start der Ansicht.
-
{{jsxref("DataView.prototype.setFloat32()")}}
-
Speichert eine 32-Bit Gleitkommazahl mit Vorzeichen (float) an einem spezifizierten Offset vom Start der Ansicht.
-
{{jsxref("DataView.prototype.setFloat64()")}}
-
Speichert eine 64-Bit Gleitkommazahl mit Vorzeichen (double) an einem spezifizierten Offset vom Start der Ansicht.
-
- -

Spezifikationen

- - - - - - - - - - - - - - - - - - - -
SpezifikationStatusKommentar
{{SpecName('ES6', '#sec-dataview.prototype', 'DataView.prototype')}}{{Spec2('ES6')}}Initiale Definition.
{{SpecName('ESDraft', '#sec-dataview.prototype', 'DataView.prototype')}}{{Spec2('ESDraft')}} 
- -

Browserkompatibilität

- - - -

{{Compat("javascript.builtins.DataView.prototype")}}

- -

Siehe auch

- - diff --git a/files/de/web/javascript/reference/global_objects/date/prototype/index.html b/files/de/web/javascript/reference/global_objects/date/prototype/index.html deleted file mode 100644 index ab69ff1528..0000000000 --- a/files/de/web/javascript/reference/global_objects/date/prototype/index.html +++ /dev/null @@ -1,183 +0,0 @@ ---- -title: Date.prototype -slug: Web/JavaScript/Reference/Global_Objects/Date/prototype -tags: - - Date - - JavaScript - - Property - - Prototype - - Reference -translation_of: Web/JavaScript/Reference/Global_Objects/Date -translation_of_original: Web/JavaScript/Reference/Global_Objects/Date/prototype ---- -
{{JSRef}}
- -

Die Date.prototype-Eigenschaft ist der Prototype für den {{jsxref("Date")}}-Konstruktor

- -
{{js_property_attributes(0, 0, 1)}}
- -

Beschreibung

- -

JavaScript-{{jsxref("Date")}}-Instanzen erben von Date.prototype. Man kann das Konstruktorprototype-Objekt ändern, um Eigenschaften und Methoden aller {{jsxref("Date")}}-Instanzen zu ändern.

- -

Für die Kompatibilität mit Jahrtausendsrechnungen (in anderen Worten, um das Jahr 2000 mit einzukalkulieren), sollte man das Jahr immer in voller Länge spezifizieren; zum Beispiel sollte 1998 und nicht 98 benutzt werden. Zur Unterstützung der Spezifizierung des vollen Jahres hat JavaScript die Methoden {{jsxref("Date.prototype.getFullYear()", "getFullYear()")}}, {{jsxref("Date.prototype.setFullYear()", "setFullYear()")}}, {{jsxref("Date.prototype.getUTCFullYear()", "getUTCFullYear()")}} und {{jsxref("Date.prototype.setUTCFullYear()", "setUTCFullYear()")}}.

- -

Mit Einführung von ECMAScript 6 ist das Date.prototype-Objekt ein normales Objekt. Es ist keine Instanz von {{jsxref("Date")}}.

- -

Eigenschaften

- -
-
Date.prototype.constructor
-
Eine Funktion, die Instanzen erzeugen kann. Der {{jsxref("Date")}}-Konstruktor ist der Standard.
-
- -

Methoden

- -

Getter

- -
-
{{jsxref("Date.prototype.getDate()")}}
-
Gibt den Tag des Monats (1 - 31) eines Datums gemäß der Ortszeit zurück.
-
{{jsxref("Date.prototype.getDay()")}}
-
Gibt den Tag der Woche (0 - 6) eines Datums gemäß der Ortszeit zurück.
-
{{jsxref("Date.prototype.getFullYear()")}}
-
Gibt das Jahr (4 Ziffern für 4 ziffrige Jahre) eines Datums gemäß der Ortszeit zurück.
-
{{jsxref("Date.prototype.getHours()")}}
-
Gibt die Stunde (0 - 23) eines Datums gemäß der Ortszeit zurück.
-
{{jsxref("Date.prototype.getMilliseconds()")}}
-
Gibt die Millisekunden (0 - 999) eines Datums gemäß der Ortszeit zurück.
-
{{jsxref("Date.prototype.getMinutes()")}}
-
Gibt die Minuten (0 - 59) eines Datums gemäß der Ortszeit zurück.
-
{{jsxref("Date.prototype.getMonth()")}}
-
Gibt den Monat (0 - 11) eines Datums gemäß der Ortszeit zurück.
-
{{jsxref("Date.prototype.getSeconds()")}}
-
Gibt die Sekunden (0 - 59) eines Datums gemäß der Ortszeit zurück.
-
{{jsxref("Date.prototype.getTime()")}}
-
Gibt den nummerischen Wert eines Datums als Millisekunden seit 1. Januar 1970 00:00:00 UTC (negativ für frühere Daten) zurück.
-
{{jsxref("Date.prototype.getTimezoneOffset()")}}
-
Gibt den Zeitzonenunterschied in Minuten für die aktuelle Region zurück.
-
{{jsxref("Date.prototype.getUTCDate()")}}
-
Gibt den Tag des Monats (1 - 31) eines Datums gemäß der Weltzeit zurück.
-
{{jsxref("Date.prototype.getUTCDay()")}}
-
Gibt den Tag der Woche (0 - 6) eines Datums gemäß der Weltzeit zurück.
-
{{jsxref("Date.prototype.getUTCFullYear()")}}
-
Gibt das Jahr (4 Ziffern für 4 ziffrige Jahre) eines Datums gemäß der Weltzeit zurück.
-
{{jsxref("Date.prototype.getUTCHours()")}}
-
Gibt die Stunden (0 - 23) eines Datums gemäß der Weltzeit zurück.
-
{{jsxref("Date.prototype.getUTCMilliseconds()")}}
-
Gibt die Millisekunden (0 - 999) eines Datums gemäß der Weltzeit zurück.
-
{{jsxref("Date.prototype.getUTCMinutes()")}}
-
Gibt die Minuten (0 - 59) eines Datums gemäß der Weltzeit zurück.
-
{{jsxref("Date.prototype.getUTCMonth()")}}
-
Gibt den Monat (0 - 11) eines Datums gemäß der Weltzeit zurück.
-
{{jsxref("Date.prototype.getUTCSeconds()")}}
-
Gibt die Sekunden (0 - 59) eines Datums gemäß der Weltzeit zurück.
-
{{jsxref("Date.prototype.getYear()")}} {{deprecated_inline}}
-
Gibt das Jahr (nur 2 - 3 Ziffern) eines Datums gemäß der Ortszeit zurück. Stattdessen sollte {{jsxref("Date.prototype.getFullYear()", "getFullYear()")}} benutzt werden.
-
- -

Setter

- -
-
{{jsxref("Date.prototype.setDate()")}}
-
Setzt den Tag des Monats eines Datums gemäß der Ortszeit.
-
{{jsxref("Date.prototype.setFullYear()")}}
-
Setzt das Jahr (4 Ziffern für vierstellige Jahre) eines Datums gemäß der Ortszeit.
-
{{jsxref("Date.prototype.setHours()")}}
-
Setzt die Stunden eines Datums gemäß der Ortszeit.
-
{{jsxref("Date.prototype.setMilliseconds()")}}
-
Setzt die Millisekunden eines Datums gemäß der Ortszeit.
-
{{jsxref("Date.prototype.setMinutes()")}}
-
Setzt die Minuten eines Datums gemäß der Ortszeit.
-
{{jsxref("Date.prototype.setMonth()")}}
-
Setzt den Monat eines Datums gemäß der Ortszeit.
-
{{jsxref("Date.prototype.setSeconds()")}}
-
Setzt die Sekunden eines Datums gemäß der Ortszeit.
-
{{jsxref("Date.prototype.setTime()")}}
-
Setzt ein {{jsxref("Date")}} Objekt auf die Zeit, mit der Anzahl der Millisekunden seit dem 1. Januar 1970 00:00:00UTC. Negative Zahlen sind für frühere Daten erlaubt.
-
{{jsxref("Date.prototype.setUTCDate()")}}
-
Setzt den Tag des Monats eines Datums gemäß der Weltzeit.
-
{{jsxref("Date.prototype.setUTCFullYear()")}}
-
Setzt das Jahr (4 Ziffern für 4 ziffrige Jahre) eines Datums gemäß der Weltzeit.
-
{{jsxref("Date.prototype.setUTCHours()")}}
-
Setzt die Stunde eines Datums gemäß der Weltzeit.
-
{{jsxref("Date.prototype.setUTCMilliseconds()")}}
-
Setzt die Millisekunden eines Datums gemäß der Weltzeit.
-
{{jsxref("Date.prototype.setUTCMinutes()")}}
-
Setzt die Minuten eines Datums gemäß der Weltzeit.
-
{{jsxref("Date.prototype.setUTCMonth()")}}
-
Setzt den Monat eines Datums gemäß der Weltzeit.
-
{{jsxref("Date.prototype.setUTCSeconds()")}}
-
Setzt die Sekunden eines Datums gemäß der Weltzeit.
-
{{jsxref("Date.prototype.setYear()")}} {{deprecated_inline}}
-
Setzt das Jahr (nur 2 - 3 Ziffern) eines Datums gemäß der Ortszeit. Stattdessen sollte {{jsxref("Date.prototype.setFullYear()", "setFullYear()")}} benutzt werden.
-
- -

Konvertierungsgetter

- -
-
{{jsxref("Date.prototype.toDateString()")}}
-
Gibt das Datum als menschlich lesbaren String zurück (z. B. Thu Apr 12 2018). 
-
{{jsxref("Date.prototype.toISOString()")}}
-
Konvertiert ein Datum zu einem String im erweiterten ISO-8601-Format.
-
{{jsxref("Date.prototype.toJSON()")}}
-
Gibt eine String-Repräsentation eines {{jsxref("Date")}}-Objektes zurück. Dabei wird die {{jsxref("Date.prototype.toISOString()", "toISOString()")}}-Methode eingesetzt. Gedacht für den Einsatz von {{jsxref("JSON.stringify()")}}.
-
{{jsxref("Date.prototype.toGMTString()")}} {{deprecated_inline}}
-
Gibt eine String-Repräsentation eines {{jsxref("Date")}}-Objektes auf Basis der GMT-(UT)-Zeitzone zurück. Stattdessen sollte {{jsxref("Date.prototype.toUTCString()", "toUTCString()")}} eingesetzt werden.
-
{{jsxref("Date.prototype.toLocaleDateString()")}}
-
Gibt einen String mit ortssensitiver Repräsentation eines Datums zurück. Dieses Datum basiert auf den Systemeinstellungen.
-
{{jsxref("Date.prototype.toLocaleFormat()")}} {{non-standard_inline}}
-
Konvertiert ein Datum zu einem String mithilfe eines Formatierungsstrings.
-
{{jsxref("Date.prototype.toLocaleString()")}}
-
Gibt einen String mit ortssensitiver Repräsentation eines Datums zurück. Diese Method überschreibt die  {{jsxref("Object.prototype.toLocaleString()")}}-Methode.
-
{{jsxref("Date.prototype.toLocaleTimeString()")}}
-
Gibt einen String mit ortssensitiver Repräsentation der Zeit eines Datums zurück. Diese Zeit basiert auf den Systemeinstellungen.
-
{{jsxref("Date.prototype.toSource()")}} {{non-standard_inline}}
-
Gibt einen String-Repräsentation des Quelltextes zurück (gleich dem {{jsxref("Date")}}-Objekt). Man kann diese Methode einsetzen um ein neues Objekt zu erstellen. Diese Methode überschreibt die {{jsxref("Object.prototype.toSource()")}}-Methode
-
{{jsxref("Date.prototype.toString()")}}
-
Gibt eine String-Repräsentation eines {{jsxref("Date")}}-Objektes zurück. Diese Methode überschreibt die {{jsxref("Object.prototype.toString()")}} Methode.
-
{{jsxref("Date.prototype.toTimeString()")}}
-
Gibt die Zeit eines Datums als menschlich lesbaren String zurück.
-
{{jsxref("Date.prototype.toUTCString()")}}
-
Konvertiert das Datum zu einem String unter Einsatz der UTC-Zeitzone.
-
{{jsxref("Date.prototype.valueOf()")}}
-
Gibt ein primitiven Wert eines {{jsxref("Date")}}-Objektes zurück. Diese Methode überschreibt die {{jsxref("Object.prototype.valueOf()")}}-Methode.
-
- -

Spezifikationen

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SpecificationStatusKommentar
{{SpecName('ES1')}}{{Spec2('ES1')}}Initiale Definition. Implementiert in JavaScript 1.1.
{{SpecName('ES5.1', '#sec-15.9.5', 'Date.prototype')}}{{Spec2('ES5.1')}} 
{{SpecName('ES6', '#sec-properties-of-the-date-prototype-object', 'Date.prototype')}}{{Spec2('ES6')}} 
{{SpecName('ESDraft', '#sec-properties-of-the-date-prototype-object', 'Date.prototype')}}{{Spec2('ESDraft')}} 
- -

Browserkompatibilität

- - - -

{{Compat("javascript.builtins.Date.prototype")}}

diff --git a/files/de/web/javascript/reference/global_objects/error/prototype/index.html b/files/de/web/javascript/reference/global_objects/error/prototype/index.html deleted file mode 100644 index 2a48748822..0000000000 --- a/files/de/web/javascript/reference/global_objects/error/prototype/index.html +++ /dev/null @@ -1,114 +0,0 @@ ---- -title: Error.prototype -slug: Web/JavaScript/Reference/Global_Objects/Error/prototype -tags: - - Error - - JavaScript - - Property -translation_of: Web/JavaScript/Reference/Global_Objects/Error -translation_of_original: Web/JavaScript/Reference/Global_Objects/Error/prototype ---- -
{{JSRef}}
- -

Die Error.prototype Eigenschaft repräsentiert den Prototypen für den {{jsxref("Error")}} Konstruktor.

- -
{{js_property_attributes(0, 0, 0)}}
- -

Beschreibung

- -

Alle {{jsxref("Error")}} Instanzen und Instanzen von {{jsxref("Global_Objects/Error", "nicht generischen Errors", "#Error_types", 1)}} erben von Error.prototype. Wie bei jeder Konstruktorfunktion, kann man den Prototypen des Konstruktors einsetzen, um Eigenschaften oder Methoden bei allen erstellten Instanzen hinzuzufügen.

- -

Eigenschaften

- -

Standard-Eigenschaften

- -
-
Error.prototype.constructor
-
Spezifiziert die Funktion, die einen Prototypen einer Instanz erstellt.
-
{{jsxref("Error.prototype.message")}}
-
Errornachricht.
-
{{jsxref("Error.prototype.name")}}
-
Errorname.
-
- -

Vendor-spezifische Erweiterungen

- -
{{non-standard_header}}
- -

Microsoft

- -
-
{{jsxref("Error.prototype.description")}} {{non-standard_inline}}
-
Errorbeschreibung. Ist das gleiche wie {{jsxref("Error.prototype.message")}}
-
{{jsxref("Error.prototype.number")}} {{non-standard_inline}}
-
Errornummer.
-
- -

Mozilla

- -
-
{{jsxref("Error.prototype.fileName")}} {{non-standard_inline}}
-
Pfad zu der Datei, die der der Error ausgelöst wurde.
-
{{jsxref("Error.prototype.lineNumber")}} {{non-standard_inline}}
-
Zeilennummer in der Datei, in der der Error ausgelöst wurde.
-
{{jsxref("Error.prototype.columnNumber")}} {{non-standard_inline}}
-
Spaltennummer in der Zeile, in der der Error ausgelöst wurde.
-
{{jsxref("Error.prototype.stack")}} {{non-standard_inline}}
-
Stacktrace.
-
- -

Methoden

- -
-
{{jsxref("Error.prototype.toSource()")}} {{non-standard_inline}}
-
Gibt einen String zurück, der den Quelltext eines spezifischen {{jsxref("Error")}} Objektes beinhaltet. Man kann diesen einsetzen, um ein neues Objekt zu erstellen. Überschreibt die {{jsxref("Object.prototype.toSource()")}} Methode.
-
{{jsxref("Error.prototype.toString()")}}
-
Gibt einen String zurück, der das Objekt repräsentiert. Überschreibt die {{jsxref("Object.prototype.toString()")}} Methode.
-
- -

Spezifikationen

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SpezifikationStatusKommentar
{{SpecName('ES1')}}{{Spec2('ES1')}}Initiale Definition. Implementiert in JavaScript 1.1.
{{SpecName('ES5.1', '#sec-15.11.3.1', 'Error')}}{{Spec2('ES5.1')}} 
{{SpecName('ES6', '#sec-error.prototype', 'Error')}}{{Spec2('ES6')}} 
{{SpecName('ESDraft', '#sec-error.prototype', 'Error')}}{{Spec2('ESDraft')}} 
- -

Browserkompatibilität

- -
- - -

{{Compat("javascript.builtins.Error.prototype")}}

-
- -

Siehe auch

- - diff --git a/files/de/web/javascript/reference/global_objects/evalerror/prototype/index.html b/files/de/web/javascript/reference/global_objects/evalerror/prototype/index.html deleted file mode 100644 index 7de0a353bc..0000000000 --- a/files/de/web/javascript/reference/global_objects/evalerror/prototype/index.html +++ /dev/null @@ -1,90 +0,0 @@ ---- -title: EvalError.prototype -slug: Web/JavaScript/Reference/Global_Objects/EvalError/prototype -tags: - - Error - - EvalError - - JavaScript - - Property -translation_of: Web/JavaScript/Reference/Global_Objects/EvalError -translation_of_original: Web/JavaScript/Reference/Global_Objects/EvalError/prototype ---- -
{{JSRef}}
- -

Die EvalError.prototype Eigenschaft repräsentiert den Prototypen des {{jsxref("EvalError")}} Konstruktors.

- -
{{js_property_attributes(0, 0, 0)}}
- -

Beschreibung

- -

Alle {{jsxref("EvalError")}} Instanzen erben von EvalError.prototype. Man kann den Prototypen benutzen, um Eigenschaften oder Methoden für alle Instanzen hinzuzufügen.

- -

Eigenschaften

- -
-
EvalError.prototype.constructor
-
Spezifiziert die Funktion, die einen Instanzprototypen erstellt.
-
{{jsxref("Error.prototype.message", "EvalError.prototype.message")}}
-
Fehlernachricht. Obwohl ECMA-262 spezifiziert, dass {{jsxref("EvalError")}} seine eigene message Eigenschaft haben soll, wird diese in SpiderMonkey von {{jsxref("Error.prototype.message")}} geerbt.
-
{{jsxref("Error.prototype.name", "EvalError.prototype.name")}}
-
Fehlername. Geerbt von {{jsxref("Error")}}.
-
{{jsxref("Error.prototype.fileName", "EvalError.prototype.fileName")}}
-
Pfad zur Datei, die der der Fehler ausgelöst hat. Geerbt von {{jsxref("Error")}}.
-
{{jsxref("Error.prototype.lineNumber", "EvalError.prototype.lineNumber")}}
-
Zeilennummer in der Datei, in der der Fehler ausgelöst wurde. Geerbt von {{jsxref("Error")}}.
-
{{jsxref("Error.prototype.columnNumber", "EvalError.prototype.columnNumber")}}
-
Dpaltennummer in der Zeile, in der der Fehler ausgelöst wurde. Geerbt von {{jsxref("Error")}}.
-
{{jsxref("Error.prototype.stack", "EvalError.prototype.stack")}}
-
Stacktrace. Geerbt von {{jsxref("Error")}}.
-
- -

Methoden

- -

Obwohl des {{jsxref("EvalError")}} Prototypobjekt keine eigene Methode enthält, erben {{jsxref("EvalError")}} Instanzen einige Methoden durch die Prototypenkette.

- -

Spezifikationen

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SpezifikationStatusKommentar
{{SpecName('ES3')}}{{Spec2('ES3')}}Initiale Definition.
{{SpecName('ES5.1', '#sec-15.11.7.6', 'NativeError.prototype')}}{{Spec2('ES5.1')}}Definiert als NativeError.prototype.
{{SpecName('ES6', '#sec-nativeerror.prototype', 'NativeError.prototype')}}{{Spec2('ES6')}}Definiert als NativeError.prototype.
{{SpecName('ESDraft', '#sec-nativeerror.prototype', 'NativeError.prototype')}}{{Spec2('ESDraft')}}Definiert als NativeError.prototype.
- -

Browserkompatibilität

- -
- - -

{{Compat("javascript.builtins.EvalError")}}

-
- -

Siehe auch

- - diff --git a/files/de/web/javascript/reference/global_objects/function/prototype/index.html b/files/de/web/javascript/reference/global_objects/function/prototype/index.html deleted file mode 100644 index 44598455e8..0000000000 --- a/files/de/web/javascript/reference/global_objects/function/prototype/index.html +++ /dev/null @@ -1,100 +0,0 @@ ---- -title: Function.prototype -slug: Web/JavaScript/Reference/Global_Objects/Function/prototype -tags: - - Function - - JavaScript - - Property - - Prototype -translation_of: Web/JavaScript/Reference/Global_Objects/Function -translation_of_original: Web/JavaScript/Reference/Global_Objects/Function/prototype ---- -
{{JSRef}}
- -

Die Function.prototype Eigenschaft repräsentiert das {{jsxref("Function")}} Prototyp Objekt.

- -

Beschreibung

- -

{{jsxref("Function")}} Objekte erben von Function.prototypeFunction.prototype kann nicht modifiziert werden.

- -

Eigenschaften

- -
-
{{jsxref("Function.arguments")}} {{deprecated_inline}}
-
Ein Array, welches die der Funktion übergebenen Parameter enthält. Dieses ist veraltet als Eigenschaft von {{jsxref("Function")}}. Stattdessen sollte das {{jsxref("Functions/arguments", "arguments")}} Objekt in einer Funktion benutzt werden
-
{{jsxref("Function.arity")}} {{obsolete_inline}}
-
Wurde benutzt, um die Anzahl der erwarteten Argumente einer Funktion einzustellen, ist jedoch entfernt. Stattdessen kann die {{jsxref("Function.length", "length")}} Eigenschaft genutzt werden.
-
{{jsxref("Function.caller")}} {{non-standard_inline}}
-
Spezifizert die Funktion, die die aktuelle Funktion aufgerufen hat.
-
{{jsxref("Function.length")}}
-
Spezifizert die Anzahl der Parameter, die eine Funktion erwartet.
-
{{jsxref("Function.name")}}
-
Der Name einer Funktion.
-
{{jsxref("Function.displayName")}} {{non-standard_inline}}
-
Der angezeigte Name einer Funktion.
-
Function.prototype.constructor
-
Spezifiziert die Funktion, die ein Objekt Prototyp erstellt. Mehr Informationen bei {{jsxref("Object.prototype.constructor")}}.
-
- -

Methoden

- -
-
{{jsxref("Function.prototype.apply()")}}
-
Führt eine Funktion aus und setzt das this Objekt mit einem übergebenen wert. Parameter können in einem {{jsxref("Array")}} Objekt übergeben werden.
-
{{jsxref("Function.prototype.bind()")}}
-
Erstellt eine neue Funktion, die beim Aufruf einen angegebenen Wert für this hat, wobei die Argumentfolge vor dem Aufruf der neuen Funktion fest steht.
-
{{jsxref("Function.prototype.call()")}}
-
Führt eine Funktion aus und setzt this auf einen übergebenen Wert. Parameter können übergeben werden.
-
{{jsxref("Function.prototype.isGenerator()")}} {{non-standard_inline}}
-
Gibt true zurück, wenn die Funktion ein Generator ist, anderfalls false.
-
{{jsxref("Function.prototype.toSource()")}} {{non-standard_inline}}
-
Gibt eine Stringrepräsentation des Quelltextes einer Funktion zurück. Sie überschreibt die {{jsxref("Object.prototype.toSource")}} Methode.
-
{{jsxref("Function.prototype.toString()")}}
-
Gibt eine Stringrepräsentation des Quelltextes einer Funktion zurück. Sie überschreibt die {{jsxref("Object.prototype.toString")}} Methode.
-
- -

Spezifikationen

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SpezifikationStatusKommentar
{{SpecName('ES1')}}{{Spec2('ES1')}}Initiale Definition. Implementiert in JavaScript 1.1
{{SpecName('ES5.1', '#sec-15.3.5.2', 'Function.prototype')}}{{Spec2('ES5.1')}} 
{{SpecName('ES6', '#sec-function-instances-prototype', 'Function.prototype')}}{{Spec2('ES6')}} 
{{SpecName('ESDraft', '#sec-function-instances-prototype', 'Function.prototype')}}{{Spec2('ESDraft')}} 
- -

Browserkompatibilität

- -
- - -

{{Compat("javascript.builtins.Function.prototype")}}

-
- -

Siehe auch

- - diff --git a/files/de/web/javascript/reference/global_objects/generatorfunction/prototype/index.html b/files/de/web/javascript/reference/global_objects/generatorfunction/prototype/index.html deleted file mode 100644 index e514a8c9d7..0000000000 --- a/files/de/web/javascript/reference/global_objects/generatorfunction/prototype/index.html +++ /dev/null @@ -1,67 +0,0 @@ ---- -title: GeneratorFunction.prototype -slug: Web/JavaScript/Reference/Global_Objects/GeneratorFunction/prototype -tags: - - ECMAScript 2015 - - GeneratorFunction - - Iterator - - JavaScript - - Property - - Prototype - - Reference -translation_of: Web/JavaScript/Reference/Global_Objects/GeneratorFunction -translation_of_original: Web/JavaScript/Reference/Global_Objects/GeneratorFunction/prototype ---- -
{{JSRef}}
- -

Die GeneratorFunction.prototype Eigenschaft repräsentiert den Prototypen des {{jsxref("GeneratorFunction")}} Objektes.

- -

Beschreibung

- -

{{jsxref("GeneratorFunction")}} Objekt erbt von GeneratorFunction.prototype. GeneratorFunction.prototype kann nicht verändert werden.

- -

Eigenschaften

- -
-
GeneratorFunction.constructor
-
Der initiale Wert von {{jsxref("GeneratorFunction")}}.
-
GeneratorFunction.prototype.prototype
-
Der Wert ist %GeneratorPrototype%.
-
- -

Spezifikationen

- - - - - - - - - - - - - - - - - - - -
SpezifikationStatusKommentar
{{SpecName('ES2015', '#sec-generatorfunction.prototype', 'GeneratorFunction.prototype')}}{{Spec2('ES2015')}}Initiale Definition.
{{SpecName('ESDraft', '#sec-generatorfunction.prototype', 'GeneratorFunction.prototype')}}{{Spec2('ESDraft')}} 
- -

Browserkompatibilität

- -
- - -

{{Compat("javascript.builtins.GeneratorFunction.prototype")}}

-
- -

Siehe auch

- - diff --git a/files/de/web/javascript/reference/global_objects/internalerror/prototype/index.html b/files/de/web/javascript/reference/global_objects/internalerror/prototype/index.html deleted file mode 100644 index 8ed0c2de4b..0000000000 --- a/files/de/web/javascript/reference/global_objects/internalerror/prototype/index.html +++ /dev/null @@ -1,62 +0,0 @@ ---- -title: InternalError.prototype -slug: Web/JavaScript/Reference/Global_Objects/InternalError/prototype -tags: - - Error - - InternalError - - JavaScript - - Property -translation_of: Web/JavaScript/Reference/Global_Objects/InternalError -translation_of_original: Web/JavaScript/Reference/Global_Objects/InternalError/prototype ---- -
{{JSRef}} {{non-standard_header}}
- -

Die InternalError.prototype Eigenschaft repräsentiert den Prototypen des {{jsxref("InternalError")}} Konstruktors.

- -
{{js_property_attributes(0, 0, 0)}}
- -

Beschreibung

- -

Alle {{jsxref("InternalError")}} Instanzen erben von InternalError.prototype. Man kann den Prototypen benutzt, um Eigenschaften oder Methoden für alle Instanzen hinzuzufügen.

- -

Eigenschaften

- -
-
InternalError.prototype.constructor
-
Spezifiziert die Funktion, die einen Instanzen Prototyp erstellt.
-
{{jsxref("Error.prototype.message", "InternalError.prototype.message")}}
-
Fehlermeldung. Geerbt von {{jsxref("Error")}}.
-
{{jsxref("Error.prototype.name", "InternalError.prototype.name")}}
-
Fehlername. Geerbt von {{jsxref("Error")}}.
-
{{jsxref("Error.prototype.fileName", "InternalError.prototype.fileName")}}
-
Pfad zur Datei, in der der Fehler auftritt. Geerbt von {{jsxref("Error")}}.
-
{{jsxref("Error.prototype.lineNumber", "InternalError.prototype.lineNumber")}}
-
Zeilennummer, in der Datei, in der der Fehler auftritt. Geerbt von {{jsxref("Error")}}.
-
{{jsxref("Error.prototype.columnNumber", "InternalError.prototype.columnNumber")}}
-
Spaltennummer, in der Zeile, in der der Fehler auftritt. Geerbt von {{jsxref("Error")}}.
-
{{jsxref("Error.prototype.stack", "InternalError.prototype.stack")}}
-
Stacktrace. Geerbt von {{jsxref("Error")}}.
-
- -

Methoden

- -

Obwohl das {{jsxref("InternalError")}} Prototypobjekt keine eigenen Methoden besitzt, erben {{jsxref("InternalError")}} Instanzen einige Methoden durch die Prototypenkette.

- -

Spezifikationen

- -

In keiner Spezifikation enthalten.

- -

Browserkompatibilität

- -
- - -

{{Compat("javascript.builtins.InternalError")}}

-
- -

Siehe auch

- - diff --git a/files/de/web/javascript/reference/global_objects/intl/collator/prototype/index.html b/files/de/web/javascript/reference/global_objects/intl/collator/prototype/index.html deleted file mode 100644 index 2b041c3f26..0000000000 --- a/files/de/web/javascript/reference/global_objects/intl/collator/prototype/index.html +++ /dev/null @@ -1,80 +0,0 @@ ---- -title: Intl.Collator.prototype -slug: Web/JavaScript/Reference/Global_Objects/Intl/Collator/prototype -tags: - - Collator - - Internationalization - - JavaScript - - Property - - Prototype -translation_of: Web/JavaScript/Reference/Global_Objects/Intl/Collator -translation_of_original: Web/JavaScript/Reference/Global_Objects/Intl/Collator/prototype ---- -
{{JSRef}}
- -

Die Intl.Collator.prototype Eigenschaft repräsentiert das Prototypobjekt für den {{jsxref("Collator", "Intl.Collator")}} Konstruktor.

- -
{{js_property_attributes(0, 0, 0)}}
- -

Beschreibung

- -

Siehe im Beitrag {{jsxref("Collator")}} für eine Beschreibung von Intl.Collator Instanzen.

- -

{{jsxref("Collator", "Intl.Collator")}} Instanzen erben von Intl.Collator.prototype. Änderungen am Prototypobjekt werden an alle {{jsxref("Collator", "Intl.Collator")}} Instanzen vererbt.

- -

Eigenschaften

- -
-
{{jsxref("Collator.compare", "Intl.Collator.prototype.compare")}}
-
Getter; gibt eine Funktion zurück, die zwei Strings abhängig vom der Sortierreihenfolge des {{jsxref("Global_Objects/Collator", "Intl.Collator")}} Objektes vergleicht.
-
Intl.Collator.prototype.constructor
-
Eine Referenz zu {{jsxref("Global_Objects/Collator", "Intl.Collator")}}.
-
- -

Methoden

- -
-
{{jsxref("Collator.resolvedOptions", "Intl.Collator.prototype.resolvedOptions()")}}
-
Gibt ein neues Objekt mit Eigenschaften zu Gebiets- und Collation-Optionen, die bei der Initialisierung des Objekte ermittelt wurden.
-
- -

Spezifikationen

- - - - - - - - - - - - - - - - - - - - - - - - -
SpezifikationStatusKommentar
{{SpecName('ES Int 1.0', '#sec-10.2.1', 'Intl.Collator.prototype')}}{{Spec2('ES Int 1.0')}}Initiale Definition.
{{SpecName('ES Int 2.0', '#sec-10.2.1', 'Intl.Collator.prototype')}}{{Spec2('ES Int 2.0')}} 
{{SpecName('ES Int Draft', '#sec-Intl.Collator.prototype', 'Intl.Collator.prototype')}}{{Spec2('ES Int Draft')}} 
- -

Browserkompatibilität

- -
- - -

{{Compat("javascript.builtins.Intl.Collator.prototype")}}

-
- -

Siehe auch

- - diff --git a/files/de/web/javascript/reference/global_objects/intl/datetimeformat/prototype/index.html b/files/de/web/javascript/reference/global_objects/intl/datetimeformat/prototype/index.html deleted file mode 100644 index ab0a86d286..0000000000 --- a/files/de/web/javascript/reference/global_objects/intl/datetimeformat/prototype/index.html +++ /dev/null @@ -1,84 +0,0 @@ ---- -title: Intl.DateTimeFormat.prototype -slug: Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/prototype -tags: - - DateTimeFormat - - Internationalization - - JavaScript - - Property - - Prototype -translation_of: Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat -translation_of_original: Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/prototype ---- -
{{JSRef}}
- -
Die Intl.DateTimeFormat.prototype Eigenschaft ist ein Prototyp Objekt für den {{jsxref("DateTimeFormat", "Intl.DateTimeFormat")}} Konstruktor.
- -
 
- -
{{js_property_attributes(0, 0, 0)}}
- -

Beschreibung

- -

Für eine Beschreibung von Intl.DateTimeFormat Instanzen siehe im Artikel {{jsxref("DateTimeFormat")}} nach.

- -

{{jsxref("DateTimeFormat", "Intl.DateTimeFormat")}} Instanzen erben von Intl.DateTimeFormat.prototype. Änderungen in der Eigenschaft prototype wirken sich auf alle Instanzen von {{jsxref("DateTimeFormat", "Intl.DateTimeFormat")}} aus.

- -

Eigenschaften

- -
-
Intl.DateTimeFormat.prototype.constructor
-
Eine Referenz zu {{jsxref("DateTimeFormat", "Intl.DateTimeFormat")}}.
-
{{jsxref("DateTimeFormat.format", "Intl.DateTimeFormat.prototype.format")}}
-
Getter, der eine Funktion, die für das Formatieren von Datums- und Zeitangaben nach den Optionen des {{jsxref("DateTimeFormat", "DateTimeFormat")}} ermöglicht, wird zurückgegeben.
-
- -

Methoden

- -
-
{{jsxref("DateTimeFormat.formatToParts", "Intl.DateTimeFormat.prototype.formatToParts()")}}
-
Gibt ein {{jsxref("Array")}} von Objekten zurück, die den formatierten String in Teilen repräsentiert. Das kann eingesetzt werden, um ein benutzerdefiniertes Format zu erstellen.
-
{{jsxref("DateTimeFormat.resolvedOptions", "Intl.DateTimeFormat.prototype.resolvedOptions()")}}
-
Gibt ein neues Objekt mit den Eigenschaften der Sprache und des Formates zum Erstellungszeitpunkt des Objektes zurück.
-
- -

Spezifikationen

- - - - - - - - - - - - - - - - - - - - - - - - -
SpezifikationStatusKommentar
{{SpecName('ES Int 1.0', '#sec-12.2.1', 'Intl.DateTimeFormat.prototype')}}{{Spec2('ES Int 1.0')}}Initiale Definition.
{{SpecName('ES Int 2.0', '#sec-12.2.1', 'Intl.DateTimeFormat.prototype')}}{{Spec2('ES Int 2.0')}} 
{{SpecName('ES Int Draft', '#sec-Intl.DateTimeFormat.prototype', 'Intl.DateTimeFormat.prototype')}}{{Spec2('ES Int Draft')}} 
- -

Browserkompatibilität

- -
- - -

{{Compat("javascript.builtins.Intl.DateTimeFormat.prototype")}}

-
- -

Siehe auch

- - diff --git a/files/de/web/javascript/reference/global_objects/intl/numberformat/prototype/index.html b/files/de/web/javascript/reference/global_objects/intl/numberformat/prototype/index.html deleted file mode 100644 index 142aefbfcc..0000000000 --- a/files/de/web/javascript/reference/global_objects/intl/numberformat/prototype/index.html +++ /dev/null @@ -1,82 +0,0 @@ ---- -title: Intl.NumberFormat.prototype -slug: Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat/prototype -tags: - - Internationalization - - JavaScript - - NumberFormat - - Property - - Prototype -translation_of: Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat -translation_of_original: Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat/prototype ---- -
{{JSRef}}
- -

Die Intl.NumberFormat.prototype Eigenschaft repräsentiert das Prototypobjekt für einen {{jsxref("NumberFormat", "Intl.NumberFormat")}} Konstruktor.

- -
{{js_property_attributes(0, 0, 0)}}
- -

Beschreibung

- -

Siehe {{jsxref("NumberFormat")}} für eine Beschreibung von Intl.NumberFormat Instanzen.

- -

{{jsxref("NumberFormat", "Intl.NumberFormat")}} Instanzen erben von Intl.NumberFormat.prototype. Veränderungen am Prototypobjekt werden an alle {{jsxref("NumberFormat", "Intl.NumberFormat")}} Instanzen vererbt.

- -

Eigenschaften

- -
-
Intl.NumberFormat.prototype.constructor
-
Eine Referenz zu Intl.NumberFormat.
-
{{jsxref("NumberFormat.format", "Intl.NumberFormat.prototype.format")}}
-
Getter; gibt eine Funktion zurück, die eine Zahl nach den Sprach- und Formatierungsoptionen dieses {{jsxref("NumberFormat")}} Objektes formatiert.
-
- -

Methoden

- -
-
{{jsxref("NumberFormat.formatToParts", "Intl.NumberFormat.prototype.formatToParts()")}}
-
Gibt ein {{jsxref("Array")}} mit Objekten zurück, welche die Repräsentation des Zahlenstrings in Teilen enthalten, die für sprachsicheres Formatieren genutzt werden können.
-
{{jsxref("NumberFormat.resolvedOptions", "Intl.NumberFormat.prototype.resolvedOptions()")}}
-
Gibt ein neues Objekt mit eigenschaften zurück, die Sprach- und Formatierungsoptionen enthält, die bei der Initialisierung des Objektes errechnet wurden.
-
- -

Spezifikationen

- - - - - - - - - - - - - - - - - - - - - - - - -
SpezifikationStatusKomment
{{SpecName('ES Int 1.0', '#sec-11.2.1', 'Intl.NumberFormat.prototype')}}{{Spec2('ES Int 1.0')}}Initiale Definition.
{{SpecName('ES Int 2.0', '#sec-11.2.1', 'Intl.NumberFormat.prototype')}}{{Spec2('ES Int 2.0')}} 
{{SpecName('ES Int Draft', '#sec-Intl.NumberFormat.prototype', 'Intl.NumberFormat.prototype')}}{{Spec2('ES Int Draft')}} 
- -

Browserkompatibilität

- -
- - -

{{Compat("javascript.builtins.Intl.NumberFormat.prototype")}}

-
- -

Siehe auch

- - diff --git a/files/de/web/javascript/reference/global_objects/map/prototype/index.html b/files/de/web/javascript/reference/global_objects/map/prototype/index.html deleted file mode 100644 index 35399160b1..0000000000 --- a/files/de/web/javascript/reference/global_objects/map/prototype/index.html +++ /dev/null @@ -1,87 +0,0 @@ ---- -title: Map.prototype -slug: Web/JavaScript/Reference/Global_Objects/Map/prototype -tags: - - JavaScript - - Map - - Property -translation_of: Web/JavaScript/Reference/Global_Objects/Map -translation_of_original: Web/JavaScript/Reference/Global_Objects/Map/prototype ---- -
{{JSRef}}
- -

Die Map.prototype Eigenschaft repräsentiert den Prototyp für den {{jsxref("Map")}} Konstruktor.

- -
{{js_property_attributes(0,0,0)}}
- -

Beschreibung

- -

{{jsxref("Map")}} Instanzen erben von {{jsxref("Map.prototype")}}. Man kann das prototype Objekt des Konstruktors nutzen, um Eigenschaften oder Methoden für alle map Instanzen hinzuzufügen.

- -

Eigenschaften

- -
-
Map.prototype.constructor
-
Gibt die Funktion zurück, die einen Instanzenprototype erstellt. Der Standardwert ist die {{jsxref("Map")}} Funktion.
-
{{jsxref("Map.prototype.size")}}
-
Gibt die Anzahl an Schlüssel/Werte-Paaren in dem Map Objekt zurück.
-
- -

Methoden

- -
-
{{jsxref("Map.prototype.clear()")}}
-
Entfernt alle Schlüssel/Werte-Paare von dem Map Objekt.
-
{{jsxref("Map.delete", "Map.prototype.delete(schlüssel)")}}
-
Gibt true zurück, wenn ein Element im Map Objekt existiert und gelöscht wird, oder false wenn das Element nicht existiert. Map.prototype.has(schlüssel) wird danach false zurückgeben.
-
{{jsxref("Map.prototype.entries()")}}
-
Gibt ein neues Iterator Objekt mit allen [Schlüssel, Wert] Paaren als Array von jedem Element in dem Map Objekt in Einfügereihenfolge zurück.
-
{{jsxref("Map.forEach", "Map.prototype.forEach(callbackFn[, thisArg])")}}
-
Ruft callbackFn einmal für jedes Schlüssel/Wert Paar in dem Map Objekt in der Einfügereihenfolge aus. Wenn ein thisArg Parameter angegeben ist, wird dieser als this für jeden Funktionsaufruf benutzt.
-
{{jsxref("Map.get", "Map.prototype.get(schlüssel)")}}
-
Gibt den Wert zu dem zugehörigen schlüssel zurück oder undefined wenn dieser nicht existiert.
-
{{jsxref("Map.has", "Map.prototype.has(schlüssel)")}}
-
Gibt einen boolean zurück, der angibt, ob ein Wert mit den schlüssel in einem Map Objekt vorhanden ist oder nicht.
-
{{jsxref("Map.prototype.keys()")}}
-
Gibt ein neues Iterator Objekt mit allen Schlüsseln von jedem Element in dem Map Objekt in Einfügereihenfolge zurück.
-
{{jsxref("Map.set", "Map.prototype.set(schlüssel, wert)")}}
-
Setzt den wert für einen schlüssel im Map Objekt. Gibt das Map Objekt zurück.
-
{{jsxref("Map.prototype.values()")}}
-
Gibt ein neues Iterator Objekt mit allen Werten von jedem Element in dem Map Objekt in Einfügereihenfolge zurück.
-
{{jsxref("Map.@@iterator", "Map.prototype[@@iterator]()")}}
-
Gibt ein neues Iterator Objekt mit allen [Schlüssel, Wert] Paaren als Array von jedem Element in dem Map Objekt in Einfügereihenfolge zurück.
-
- -

Spezifikationen

- - - - - - - - - - - - - - - - - - - -
SpezifikationStatusKommentar
{{SpecName('ES2015', '#sec-map.prototype', 'Map.prototype')}}{{Spec2('ES2015')}}Initiale Definition.
{{SpecName('ESDraft', '#sec-map.prototype', 'Map.prototype')}}{{Spec2('ESDraft')}}
- -

Browserkompatibilität

- - - -

{{Compat("javascript.builtins.Map.prototype")}}

- -

Siehe auch

- - diff --git a/files/de/web/javascript/reference/global_objects/math/math.random/index.html b/files/de/web/javascript/reference/global_objects/math/math.random/index.html deleted file mode 100644 index 6097229c1a..0000000000 --- a/files/de/web/javascript/reference/global_objects/math/math.random/index.html +++ /dev/null @@ -1,112 +0,0 @@ ---- -title: Math.random() -slug: Web/JavaScript/Reference/Global_Objects/Math/math.random -tags: - - JavaScript - - Math - - Method - - Reference -translation_of: Web/JavaScript/Reference/Global_Objects/Math/random ---- -
{{JSRef}}
- -

Die Math.random() Funktion gibt eine Pseudozufallszahl in Form einer Gleitkommazahl im Bereich von 0 - 1 (0 inklusiv, aber 1 nicht) annähernd gleichverteilt zurück, die dann zur gewünschten Größe skaliert werden kann. Die Zufallszahl wird von der Implementierung bestimmt; sie kann nicht vom Benutzer ausgewählt oder zurückgesetzt werden.

- -
{{EmbedInteractiveExample("pages/js/math-random.html")}}
- -
-

Math.random() stellt keine kryprografisch sicheren Zufallszahlen bereit. Verwenden Sie sie auf keinen Fall für etwas, das  in Verbindung mit Sicherheit steht. Benutzen Sie stattdessen die Web Crypto API, genauer gesagt die {{domxref("RandomSource.getRandomValues()", "window.crypto.getRandomValues()")}}-Methode.

-
- -

Syntax

- -
Math.random()
- -

Rückgabewert

- -

Eine pseudozufällige Gleitkommazahl zwischen 0 (inklusiv) und 1 (exklusiv).

- -

Beispiele

- -

Beachten Sie, dass, weil Zahlen in JavaScript IEEE 754 Gleitkommazahlen sind, mit dem Verhalten zur nächsten geraden Zahl zu runden, die Bereiche für die folgenden Funktionen - mit Ausnahme für Math.random() selbst - nicht exakt sind.
- Wenn extrem große Grenzen
(253 oder höher) gewählt werden, ist es in äußerst seltenen Fällen möglich, dass die eigentlich ausgeschlossenen Obergrenzen mit eingerechnet werden.

- -

Erzeugt eine Zufallszahl zwischen 0 (inklusive) und 1 (exklusive)

- -
function getRandom() {
-  return Math.random();
-}
-
- -

Erzeugt eine Zufallszahl zwischen zwei Zahlen

- -

Das Beispiel gibt eine zufällige Zahl zwischen zwei Zahlen zurück. Der Rückgabewert is größer oder gleich min und kleiner als max.

- -
function getRandomArbitrary(min, max) {
-  return Math.random() * (max - min) + min;
-}
-
- -

Erzeugt eine ganze Zufallszahl zwischen zwei Zahlen

- -

Das Beispiel gibt eine zufällige ganze Zahl zwischen den spezifizierten Werten zurück. Der Wert ist nicht kleiner als min (oder der nächstgrößeren ganzen Zahl von min, wenn min keine ganze Zahl ist) und ist kleiner als  (aber nicht gleich) max.

- -
function getRandomInt(min, max) {
-  min = Math.ceil(min);
-  max = Math.floor(max);
-  return Math.floor(Math.random() * (max - min)) + min;
-}
-
- -
-

Es könnte verlockend sein, Math.round() zu verwenden, um das Ergebnis zu erreichen, aber das würde dazu führen, dass die zufälligen Zahlen einer ungleichmäßigen Verteilung folgen würden, die möglicherweise nicht den geforderten Bedürfnisse entsprechen würde.

-
- -

Erzeugt eine ganze Zufallszahl zwischen zwei Zahlen (inklusiv)

- -

Die obere getRandomInt() Funktion hat ein inklusives Minimum und ein exklusives Maximum. Was ist, wenn sowohl das Minimum als auch das Maximum inklusive sein sollen? Die getRandomIntInclusive() Funktion ermöglicht dieses:

- -
function getRandomIntInclusive(min, max) {
-  min = Math.ceil(min);
-  max = Math.floor(max);
-  return Math.floor(Math.random() * (max - min +1)) + min;
-}
-
- -

Spezifikationen

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SpezifikationStatusKommentar
{{SpecName('ES1')}}{{Spec2('ES1')}}Initiale Definition. JavaScript 1.0 (nur auf UNIX) / JavaScript 1.1 (auf allen Plattformen).
{{SpecName('ES5.1', '#sec-15.8.2.14', 'Math.random')}}{{Spec2('ES5.1')}}
{{SpecName('ES6', '#sec-math.random', 'Math.random')}}{{Spec2('ES6')}}
{{SpecName('ESDraft', '#sec-math.random', 'Math.random')}}{{Spec2('ESDraft')}}
- -

Browserkompatibilität

- - - -

{{Compat("javascript.builtins.Math.random")}}

diff --git a/files/de/web/javascript/reference/global_objects/math/random/index.html b/files/de/web/javascript/reference/global_objects/math/random/index.html new file mode 100644 index 0000000000..6097229c1a --- /dev/null +++ b/files/de/web/javascript/reference/global_objects/math/random/index.html @@ -0,0 +1,112 @@ +--- +title: Math.random() +slug: Web/JavaScript/Reference/Global_Objects/Math/math.random +tags: + - JavaScript + - Math + - Method + - Reference +translation_of: Web/JavaScript/Reference/Global_Objects/Math/random +--- +
{{JSRef}}
+ +

Die Math.random() Funktion gibt eine Pseudozufallszahl in Form einer Gleitkommazahl im Bereich von 0 - 1 (0 inklusiv, aber 1 nicht) annähernd gleichverteilt zurück, die dann zur gewünschten Größe skaliert werden kann. Die Zufallszahl wird von der Implementierung bestimmt; sie kann nicht vom Benutzer ausgewählt oder zurückgesetzt werden.

+ +
{{EmbedInteractiveExample("pages/js/math-random.html")}}
+ +
+

Math.random() stellt keine kryprografisch sicheren Zufallszahlen bereit. Verwenden Sie sie auf keinen Fall für etwas, das  in Verbindung mit Sicherheit steht. Benutzen Sie stattdessen die Web Crypto API, genauer gesagt die {{domxref("RandomSource.getRandomValues()", "window.crypto.getRandomValues()")}}-Methode.

+
+ +

Syntax

+ +
Math.random()
+ +

Rückgabewert

+ +

Eine pseudozufällige Gleitkommazahl zwischen 0 (inklusiv) und 1 (exklusiv).

+ +

Beispiele

+ +

Beachten Sie, dass, weil Zahlen in JavaScript IEEE 754 Gleitkommazahlen sind, mit dem Verhalten zur nächsten geraden Zahl zu runden, die Bereiche für die folgenden Funktionen - mit Ausnahme für Math.random() selbst - nicht exakt sind.
+ Wenn extrem große Grenzen
(253 oder höher) gewählt werden, ist es in äußerst seltenen Fällen möglich, dass die eigentlich ausgeschlossenen Obergrenzen mit eingerechnet werden.

+ +

Erzeugt eine Zufallszahl zwischen 0 (inklusive) und 1 (exklusive)

+ +
function getRandom() {
+  return Math.random();
+}
+
+ +

Erzeugt eine Zufallszahl zwischen zwei Zahlen

+ +

Das Beispiel gibt eine zufällige Zahl zwischen zwei Zahlen zurück. Der Rückgabewert is größer oder gleich min und kleiner als max.

+ +
function getRandomArbitrary(min, max) {
+  return Math.random() * (max - min) + min;
+}
+
+ +

Erzeugt eine ganze Zufallszahl zwischen zwei Zahlen

+ +

Das Beispiel gibt eine zufällige ganze Zahl zwischen den spezifizierten Werten zurück. Der Wert ist nicht kleiner als min (oder der nächstgrößeren ganzen Zahl von min, wenn min keine ganze Zahl ist) und ist kleiner als  (aber nicht gleich) max.

+ +
function getRandomInt(min, max) {
+  min = Math.ceil(min);
+  max = Math.floor(max);
+  return Math.floor(Math.random() * (max - min)) + min;
+}
+
+ +
+

Es könnte verlockend sein, Math.round() zu verwenden, um das Ergebnis zu erreichen, aber das würde dazu führen, dass die zufälligen Zahlen einer ungleichmäßigen Verteilung folgen würden, die möglicherweise nicht den geforderten Bedürfnisse entsprechen würde.

+
+ +

Erzeugt eine ganze Zufallszahl zwischen zwei Zahlen (inklusiv)

+ +

Die obere getRandomInt() Funktion hat ein inklusives Minimum und ein exklusives Maximum. Was ist, wenn sowohl das Minimum als auch das Maximum inklusive sein sollen? Die getRandomIntInclusive() Funktion ermöglicht dieses:

+ +
function getRandomIntInclusive(min, max) {
+  min = Math.ceil(min);
+  max = Math.floor(max);
+  return Math.floor(Math.random() * (max - min +1)) + min;
+}
+
+ +

Spezifikationen

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpezifikationStatusKommentar
{{SpecName('ES1')}}{{Spec2('ES1')}}Initiale Definition. JavaScript 1.0 (nur auf UNIX) / JavaScript 1.1 (auf allen Plattformen).
{{SpecName('ES5.1', '#sec-15.8.2.14', 'Math.random')}}{{Spec2('ES5.1')}}
{{SpecName('ES6', '#sec-math.random', 'Math.random')}}{{Spec2('ES6')}}
{{SpecName('ESDraft', '#sec-math.random', 'Math.random')}}{{Spec2('ESDraft')}}
+ +

Browserkompatibilität

+ + + +

{{Compat("javascript.builtins.Math.random")}}

diff --git a/files/de/web/javascript/reference/global_objects/number/prototype/index.html b/files/de/web/javascript/reference/global_objects/number/prototype/index.html deleted file mode 100644 index f44a20d90d..0000000000 --- a/files/de/web/javascript/reference/global_objects/number/prototype/index.html +++ /dev/null @@ -1,90 +0,0 @@ ---- -title: Number.prototype -slug: Web/JavaScript/Reference/Global_Objects/Number/prototype -tags: - - JavaScript - - Number - - Property - - Prototype -translation_of: Web/JavaScript/Reference/Global_Objects/Number -translation_of_original: Web/JavaScript/Reference/Global_Objects/Number/prototype ---- -
{{JSRef}}
- -

Die Eigenschaft Number.prototype repräsentiert den Prototypen für den {{jsxref("Number")}} Konstruktor.

- -
{{js_property_attributes(0, 0, 0)}}
- -

Beschreibung

- -

Alle {{jsxref("Number")}} Instanzen erben von Number.prototype. Das prototype Objekt des {{jsxref("Number")}} Konstruktors kann verändert werden um alle Instanzen von {{jsxref( "Number")}} zu erweitern.

- -

Eigenschaften

- -
-
Number.prototype.constructor
-
Gibt die Funktion zurück, die die Instanz dieses Objektes erzeugt hat. Als Standardwert ist das das {{jsxref("Number")}} Objekt.
-
- -

Methoden

- -
-
{{jsxref("Number.prototype.toExponential()")}}
-
Gibt eine Zeichenkette (string) zurück, die die Nummer in Exponential Notation repräsentiert.
-
{{jsxref("Number.prototype.toFixed()")}}
-
Gibt eine Zeichenkette (string) zurück, die die Nummer als Festkommazahl repräsentiert.
-
{{jsxref("Number.prototype.toLocaleString()")}}
-
Gibt eine Zeichenkette (string) zurück, die die sprachenübliche Repräsentation der Nummer repräsentiert. Überschreibt die  {{jsxref("Object.prototype.toLocaleString()")}} Methode.
-
{{jsxref("Number.prototype.toPrecision()")}}
-
Gibt eine Zeichenzette (string) zurück, die die Zahl in einer bestimmten Genauigkeit als Festkommazahl repräsentiert.
-
{{jsxref("Number.prototype.toSource()")}} {{non-standard_inline}}
-
Gibt ein Objektliteral zurück, welches das {{jsxref("Number")}} Objekt spezifiziert. Diese Methode kann genutzt werden, um ein neues Objekt zu erzeugen. Überschreibt die {{jsxref("Object.prototype.toSource()")}} Methode.
-
{{jsxref("Number.prototype.toString()")}}
-
Gibt eine Zeichenkette (string) zurück, die die Zahl in einer bestimmten Basis repräsentiert. Überschreibt die {{jsxref("Object.prototype.toString()")}} Methode.
-
{{jsxref("Number.prototype.valueOf()")}}
-
Gibt einen primitiven Wert des Objektes zurück. Überschreibt die {{jsxref("Object.prototype.valueOf()")}} Methode.
-
- -

Spezifikationen

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SpezifikationStatusKommentar
{{SpecName('ES1')}}{{Spec2('ES1')}}Initiale Definition. Implementiert in JavaScript 1.1.
{{SpecName('ES5.1', '#sec-15.7.4', 'Number')}}{{Spec2('ES5.1')}} 
{{SpecName('ES6', '#sec-properties-of-the-number-prototype-object', 'Number')}}{{Spec2('ES6')}} 
{{SpecName('ESDraft', '#sec-properties-of-the-number-prototype-object', 'Number')}}{{Spec2('ESDraft')}} 
- -

Browserkompatibilität

- - - -

{{Compat("javascript.builtins.Number.prototype")}}

- -

Siehe auch

- - diff --git a/files/de/web/javascript/reference/global_objects/object/prototype/index.html b/files/de/web/javascript/reference/global_objects/object/prototype/index.html deleted file mode 100644 index d6fdd3de2b..0000000000 --- a/files/de/web/javascript/reference/global_objects/object/prototype/index.html +++ /dev/null @@ -1,220 +0,0 @@ ---- -title: Object.prototype -slug: Web/JavaScript/Reference/Global_Objects/Object/prototype -translation_of: Web/JavaScript/Reference/Global_Objects/Object -translation_of_original: Web/JavaScript/Reference/Global_Objects/Object/prototype ---- -
{{JSRef}}
- -

Das Object.prototype Attribut repräsentiert das Prototype Objekt von {{jsxref("Object")}}.

- -
{{js_property_attributes(0, 0, 0)}}
- -

Beschreibung

- -

Alle Objekte in JavaScript stammen von {{jsxref("Object")}}; alle Objekte erben Methoden und Attribute von Object.prototype, wobei diese  überschrieben werden können (mit Ausnahme von Objekten mit einem null-Prototyp, sprich Object.create(null)). Die Prototypen anderer Konstruktoren zum Beispiel, überschreiben das constructor Attribut und stellen ihre eigenen Methoden zur Verfügung {{jsxref("Object.prototype.toString()", "toString()")}}. Änderungen am  Object prototype Objekt werden an alle Objekte weitergeleitet, solange die betroffenen Attribute und Methoden nicht zuvor in der Kette der Prototypen überschrieben wurden.

- -

Attribute

- -
-
{{jsxref("Object.prototype.constructor")}}
-
Die Funktion, die den Prototypen eines Objekts erstellt.
-
{{jsxref("Object.prototype.__proto__")}} {{non-standard_inline}}
-
Zeigt auf das Objekt, das als bei der Initialisierung des Objektes als Prototyp diente.
-
{{jsxref("Object.prototype.__noSuchMethod__")}} {{non-standard_inline}}
-
Erlaubt das Erstellen einer Funktion, die dann ausgeführt wird, wenn ein undefiniertes Objekt als Methode aufgerufen wird.
-
{{jsxref("Object.prototype.count","Object.prototype.__count__")}} {{obsolete_inline}}
-
Wurde benutzt um die Anzahl der aufzählbaren Attribute direkt durch das Objekt zurückzugeben; mittlerweile entfernt.
-
{{jsxref("Object.prototype.parent","Object.prototype.__parent__")}} {{obsolete_inline}}
-
Wurde benutzt um auf den Kontext eines Objektes zu verweisen; mittlerweile entfernt.
-
- -

Methoden

- -
-
{{jsxref("Object.prototype.__defineGetter__()")}} {{non-standard_inline}} {{deprecated_inline}}
-
Verknüpft eine Funktion mit einem Attribut, das, wenn darauf zugegriffen wird eine Funktion ausführt und deren Rückgabewert zurück gibt.
-
{{jsxref("Object.prototype.__defineSetter__()")}} {{non-standard_inline}} {{deprecated_inline}}
-
Verknüpft eine Funktion mit einem Attribut, das, wenn dieses gesetzt werden soll, eine Funktion ausführt, die das Attribut modifiziert.
-
{{jsxref("Object.prototype.__lookupGetter__()")}} {{non-standard_inline}} {{deprecated_inline}}
-
Gibt die Funktion zurück, die mit dem spezifizierten Attribut über die Methode {{jsxref("Object.prototype.__defineGetter__()", "__defineGetter__()")}} verknüpft ist.
-
{{jsxref("Object.prototype.__lookupSetter__()")}} {{non-standard_inline}} {{deprecated_inline}}
-
Gibt die Funktion zurück, die mit dem spezifizierten Attribut über die Methode {{jsxref("Object.prototype.__defineSetter__()", "__defineSetter__()")}} verknüpft ist.
-
{{jsxref("Object.prototype.hasOwnProperty()")}}
-
Gibt einen Boolean Wert zurück, der anzeigt, ob ein Attribut ein direktes Attribut dieses Objekts ist, oder über Vererbung durch einen Prototypen hinzugefügt wurde.
-
{{jsxref("Object.prototype.isPrototypeOf()")}}
-
Gibt einen Boolean Wert zurück, der anzeigt, ob das spezifizierte Objekt in der Prototyp-Kette des Objekts, das diese Funktion aufruft, enthalten ist.
-
{{jsxref("Object.prototype.propertyIsEnumerable()")}}
-
Gibt einen Boolean Wert zurück, der anzeigt, ob das interne ECMAScript [[Enumerable]] attribute gesetzt ist.
-
{{jsxref("Object.prototype.toSource()")}} {{non-standard_inline}}
-
Liefert einen String zurück, der die Quelle eines Objekt-Literals enthält, und das Objekt darstellt, das diese Funktion aufruft; man kann diesen Wert benutzen, um ein neues Objekt zu erstellen.
-
{{jsxref("Object.prototype.toLocaleString()")}}
-
Ruft {{jsxref("Object.toString", "toString()")}} auf.
-
{{jsxref("Object.prototype.toString()")}}
-
Gibt eine String-Darstellung des Objekts zurück.
-
{{jsxref("Object.prototype.unwatch()")}} {{non-standard_inline}}
-
Entfernt einen Kontrollpunkt von einem Attribut des Objekts.
-
{{jsxref("Object.prototype.valueOf()")}}
-
Gibt den primitiven Wert des spezifizierten Objekts zurück.
-
{{jsxref("Object.prototype.watch()")}} {{non-standard_inline}}
-
Fügt einem Attribut des Objekts einen Kontrollpunkt hinzu.
-
{{jsxref("Object.prototype.eval()")}} {{obsolete_inline}}
-
Wurde genutzt, um einen String bestehend aus JavaScript Code, im Kontext des aktuellen Objekts auszuwerten; wurde entfernt;
-
- -

Beispiele

- -

Weil JavaScript keine klassischen Sub-Klassen-Funktionalität hat, sind Prototypen ein guter Weg, um "Base Class" Objekte mit bestimmten Funktionen zu erstellen, die als Objekte fungieren. Zum Beispiel:

- -
var Person = function() {
-  this.canTalk = true;
-};
-
-Person.prototype.greet = function() {
-  if (this.canTalk) {
-    console.log('Hi, I am ' + this.name);
-  }
-};
-
-var Employee = function(name, title) {
-  Person.call(this);
-  this.name = name;
-  this.title = title;
-};
-
-Employee.prototype = Object.create(Person.prototype);
-Employee.prototype.constructor = Employee;
-
-Employee.prototype.greet = function() {
-  if (this.canTalk) {
-    console.log('Hi, I am ' + this.name + ', the ' + this.title);
-  }
-};
-
-var Customer = function(name) {
-  Person.call(this);
-  this.name = name;
-};
-
-Customer.prototype = Object.create(Person.prototype);
-Customer.prototype.constructor = Customer;
-
-var Mime = function(name) {
-  Person.call(this);
-  this.name = name;
-  this.canTalk = false;
-};
-
-Mime.prototype = Object.create(Person.prototype);
-Mime.prototype.constructor = Mime;
-
-var bob = new Employee('Bob', 'Builder');
-var joe = new Customer('Joe');
-var rg = new Employee('Red Green', 'Handyman');
-var mike = new Customer('Mike');
-var mime = new Mime('Mime');
-
-bob.greet();
-// Hi, I am Bob, the Builder
-
-joe.greet();
-// Hi, I am Joe
-
-rg.greet();
-// Hi, I am Red Green, the Handyman
-
-mike.greet();
-// Hi, I am Mike
-
-mime.greet();
-
- -

Spezifikationen

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SpecificationStatusComment
{{SpecName('ES1')}}{{Spec2('ES1')}}Initial definition. Implemented in JavaScript 1.0.
{{SpecName('ES5.1', '#sec-15.2.3.1', 'Object.prototype')}}{{Spec2('ES5.1')}} 
{{SpecName('ES6', '#sec-object.prototype', 'Object.prototype')}}{{Spec2('ES6')}} 
{{SpecName('ESDraft', '#sec-object.prototype', 'Object.prototype')}}{{Spec2('ESDraft')}} 
- -

Browser Kompatibilität

- -
{{CompatibilityTable}}
- -
- - - - - - - - - - - - - - - - - - - -
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
-
- -
- - - - - - - - - - - - - - - - - - - - - -
FeatureAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
-
- -

See also

- - diff --git a/files/de/web/javascript/reference/global_objects/rangeerror/prototype/index.html b/files/de/web/javascript/reference/global_objects/rangeerror/prototype/index.html deleted file mode 100644 index fba99e1e5a..0000000000 --- a/files/de/web/javascript/reference/global_objects/rangeerror/prototype/index.html +++ /dev/null @@ -1,129 +0,0 @@ ---- -title: RangeError.prototype -slug: Web/JavaScript/Reference/Global_Objects/RangeError/prototype -translation_of: Web/JavaScript/Reference/Global_Objects/RangeError -translation_of_original: Web/JavaScript/Reference/Global_Objects/RangeError/prototype ---- -
{{JSRef}}
- -

Die RangeError.prototype Eigenschaft repräsentiert den Prototypen des {{jsxref("RangeError")}} Konstruktoren.

- -
{{js_property_attributes(0, 0, 0)}}
- -

Beschreibung

- -

Alle {{jsxref("RangeError")}} Instanzen erben vom RangeError.prototype. Man kann den Prototypen nutzen um Eigenschaften oder Methoden allen Instanzen hinzuzufügen.

- -

Eigenschaften

- -
-
RangeError.prototype.constructor
-
Spezifiziert die Funktion welche den Prototypen einer Instanz erschaffen hat.
-
{{jsxref("Error.prototype.message", "RangeError.prototype.message")}}
-
Fehlermeldung. Obwohl ECMA-262 angibt, dass {{jsxref("RangeError")}} seine eigene message Eigenschaft versorgen sollte, erbt es in SpiderMonkey die {{jsxref("Error.prototype.message")}}.
-
{{jsxref("Error.prototype.name", "RangeError.prototype.name")}}
-
Fehlername. Geerbt von {{jsxref("Error")}}.
-
{{jsxref("Error.prototype.fileName", "RangeError.prototype.fileName")}}
-
Der Dateipfad verursacht diesen Fehler. Geerbt von {{jsxref("Error")}}.
-
{{jsxref("Error.prototype.lineNumber", "RangeError.prototype.lineNumber")}}
-
Die Zeile in der Datei, bei der der Fehler auftritt. Geerbt von {{jsxref("Error")}}.
-
{{jsxref("Error.prototype.columnNumber", "RangeError.prototype.columnNumber")}}
-
Die Spaltennummer der Zeile , bei der der Fehler auftritt. Geerbt von {{jsxref("Error")}}.
-
{{jsxref("Error.prototype.stack", "RangeError.prototype.stack")}}
-
Stack - Ablaufverfolgung. Geerbt von {{jsxref("Error")}}.
-
- -

Methoden

- -

 Obwohl das {{jsxref("RangeError")}} Prototypobjekt keine eigenen Methoden beinhaltet, beerben {{jsxref("RangeError")}} Instanzen einige Methoden durch die Prototypenkette.

- -

Spezifikationen

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SpezifikationStatusBeschreibung
{{SpecName('ES3')}}{{Spec2('ES3')}}Initialdefinition.
{{SpecName('ES5.1', '#sec-15.11.7.6', 'NativeError.prototype')}}{{Spec2('ES5.1')}}Definiert als NativeError.prototype.
{{SpecName('ES6', '#sec-nativeerror.prototype', 'NativeError.prototype')}}{{Spec2('ES6')}}Definiert als NativeError.prototype.
{{SpecName('ESDraft', '#sec-nativeerror.prototype', 'NativeError.prototype')}}{{Spec2('ESDraft')}}Definiert als NativeError.prototype.
- -

Browserkompatibilität

- -
{{CompatibilityTable}}
- -
- - - - - - - - - - - - - - - - - - - -
MerkmalChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
-
- -
- - - - - - - - - - - - - - - - - - - - - -
MerkmalAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
-
- -

Siehe auch

- - diff --git a/files/de/web/javascript/reference/global_objects/string/prototype/index.html b/files/de/web/javascript/reference/global_objects/string/prototype/index.html deleted file mode 100644 index aad1a12ead..0000000000 --- a/files/de/web/javascript/reference/global_objects/string/prototype/index.html +++ /dev/null @@ -1,190 +0,0 @@ ---- -title: String.prototype -slug: Web/JavaScript/Reference/Global_Objects/String/prototype -tags: - - Eigentum - - JavaScript - - Prototyp - - Referenz - - Strang - - String -translation_of: Web/JavaScript/Reference/Global_Objects/String -translation_of_original: Web/JavaScript/Reference/Global_Objects/String/prototype ---- -
{{JSRef}}
- -

Die String.prototypeEigenschaft repräsentiert das Prototypobjekt {{jsxref ("String")}}.

- -
{{js_property_attributes(0, 0, 0)}}
- -

Beschreibung

- -

Alle {{jsxref ("String")}} Instanzen erben von String.prototypeÄnderungen am StringPrototypobjekt werden an alle Instanzen von {{jsxref ("String")}} weitergegeben.

- -

Eigenschaften

- -
-
String.prototype.constructor
-
Gibt die Funktion an, mit der der Prototyp eines Objekts erstellt wird.
-
{{jsxref ("String.prototype.length")}}
-
Reflektiert die Länge der Zeichenfolge.
-
N
-
Wird verwendet, um auf das Zeichen an der N- ten Position zuzugreifen, wobei N eine ganze Zahl zwischen 0 und eins ist, die kleiner als der Wert von {{jsxref ("String.length", "length")} ist. Diese Eigenschaften sind schreibgeschützt.
-
- -

Methods

- -

Methoden

- -

Methoden, die nichts mit HTML zu tun haben

- -
-
{{jsxref ("String.prototype.charAt ()")}}
-
Gibt das Zeichen (genau eine UTF-16-Codeeinheit) am angegebenen Index zurück.
-
{{jsxref ("String.prototype.charCodeAt ()")}}
-
Gibt eine Zahl zurück, die der UTF-16-Code-Einheitswert am angegebenen Index ist.
-
{{jsxref ("String.prototype.codePointAt ()")}}
-
Gibt eine nicht negative Ganzzahl zurück, die der Codepunktwert des UTF-16-codierten Codepunkts ab dem angegebenen Index ist.
-
{{jsxref ("String.prototype.concat ()")}}
-
Kombiniert den Text zweier Zeichenfolgen und gibt eine neue Zeichenfolge zurück.
-
{{jsxref ("String.prototype.includes ()")}}
-
Legt fest, ob eine Zeichenfolge in einer anderen Zeichenfolge gefunden werden darf.
-
{{jsxref ("String.prototype.endsWith ()")}}
-
Bestimmt, ob eine Zeichenfolge mit den Zeichen einer anderen Zeichenfolge endet.
-
{{jsxref ("String.prototype.indexOf ()")}}
-
Gibt den Index innerhalb des aufrufenden {{jsxref ("String")}} Objekts des ersten Vorkommens des angegebenen Werts zurück oder -1, falls nicht gefunden.
-
{{jsxref ("String.prototype.lastIndexOf ()")}}
-
Gibt den Index innerhalb des aufrufenden {{jsxref ("String")}} Objekts des letzten Vorkommens des angegebenen Werts zurück oder -1, falls nicht gefunden.
-
{{jsxref ("String.prototype.localeCompare ()")}}
-
Gibt eine Zahl zurück, die angibt, ob eine Referenzzeichenfolge vor oder nach der angegebenen Zeichenfolge in Sortierreihenfolge steht oder mit dieser übereinstimmt.
-
{{jsxref ("String.prototype.match ()")}}
-
Wird verwendet, um einen regulären Ausdruck mit einer Zeichenfolge abzugleichen.
-
{{jsxref ("String.prototype.matchAll ()")}}
-
Gibt einen Iterator aller Übereinstimmungen zurück.
-
{{jsxref ("String.prototype.normalize ()")}}
-
Gibt die Unicode-Normalisierungsform des aufrufenden Zeichenfolgenwerts zurück.
-
{{jsxref ("String.prototype.padEnd ()")}}
-
Füllt die aktuelle Zeichenfolge am Ende mit einer bestimmten Zeichenfolge auf, um aus einer bestimmten Länge eine neue Zeichenfolge zu erstellen.
-
{{jsxref ("String.prototype.padStart ()")}}
-
Füllt die aktuelle Zeichenfolge von Anfang an mit einer bestimmten Zeichenfolge auf, um aus einer bestimmten Länge eine neue Zeichenfolge zu erstellen.
-
{{jsxref ("String.prototype.quote ()")}} {{obsolete_inline}}
-
Umschließt die Zeichenfolge in doppelte Anführungszeichen (" "").
-
{{jsxref ("String.prototype.repeat ()")}}
-
Gibt eine Zeichenfolge zurück, die aus den Elementen des Objekts besteht, die zu den angegebenen Zeiten wiederholt wurden.
-
{{jsxref ("String.prototype.replace ()")}}
-
Wird verwendet, um eine Übereinstimmung zwischen einem regulären Ausdruck und einer Zeichenfolge zu finden und die übereinstimmende Teilzeichenfolge durch eine neue Teilzeichenfolge zu ersetzen.
-
{{jsxref ("String.prototype.search ()")}}
-
Führt die Suche nach einer Übereinstimmung zwischen einem regulären Ausdruck und einer angegebenen Zeichenfolge aus.
-
{{jsxref ("String.prototype.slice ()")}}
-
Extrahiert einen Abschnitt einer Zeichenfolge und gibt eine neue Zeichenfolge zurück.
-
{{jsxref ("String.prototype.split ()")}}
-
Teilt ein {{jsxref ("Global_Objects / String", "String")}} -Objekt in ein Array von Zeichenfolgen auf, indem die Zeichenfolge in Teilzeichenfolgen aufgeteilt wird.
-
{{jsxref ("String.prototype.startsWith ()")}}
-
Legt fest, ob eine Zeichenfolge mit den Zeichen einer anderen Zeichenfolge beginnt.
-
{{jsxref ("String.prototype.substr ()")}} {{deprecated_inline}}
-
Gibt die Zeichen in einer Zeichenfolge zurück, die an der angegebenen Position mit der angegebenen Anzahl von Zeichen beginnt.
-
{{jsxref ("String.prototype.substring ()")}}
-
Gibt die Zeichen in einer Zeichenfolge zwischen zwei Indizes in die Zeichenfolge zurück.
-
{{jsxref ("String.prototype.toLocaleLowerCase ()")}}
-
Die Zeichen in einer Zeichenfolge werden unter Berücksichtigung des aktuellen Gebietsschemas in Kleinbuchstaben konvertiert. Für die meisten Sprachen wird das Gleiche wie {{jsxref ("String.prototype.toLowerCase ()", "toLowerCase ()")}} zurückgegeben.
-
{{jsxref ("String.prototype.toLocaleUpperCase ()")}}
-
Die Zeichen in einer Zeichenfolge werden unter Berücksichtigung des aktuellen Gebietsschemas in Großbuchstaben umgewandelt. Für die meisten Sprachen wird das Gleiche wie {{jsxref ("String.prototype.toUpperCase ()", "toUpperCase ()")}} zurückgegeben.
-
{{jsxref ("String.prototype.toLowerCase ()")}}
-
Gibt den aufrufenden Zeichenfolgenwert zurück, der in Kleinbuchstaben konvertiert wurde.
-
{{jsxref ("String.prototype.toSource ()")}} {{non-standard_inline}}
-
Gibt ein Objektliteral zurück, das das angegebene Objekt darstellt. Mit diesem Wert können Sie ein neues Objekt erstellen. Überschreibt die Methode {{jsxref ("Object.prototype.toSource ()")}}.
-
{{jsxref ("String.prototype.toString ()")}}
-
Gibt eine Zeichenfolge zurück, die das angegebene Objekt darstellt. Überschreibt die Methode {{jsxref ("Object.prototype.toString ()")}}.
-
{{jsxref ("String.prototype.toUpperCase ()")}}
-
Gibt den aufrufenden Zeichenfolgenwert zurück, der in Großbuchstaben konvertiert wurde.
-
{{jsxref ("String.prototype.trim ()")}}
-
Schneidet Leerzeichen vom Anfang und Ende der Zeichenfolge ab. Teil des ECMAScript 5-Standards.
-
{{jsxref ("String.prototype.trimStart ()")}}
- {{jsxref ("String.prototype.trimLeft ()")}}
-
Schneidet Leerzeichen vom Anfang der Zeichenfolge ab.
-
{{jsxref ("String.prototype.trimEnd ()")}}
- {{jsxref ("String.prototype.trimRight ()")}
-
Schneidet Leerzeichen vom Ende der Zeichenfolge ab.
-
{{jsxref ("String.prototype.valueOf ()")}}
-
Gibt den Grundwert des angegebenen Objekts zurück. Überschreibt die Methode {{jsxref ("Object.prototype.valueOf ()")}}.
-
{{jsxref ("String.prototype. @@ iterator ()", "String.prototype [@@ iterator] ()")}}
-
Gibt ein neues IteratorObjekt zurück, das die Codepunkte eines String-Werts durchläuft und jeden Codepunkt als String-Wert zurückgibt.
-
- -

HTML-Wrapper-Methoden

- -

Diese Methoden sind nur eingeschränkt einsetzbar, da sie nur einen Teil der verfügbaren HTML-Tags und -Attribute bereitstellen.

- -
-
{{jsxref ("String.prototype.anchor ()")}} {{deprecated_inline}}
-
{{htmlattrxref ("name", "a", "<a name=\"name\">")}} (Hypertext-Ziel)
-
{{jsxref ("String.prototype.big ()")}} {{deprecated_inline}}
-
{{HTMLElement ("big")}}
-
{{jsxref ("String.prototype.blink ()")}} {{deprecated_inline}}
-
{{HTMLElement ("blinken")}}
-
{{jsxref ("String.prototype.bold ()")}} {{deprecated_inline}}
-
{{HTMLElement ("b")}}
-
{{jsxref ("String.prototype.fixed ()")}} {{deprecated_inline}}
-
{{HTMLElement ("tt")}}
-
{{jsxref ("String.prototype.fontcolor ()")}} {{deprecated_inline}}
-
{{htmlattrxref ("color", "font", "<font color = \" color \ ">")}}
-
{{jsxref ("String.prototype.fontsize ()")}} {{deprecated_inline}}
-
{{htmlattrxref ("size", "font", "<font size = \" size \ ">")}}
-
{{jsxref ("String.prototype.italics ()")}} {{deprecated_inline}}
-
{{HTMLElement ("i")}}
-
{{jsxref ("String.prototype.link ()")}} {{deprecated_inline}}
-
{{htmlattrxref ("href", "a", "<a href=\"url\">")}} (Link zu URL)
-
{{jsxref ("String.prototype.small ()")}} {{deprecated_inline}}
-
{{HTMLElement ("small")}}
-
{{jsxref ("String.prototype.strike ()")}} {{deprecated_inline}}
-
{{HTMLElement ("strike")}}
-
{{jsxref ("String.prototype.sub ()")}} {{deprecated_inline}}
-
{{HTMLElement ("sub")}}
-
{{jsxref ("String.prototype.sup ()")}} {{deprecated_inline}}
-
{{HTMLElement ("sup")}}
-
- -

Specifications

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SpecificationStatusComment
{{SpecName('ES1')}}{{Spec2('ES1')}}Anfangsdefinition.
{{SpecName('ES5.1', '#sec-15.5.3.1', 'String.prototype')}}{{Spec2('ES5.1')}}
{{SpecName('ES6', '#sec-string.prototype', 'String.prototype')}}{{Spec2('ES6')}}
{{SpecName('ESDraft', '#sec-string.prototype', 'String.prototype')}}{{Spec2('ESDraft')}}
- -

Browser-Kompatibilität

- - - -

{{Compat("javascript.builtins.String.prototype")}}

- -

Sieh auch

- - diff --git a/files/de/web/javascript/reference/global_objects/string/search/index.html b/files/de/web/javascript/reference/global_objects/string/search/index.html new file mode 100644 index 0000000000..5fb838010a --- /dev/null +++ b/files/de/web/javascript/reference/global_objects/string/search/index.html @@ -0,0 +1,105 @@ +--- +title: String.prototype.search() +slug: Web/JavaScript/Reference/Global_Objects/String/suchen +tags: + - JavaScript + - Méthode + - Prototyp + - Referenz + - Regulärer Ausdruck + - Zeichenkette +translation_of: Web/JavaScript/Reference/Global_Objects/String/search +--- +
{{JSRef}}
+ +

Die search() methode führt eine Suche für eine Übereinstimmung von einem Regulären Ausdruck und diesem {{jsxref("String")}} Objekt.

+ +
{{EmbedInteractiveExample("pages/js/string-search.html")}}
+ + + +

Syntax

+ +
str.search(regexp)
+ +

Parameter

+ +
+
regexp
+
Ein Regulär-Ausdruck Objekt. Wenn ein nicht-RegExp Objekt obj eingereicht wird, wird es durch new RegExp(obj) zu {{jsxref("RegExp")}} konvertiert.
+
+ +

Rückgabewert

+ +

Die erste übereinstimmung zwischen dem Regulären Audruck und und der gegebenen Zeichenkette; wenn nicht gefunden, -1.

+ +

Beschreibung

+ +

Wenn du wissen willst ob ein Muster gefunden wurde, und was sein Index ist nutze search() (wenn du nur wissen willst ob es das gibt nutze die ähnliche {{jsxref("RegExp.prototype.test()", "test()")}} Methode auf dem RegExp Prototyp, der einen boolean zurückgibt); für mehr informationen (aber langsamererere Ausführung) nutze {{jsxref("String.prototype.match()", "match()")}} (ähnlich zum Ausdruck {{jsxref("RegExp.prototype.exec()", "exec()")}}).

+ +

Beispiele

+ + + +

Das folgende Beispiel durchsucht eine Zeichenkette mit 2 verschiedenen regex Objekten, um eine erfolgreiche, und unerfolgreiche Suche zu zeigen.

+ +
var str = "hey LukE";
+var re = /[A-Z]/g;
+var re2 = /[.]/g;
+console.log(str.search(re)); // gibt 4 zurück, was der Index des ersten Großbuchstaben "L" ist.
+console.log(str.search(re2)); // gibt -1 zurück kann "." nicht finden
+ +

Spezifikationen

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpezifikationStatusKommentar
{{SpecName('ES3')}}{{Spec2('ES3')}}Initielle Definition. Eingeführt in JavaScript 1.2.
{{SpecName('ES5.1', '#sec-15.5.4.12', 'String.prototype.search')}}{{Spec2('ES5.1')}}
{{SpecName('ES6', '#sec-string.prototype.search', 'String.prototype.search')}}{{Spec2('ES6')}}
{{SpecName('ESDraft', '#sec-string.prototype.search', 'String.prototype.search')}}{{Spec2('ESDraft')}}
+ +

Browser Kompatibilität

+ + + +

{{Compat("javascript.builtins.String.search")}}

+ +

Gecko-spezifische Hinweise

+ + + +

Siehe auch

+ + diff --git a/files/de/web/javascript/reference/global_objects/string/suchen/index.html b/files/de/web/javascript/reference/global_objects/string/suchen/index.html deleted file mode 100644 index 5fb838010a..0000000000 --- a/files/de/web/javascript/reference/global_objects/string/suchen/index.html +++ /dev/null @@ -1,105 +0,0 @@ ---- -title: String.prototype.search() -slug: Web/JavaScript/Reference/Global_Objects/String/suchen -tags: - - JavaScript - - Méthode - - Prototyp - - Referenz - - Regulärer Ausdruck - - Zeichenkette -translation_of: Web/JavaScript/Reference/Global_Objects/String/search ---- -
{{JSRef}}
- -

Die search() methode führt eine Suche für eine Übereinstimmung von einem Regulären Ausdruck und diesem {{jsxref("String")}} Objekt.

- -
{{EmbedInteractiveExample("pages/js/string-search.html")}}
- - - -

Syntax

- -
str.search(regexp)
- -

Parameter

- -
-
regexp
-
Ein Regulär-Ausdruck Objekt. Wenn ein nicht-RegExp Objekt obj eingereicht wird, wird es durch new RegExp(obj) zu {{jsxref("RegExp")}} konvertiert.
-
- -

Rückgabewert

- -

Die erste übereinstimmung zwischen dem Regulären Audruck und und der gegebenen Zeichenkette; wenn nicht gefunden, -1.

- -

Beschreibung

- -

Wenn du wissen willst ob ein Muster gefunden wurde, und was sein Index ist nutze search() (wenn du nur wissen willst ob es das gibt nutze die ähnliche {{jsxref("RegExp.prototype.test()", "test()")}} Methode auf dem RegExp Prototyp, der einen boolean zurückgibt); für mehr informationen (aber langsamererere Ausführung) nutze {{jsxref("String.prototype.match()", "match()")}} (ähnlich zum Ausdruck {{jsxref("RegExp.prototype.exec()", "exec()")}}).

- -

Beispiele

- - - -

Das folgende Beispiel durchsucht eine Zeichenkette mit 2 verschiedenen regex Objekten, um eine erfolgreiche, und unerfolgreiche Suche zu zeigen.

- -
var str = "hey LukE";
-var re = /[A-Z]/g;
-var re2 = /[.]/g;
-console.log(str.search(re)); // gibt 4 zurück, was der Index des ersten Großbuchstaben "L" ist.
-console.log(str.search(re2)); // gibt -1 zurück kann "." nicht finden
- -

Spezifikationen

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SpezifikationStatusKommentar
{{SpecName('ES3')}}{{Spec2('ES3')}}Initielle Definition. Eingeführt in JavaScript 1.2.
{{SpecName('ES5.1', '#sec-15.5.4.12', 'String.prototype.search')}}{{Spec2('ES5.1')}}
{{SpecName('ES6', '#sec-string.prototype.search', 'String.prototype.search')}}{{Spec2('ES6')}}
{{SpecName('ESDraft', '#sec-string.prototype.search', 'String.prototype.search')}}{{Spec2('ESDraft')}}
- -

Browser Kompatibilität

- - - -

{{Compat("javascript.builtins.String.search")}}

- -

Gecko-spezifische Hinweise

- - - -

Siehe auch

- - diff --git a/files/de/web/javascript/reference/global_objects/string/trimend/index.html b/files/de/web/javascript/reference/global_objects/string/trimend/index.html new file mode 100644 index 0000000000..b66e15f474 --- /dev/null +++ b/files/de/web/javascript/reference/global_objects/string/trimend/index.html @@ -0,0 +1,58 @@ +--- +title: String.prototype.trimRight() +slug: Web/JavaScript/Reference/Global_Objects/String/TrimRight +tags: + - JavaScript + - Method + - Prototype + - Reference + - String +translation_of: Web/JavaScript/Reference/Global_Objects/String/trimEnd +--- +
{{JSRef}} {{non-standard_header}}
+ +

Die trimRight() Methode entfernt Leerzeichen vom rechten Ende der Zeichenkette.

+ +

Syntax

+ +
str.trimRight()
+ +

Rückgabewert

+ +

Ein neuen String, der den alten String ohne Whitespaces auf der rechten Seite beinhaltet.

+ +

Beschreibung

+ +

Die trimRight() Methode gibt die Zeichenkette ohne Leerzeichen am rechten Ende zurück. trimRight() manipuliert nicht den Wert der Zeichenkette.

+ +

Beispiel

+ +

trimRight() verwenden

+ +

Im folgenden Beispiel wird die Funktionalität dieser Methode dargestellt.

+ +
var str = '   foo  ';
+
+console.log(str.length);  // 8
+
+str = str.trimRight();
+console.log(str.length);  // 6
+console.log(str);         // '   foo'
+
+ +

Spezifikationen

+ +

Gehört keinem Standard an. Hinzugefügt in JavaScript 1.8.1.

+ +

Browserkompatibilität

+ + + +

{{Compat("javascript.builtins.String.trimRight")}}

+ +

Siehe auch

+ + diff --git a/files/de/web/javascript/reference/global_objects/string/trimleft/index.html b/files/de/web/javascript/reference/global_objects/string/trimleft/index.html deleted file mode 100644 index db5dbd55cb..0000000000 --- a/files/de/web/javascript/reference/global_objects/string/trimleft/index.html +++ /dev/null @@ -1,58 +0,0 @@ ---- -title: String.prototype.trimLeft() -slug: Web/JavaScript/Reference/Global_Objects/String/TrimLeft -tags: - - JavaScript - - Method - - Prototype - - Reference - - String -translation_of: Web/JavaScript/Reference/Global_Objects/String/trimStart ---- -
{{JSRef}} {{non-standard_header}}
- -

Die trimLeft() Methode entfernt Leerzeichen vom linken Ende der Zeichenkette.

- -

Syntax

- -
str.trimLeft()
- -

Rückgabewert

- -

Ein neuen String, der den alten String ohne Whitespaces auf der linken Seite beinhaltet.

- -

Beschreibung

- -

Die trimLeft() Methode gibt die Zeichenkette ohne Leerzeichen am linken Ende zurück. trimLeft() manipuliert nicht den Wert der Zeichenkette.

- -

Beispiel

- -

trimLeft() verwenden

- -

Im folgenden Beispiel wird die Funktionalität dieser Methode dargestellt.

- -
var str = '   foo  ';
-
-console.log(str.length);  // 8
-
-str = str.trimLeft();
-console.log(str.length);  // 5
-console.log(str);         // 'foo  '
-
- -

Spezifikationen

- -

Gehört keinem Standard an. Hinzugefügt in JavaScript 1.8.1.

- -

Browserkompatibilität

- - - -

{{Compat("javascript.builtins.String.trimLeft")}}

- -

Siehe auch

- - diff --git a/files/de/web/javascript/reference/global_objects/string/trimright/index.html b/files/de/web/javascript/reference/global_objects/string/trimright/index.html deleted file mode 100644 index b66e15f474..0000000000 --- a/files/de/web/javascript/reference/global_objects/string/trimright/index.html +++ /dev/null @@ -1,58 +0,0 @@ ---- -title: String.prototype.trimRight() -slug: Web/JavaScript/Reference/Global_Objects/String/TrimRight -tags: - - JavaScript - - Method - - Prototype - - Reference - - String -translation_of: Web/JavaScript/Reference/Global_Objects/String/trimEnd ---- -
{{JSRef}} {{non-standard_header}}
- -

Die trimRight() Methode entfernt Leerzeichen vom rechten Ende der Zeichenkette.

- -

Syntax

- -
str.trimRight()
- -

Rückgabewert

- -

Ein neuen String, der den alten String ohne Whitespaces auf der rechten Seite beinhaltet.

- -

Beschreibung

- -

Die trimRight() Methode gibt die Zeichenkette ohne Leerzeichen am rechten Ende zurück. trimRight() manipuliert nicht den Wert der Zeichenkette.

- -

Beispiel

- -

trimRight() verwenden

- -

Im folgenden Beispiel wird die Funktionalität dieser Methode dargestellt.

- -
var str = '   foo  ';
-
-console.log(str.length);  // 8
-
-str = str.trimRight();
-console.log(str.length);  // 6
-console.log(str);         // '   foo'
-
- -

Spezifikationen

- -

Gehört keinem Standard an. Hinzugefügt in JavaScript 1.8.1.

- -

Browserkompatibilität

- - - -

{{Compat("javascript.builtins.String.trimRight")}}

- -

Siehe auch

- - diff --git a/files/de/web/javascript/reference/global_objects/string/trimstart/index.html b/files/de/web/javascript/reference/global_objects/string/trimstart/index.html new file mode 100644 index 0000000000..db5dbd55cb --- /dev/null +++ b/files/de/web/javascript/reference/global_objects/string/trimstart/index.html @@ -0,0 +1,58 @@ +--- +title: String.prototype.trimLeft() +slug: Web/JavaScript/Reference/Global_Objects/String/TrimLeft +tags: + - JavaScript + - Method + - Prototype + - Reference + - String +translation_of: Web/JavaScript/Reference/Global_Objects/String/trimStart +--- +
{{JSRef}} {{non-standard_header}}
+ +

Die trimLeft() Methode entfernt Leerzeichen vom linken Ende der Zeichenkette.

+ +

Syntax

+ +
str.trimLeft()
+ +

Rückgabewert

+ +

Ein neuen String, der den alten String ohne Whitespaces auf der linken Seite beinhaltet.

+ +

Beschreibung

+ +

Die trimLeft() Methode gibt die Zeichenkette ohne Leerzeichen am linken Ende zurück. trimLeft() manipuliert nicht den Wert der Zeichenkette.

+ +

Beispiel

+ +

trimLeft() verwenden

+ +

Im folgenden Beispiel wird die Funktionalität dieser Methode dargestellt.

+ +
var str = '   foo  ';
+
+console.log(str.length);  // 8
+
+str = str.trimLeft();
+console.log(str.length);  // 5
+console.log(str);         // 'foo  '
+
+ +

Spezifikationen

+ +

Gehört keinem Standard an. Hinzugefügt in JavaScript 1.8.1.

+ +

Browserkompatibilität

+ + + +

{{Compat("javascript.builtins.String.trimLeft")}}

+ +

Siehe auch

+ + diff --git a/files/de/web/javascript/reference/global_objects/syntaxerror/prototype/index.html b/files/de/web/javascript/reference/global_objects/syntaxerror/prototype/index.html deleted file mode 100644 index eaa648d375..0000000000 --- a/files/de/web/javascript/reference/global_objects/syntaxerror/prototype/index.html +++ /dev/null @@ -1,89 +0,0 @@ ---- -title: SyntaxError.prototype -slug: Web/JavaScript/Reference/Global_Objects/SyntaxError/prototype -tags: - - Error - - JavaScript - - Property - - Prototype - - SyntaxError -translation_of: Web/JavaScript/Reference/Global_Objects/SyntaxError -translation_of_original: Web/JavaScript/Reference/Global_Objects/SyntaxError/prototype ---- -
{{JSRef}}
- -

Die SyntaxError.prototype Eigenschaft repräsentiert die Eigenschaft die Eigenschaft für den {{jsxref("SyntaxError")}} Konstruktor.

- -

Beschreibung

- -

Alle {{jsxref("SyntaxError")}} Instanzen erben von SyntaxError.prototype. Man kann den Prototypen einsetzen, um Eigenschaften oder Methoden für allen Instanzen hinzuzufügen.

- -

Eigenschaften

- -
-
SyntaxError.prototype.constructor
-
Spezifiziert die Funktion, die einen Instanz des Prototypen erstellt.
-
{{jsxref("Error.prototype.message", "SyntaxError.prototype.message")}}
-
Fehlermeldung. Obwohl ECMA-262 Spezifiziert, dass {{jsxref("SyntaxError")}} eine eigene message Eigenschaft haben sollte, erbt dieser in SpiderMonkey die Eigenschaft {{jsxref("Error.prototype.message")}}.
-
{{jsxref("Error.prototype.name", "SyntaxError.prototype.name")}}
-
Fehlername. Vererbt von {{jsxref("Error")}}.
-
{{jsxref("Error.prototype.fileName", "SyntaxError.prototype.fileName")}}
-
Pfad zur Datei, in der der Fehler erzeugt wurde. Vererbt von {{jsxref("Error")}}.
-
{{jsxref("Error.prototype.lineNumber", "SyntaxError.prototype.lineNumber")}}
-
Zeilennummer, in der der Fehler erzeugt wurde. Vererbt von {{jsxref("Error")}}.
-
{{jsxref("Error.prototype.columnNumber", "SyntaxError.prototype.columnNumber")}}
-
Spaltennummer, in der der Fehler erzeugt wurde. Vererbt von {{jsxref("Error")}}.
-
{{jsxref("Error.prototype.stack", "SyntaxError.prototype.stack")}} {{non-standard_inline}}
-
Stack trace. Vererbt von {{jsxref("Error")}}.
-
- -

Methoden

- -

Obwohl das {{jsxref("SyntaxError")}} Prototypobjekt keine Methoden enthält, haben {{jsxref("SyntaxError")}} Instanzen einige Vererbte Methoden durch die Prototypenkette.

- -

Spezifikationen

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SpezifikationStatusKommentar
{{SpecName('ES3')}}{{Spec2('ES3')}}Initiale Definition.
{{SpecName('ES5.1', '#sec-15.11.7.6', 'NativeError.prototype')}}{{Spec2('ES5.1')}}Definiert als NativeError.prototype.
{{SpecName('ES6', '#sec-nativeerror.prototype', 'NativeError.prototype')}}{{Spec2('ES6')}}Definiert als NativeError.prototype.
{{SpecName('ESDraft', '#sec-nativeerror.prototype', 'NativeError.prototype')}}{{Spec2('ESDraft')}}Definiert als NativeError.prototype.
- -

Browserkompatibilität

- -
- - -

{{Compat("javascript.builtins.SyntaxError")}}

-
- -

Siehe auch

- - diff --git a/files/de/web/javascript/reference/global_objects/typeerror/prototype/index.html b/files/de/web/javascript/reference/global_objects/typeerror/prototype/index.html deleted file mode 100644 index 6c7e61d363..0000000000 --- a/files/de/web/javascript/reference/global_objects/typeerror/prototype/index.html +++ /dev/null @@ -1,89 +0,0 @@ ---- -title: TypeError.prototype -slug: Web/JavaScript/Reference/Global_Objects/TypeError/prototype -tags: - - Error - - JavaScript - - Property - - Prototype - - TypeError -translation_of: Web/JavaScript/Reference/Global_Objects/TypeError -translation_of_original: Web/JavaScript/Reference/Global_Objects/TypeError/prototype ---- -
{{JSRef}}
- -

Die TypeError.prototype Eigenschaft repräsentiert den prototype des {{jsxref("TypeError")}} Konstruktors.

- -

Beschreibung

- -

Alle {{jsxref("TypeError")}} Instanzen erben von TypeError.prototype. Dem prototype können über alle Instanzen hinweg Eigenschaften und Methoden hinzugefügt werden.

- -

Eigenschaften

- -
-
TypeError.prototype.constructor
-
Spezifiziert die Instanz erstellende Funktion.
-
{{jsxref("Error.prototype.message", "TypeError.prototype.message")}}
-
Fehlermeldung. ECMA-262 spezifiziert, dass {{jsxref("TypeError")}} eine eigene message Eigenschaft zur Verfügung stellen soll. In SpiderMonkey jedoch, erbt es von {{jsxref("Error.prototype.message")}}.
-
{{jsxref("Error.prototype.name", "TypeError.prototype.name")}}
-
Fehlerbezeichnung. Geerbt von {{jsxref("Error")}}.
-
{{jsxref("Error.prototype.fileName", "TypeError.prototype.fileName")}}
-
Pfad zur Datei, welche den Fehler verursachte. Geerbt von {{jsxref("Error")}}.
-
{{jsxref("Error.prototype.lineNumber", "TypeError.prototype.lineNumber")}}
-
Zeile in welcher der Fehler verusacht wurde. Geerbt von {{jsxref("Error")}}.
-
{{jsxref("Error.prototype.columnNumber", "TypeError.prototype.columnNumber")}}
-
Zeichennummer der Zeile in welcher der Fehler verursacht wurde. Geerbt von {{jsxref("Error")}}.
-
{{jsxref("Error.prototype.stack", "TypeError.prototype.stack")}}
-
Stack trace. Geerbt von {{jsxref("Error")}}.
-
- -

Methoden

- -

Das {{jsxref("TypeError")}} prototype Objekt beinhaltet keine eigenen Methoden, jedoch erben {{jsxref("TypeError")}} Instanzen einige Methoden durch die Prototypenkette.

- -

Spezifikationen

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SpezifikationStatusKommentar
{{SpecName('ES3', '#sec-15.11.7.6', 'NativeError.prototype')}}{{Spec2('ES3')}}Initiale Definition
{{SpecName('ES5.1', '#sec-15.11.7.6', 'NativeError.prototype')}}{{Spec2('ES5.1')}}Definiert als NativeError.prototype.
{{SpecName('ES6', '#sec-nativeerror.prototype', 'NativeError.prototype')}}{{Spec2('ES6')}}Definiert als NativeError.prototype.
{{SpecName('ESDraft', '#sec-nativeerror.prototype', 'NativeError.prototype')}}{{Spec2('ESDraft')}} 
- -

Browserkompatibilität

- -
- - -

{{Compat("javascript.builtins.TypeError")}}

-
- -

Siehe auch

- - diff --git a/files/de/web/javascript/reference/klassen/constructor/index.html b/files/de/web/javascript/reference/klassen/constructor/index.html deleted file mode 100644 index 5ab83ddcd5..0000000000 --- a/files/de/web/javascript/reference/klassen/constructor/index.html +++ /dev/null @@ -1,165 +0,0 @@ ---- -title: Konstruktor -slug: Web/JavaScript/Reference/Klassen/constructor -tags: - - ECMAScript 2015 - - JavaScript - - Klassen -translation_of: Web/JavaScript/Reference/Classes/constructor ---- -
{{jsSidebar("Classes")}}
- -

Die constructor Methode ist eine spezielle Methode für das erzeugen und initialisieren von Objekten, die mit dem Schlüsselwort class erzeugt wurden.

- -

Syntax

- -
constructor([Argumente]) { ... }
- -

Beschreibung

- -

In einer Klasse kann es nur eine Methode mit dem Namen "constructor" geben. Eine {{jsxref("SyntaxError")}} Fehlermeldung wird geworfen, wenn in einer Klasse die constructor Methode mehr als einmal vorhanden ist.

- -

Die constructor Methode kann mit dem Schlüsselwort super die constructor Methode der Eltern-Klasse aufrufen.

- -

Wenn man keine constructor Methode erzeugt, wird eine Standardkonstruktor verwendet.

- -

Beispiele

- -

Verwendung der constructor Methode

- -

Dieser Quellcode Ausschnitt wurden vom  classes Beispiel (live Demo) übernommen.

- -
class Square extends Polygon {
-  constructor(length) {
-    // Hier wird die constructor Methode der Eltern-Klasse aufgerufen,
-    // für die Parameter width und height wurde der übergebene length Parameter verwendet
-    super(length, length);
-    // Anmerkung: In abgeleiteten Klassen, muss die super() Methode aufgerufen werden,
-    // bevor man das 'this' Objekt verwenden kann, da es sonst zu einen Referenz Fehler kommt
-    this.name = 'Square';
-  }
-
-  get area() {
-    return this.height * this.width;
-  }
-
-  set area(value) {
-    this.area = value;
-  }
-}
- -

Standardkonstruktoren

- -

Wenn man keine constructor Methode anlegt, wird eine Standardkonstruktor verwendet. Für Basis Klassen ist der Standard Konstruktor:

- -
constructor() {}
-
- -

Für vererbte Klassen, ist das der Standardkonstruktor:

- -
constructor(...args) {
-  super(...args);
-}
- -

Spezifikationen

- - - - - - - - - - - - - - - - - - - -
SpezifikationStatusKommentar
{{SpecName('ES2015', '#sec-static-semantics-constructormethod', 'Constructor Method')}}{{Spec2('ES2015')}}Initiale Definition.
{{SpecName('ESDraft', '#sec-static-semantics-constructormethod', 'Constructor Method')}}{{Spec2('ESDraft')}} 
- -

Browserkompatibilität

- -

{{CompatibilityTable}}

- -
- - - - - - - - - - - - - - - - - - - - - - - - - - - -
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support{{CompatChrome(42.0)}}{{CompatGeckoDesktop(45)}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
Default constructors{{CompatUnknown}}{{CompatGeckoDesktop(45)}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
-
- -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
FeatureAndroidAndroid WebviewFirefox Mobile (Gecko)IE MobileOpera MobileSafari MobileChrome for Android
Basic support{{CompatNo}}{{CompatChrome(42.0)}}{{CompatGeckoMobile(45)}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatChrome(42.0)}}
Default constructors{{CompatUnknown}}{{CompatUnknown}}{{CompatGeckoMobile(45)}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
-
- -

Siehe auch

- - diff --git a/files/de/web/javascript/reference/klassen/extends/index.html b/files/de/web/javascript/reference/klassen/extends/index.html deleted file mode 100644 index 29ed8c5e78..0000000000 --- a/files/de/web/javascript/reference/klassen/extends/index.html +++ /dev/null @@ -1,172 +0,0 @@ ---- -title: Erweitern -slug: Web/JavaScript/Reference/Klassen/extends -tags: - - Classes - - ECMAScript 2015 - - JavaScript -translation_of: Web/JavaScript/Reference/Classes/extends ---- -
{{jsSidebar("Classes")}}
- -

Das extends Schlüsselwort wird in einer Klassendeklaration oder in einem Klassenausdruck verwendet, um eine, von einer anderen Klasse, abgeleitete Klasse zu erzeugen.

- -

Syntax

- -
class KindKlasse extends ElternKlasse { ... }
- -

Beschreibung

- -

Das Schlüsselwort extends kann verwendet werden, um von selbst erstellen Klassen als auch von standardmäßig eingebaute Objekte abzuleiten.

- -

Das prototype Objekt, des zu erweiternden Objekt, muss entweder von Typ {{jsxref("Object")}} oder{{jsxref("null")}} sein.

- -

Beispiele

- -

Verwendung von extends

- -

Das erste Beispiel erzeugt einen Klasse mit dem Namen Square, die von der Klasse Polygon abgeleitet ist. Dieses Beispiel wurde aus dieser live Demo (Quellcode) entnommen.

- -
class Square extends Polygon {
-  constructor(length) {
-    // Hier wird die constructor Methode der Eltern-Klasse aufgerufen,
-    // für die Parameter width und height wurde der übergebene length Parameter verwendet
-    super(length, length);
-    // Anmerkung: In abgeleiteten Klassen, muss die super() Methode aufgerufen werden,
-    // bevor man das 'this' Objekt verwenden kann, da es sonst zu einen Referenz Fehler kommt
-    this.name = 'Square';
-  }
-
-  get area() {
-    return this.height * this.width;
-  }
-
-  set area(value) {
-    this.height = this.width = Math.sqrt(value);
-    this.area = value;
-  }
-}
- -

Verwendung mit standardmäßig eingebautem Objekt

- -

In diesem Beispiel wird das standardmäßig eingebaute {{jsxref("Date")}} Objekt erweitert. Dieses Beispiel wurde aus dieser live Demo (Quellcode) entnommen.

- -
class myDate extends Date {
-  constructor() {
-    super();
-  }
-
-  getFormattedDate() {
-    var months = ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'];
-    return this.getDate() + "-" + months[this.getMonth()] + "-" + this.getFullYear();
-  }
-}
- -

Ableiten von null

- -

Das Ableiten von {{jsxref("null")}} funktioniert genauso wie mit jeder anderen Klasse, mit der Ausnahme, dass das prototype Objekt nicht von {{jsxref("Object.prototype")}} abgeleitet ist.

- -
class nullExtends extends null {
-  constructor() {}
-}
-
-Object.getPrototypeOf(nullExtends); // Function.prototype
-Object.getPrototypeOf(nullExtends.prototype) // null
- -

Spezifikationen

- - - - - - - - - - - - - - - - - - - -
SpezifikationStatusKommentar
{{SpecName('ES2015', '#sec-class-definitions', 'extends')}}{{Spec2('ES2015')}}Initiale Definition.
{{SpecName('ESDraft', '#sec-class-definitions', 'extends')}}{{Spec2('ESDraft')}}
- -

Browserkompatibilität

- -

{{CompatibilityTable}}

- -
- - - - - - - - - - - - - - - - - - - - - - - - - - - -
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support{{CompatChrome(42.0)}}{{CompatGeckoDesktop(45)}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
Array subclassing{{CompatChrome(43.0)}}{{CompatNo}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
-
- -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
FeatureAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari MobileChrome for Android
Basic support{{CompatNo}}{{CompatGeckoMobile(45)}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatChrome(42.0)}}
Array subclassing{{CompatNo}}{{CompatNo}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatChrome(43.0)}}
-
- -

Siehe auch

- - diff --git a/files/de/web/javascript/reference/klassen/index.html b/files/de/web/javascript/reference/klassen/index.html deleted file mode 100644 index 81bec0651a..0000000000 --- a/files/de/web/javascript/reference/klassen/index.html +++ /dev/null @@ -1,376 +0,0 @@ ---- -title: Klassen -slug: Web/JavaScript/Reference/Klassen -tags: - - ECMAScript 2015 - - JavaScript - - Klassen - - Konstruktor - - Vererbung -translation_of: Web/JavaScript/Reference/Classes ---- -
{{JsSidebar("Classes")}}
- -
JavaScript Klassen, eingeführt in ECMAScript 2015, sind syntaktischer Zucker für das bestehende, auf Prototypen basierende, Vererbungsmodell von JavaScript. Diese Syntaxerweiterung führt kein neues OOP-Modell in die Sprache ein. JS Klassen ermöglichen es, mit klarer und verständlicher Syntax Objekte zu erstellen und Vererbung in Javascript zu realisieren.
- -

Klassendefinition

- -

Klassen sind eigentlich Funktionen. Analog zu Funktionsausdrücken und Funktionsdeklarationen hat die Klassensyntax zwei Komponenten:

- - - -

Klassendeklaration

- -

Eine Möglichkeit, Klassen zu definieren ist eine Klassendeklaration. Diese wird eingeleitet durch das Schlüsselwort class, gefolgt vom Namen der Klasse (hier: "Rectangle").

- -
class Rectangle {
-  constructor(height, width) {
-    this.height = height;
-    this.width = width;
-  }
-}
- -

Hoisting

- -

Ein wichtiger Unterschied zwischen Klassen- und Funktionsdeklarationen besteht im sogenannten {{Glossary("Hoisting")}}. Funktionsdeklarationen werden an den Anfang des Definitionsbereichs "gehoben", für Klassen gilt dies nicht. Das heißt, um auf eine Klasse zuzugreifen, muss sie zuvor definiert worden sein, sonst führt dies zu einem {{jsxref("ReferenceError")}}:

- -
var p = new Polygon(); // ReferenceError
-
-class Polygon {}
-
- -

Klassenausdruck

- -

Ein Klassenausdruck ist eine weitere Möglichkeit eine Klasse zu definieren. Dabei ist es optional, hinter dem Schlüsselwort class einen Namen anzugeben. Sollte ein Name angegeben werden, so gilt dieser nur innerhalb des Klassenkörpers.

- -
// unnamed
-var Polygon = class {
-  constructor(height, width) {
-    this.height = height;
-    this.width = width;
-  }
-};
-
-// named
-var Polygon = class Polygon {
-  constructor(height, width) {
-    this.height = height;
-    this.width = width;
-  }
-};
-
- -

Klassenkörper und Methodendefinitionen

- -

Der Körper der Klasse ist innerhalb der beiden geschweiften Klammern {}. Hier werden die Eigenschaften der Klasse definiert, wie Konstruktoren oder Methoden.

- -

"Strict mode"

- -

Der Inhalt der Klassendeklaration und des Klassenausdrucks werden im "strikten Modus" ausgeführt.

- -

Konstruktor

- -

Die Konstruktor-Methode ist eine spezielle Methode, um Objekte zu erzeugen und zu initialisieren. Eine Klasse kann nur eine spezielle Methode mit dem Namen "constructor" haben. Sollte es in einer Klasse mehrere "constructor"-Methoden geben, wird ein {{jsxref("SyntaxError")}} geworfen.

- -

In der Konstruktor-Methode kann man mit dem Schlüsselwort "super", den Konstruktor der Elternklasse aufrufen.

- -

Prototype Methoden

- -

Siehe auch Methodendefinitionen.

- -
class Polygon {
-  constructor(hoehe, breite) {
-    this.hoehe = hoehe;
-    this.breite = breite;
-  }
-
-  get flaeche() {
-    return this.berechneFlaeche();
-  }
-
-  berechneFlaeche() {
-    return this.hoehe * this.breite;
-  }
-}
-
-const quadrat = new Polygon(10, 10);
-
-console.log(quadrat.flaeche);
- -

Statische Methoden

- -

Das Schlüsselwort static definiert statische Methoden. Statische Methoden werden ohne Instanzierung einer Klasse aufgerufen und sind über eine erzeugte Instanz nicht aufrufbar. Oft werden in Applikationen statische Methoden für Hilfsfunktionen verwendet.

- -
class Punkt {
-    constructor(x, y) {
-        this.x = x;
-        this.y = y;
-    }
-
-    static laenge(a, b) {
-        const dx = a.x - b.x;
-        const dy = a.y - b.y;
-
-        return Math.sqrt(dx*dx + dy*dy);
-    }
-}
-
-const p1 = new Punkt(5, 5);
-const p2 = new Punkt(10, 10);
-
-console.log(Punkt.laenge(p1, p2));
- -

Boxing with prototype and static methods

- -

Wird eine statische oder eine prototype-Methode aufgerufen, ohne dass ein Objekt in der Variable "this" liegt (oder mit "this" als Wahrheitswert, Zeichenkette, Nummer, undefiniert oder null), dann wird die Variable "this" im Funktionskörper undefined sein. Autoboxing wird nicht passieren. Das Verhalten wird das gleiche sein, sollte der Code nicht im "strict mode" geschrieben worden sein.

- -
class Tier {
-  sprich() {
-    return this;
-  }
-  static iss() {
-    return this;
-  }
-}
-
-let obj = new Tier();
-let sprich = obj.sprich;
-sprich(); // undefined
-
-let iss = Tier.iss;
-iss(); // undefined
- -

Falls wir den vorherigen Quelltext mit klassischen funktionsbasierten Klassen schreiben, wird Autoboxing stattfinden. Dies wird auf dem Wert passieren, der für "this" an die Funktion übergeben wurde.

- -
function Tier() { }
-
-Tier.prototype.sprich = function() {
-  return this;
-}
-
-Tier.iss = function() {
-  return this;
-}
-
-let obj = new Tier();
-let sprich = obj.sprich;
-sprich(); // Globales Objekt
-
-let iss = Tier.iss;
-iss(); // Globales Objekt
- -

Vererbung mittels extends

- -

Das Schlüsselwort extends wird dafür verwendet, Klassendeklarationen und Klassenausdrücke zu erzeugen, die von einer anderen Klasse ableiten.

- -
class Tier{
-  constructor(name) {
-    this.name = name;
-  }
-
-  sprich() {
-    console.log(this.name + ' macht ein Geräusch.');
-  }
-}
-
-class Hund extends Tier{
-  sprich() {
-    console.log(this.name + ' bellt.');
-  }
-}
-
-var h = new Hund('Wolfi');
-h.sprich();
-
- -

Existiert in der Unterklasse ein Konstruktor, muss dieser zuerst super() aufrufen, bevor "this" verwendet werden kann.

- -

Man kann auch traditionelle funktionsbasierte Klassen erweitern:

- -
function Tier(name) {
-  this.name = name;
-}
-Tier.prototype.sprich = function () {
-  console.log(this.name + ' macht ein Geräusch.');
-}
-
-class Hund extends Tier {
-  sprich() {
-    super.sprich();
-    console.log(this.name + ' bellt.');
-  }
-}
-
-var h = new Hund('Wolfi');
-h.sprich();
- -

Klassen können nicht von regulären (nicht konstruierbaren) Objekten erben. Falls von einem regulärem Objekt geerbt werden soll, kann {{jsxref("Object.setPrototypeOf()")}} verwendet werden:

- -
var Tier = {
-  sprich() {
-    console.log(this.name + ' macht ein Geräusch.');
-  }
-};
-
-class Hund {
-  constructor(name) {
-    this.name = name;
-  }
-  sprich() {
-    console.log(this.name + ' bellt.');
-  }
-}
-
-Object.setPrototypeOf(Hund.prototype, Tier);
-
-var h = new Hund('Wolfi');
-h.sprich();
- -

Species

- -

Falls man zum Beispiel in einer selbst erzeugten Klasse MyArray den Konstruktor mit dem Konstruktor der {{jsxref("Array")}} Klasse überschreiben will, kann man dies mittels des species Musters erreichen.

- -

Zum Beispiel, wenn man die {{jsxref("Array.map", "map()")}} Methode aufruft, wird der Default-Konstruktor der Klasse aufgerufen. Will man, dass stattdessen der Konstruktor der Elternklasse benutzt wird, kann man das {{jsxref("Symbol.species")}}-Symbol dafür verwenden:

- -
class MyArray extends Array {
-  // Überschreibt species mit dem Konstruktor der Array-Klasses
-  static get [Symbol.species]() { return Array; }
-}
-var a = new MyArray(1,2,3);
-var mapped = a.map(x => x * x);
-
-console.log(mapped instanceof MyArray); // false
-console.log(mapped instanceof Array);   // true
- -

Elternklasse Methoden mit super aufrufen

- -

Das Schlüsselwort super kann verwendet werden, um Methoden der Elternklassen aufzurufen

- -
class Katze{
-  constructor(name) {
-    this.name = name;
-  }
-
-  sprich() {
-    console.log(this.name + ' macht ein Geräusch.');
-  }
-}
-
-class Loewe extends Katze {
-  sprich() {
-    super.sprich();
-    console.log(this.name + ' brüllt.');
-  }
-}
- -

Mix-ins

- -

Abstrakte Subklassen oder mix-ins sind Vorlagen für Klassen. Eine ECMAScript-Klasse kann nur von einer einzigen Klasse ableiten, damit ist beispielsweise mehrfache Vererbung von Helferklassen nicht möglich. Die gewünschte Funktionalität muss von der Elternklasse bereitgestellt werden.

- -

Eine Funktion die als Input eine Elternklasse nimmt und als Output eine davon abgeleitete Subklasse ausgibt, kann verwendet werden, um mix-ins in ECMAScript zu erzeugen:

- -
var RechnerMixin = Base => class extends Base {
-  rechne() { }
-};
-
-var ZufallsGeneratorMixin = Base => class extends Base {
-  generiere() { }
-};
- -

Eine Klasse die ein solches mix-in verwendet kann so erzeugt werden:

- -
class Foo { }
-class Bar extends RechnerMixin(ZufallsGeneratorMixin(Foo)) { }
- -

Spezifikationen

- - - - - - - - - - - - - - - - - - - -
SpezifikationStatusKommentar
{{SpecName('ES2015', '#sec-class-definitions', 'Class definitions')}}{{Spec2('ES2015')}}Ursprüngliche Definition.
{{SpecName('ESDraft', '#sec-class-definitions', 'Class definitions')}}{{Spec2('ESDraft')}} 
- -

Browserkompatibilität

- -

{{CompatibilityTable}}

- -
- - - - - - - - - - - - - - - - - - - - - -
FeatureChromeFirefox (Gecko)EdgeInternet ExplorerOperaSafari
Basic support{{CompatChrome(42.0)}}[1]
- {{CompatChrome(49.0)}}
{{CompatGeckoDesktop(45)}}13{{CompatNo}}{{CompatNo}}{{CompatSafari(9.0)}}
-
- -
- - - - - - - - - - - - - - - - - - - - - -
FunktionAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari MobileChrome für Android
Basis Unterstützung{{CompatNo}}{{CompatGeckoMobile(45)}}{{CompatUnknown}}{{CompatUnknown}}9{{CompatChrome(42.0)}}[1]
- {{CompatChrome(49.0)}}
-
- -

[1] Benötigt den strikten Modus. Der Support im nicht-strikte Modus verbirgt sich hinter der Flag "Experimentelle JavaScript-Funktionen", welche standardmäßig deaktiviert ist.

- -

Siehe auch

- - diff --git a/files/de/web/javascript/reference/klassen/static/index.html b/files/de/web/javascript/reference/klassen/static/index.html deleted file mode 100644 index 9c13048498..0000000000 --- a/files/de/web/javascript/reference/klassen/static/index.html +++ /dev/null @@ -1,136 +0,0 @@ ---- -title: Statische Methoden -slug: Web/JavaScript/Reference/Klassen/static -tags: - - Classes - - ECMAScript 2015 - - JavaScript - - Static -translation_of: Web/JavaScript/Reference/Classes/static ---- -
{{jsSidebar("Classes")}}
- -

Das static Schüsselwort definiert statische Methoden für eine Klasse.

- -
{{EmbedInteractiveExample("pages/js/classes-static.html")}}
- - - -

Syntax

- -
static methodenName() { ... }
- -

Beschreibung

- -

Statische Methoden werden ohne Instanzierung einer Klasse aufgerufen und sind über eine erzeugte Instanz nicht aufrufbar. Oft werden in statische Methoden für Hilfsfunktionen verwendet.

- -

Aufruf von statischen Methoden

- -

Von einer anderen statischen Methode

- -

Um eine statische Methode aus einer anderen statischen Methode der gleichen Klasse aufzurufen, kann das this Schlüsselwort verwendet werden.

- -
class StaticMethodCall {
-    static staticMethod() {
-        return 'Static method has been called';
-    }
-    static anotherStaticMethod() {
-        return this.staticMethod() + ' from another static method';
-    }
-}
-StaticMethodCall.staticMethod();
-// 'Static method has been called'
-
-StaticMethodCall.anotherStaticMethod();
-// 'Static method has been called from another static method'
- -

Für Klassenkonstruktoren und anderen Methoden

- -

Statische Methoden sind mit dem this Schlüsselwort nicht direkt erreichbar von nicht statischen Methoden. Man kann sie mit dem Klassennamen aufrufen: KLASSENNAME.STATISCH_METHODE_NAME oder mit der Aufrufen einer Eigenschaft von constructor: this.constructor.STATISCH_METHODE_NAME.

- -
class StaticMethodCall{
-    constructor(){
-        console.log(StaticMethodCall.staticMethod());
-        // 'static method has been called'
-
-        console.log(this.constructor.staticMethod());
-        // 'static method has been called'
-    }
-
-    static  staticMethod(){
-        return 'static method has been called.';
-    }
-}
- -

Beispiele

- -

Das folgende Beispiel demonstriert mehrere Dinge:

- -
    -
  1. Wie eine statische Methode in einer Klasse implementiert wird.
  2. -
  3. Das von einer Klasse mit statischen Eigenschaften geerbt werden kann.
  4. -
  5. Wie eine statische Methode aufgerufen werden kann und wie nicht.
  6. -
- -
class Triple {
-  static triple(n) {
-    if (n === undefined) {
-      n = 1;
-    }
-    return n * 3;
-  }
-}
-
-class BiggerTriple extends Triple {
-  static triple(n) {
-    return super.triple(n) * super.triple(n);
-  }
-}
-
-console.log(Triple.triple());        // 3
-console.log(Triple.triple(6));       // 18
-
-var tp = new Triple();
-
-console.log(BiggerTriple.triple(3));
-// 81 (not affected by parent's instantiation)
-
-console.log(tp.triple());
-// 'tp.triple is not a function'.
-
- -

Spezifikationen

- - - - - - - - - - - - - - - - - - - -
SpezifikationStatusKommentar
{{SpecName('ES2015', '#sec-class-definitions', 'Class definitions')}}{{Spec2('ES2015')}}Initiale Definition.
{{SpecName('ESDraft', '#sec-class-definitions', 'Class definitions')}}{{Spec2('ESDraft')}} 
- -

Browserkompatibilität

- - - -

{{Compat("javascript.classes.static")}}

- -

Siehe auch

- - diff --git a/files/de/web/javascript/reference/operators/bitwise_operatoren/index.html b/files/de/web/javascript/reference/operators/bitwise_operatoren/index.html deleted file mode 100644 index 598d43df68..0000000000 --- a/files/de/web/javascript/reference/operators/bitwise_operatoren/index.html +++ /dev/null @@ -1,575 +0,0 @@ ---- -title: Bitweise Operatoren -slug: Web/JavaScript/Reference/Operators/Bitwise_Operatoren -tags: - - JavaScript - - Operator - - Reference -translation_of: Web/JavaScript/Reference/Operators -translation_of_original: Web/JavaScript/Reference/Operators/Bitwise_Operators ---- -
{{jsSidebar("Operators")}}
- -

Bitweise Operatoren werden auf Sequenzen aus 32 bit (Nullen und Einsen) angewandt im Gegensatz zu Operatoren, die mit Dezimal-, Hexadezimal- oder Oktalzahlen (numbers) arbeiten. Beispielsweise hat die Dezimalzahl neun die binäre Darstellung 1001. Auch wenn Bitweise Operatoren mit Binärdarstellungen arbeiten, sind deren Ausgabewerte Javascript Standardzahlenwerte.

- -
{{EmbedInteractiveExample("pages/js/expressions-bitwiseoperators.html")}}
- - - -

Die folgende Tabelle fasst Javascripts Bitweise Operatoren zusammen:

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
OperatorEinsatzBeschreibung
Bitweises UNDa & bGibt 1 in jeder Bit Position zurück, an welcher beide Operanden 1 sind.
Bitweises ODERa | bGibt 1 in jeder Bit Position zurück, an welcher einer oder beide Operanden 1 sind.
Bitweises XORa ^ bGibt 1 in jeder Bit Position zurück, an welcher einer aber nicht beide Operanden 1 sind.
Bitweise Negation~ aInvertiert die Bits des Operanden
Linksverschiebunga << bVerschiebt a in binärer Repräsentation b (< 32) Bits nach links, von Rechts werden Nullen hereingeschoben.
Vorzeichen propagierende Rechtsverschiebunga >> bVerschiebt a in binärer Repräsentation b (< 32) Bits nach rechts, herausgeschobene Bits werden verworfen.
Null füllende Rechtsverschiebunga >>> bVerschiebt a in binärer Repräsentation b (< 32) Bits nach rechts, herausgeschobene Bits werden verworfen und Nullen werden von links hereingeschoben.
- -

Vorzeichenbehaftete 32-Bit Integer

- -

Die Operanden aller Bitweisen Operationen werden in vorzeichenbehaftete 32-Bit Integer im Zweierkomplementformat konvertiert. Zweierkomplementformat bedeutet, dass das Gegenstück einer negative Zahl alle Bits invertiert (Bitweise Negation einer Zahl oder auch Einerkomplement einer Zahl) plus eins ist. Zum Beispiel die codierte Integer 314:

- -
00000000000000000000000100111010
-
- -

Im Folgenden ist ~314 codiert, d. h. das Einerkomplement von 314:

- -
11111111111111111111111011000101
-
- -

Anschließend wird -314 codiert, d. h. das Zweierkomplement 314:

- -
11111111111111111111111011000110
-
- -

Das Zweierkomplement garantiert, dass das Bit ganz links 0 ist, wenn die Zahl Positiv ist und 1 ist, wenn die Zahl negativ ist. Dieses wird das Vorzeichenbit genannt.

- -

Die Zahl 0 ist ein Integer, der komplett aus 0 Bits besteht.

- -
0 (base 10) = 00000000000000000000000000000000 (base 2)
-
- -

Die Zahl -1 ist ein Integer der komplett aus 1 Bits besteht.

- -
-1 (base 10) = 11111111111111111111111111111111 (base 2)
-
- -

Die Zahl -2147483648 (hexadezimale Repräsentation: -0x80000000) ist der Integer, welcher komplett aus 0 Bits besteht, außer dem ersten Bit (linkes Bit).

- -
-2147483648 (base 10) = 10000000000000000000000000000000 (base 2)
-
- -

Die Zahl 2147483647 (hexadezimale Repräsentation: -0x7fffffff) ist der Integer, welcher komplett aus 1 Bits besteht, außer dem ersten Bit (linkes Bit).

- -
2147483647 (base 10) = 01111111111111111111111111111111 (base 2)
-
- -

Die Zahlen -2147483648 und 2147483647 sind die minimalen und Maximalen Integers, die mit 32-Bit vorzeichenbehafteten Zahlen repräsentiert werden können.

- -

Bitweise logische Operatoren

- -

Konzeptionell arbeiten die bitweisen logischen Operatoren wie folgt:

- - - -

& (Bitweises UND)

- -

Führt die UND Operation auf jedem Bitpaar durch. a UND b ergibt 1, wenn beide a und b 1 sind. Die Wahrheitstabelle für den UND Operator ist:

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
aba UND b
000
010
100
111
- -
.    9 (Basis 10) = 00000000000000000000000000001001 (Basis 2)
-    14 (Basis 10) = 00000000000000000000000000001110 (Basis 2)
-                    --------------------------------
-14 & 9 (Basis 10) = 00000000000000000000000000001000 (Basis 2) = 8 (Basis 10)
-
- -

Bitweises verUNDen jeder Zahl x mit 0 ergibt 0. Bitweises verUNDen jeder Zahl x mit -1 ergibt x.

- -

| (Bitweises ODER)

- -

Führt die ODER Operation auf jedem Bitpaar durch. a ODER b ergibt 1, wenn einer, a oder b, 1 sind. Die Wahrheitstabelle für den ODER Operator ist:

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
aba ODER b
000
011
101
111
- -
.    9 (Basis 10) = 00000000000000000000000000001001 (Basis 2)
-    14 (Basis 10) = 00000000000000000000000000001110 (Basis 2)
-                    --------------------------------
-14 | 9 (Basis 10) = 00000000000000000000000000001111 (Basis 2) = 15 (Basis 10)
-
- -

Bitweises verODERn jeder Zahl x mit 0 ergibt x. Bitweises verODERn jeder Zahl x mit -1 ergibt -1.

- -

^ (Bitweises XOR)

- -

Führt die XOR Operation auf jedem Bitpaar durch. a XOR b ergibt 1, wenn sich a und b, unterscheiden. Die Wahrheitstabelle für den XOR Operator ist:

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
aba XOR b
000
011
101
110
- -
.    9 (Basis 10) = 00000000000000000000000000001001 (Basis 2)
-    14 (Basis 10) = 00000000000000000000000000001110 (Basis 2)
-                    --------------------------------
-14 ^ 9 (Basis 10) = 00000000000000000000000000000111 (Basis 2) = 7 (Basis 10)
-
- -

Bitweises verXORn jeder Zahl x mit 0 ergibt x. Bitweises verXORn jeder Zahl x mit -1 ergibt ~x.

- -

~ (Bitweise Negation)

- -

Führt die Negationsoperation auf jedem Bit durch. NICHT a ergibt ergibt den invertierten Wert (d. h. das Einerkomplement) von a. Die Wahrheitstabelle für den Negationsoperator ist:

- - - - - - - - - - - - - - - - -
aNICHT a
01
10
- -
 9 (Basis 10) = 00000000000000000000000000001001 (Basis 2)
-                --------------------------------
-~9 (Basis 10) = 11111111111111111111111111110110 (Basis 2) = -10 (Basis 10)
-
- -

Bitweises Negieren jeder Zahl x ergibt -(x + 1). Zum Beispiel ergibt ~-5 4.

- -

Beispiel mit indexOf:

- -
var str = 'rawr';
-var searchFor = 'a';
-
-// Das ist eine alternativer Weg um if (-1*str.indexOf('a') <= 0) zu tippen
-if (~str.indexOf(searchFor)) {
-  // searchFor is in the string
-} else {
-  // searchFor is not in the string
-}
-
-// Hier die Werte, die von (~str.indexOf(searchFor)) zurück gegeben werden
-// r == -1
-// a == -2
-// w == -3
-
- -

Bitweise Verschiebeoperatoren

- -

Die bitweisen Verschiebeoperatoren (shift Operatoren) haben zwei Operanden: Der erste ist der Anteil, der verschoben werden soll und der zweite ist die Anzahl der Positionen, um die der erste Operand verschoben werden soll. Die Richtung der Verschiebung wird durch den eingesetzten Operator festgelegt.

- -

Verschiebeoperatoren konvertieren ihre Operanden in 32-Bit Integers in Bit-Endian Reihenfolge und geben als Resultat den gleichen Typ des linken Operanden zurück. Der rechte Operand sollte kleiner als 32 sein, aber wenn das nicht so ist, werden nur die kleinsten fünf Bits verwendet.

- -

<< (Linksverschiebung)

- -

Dieser Operator verschiebt den ersten Operand um die spezifizierte Anzahl von Bits nach links. Überflüssige Bits, die nach links verschoben wurden, werden verworfen. Von rechts wird mit 0-Bits aufgefüllt.

- -

Zum Beispiel ergibt 9 << 2 36:

- -
.    9 (Basis 10): 00000000000000000000000000001001 (Basis 2)
-                   --------------------------------
-9 << 2 (Basis 10): 00000000000000000000000000100100 (Basis 2) = 36 (Basis 10)
-
- -

Bitweises Verschieben jeder Zahl x nach links mit y Bits ergibt x * 2 ** y.

- -

>> (Vorzeichen propagierende Rechtsverschiebung)

- -

Dieser Operator verschiebt den ersten Operand um die spezifizierte Anzahl von Bits nach rechts. Überflüssige Bits, die nach rechts verschoben wurden, werden verworfen. Kopien des linken Bits (Vorzeichenbits) werden von links hereingeschoben. Weil das neue Vorzeichenbit immer das selbe wie das alte Vorzeichenbit ist, ändert sich das linke Bit nicht. Daher kommt der Name "Vorzeichen propagierend" her.

- -

Zum Beispiel ergibt 9 >> 2 2:

- -
.    9 (base 10): 00000000000000000000000000001001 (base 2)
-                  --------------------------------
-9 >> 2 (base 10): 00000000000000000000000000000010 (base 2) = 2 (base 10)
-
- -

Likewise, -9 >> 2 yields -3, because the sign is preserved:

- -
.    -9 (Basis 10): 11111111111111111111111111110111 (Basis 2)
-                    --------------------------------
--9 >> 2 (Basis 10): 11111111111111111111111111111101 (Basis 2) = -3 (Basis 10)
-
- -

>>> (Null füllende Rechtsverschiebung)

- -

Dieser Operator verschiebt den ersten Operand um die spezifizierte Anzahl von Bits nach rechts. Überflüssige Bits, die nach rechts verschoben wurden, werden verworfen. Von link wird mit 0-Bits aufgefüllt. Das Vorzeichenbit wird 0, so dass das Ergebnis nie negativ ist.

- -

Für nicht negative Zahlen ist das Ergebnis bei der Null füllenden Rechtsverschiebung und bei der Vorzeichen propagierenden Rechtsverschiebung das selbe. Zum Beispiel ergibt 9 >>> 2 2, das selbe wie 9 >> 2:

- -
.     9 (Basis 10): 00000000000000000000000000001001 (Basis 2)
-                    --------------------------------
-9 >>> 2 (Basis 10): 00000000000000000000000000000010 (Basis 2) = 2 (Basis 10)
-
- -

Jedoch ist das nicht der Fall für negative Zahlen. Zum Beispiel ergibt -9 >>> 2 1073741821, was sich unterschiedet von -9 >> 2 (was -3 ergibt):

- -
.     -9 (Basis 10): 11111111111111111111111111110111 (Basis 2)
-                     --------------------------------
--9 >>> 2 (Basis 10): 00111111111111111111111111111101 (Basis 2) = 1073741821 (Basis 10)
-
- -

Beispiele

- -

Flags und Bitmasken

- -

Die bitweisen logischen Operatoren werden häufig eingesetzt, um Sequenzen von Flags zu erstellen, zu manipulieren und zu lesen, welche wie binäre Variablen sind. Variablen können statt dieser Sequenzen genutzt werden, aber binäre Flags verbrauchen weniger Speicher (um den Faktor 32).

- -

Angenommen es gibt 4 Flags:

- - - -

Diese Flags sind durch eine Sequenz von Bits repräsentiert: DCBA. Wenn ein Flag gesetzt wird, hat es den Wert 1. Wenn ein Flag geleert wird, hat es den Wert 0. Angenommen eine Variable flags hat den binären Wert 0101:

- -
var flags = 5;   // binär 0101
-
- -

Dieser Wert zeigt an:

- - - -

Weil Bitweise Operatoren mit 32-Bit arbeiten, ist 0101 eigentlich 00000000000000000000000000000101, aber die führenden nullen können vernachlässigt werden, weil sie keine Informationen enthalten.

- -

Eine Bitmaske ist eine Sequenz von Bits, die Flags manipulieren und/oder lesen kann. Typisch ist es, dass eine "primitive" Bitmaske für jedes Flag definiert ist:

- -
var FLAG_A = 1; // 0001
-var FLAG_B = 2; // 0010
-var FLAG_C = 4; // 0100
-var FLAG_D = 8; // 1000
-
- -

Neue Bitmasken können erstellt werden, indem bitweise logische Operatoren auf den primitiven Bitmasken angewendet werden. Zum Beispiel kann die Bitmaske 1011 mit VerODERn von FLAG_A, FLAG_B und FLAG_D erstellt werden:

- -
var mask = FLAG_A | FLAG_B | FLAG_D; // 0001 | 0010 | 1000 => 1011
-
- -

Individuelle Flagwerte können durch das VerUNDen mit einer Bitmaske extrahiert werden, wobei jedes Bit mit dem Wert eins das korrespondierende Flag extrahiert. Die Bitmaske wirft nicht relevante Flags heraus, indem Nullen verUNDet werden (daher der Begriff "Bitmaske"). Zum Beispiel kann die Bitmaske 0100 genutzt werden, um zu sehen, ob Flag C gesetzt ist:

- -
// Wenn man eine Katze besitzt
-if (flags & FLAG_C) { // 0101 & 0100 => 0100 => true
-   // tu irgendetwas
-}
-
- -

Eine Bitmaske mit mehreren gesetzten Flags funktioniert wie ein "entweder/oder". Zum Beispiel sind die beiden folgenden Ansätze äquivalent:

- -
// wenn man eine Fledermaus besitzt oder eine Katze besitzt
-// (0101 & 0010) || (0101 & 0100) => 0000 || 0100 => true
-if ((flags & FLAG_B) || (flags & FLAG_C)) {
-   // do stuff
-}
-
- -
// wenn man eine Fledermaus oder eine Katze besitzt
-var mask = FLAG_B | FLAG_C; // 0010 | 0100 => 0110
-if (flags & mask) { // 0101 & 0110 => 0100 => true
-   // do stuff
-}
-
- -

Flags können mit VerODERung mit einer Bitmaske gesetzt werden, wobei jedes Bit in der Bitmaske mit dem Wert 1 wird das korrespondierende Flag setzen, wenn es noch nicht gesetzt ist. Zum Beispiel kann die Bitmaske 1100 benutzt werden, um die Flags C und D zu setze:

- -
// ja, man besitzt eine Katze und eine Ente
-var mask = FLAG_C | FLAG_D; // 0100 | 1000 => 1100
-flags |= mask;   // 0101 | 1100 => 1101
-
- -

Flags können mit VerUNDung mit einer Bitmaske geleert werden, wobei jedes Bit in der Bitmaske mit dem Wert 0 wird das korrespondierende Flag geleert, wenn es noch nicht geleert ist. Die Bitmaske dafür kann mit Negation primitiver Bitmasken erstellt werden Zum Beispiel kann die Bitmaske 1010 benutzt werden, um die Flags A und C zu leeren:

- -
// no, we don't have an ant problem or own a cat
-var mask = ~(FLAG_A | FLAG_C); // ~0101 => 1010
-flags &= mask;   // 1101 & 1010 => 1000
-
- -

The mask could also have been created with ~FLAG_A & ~FLAG_C (De Morgan's law):

- -
// nein, mat hat kein Problem mit Ameisen und man besitzt keine Katze
-var mask = ~FLAG_A & ~FLAG_C;
-flags &= mask;   // 1101 & 1010 => 1000
-
- -

Flags können mit VerXORung mit einer Bitmaske umgeschaltet werden, wobei jedes Bit in der Bitmaske mit dem Wert 1 wird das korrespondierende Flag umschaltet. Zum Beispiel kann die Bitmaske 0110 benutzt werden, um die Flags B und C umzuschalten:

- -
// wenn man keine Fledermaus besitzt und und jetzt eine bekommt
-// and wenn man eine hat und die Fledermaus verabschiedet
-// das gleiche für eine Katze
-var mask = FLAG_B | FLAG_C;
-flags = flags ^ mask;   // 1100 ^ 0110 => 1010
-
- -

Alle Flags können mit dem Negationsoperator umgedreht werden:

- -
// entering parallel universe...
-flags = ~flags;    // ~1010 => 0101
-
- -

Konvertierungsbeispiele

- -

Konvertierung eines binär String zu einer dezimal Number:

- -
var sBinString = '1011';
-var nMyNumber = parseInt(sBinString, 2);
-alert(nMyNumber); // prints 11, i.e. 1011
-
- -

Konvertierung einer dezimal Number zu einem binär String:

- -
var nMyNumber = 11;
-var sBinString = nMyNumber.toString(2);
-alert(sBinString); // prints 1011, i.e. 11
-
- -

Bitmaskenerstellung automatisieren

- -

Man kann, wie folgt, mehrere Masken von einer Menge von Boolean Werten erstellen:

- -
function createMask() {
-  var nMask = 0, nFlag = 0, nLen = arguments.length > 32 ? 32 : arguments.length;
-  for (nFlag; nFlag < nLen; nMask |= arguments[nFlag] << nFlag++);
-  return nMask;
-}
-var mask1 = createMask(true, true, false, true); // 11, i.e.: 1011
-var mask2 = createMask(false, false, true); // 4, i.e.: 0100
-var mask3 = createMask(true); // 1, i.e.: 0001
-// etc.
-
-alert(mask1); // prints 11, i.e.: 1011
-
- -

Umgedrehter Algorithmus: Ein Array von Booleanen von einer Bitmaske

- -

Wenn man ein Array mit Boolean Werten von einer Bitmaske haben möchte, kann man folgenden Code benutzen:

- -
function arrayFromMask(nMask) {
-  // nMask must be between -2147483648 and 2147483647
-  if (nMask > 0x7fffffff || nMask < -0x80000000) {
-    throw new TypeError('arrayFromMask - out of range');
-  }
-  for (var nShifted = nMask, aFromMask = []; nShifted;
-       aFromMask.push(Boolean(nShifted & 1)), nShifted >>>= 1);
-  return aFromMask;
-}
-
-var array1 = arrayFromMask(11);
-var array2 = arrayFromMask(4);
-var array3 = arrayFromMask(1);
-
-alert('[' + array1.join(', ') + ']');
-// prints "[true, true, false, true]", i.e.: 11, i.e.: 1011
-
- -

Man kann beide Algorithmen gleichzeitig testen:

- -
var nTest = 19; // our custom mask
-var nResult = createMask.apply(this, arrayFromMask(nTest));
-
-alert(nResult); // 19
-
- -

Nur aus didaktischen Gründen (weil dort die Number.toString(2) Methode ist), zeigen wir, wie es möglich ist den arrayFromMask Algorithmus zu verändern, um einen String mit der Binärrepräsentation der Number statt eines Arrays von Booleanen:

- -
function createBinaryString(nMask) {
-  // nMask must be between -2147483648 and 2147483647
-  for (var nFlag = 0, nShifted = nMask, sMask = ''; nFlag < 32;
-       nFlag++, sMask += String(nShifted >>> 31), nShifted <<= 1);
-  return sMask;
-}
-
-var string1 = createBinaryString(11);
-var string2 = createBinaryString(4);
-var string3 = createBinaryString(1);
-
-alert(string1);
-// prints 00000000000000000000000000001011, i.e. 11
-
- -

Spezifikationen

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SpezifikationStatusKommentar
{{SpecName('ES1')}}{{Spec2('ES1')}}Initiale Definition.
{{SpecName('ES5.1', '#sec-11.7')}}{{Spec2('ES5.1')}}Definiert in verschiedenen Abschnitten der Spezifikation: Bitwise NOT operator, Bitwise shift operators, Binary bitwise operators
{{SpecName('ES6', '#sec-bitwise-shift-operators')}}{{Spec2('ES6')}}Definiert in verschiedenen Abschnitten der Spezifikation: Bitwise NOT operator, Bitwise shift operators, Binary bitwise operators
{{SpecName('ESDraft', '#sec-bitwise-shift-operators')}}{{Spec2('ESDraft')}}Definiert in verschiedenen Abschnitten der Spezifikation: Bitwise NOT operator, Bitwise shift operators, Binary bitwise operators
- -

Browserkompatibilität

- - - -

{{Compat("javascript.operators.bitwise")}}

- -

Siehe auch

- - diff --git a/files/de/web/javascript/reference/operators/decrement/index.html b/files/de/web/javascript/reference/operators/decrement/index.html new file mode 100644 index 0000000000..16b185b35c --- /dev/null +++ b/files/de/web/javascript/reference/operators/decrement/index.html @@ -0,0 +1,82 @@ +--- +title: Dekrement (--) +slug: Web/JavaScript/Reference/Operators/Dekrement +tags: + - Dekrement + - Dekrement-Operator + - Dekrementieren +translation_of: Web/JavaScript/Reference/Operators/Decrement +--- +
{{jsSidebar("Operators")}}
+ +

Der Dekrement-Operator (--) dekrementiert den Operanden um eins, zieht als eins vom Operanden ab und gibt einen Wert zurück.

+ +
{{EmbedInteractiveExample("pages/js/expressions-decrement.html")}}
+ +
+ + + +

Syntax

+ +
Operator: x-- or --x
+
+ +

Description

+ +

Wenn der Dekrement-Operator als Postfix benutzt wird, also der Operator hinter dem Operanden steht (z.B. x--), wird der Operand um eins reduziert aber der Wert vor dem Dekrementieren zurückgegeben. 

+ +

Wird der Dekrement-Operator als Präfix genutzt, steht also der Operator vor dem Operanden (z. B. --x), wird der Operator um eins reduziert und der Wert nach dieser Dekrementierung zurückgegeben.

+ +

Examples

+ +

Postfix decrement

+ +
let x = 3;
+y = x--;
+
+// y = 3
+// x = 2
+
+ +

Prefix decrement

+ +
let a = 2;
+b = --a;
+
+// a = 1
+// b = 1
+
+ +

Specifications

+ + + + + + + + + + +
Specification
{{SpecName('ESDraft', '#sec-postfix-decrement-operator', 'Decrement operator')}}
+ +

Browser compatibility

+ + + +

{{Compat("javascript.operators.decrement")}}

+ +

See also

+ + diff --git a/files/de/web/javascript/reference/operators/dekrement/index.html b/files/de/web/javascript/reference/operators/dekrement/index.html deleted file mode 100644 index 16b185b35c..0000000000 --- a/files/de/web/javascript/reference/operators/dekrement/index.html +++ /dev/null @@ -1,82 +0,0 @@ ---- -title: Dekrement (--) -slug: Web/JavaScript/Reference/Operators/Dekrement -tags: - - Dekrement - - Dekrement-Operator - - Dekrementieren -translation_of: Web/JavaScript/Reference/Operators/Decrement ---- -
{{jsSidebar("Operators")}}
- -

Der Dekrement-Operator (--) dekrementiert den Operanden um eins, zieht als eins vom Operanden ab und gibt einen Wert zurück.

- -
{{EmbedInteractiveExample("pages/js/expressions-decrement.html")}}
- -
- - - -

Syntax

- -
Operator: x-- or --x
-
- -

Description

- -

Wenn der Dekrement-Operator als Postfix benutzt wird, also der Operator hinter dem Operanden steht (z.B. x--), wird der Operand um eins reduziert aber der Wert vor dem Dekrementieren zurückgegeben. 

- -

Wird der Dekrement-Operator als Präfix genutzt, steht also der Operator vor dem Operanden (z. B. --x), wird der Operator um eins reduziert und der Wert nach dieser Dekrementierung zurückgegeben.

- -

Examples

- -

Postfix decrement

- -
let x = 3;
-y = x--;
-
-// y = 3
-// x = 2
-
- -

Prefix decrement

- -
let a = 2;
-b = --a;
-
-// a = 1
-// b = 1
-
- -

Specifications

- - - - - - - - - - -
Specification
{{SpecName('ESDraft', '#sec-postfix-decrement-operator', 'Decrement operator')}}
- -

Browser compatibility

- - - -

{{Compat("javascript.operators.decrement")}}

- -

See also

- - diff --git a/files/de/web/javascript/reference/operators/destructuring_assignment/index.html b/files/de/web/javascript/reference/operators/destructuring_assignment/index.html new file mode 100644 index 0000000000..1ece290e90 --- /dev/null +++ b/files/de/web/javascript/reference/operators/destructuring_assignment/index.html @@ -0,0 +1,404 @@ +--- +title: Destrukturierende Zuweisung +slug: Web/JavaScript/Reference/Operators/Destrukturierende_Zuweisung +tags: + - Destructuring + - ECMAScript 2015 + - JavaScript + - Operator +translation_of: Web/JavaScript/Reference/Operators/Destructuring_assignment +--- +
{{jsSidebar("Operators")}}
+ +

Die destrukturierende Zuweisung ermöglicht es, Daten aus Arrays oder Objekten zu extrahieren, und zwar mit Hilfe einer Syntax, die der Konstruktion von Array- und Objekt-Literalen nachempfunden ist.

+ +
{{EmbedInteractiveExample("pages/js/expressions-destructuringassignment.html")}}
+ + + +

Syntax

+ +
var a, b, rest;
+[a, b] = [10, 20];
+console.log(a); // 10
+console.log(b); // 20
+
+[a, b, ...rest] = [10, 20, 30, 40, 50];
+console.log(a); // 10
+console.log(b): // 20
+console.log(rest); // [30, 40, 50]
+
+({ a, b } = { a: 10, b: 20 });
+console.log(a); // 10
+console.log(b); // 20
+
+
+// Stage 3 Vorschlag
+({a, b, ...rest} = {a: 10, b: 20, c: 30, d: 40 });
+console.log(a); // 10
+console.log(b); // 20
+console.log(rest); // {c: 30, d: 40}
+
+ +

Beschreibung

+ +

Die Objekt- und Array-Literal Ausdrücke stellen einen einfachen Weg für die Erstellung von ad hoc Datenpaketen zur Verfügung.

+ +
var x = [1, 2, 3, 4, 5];
+ +

Die destrukturierende Zuweisung nutzt eine ähnliche Syntax, aber auf der linken Seite der Zuweisung, um zu definieren, welche Werte von der Quellvariablen ausgepackt werden muss.

+ +
var x = [1, 2, 3, 4, 5];
+var [y, z] = x;
+console.log(y); // 1
+console.log(z); // 2
+
+ +

Diese Fähigkeit ist so ähnlich wie in den Sprachen Perl und Python.

+ +

Array-Destrukturierung

+ +

Einfaches Variablenzuweisung

+ +
var foo = ['one', 'two', 'three'];
+
+var [one, two, three] = foo;
+console.log(one); // "one"
+console.log(two); // "two"
+console.log(three); // "three"
+
+ +

Zuweisung separat von Deklaration

+ +

Eine destrukturierende Zuweisung kann ohne Deklaration im Zuweisungsstatement vorgenommen werden.

+ +
var a, b;
+
+[a, b] = [1, 2];
+console.log(a); // 1
+console.log(b); // 2
+ +

Standardwerte

+ +

Einer Variablen kann ein Standardwert zugewiesen werden, welcher greift, wenn der Wert im Fall vom auspacken des Arrays undefined ist.

+ +
var a, b;
+
+[a=5, b=7] = [1];
+console.log(a); // 1
+console.log(b); // 7
+ +

Variablen tauschen

+ +

Zwei Variablenwerte können mit destrukturierenden Zuweisungen vertauscht werden.

+ +

Ohne destrukturierende Zuweisung benötigt man für den Tausch zweier Werte eine temporäre Variable (oder, in manchen Low-level Sprachen, den XOR-swap Trick).

+ +
var a = 1;
+var b = 3;
+
+[a, b] = [b, a];
+console.log(a); // 3
+console.log(b); // 1
+ +

Array von Funktion zurückgeben und einlesen

+ +

Es ist immer möglich einen Array von einer Funktion zurückzugeben. Destrukturierung kann mit dem Arrayrückgabewert verwendet werden um mehrerer Werte auszuwählen.

+ +

In diesem Beispiel gibt f() den Wert [1, 2] zurück, welcher in einer Zeile mittels Destrukturierung eingelesen werden kann.

+ +
function f() {
+  return [1, 2];
+}
+
+var a, b;
+[a, b] = f();
+console.log(a); // 1
+console.log(b); // 2
+
+ +

Rückgabewerte teilweise ignorieren

+ +

Man kann auch Rückgabewerte, an denen man nicht interessiert ist, ignorieren:

+ +
function f() {
+  return [1, 2, 3];
+}
+
+var [a, , b] = f();
+console.log("A ist " + a + " B ist " + b);
+
+ +

Nach Ausführung dieses Codes ist a =1 und b = 3. Der Wert 2 wird ignoriert. Auf diese Art kann man jegliche (auch alle) zurückgegebene Werte ignorieren. Zum Beispiel:

+ +
[,,] = f();
+ +

Den Rest eines Arrays einer Variablen zuweisen

+ +

Wenn ein Array destrukturiert wird, kann man beim Auspacken den restlichen Teil eines Arrays einer Varaible mit dem Restpattern zuweisen:

+ +
var [a, ...b] = [1, 2, 3];
+console.log(a); // 1
+console.log(b); // [2, 3]
+ +

Zu beachten ist, dass ein {{jsxref("SyntaxError")}} erzeugt wird, wenn auf der linken Seite des Restelements ein trennendes Komma steht:

+ +
var [a, ...b,] = [1, 2, 3];
+// SyntaxError: rest element may not have a trailing comma
+ +

Auspacken von Treffern eines regulären Ausdrucks

+ +

Wenn die Methode exec() für reguläre Ausdrücke einen Treffer findet, gibt sie ein Array zurück, das erstens, den gesamten, passenden Teil des Strings und dann die Teile des Strings enthält, die den einzelnen geklammerten Gruppen im regulären Ausdruck entsprechen. Destrukturierende erlaubt es die Teile aus diesem Array auf einfache Art herauszuziehen, wobei der String mit dem kompletten Treffer ignoriert werden kann, falls er nicht benötigt wird.

+ +
function parseProtocol(url) {
+  var parsedURL = /^(\w+)\:\/\/([^\/]+)\/(.*)$/.exec(url);
+  if(!parsedURL) {
+    return false;
+  }
+  console.log(parsedURL); // ["https://developer.mozilla.org/en-US/Web/JavaScript", "https", "developer.mozilla.org", "en-US/Web/JavaScript"]
+
+  var [, protocol, fullhost, fullpath] = parsedURL;
+  return protocol;
+}
+
+console.log(parseProtocol('https://developer.mozilla.org/en-US/Web/JavaScript')); // "https"
+
+ +

Objektdestrukturierung

+ +

Einfache Zuweisung

+ +
var o = {p: 42, q: true};
+var {p, q} = o;
+
+console.log(p); // 42
+console.log(q); // true
+
+ +

Zuweisung ohne Deklaration

+ +

Die destrukturierende Zuweisung kann ohne eine Deklaration im Zuweisungs-Statement durchgeführt werden.

+ +
var a, b;
+
+({a, b} = {a: 1, b: 2});
+ +
+

Die runden Klammern ( ... ) wird benötigt wenn man die destrukturierende Zuweisung mit Objektliteralen ohne eine Deklaration durchführen möchte.

+ +

{a, b} = {a: 1, b: 2} ist keine valide eigenständige Syntax, weil {a, b} auf der linken Seite als ein Block und nicht als Objektliteral erkannt wird.

+ +

({a, b} = {a: 1, b: 2}) ist genauso gültig wie var {a, b} = {a: 1, b: 2}

+ +

HINWEIS: Der ( ... ) Ausdruck muss durch ein vorangestelltes Semikolen benutzt werden oder es führt eine Funktion aus der vorherigen Zeile aus.

+
+ +

Zu neuen Varaiblennamen zuweisen

+ +

Eine Eigenschaft kann aus einem Objekt ausgepackt werden und zu einer Variablen mit einem anderen Namen zugewiesen werden.

+ +
var o = {p: 42, q: true};
+var {p: foo, q: bar} = o;
+
+console.log(foo); // 42
+console.log(bar); // true
+ +

Standardwerte

+ +

Einer Variablen können Standardwerte zugewiesen werden, wenn der ausgepackte Wert aus dem Objekt undefined ist.

+ +
var {a = 10, b = 5} = {a: 3};
+
+console.log(a); // 3
+console.log(b); // 5
+ +

Zuweisen eines neuen Variablennamen und eines Standardwertes

+ +

Eine Eigenschaft kann sowohl 1) aus einem Objekt ausgepackt werden und einer Variablen mit einem andern Namen zugewiesen werden und 2) einen Standardwert unterstützen, wenn der ausgepackte Wert undefined ist.

+ +
var {a:aa = 10, b:bb = 5} = {a: 3};
+
+console.log(aa); // 3
+console.log(bb); // 5
+ +

Standardwerte für Funktionsparamter setzen

+ +

ES5 Version

+ +
function drawES5Chart(options) {
+  options = options === undefined ? {} : options;
+  var size = options.size === undefined ? 'big' : options.size;
+  var cords = options.cords === undefined ? { x: 0, y: 0 } : options.cords;
+  var radius = options.radius === undefined ? 25 : options.radius;
+  console.log(size, cords, radius);
+  // jetzt zeichnen wir endlich ein paar Charts
+}
+
+drawES5Chart({
+  cords: { x: 18, y: 30 },
+  radius: 30
+});
+ +

ES2015-Version

+ +
function drawES2015Chart({size = 'big', cords = { x: 0, y: 0 }, radius = 25} = {})
+{
+  console.log(size, cords, radius);
+  // zeichne ein paar Graphen
+}
+
+drawES2015Chart({
+  cords: { x: 18, y: 30 },
+  radius: 30
+});
+ +
+

In der Funktionssignatur für drawES2015Chart oben ist der destrukturierten linken Seite ein leeres Objektliteral zugewiesen, auf der rechten Seite: {size = 'big', cords = {x: 0, y: 0}, radius = 25} = {}. Man kann die Funktion auch ohne die rechte Zuweisungsseite schreiben. Wenn jedoch die Zuweisung auf der rechten Seite weglassen wird, sucht die Funktion nach mindestens einem Argument, das beim Aufruf bereitgestellt wird, während man in der aktuellen Form einfach drawES2015Chart() aufrufen kann, ohne Parameter anzugeben. Das aktuelle Design ist nützlich, wenn man die Funktion, ohne Parameter anzugeben, aufrufen möchte. Das andere ist nützlich, um sicherzustellen , dass ein Objekt an die Funktion übergeben wird.

+
+ +

Destrukturierung von verschachtelten Objekten und Arrays

+ +
var metadata = {
+    title: "Scratchpad",
+    translations: [
+      {
+        locale: "de",
+        localization_tags: [ ],
+        last_edit: "2014-04-14T08:43:37",
+        url: "/de/docs/Tools/Scratchpad",
+        title: "JavaScript-Umgebung"
+      }
+    ],
+    url: "/en-US/docs/Tools/Scratchpad"
+};
+
+var { title: englishTitle, translations: [{ title: localeTitle }] } = metadata;
+
+console.log(englishTitle); // "Scratchpad"
+console.log(localeTitle);  // "JavaScript-Umgebung"
+ +

"for of" Iteration und Destrukturierung

+ +
var people = [
+  {
+    name: "Mike Smith",
+    family: {
+      mother: "Jane Smith",
+      father: "Harry Smith",
+      sister: "Samantha Smith"
+    },
+    age: 35
+  },
+  {
+    name: "Tom Jones",
+    family: {
+      mother: "Norah Jones",
+      father: "Richard Jones",
+      brother: "Howard Jones"
+    },
+    age: 25
+  }
+];
+
+for (var {name: n, family: { father: f } } of people) {
+  console.log("Name: " + n + ", Father: " + f);
+}
+
+// "Name: Mike Smith, Father: Harry Smith"
+// "Name: Tom Jones, Father: Richard Jones"
+ +

Auspacken von Objektfeldern, die als Funktionsparameter übergeben werden

+ +
function userId({id}) {
+  return id;
+}
+
+function whois({displayName: displayName, fullName: {firstName: name}}){
+  console.log(displayName + " is " + name);
+}
+
+var user = {
+  id: 42,
+  displayName: "jdoe",
+  fullName: {
+      firstName: "John",
+      lastName: "Doe"
+  }
+};
+
+console.log("userId: " + userId(user)); // "userId: 42"
+whois(user); // "jdoe is John"
+ +

Dies ermittelt id, displayName und firstName vom user Objekt und gibt sie aus.

+ +

Berechnete Objekteigenschaftsnamen und Destrukturierung

+ +

Berechnete Eigenschaftsnamen, wie bei Objektliteralen, können bei der Destruktierung verwendet werden.

+ +
let key = "z";
+let { [key]: foo } = { z: "bar" };
+
+console.log(foo); // "bar"
+
+ +

Rest in Objektdestrukturierung

+ +

Die Rest/Spread Eigenschaften für den ECMAScript Vorschlag (Stage 3) fügt die Rest-Syntax zur Destrukturierung hinzu. Rest Eigenschaften sammeln die restlichen, eigenen, aufzählbaren Eigenschaftsschlüssel, die noch nicht von der Destrukturierung erfasst wurden, auf.

+ +
var {a, b, ...rest} = {a: 10, b: 20, c: 30, d: 40};
+a; // 10
+b; // 20
+rest; // { c: 30, d: 40 }
+ +

Ungültige JavaScript Bezeichner als Eigenschaftsnamen

+ +

Destrukturierung kann mit Eigenschaftsnamen benutzt werden, die keine gültigen JavaScript Bezeichner sind, indem ein alternativer valider Beizeichner angegeben wird.

+ +
const foo = { 'fizz-buzz': true }
+const { 'fizz-buzz': fizzBuzz } = foo
+
+console.log(fizzBuzz); // "true"
+
+ +

Spezifikationen

+ + + + + + + + + + + + + + + + + + + + + + + + +
SpezifikationStatusKommentar
{{SpecName('ES2015', '#sec-destructuring-assignment', 'Destructuring assignment')}}{{Spec2('ES2015')}}Initiale Definition.
{{SpecName('ESDraft', '#sec-destructuring-assignment', 'Destructuring assignment')}}{{Spec2('ESDraft')}} 
Rest/Spread Properties for ECMAScriptDraftStage 3 Entwurf.
+ +

Browserkompatibilität

+ +
+ + +

{{Compat("javascript.operators.destructuring")}}

+
+ +

Siehe auch

+ + diff --git a/files/de/web/javascript/reference/operators/destrukturierende_zuweisung/index.html b/files/de/web/javascript/reference/operators/destrukturierende_zuweisung/index.html deleted file mode 100644 index 1ece290e90..0000000000 --- a/files/de/web/javascript/reference/operators/destrukturierende_zuweisung/index.html +++ /dev/null @@ -1,404 +0,0 @@ ---- -title: Destrukturierende Zuweisung -slug: Web/JavaScript/Reference/Operators/Destrukturierende_Zuweisung -tags: - - Destructuring - - ECMAScript 2015 - - JavaScript - - Operator -translation_of: Web/JavaScript/Reference/Operators/Destructuring_assignment ---- -
{{jsSidebar("Operators")}}
- -

Die destrukturierende Zuweisung ermöglicht es, Daten aus Arrays oder Objekten zu extrahieren, und zwar mit Hilfe einer Syntax, die der Konstruktion von Array- und Objekt-Literalen nachempfunden ist.

- -
{{EmbedInteractiveExample("pages/js/expressions-destructuringassignment.html")}}
- - - -

Syntax

- -
var a, b, rest;
-[a, b] = [10, 20];
-console.log(a); // 10
-console.log(b); // 20
-
-[a, b, ...rest] = [10, 20, 30, 40, 50];
-console.log(a); // 10
-console.log(b): // 20
-console.log(rest); // [30, 40, 50]
-
-({ a, b } = { a: 10, b: 20 });
-console.log(a); // 10
-console.log(b); // 20
-
-
-// Stage 3 Vorschlag
-({a, b, ...rest} = {a: 10, b: 20, c: 30, d: 40 });
-console.log(a); // 10
-console.log(b); // 20
-console.log(rest); // {c: 30, d: 40}
-
- -

Beschreibung

- -

Die Objekt- und Array-Literal Ausdrücke stellen einen einfachen Weg für die Erstellung von ad hoc Datenpaketen zur Verfügung.

- -
var x = [1, 2, 3, 4, 5];
- -

Die destrukturierende Zuweisung nutzt eine ähnliche Syntax, aber auf der linken Seite der Zuweisung, um zu definieren, welche Werte von der Quellvariablen ausgepackt werden muss.

- -
var x = [1, 2, 3, 4, 5];
-var [y, z] = x;
-console.log(y); // 1
-console.log(z); // 2
-
- -

Diese Fähigkeit ist so ähnlich wie in den Sprachen Perl und Python.

- -

Array-Destrukturierung

- -

Einfaches Variablenzuweisung

- -
var foo = ['one', 'two', 'three'];
-
-var [one, two, three] = foo;
-console.log(one); // "one"
-console.log(two); // "two"
-console.log(three); // "three"
-
- -

Zuweisung separat von Deklaration

- -

Eine destrukturierende Zuweisung kann ohne Deklaration im Zuweisungsstatement vorgenommen werden.

- -
var a, b;
-
-[a, b] = [1, 2];
-console.log(a); // 1
-console.log(b); // 2
- -

Standardwerte

- -

Einer Variablen kann ein Standardwert zugewiesen werden, welcher greift, wenn der Wert im Fall vom auspacken des Arrays undefined ist.

- -
var a, b;
-
-[a=5, b=7] = [1];
-console.log(a); // 1
-console.log(b); // 7
- -

Variablen tauschen

- -

Zwei Variablenwerte können mit destrukturierenden Zuweisungen vertauscht werden.

- -

Ohne destrukturierende Zuweisung benötigt man für den Tausch zweier Werte eine temporäre Variable (oder, in manchen Low-level Sprachen, den XOR-swap Trick).

- -
var a = 1;
-var b = 3;
-
-[a, b] = [b, a];
-console.log(a); // 3
-console.log(b); // 1
- -

Array von Funktion zurückgeben und einlesen

- -

Es ist immer möglich einen Array von einer Funktion zurückzugeben. Destrukturierung kann mit dem Arrayrückgabewert verwendet werden um mehrerer Werte auszuwählen.

- -

In diesem Beispiel gibt f() den Wert [1, 2] zurück, welcher in einer Zeile mittels Destrukturierung eingelesen werden kann.

- -
function f() {
-  return [1, 2];
-}
-
-var a, b;
-[a, b] = f();
-console.log(a); // 1
-console.log(b); // 2
-
- -

Rückgabewerte teilweise ignorieren

- -

Man kann auch Rückgabewerte, an denen man nicht interessiert ist, ignorieren:

- -
function f() {
-  return [1, 2, 3];
-}
-
-var [a, , b] = f();
-console.log("A ist " + a + " B ist " + b);
-
- -

Nach Ausführung dieses Codes ist a =1 und b = 3. Der Wert 2 wird ignoriert. Auf diese Art kann man jegliche (auch alle) zurückgegebene Werte ignorieren. Zum Beispiel:

- -
[,,] = f();
- -

Den Rest eines Arrays einer Variablen zuweisen

- -

Wenn ein Array destrukturiert wird, kann man beim Auspacken den restlichen Teil eines Arrays einer Varaible mit dem Restpattern zuweisen:

- -
var [a, ...b] = [1, 2, 3];
-console.log(a); // 1
-console.log(b); // [2, 3]
- -

Zu beachten ist, dass ein {{jsxref("SyntaxError")}} erzeugt wird, wenn auf der linken Seite des Restelements ein trennendes Komma steht:

- -
var [a, ...b,] = [1, 2, 3];
-// SyntaxError: rest element may not have a trailing comma
- -

Auspacken von Treffern eines regulären Ausdrucks

- -

Wenn die Methode exec() für reguläre Ausdrücke einen Treffer findet, gibt sie ein Array zurück, das erstens, den gesamten, passenden Teil des Strings und dann die Teile des Strings enthält, die den einzelnen geklammerten Gruppen im regulären Ausdruck entsprechen. Destrukturierende erlaubt es die Teile aus diesem Array auf einfache Art herauszuziehen, wobei der String mit dem kompletten Treffer ignoriert werden kann, falls er nicht benötigt wird.

- -
function parseProtocol(url) {
-  var parsedURL = /^(\w+)\:\/\/([^\/]+)\/(.*)$/.exec(url);
-  if(!parsedURL) {
-    return false;
-  }
-  console.log(parsedURL); // ["https://developer.mozilla.org/en-US/Web/JavaScript", "https", "developer.mozilla.org", "en-US/Web/JavaScript"]
-
-  var [, protocol, fullhost, fullpath] = parsedURL;
-  return protocol;
-}
-
-console.log(parseProtocol('https://developer.mozilla.org/en-US/Web/JavaScript')); // "https"
-
- -

Objektdestrukturierung

- -

Einfache Zuweisung

- -
var o = {p: 42, q: true};
-var {p, q} = o;
-
-console.log(p); // 42
-console.log(q); // true
-
- -

Zuweisung ohne Deklaration

- -

Die destrukturierende Zuweisung kann ohne eine Deklaration im Zuweisungs-Statement durchgeführt werden.

- -
var a, b;
-
-({a, b} = {a: 1, b: 2});
- -
-

Die runden Klammern ( ... ) wird benötigt wenn man die destrukturierende Zuweisung mit Objektliteralen ohne eine Deklaration durchführen möchte.

- -

{a, b} = {a: 1, b: 2} ist keine valide eigenständige Syntax, weil {a, b} auf der linken Seite als ein Block und nicht als Objektliteral erkannt wird.

- -

({a, b} = {a: 1, b: 2}) ist genauso gültig wie var {a, b} = {a: 1, b: 2}

- -

HINWEIS: Der ( ... ) Ausdruck muss durch ein vorangestelltes Semikolen benutzt werden oder es führt eine Funktion aus der vorherigen Zeile aus.

-
- -

Zu neuen Varaiblennamen zuweisen

- -

Eine Eigenschaft kann aus einem Objekt ausgepackt werden und zu einer Variablen mit einem anderen Namen zugewiesen werden.

- -
var o = {p: 42, q: true};
-var {p: foo, q: bar} = o;
-
-console.log(foo); // 42
-console.log(bar); // true
- -

Standardwerte

- -

Einer Variablen können Standardwerte zugewiesen werden, wenn der ausgepackte Wert aus dem Objekt undefined ist.

- -
var {a = 10, b = 5} = {a: 3};
-
-console.log(a); // 3
-console.log(b); // 5
- -

Zuweisen eines neuen Variablennamen und eines Standardwertes

- -

Eine Eigenschaft kann sowohl 1) aus einem Objekt ausgepackt werden und einer Variablen mit einem andern Namen zugewiesen werden und 2) einen Standardwert unterstützen, wenn der ausgepackte Wert undefined ist.

- -
var {a:aa = 10, b:bb = 5} = {a: 3};
-
-console.log(aa); // 3
-console.log(bb); // 5
- -

Standardwerte für Funktionsparamter setzen

- -

ES5 Version

- -
function drawES5Chart(options) {
-  options = options === undefined ? {} : options;
-  var size = options.size === undefined ? 'big' : options.size;
-  var cords = options.cords === undefined ? { x: 0, y: 0 } : options.cords;
-  var radius = options.radius === undefined ? 25 : options.radius;
-  console.log(size, cords, radius);
-  // jetzt zeichnen wir endlich ein paar Charts
-}
-
-drawES5Chart({
-  cords: { x: 18, y: 30 },
-  radius: 30
-});
- -

ES2015-Version

- -
function drawES2015Chart({size = 'big', cords = { x: 0, y: 0 }, radius = 25} = {})
-{
-  console.log(size, cords, radius);
-  // zeichne ein paar Graphen
-}
-
-drawES2015Chart({
-  cords: { x: 18, y: 30 },
-  radius: 30
-});
- -
-

In der Funktionssignatur für drawES2015Chart oben ist der destrukturierten linken Seite ein leeres Objektliteral zugewiesen, auf der rechten Seite: {size = 'big', cords = {x: 0, y: 0}, radius = 25} = {}. Man kann die Funktion auch ohne die rechte Zuweisungsseite schreiben. Wenn jedoch die Zuweisung auf der rechten Seite weglassen wird, sucht die Funktion nach mindestens einem Argument, das beim Aufruf bereitgestellt wird, während man in der aktuellen Form einfach drawES2015Chart() aufrufen kann, ohne Parameter anzugeben. Das aktuelle Design ist nützlich, wenn man die Funktion, ohne Parameter anzugeben, aufrufen möchte. Das andere ist nützlich, um sicherzustellen , dass ein Objekt an die Funktion übergeben wird.

-
- -

Destrukturierung von verschachtelten Objekten und Arrays

- -
var metadata = {
-    title: "Scratchpad",
-    translations: [
-      {
-        locale: "de",
-        localization_tags: [ ],
-        last_edit: "2014-04-14T08:43:37",
-        url: "/de/docs/Tools/Scratchpad",
-        title: "JavaScript-Umgebung"
-      }
-    ],
-    url: "/en-US/docs/Tools/Scratchpad"
-};
-
-var { title: englishTitle, translations: [{ title: localeTitle }] } = metadata;
-
-console.log(englishTitle); // "Scratchpad"
-console.log(localeTitle);  // "JavaScript-Umgebung"
- -

"for of" Iteration und Destrukturierung

- -
var people = [
-  {
-    name: "Mike Smith",
-    family: {
-      mother: "Jane Smith",
-      father: "Harry Smith",
-      sister: "Samantha Smith"
-    },
-    age: 35
-  },
-  {
-    name: "Tom Jones",
-    family: {
-      mother: "Norah Jones",
-      father: "Richard Jones",
-      brother: "Howard Jones"
-    },
-    age: 25
-  }
-];
-
-for (var {name: n, family: { father: f } } of people) {
-  console.log("Name: " + n + ", Father: " + f);
-}
-
-// "Name: Mike Smith, Father: Harry Smith"
-// "Name: Tom Jones, Father: Richard Jones"
- -

Auspacken von Objektfeldern, die als Funktionsparameter übergeben werden

- -
function userId({id}) {
-  return id;
-}
-
-function whois({displayName: displayName, fullName: {firstName: name}}){
-  console.log(displayName + " is " + name);
-}
-
-var user = {
-  id: 42,
-  displayName: "jdoe",
-  fullName: {
-      firstName: "John",
-      lastName: "Doe"
-  }
-};
-
-console.log("userId: " + userId(user)); // "userId: 42"
-whois(user); // "jdoe is John"
- -

Dies ermittelt id, displayName und firstName vom user Objekt und gibt sie aus.

- -

Berechnete Objekteigenschaftsnamen und Destrukturierung

- -

Berechnete Eigenschaftsnamen, wie bei Objektliteralen, können bei der Destruktierung verwendet werden.

- -
let key = "z";
-let { [key]: foo } = { z: "bar" };
-
-console.log(foo); // "bar"
-
- -

Rest in Objektdestrukturierung

- -

Die Rest/Spread Eigenschaften für den ECMAScript Vorschlag (Stage 3) fügt die Rest-Syntax zur Destrukturierung hinzu. Rest Eigenschaften sammeln die restlichen, eigenen, aufzählbaren Eigenschaftsschlüssel, die noch nicht von der Destrukturierung erfasst wurden, auf.

- -
var {a, b, ...rest} = {a: 10, b: 20, c: 30, d: 40};
-a; // 10
-b; // 20
-rest; // { c: 30, d: 40 }
- -

Ungültige JavaScript Bezeichner als Eigenschaftsnamen

- -

Destrukturierung kann mit Eigenschaftsnamen benutzt werden, die keine gültigen JavaScript Bezeichner sind, indem ein alternativer valider Beizeichner angegeben wird.

- -
const foo = { 'fizz-buzz': true }
-const { 'fizz-buzz': fizzBuzz } = foo
-
-console.log(fizzBuzz); // "true"
-
- -

Spezifikationen

- - - - - - - - - - - - - - - - - - - - - - - - -
SpezifikationStatusKommentar
{{SpecName('ES2015', '#sec-destructuring-assignment', 'Destructuring assignment')}}{{Spec2('ES2015')}}Initiale Definition.
{{SpecName('ESDraft', '#sec-destructuring-assignment', 'Destructuring assignment')}}{{Spec2('ESDraft')}} 
Rest/Spread Properties for ECMAScriptDraftStage 3 Entwurf.
- -

Browserkompatibilität

- -
- - -

{{Compat("javascript.operators.destructuring")}}

-
- -

Siehe auch

- - diff --git a/files/de/web/javascript/reference/operators/increment/index.html b/files/de/web/javascript/reference/operators/increment/index.html new file mode 100644 index 0000000000..74289b92e1 --- /dev/null +++ b/files/de/web/javascript/reference/operators/increment/index.html @@ -0,0 +1,80 @@ +--- +title: Inkrement (++) +slug: Web/JavaScript/Reference/Operators/Inkrement +tags: + - Inkrement + - Inkrement-Operator + - Inkrementieren +translation_of: Web/JavaScript/Reference/Operators/Increment +--- +
{{jsSidebar("Operators")}}
+ +

Der Inkrement-Operator (++) inkrementiert einen Operanden, addiert also eins hinzu und gibt einen Wert zurück.

+ +
{{EmbedInteractiveExample("pages/js/expressions-increment.html")}}
+ + + +

Syntax

+ +
Operator: x++ or ++x
+
+ +

Description

+ +

Wird der Inkrement-Operator als Postfix benutzt, wobei der Operator hinter dem Operanden steht (z.B. x++), wird der Operand um eins erhöht und der Wert vor dem Inkrementieren zurück gegeben.

+ +

Wird der Inkrement-Operator als Prefix benutzt, wobei der Operator vor dem Operanden steht (z.B. ++x), wird der Operand um eins erhöht und der Wert nach dem Inkrementieren  zurück gegeben.

+ +

Examples

+ +

Postfix increment

+ +
let x = 3;
+y = x++;
+
+// y = 3
+// x = 4
+
+ +

Prefix increment

+ +
let a = 2;
+b = ++a;
+
+// a = 3
+// b = 3
+
+ +

Specifications

+ + + + + + + + + + +
Specification
{{SpecName('ESDraft', '#sec-postfix-increment-operator', 'Increment operator')}}
+ +

Browser compatibility

+ + + +

{{Compat("javascript.operators.increment")}}

+ +

See also

+ + diff --git a/files/de/web/javascript/reference/operators/inkrement/index.html b/files/de/web/javascript/reference/operators/inkrement/index.html deleted file mode 100644 index 74289b92e1..0000000000 --- a/files/de/web/javascript/reference/operators/inkrement/index.html +++ /dev/null @@ -1,80 +0,0 @@ ---- -title: Inkrement (++) -slug: Web/JavaScript/Reference/Operators/Inkrement -tags: - - Inkrement - - Inkrement-Operator - - Inkrementieren -translation_of: Web/JavaScript/Reference/Operators/Increment ---- -
{{jsSidebar("Operators")}}
- -

Der Inkrement-Operator (++) inkrementiert einen Operanden, addiert also eins hinzu und gibt einen Wert zurück.

- -
{{EmbedInteractiveExample("pages/js/expressions-increment.html")}}
- - - -

Syntax

- -
Operator: x++ or ++x
-
- -

Description

- -

Wird der Inkrement-Operator als Postfix benutzt, wobei der Operator hinter dem Operanden steht (z.B. x++), wird der Operand um eins erhöht und der Wert vor dem Inkrementieren zurück gegeben.

- -

Wird der Inkrement-Operator als Prefix benutzt, wobei der Operator vor dem Operanden steht (z.B. ++x), wird der Operand um eins erhöht und der Wert nach dem Inkrementieren  zurück gegeben.

- -

Examples

- -

Postfix increment

- -
let x = 3;
-y = x++;
-
-// y = 3
-// x = 4
-
- -

Prefix increment

- -
let a = 2;
-b = ++a;
-
-// a = 3
-// b = 3
-
- -

Specifications

- - - - - - - - - - -
Specification
{{SpecName('ESDraft', '#sec-postfix-increment-operator', 'Increment operator')}}
- -

Browser compatibility

- - - -

{{Compat("javascript.operators.increment")}}

- -

See also

- - diff --git a/files/de/web/javascript/reference/operators/logische_operatoren/index.html b/files/de/web/javascript/reference/operators/logische_operatoren/index.html deleted file mode 100644 index 6a20e85b79..0000000000 --- a/files/de/web/javascript/reference/operators/logische_operatoren/index.html +++ /dev/null @@ -1,247 +0,0 @@ ---- -title: Logische Operatoren -slug: Web/JavaScript/Reference/Operators/Logische_Operatoren -tags: - - JavaScript - - Logic - - Logical Operators - - Not - - Operator - - Reference - - and - - or -translation_of: Web/JavaScript/Reference/Operators -translation_of_original: Web/JavaScript/Reference/Operators/Logical_Operators ---- -
{{jsSidebar("Operators")}}
- -

Logische Operatoren werden typischerweise im Zusammenhang mit {{jsxref("Boolean")}} (logischen) Werten verwendet. Die Operatoren && (Logisches UND) und || (Logisches ODER) geben dabei den Wert von einem der Operanden zurück. Sind die Operanden mit nicht-booleschen Werten belegt, geben diese Operatoren entsprechend nicht-boolesche Werte zurück.

- -
{{EmbedInteractiveExample("pages/js/expressions-logicaloperator.html")}}
- - - -

Beschreibung

- -

In der folgenden Tabelle werden die logischen Operatoren erläutert.

- - - - - - - - - - - - - - - - - - - - - - - - -
OperatorVerwendungBeschreibung
Logisches UND (&&)ausdruck1 && ausdruck2Gibt ausdruck1 zurück, wenn er zu false konvertiert werden kann; anderfalls wird ausdruck2 zurückgegeben. Sind beide Operanden true, gibt && true zurück, Andernfalls false.
Logisches ODER (||)ausdruck1 || ausdruck2Gibt ausdruck1 zurück, wenn er zu true konvertiert werden kann; andernfalls wird ausdruck2 zurückgegeben. Ist einer der Operanden true, gibt || true zurück.
Logisches NICHT (!)!ausdruckGibt false zurück, wenn der Operand zu true konvertiert werden kann. Andernfalls wird true zurückgegeben.
- -

Wenn ein Wert zu true konvertiert werden kann, wird er {{Glossary("truthy")}} genannt. Wenn ein Wert zu false konvertiert werden kann, wird er {{Glossary("falsy")}} genannt.

- -

Beispiele für Ausdrücke, die zu false konvertiert werden können:

- - - -

Auch wenn die Operatoren && und || mit nichtbooleschen Operanden verwendet werden können, gehören sie trotzdem zur Gruppe der logischen Operatoren, da ihre Rückgabewerte immer zu booleschen Werten konvertiert werden können.

- -

Kurschlussauswertung (Short-Circuit Evaluation)

- -

Logische Ausdrücke werden von links nach rechts ausgewertet und hierbei wird anhand der folgenden Regeln getestet, ob Kurzschlussauswertungen möglich sind:

- - - -

Die Regeln der Logik garantieren, dass diese Auswertungen immer korrekt sind. Zu beachten ist, dass der irgendwas Teil nicht ausgewertet wird, so dass keine Seiteneffekte die von diesem Teil ausgehen ausgeführt werden. Zu beachten ist zudem, dass der irgendwas Teil ein einzelner Ausdruck ist (wie die Klammern anzeigen).

- -

Beispielhaft betrachten wir die folgenden äquivalenten Funktionen:

- -
function shortCircuitEvaluation() {
-  // Logisches ODER (||)
-  doSomething() || doSomethingElse();
-
-  // Logisches UND (&&)
-  doSomething() && doSomethingElse();
-}
-
-function equivalentEvaluation() {
-
-  // Logisches ODER (||)
-  var orFlag = doSomething();
-  if (!orFlag) {
-    doSomethingElse();
-  }
-
-  // Logisches UND (&&)
-  var andFlag = doSomething();
-  if (andFlag) {
-    doSomethingElse();
-  }
-}
-
- -

Die folgenden Ausdrücke sind aufgrund der Operatorrangfolgen nicht äquivalent und betont, wie wichtig es ist, dass der rechte Operand ein einzelner Ausdruck ist (gruppiert, falls in Klammern erforderlich).

- -
false &&  true || true      // wird zu true
-false && (true || true)     // wird zu false
- -

Logisches UND (&&)

- -

Im Folgenden sind Beispiele des && (logisches UND) Operators zu sehen.

- -
a1 = true  && true      // t && t wird zu true
-a2 = true  && false     // t && f wird zu false
-a3 = false && true      // f && t wird zu false
-a4 = false && (3 == 4)  // f && f wird zu false
-a5 = 'Cat' && 'Dog'     // t && t wird zu "Dog"
-a6 = false && 'Cat'     // f && t wird zu false
-a7 = 'Cat' && false     // t && f wird zu false
-a8 = ''    && false     // f && f wird zu ""
-a9 = false && ''        // f && f wird zu false
-
- -

Logisches ODER (||)

- -

Im Folgenden sind Beispiele des || (logisches ODER) Operators zu sehen.

- -
o1 = true  || true       // t || t wird zu true
-o2 = false || true       // f || t wird zu true
-o3 = true  || false      // t || f wird zu true
-o4 = false || (3 == 4)   // f || f wird zu false
-o5 = 'Cat' || 'Dog'      // t || t wird zu "Cat"
-o6 = false || 'Cat'      // f || t wird zu "Cat"
-o7 = 'Cat' || false      // t || f wird zu "Cat"
-o8 = ''    || false      // f || f wird zu false
-o9 = false || ''         // f || f wird zu ""
-
- -

Logisches NICHT (!)

- -

Im Folgenden sind Beispiele des ! (logisches NICHT) Operators zu sehen.

- -
n1 = !true              // !t wird zu false
-n2 = !false             // !f wird zu true
-n3 = !"Cat"             // !t wird zu false
-
- -

Konvertierungsregeln

- -

Konvertierung von UND zu ODER

- -

Die folgende Operation nutzt Booleane:

- -
bCondition1 && bCondition2
- -

ist äquivalent zum folgenden Ausdruck:

- -
!(!bCondition1 || !bCondition2)
- -

Konvertierung von ODER zu UND

- -

Die folgende Operation nutzt Booleane:

- -
bCondition1 || bCondition2
- -

ist äquivalent zu folgendem Ausdruck:

- -
!(!bCondition1 && !bCondition2)
- -

Negierung des logischen NICHT

- -

Die folgende Operation nutzt Booleane:

- -
!!bCondition
- -

ist äquivalent mit:

- -
bCondition
- -

Klammern in logischen Ausdrücken auflösen

- -

Ein logischer Ausdruck wird von links nach rechts ausgewertet. Es ist immer möglich runde Klammern von einem komplexen Ausdruck zu entfernen, wenn einige Regeln beachtet werden.

- -

Geschachteltes AND entfernen

- -

Die folgende Operation nutzt Booleane:

- -
bCondition1 || (bCondition2 && bCondition3)
- -

ist äquivalent mit:

- -
bCondition1 || bCondition2 && bCondition3
- -

Geschachteltes OR entfernen

- -

Die folgende Operation nutzt Booleane:

- -
bCondition1 && (bCondition2 || bCondition3)
- -

ist äquivalent mit:

- -
!(!bCondition1 || !bCondition2 && !bCondition3)
- -

Spezifikationen

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SpezifikationStatusKommentar
{{SpecName('ES1')}}{{Spec2('ES1')}}Initiale Definition.
{{SpecName('ES5.1', '#sec-11.11')}}{{Spec2('ES5.1')}}Definiert in mehreren Kapiteln der Spezifikation: Logical NOT Operator, Binary Logical Operators
{{SpecName('ES6', '#sec-binary-logical-operators')}}{{Spec2('ES6')}}Definiert in mehreren Kapiteln der Spezifikation: Logical NOT Operator, Binary Logical Operators
{{SpecName('ESDraft', '#sec-binary-logical-operators')}}{{Spec2('ESDraft')}}Definiert in mehreren Kapiteln der Spezifikation: Logical NOT Operator, Binary Logical Operators
- -

Browserkompatibilität

- - - -

{{Compat("javascript.operators.logical")}}

- -

Siehe auch

- - diff --git a/files/de/web/javascript/reference/operators/modulo/index.html b/files/de/web/javascript/reference/operators/modulo/index.html deleted file mode 100644 index 19403ab883..0000000000 --- a/files/de/web/javascript/reference/operators/modulo/index.html +++ /dev/null @@ -1,78 +0,0 @@ ---- -title: Modulo (%) -slug: Web/JavaScript/Reference/Operators/Modulo -tags: - - Division mit Rest - - Divisionsalgorithmus - - Restwert - - Restwertberechnung -translation_of: Web/JavaScript/Reference/Operators/Remainder ---- -
{{jsSidebar("Operators")}}
- -

Der Modulo-Operator (%) gibt den Restwert zurück, der übrig bleibt wenn ein Operand durch einen anderen geteilt wird. Das Vorzeichen ergibt sich aus der Wahl der Quotienten.

- -
{{EmbedInteractiveExample("pages/js/expressions-remainder.html")}}
- -
- - - -

Syntax

- -
Operator: var1 % var2
-
- -

Examples

- -

Remainder with positive dividend

- -
 12 % 5  //  2
- 1 % -2 //  1
- 1 % 2  //  1
- 2 % 3  //  2
-5.5 % 2 // 1.5
-
- -

Remainder with negative dividend

- -
-12 % 5 // -2
--1 % 2  // -1
--4 % 2  // -0
- -

Remainder with NaN

- -
NaN % 2 // NaN
- -

Specifications

- - - - - - - - - - -
Specification
{{SpecName('ESDraft', '#sec-multiplicative-operators', 'Remainder operator')}}
- -

Browser compatibility

- - - -

{{Compat("javascript.operators.remainder")}}

- -

See also

- - diff --git a/files/de/web/javascript/reference/operators/object_initializer/index.html b/files/de/web/javascript/reference/operators/object_initializer/index.html new file mode 100644 index 0000000000..32c30b7f16 --- /dev/null +++ b/files/de/web/javascript/reference/operators/object_initializer/index.html @@ -0,0 +1,315 @@ +--- +title: Objekt Initialisierer +slug: Web/JavaScript/Reference/Operators/Objekt_Initialisierer +tags: + - ECMAScript 2015 + - JSON + - JavaScript + - Literal + - Methods + - Object + - Primary Expression + - computed + - mutation + - properties +translation_of: Web/JavaScript/Reference/Operators/Object_initializer +--- +
{{JsSidebar("Operators")}}
+ +

Objekte können mit new Object(), Object.create(), oder mit der literal Notation (Initialisierungs Notation) initialisiert werden. Ein Objekt Initialisierer ist eine Komma getrennte Liste von null oder mehreren Paaren von Eigenschafts-Namen und zugehörigen Werten eines Objektes, eingeschlossen in geschwungene Klammern ({}).

+ +
{{EmbedInteractiveExample("pages/js/expressions-objectinitializer.html")}}
+ + + +

Syntax

+ +
var o = {};
+var o = { a: "foo", b: 42, c: {} };
+
+var a = "foo", b = 42, c = {};
+var o = { a: a, b: b, c: c };
+
+var o = {
+  property: function ([parameters]) {},
+  get property() {},
+  set property(value) {},
+};
+
+ +

Neue Schreibweisen in ECMAScript 2015

+ +

Man sollte in der Kompatibilitätstabelle die Unterstützung dieser Schreibweisen nachschlagen. In Umgebungen, die diese nicht unterstützen, entstehen Syntaxfehler.

+ +
// Kurzschreibweisen für Eigenschaftsnamen (ES2015)
+var a = "foo", b = 42, c = {};
+var o = { a, b, c };
+
+// Kurzschreibweise Methoden Namen (ES2015)
+var o = {
+  property([parameters]) {}
+};
+
+// Berechnete Eigenschaftsnamen (ES2015)
+var prop = "foo";
+var o = {
+  [prop]: "hey",
+  ["b" + "ar"]: "there",
+};
+ +

Beschreibung

+ +

Ein Objekt Initialisierer ist ein Ausdruck welcher die Initialisierung eines {{jsxref("Object")}} beschreibt. Objekte bestehen aus Eigenschaften, welche verwendet werden, um ein Objekt zu beschreiben. Die Werte der Objekt Eigenschaften können {{Glossary("primitive")}} Datentypen oder andere Objekte enthalten.

+ +

Objekte erzeugen

+ +

Ein leeres Objekt ohne Eigenschaften kann wie folgt erzeugt werden:

+ +
var object = {};
+ +

Jedoch: die Vorteile der literalen oder Initialisierer Notation versetzen Sie in die Lage, Objekte inklusive Eigenschaften, innerhalb geschwungener Klammern, schneller zu erzeugen. Sie schreiben einfach eine Liste von Schlüssel:Werte Paaren, getrennt durch ein Komma. Der folgende Quellcode erzeugt ein Objekt mit drei Eigenschaften mit den Schlüsseln "foo", "age" und "baz"Die Werte dieser Schlüssel sind: die Zeichenkette "bar", die Zahl 42 und die dritte Eigenschaft hat ein anderes Objekt als Wert.

+ +
var object = {
+  foo: "bar",
+  age: 42,
+  baz: { myProp: 12 },
+}
+ +

Auf Eigenschaften zugreifen

+ +

Sobald ein Objekt erzeugt worden ist, möchte man auf seine Eigenschaften lesend oder schreibend zugreifen. Auf die Eigenschaften eines Objektes kann mit der Punktnotation oder der Klammer-Notation zugegriffen werden. Siehe Eigenschaftszugriffe für weiter Informationen.

+ +
object.foo; // "bar"
+object["age"]; // 42
+
+object.foo = "baz";
+
+ +

Eigenschaften definieren

+ +

Wir haben bereits gelernt, wie man Eigenschaften mit Hilfe der Initialisierungs Syntax schreibt. Oft gibt es Variablen im Code, die Sie in einem Objekt verwenden möchten. Man sieht oft Quellcode wie den folgenden:

+ +
var a = "foo",
+    b = 42,
+    c = {};
+
+var o = {
+  a: a,
+  b: b,
+  c: c
+};
+ +

Mit ECMAScript 2015 ist eine kürzere Schreibweise verfügbar, um das Gleiche zu erreichen:

+ +
var a = "foo",
+    b = 42,
+    c = {};
+
+// Kurzschreibweise für Eigenschaftsnamen in ES2015
+var o = { a, b, c };
+
+// In anderen Worten
+console.log(); // true
+ +

Doppelte Eigenschaftsnamen

+ +

Bei Verwendung des gleichen Namens für Ihre Eigenschaften, wird die zweite Eigenschaft die erste überschreiben.

+ +
var a = {x: 1, x: 2};
+console.log(a); // { x: 2}
+
+ +

Im strikten Modus von ECMAScript 5 wurden doppelte Eigenschaftsnamen als {{jsxref("SyntaxError")}} gewertet. Mit der Einführung von berechneten Eigenschaftsnamen in ECMAScript 2015 wurde diese Einschränkung entfernt, was Duplikate zur Laufzeit möglich macht.

+ +
function haveES2015DuplicatePropertySemantics(){
+  "use strict";
+  try {
+    ({ prop: 1, prop: 2 });
+
+    // No error thrown, duplicate property names allowed in strict mode
+    return true;
+  } catch (e) {
+    // Error thrown, duplicates prohibited in strict mode
+    return false;
+  }
+}
+ +

Methoden Definitionen

+ +

Eine Eigenschaft eines Objekts kann auch auf eine Funktion oder einen Getter oder Setter-Methode verweisen.

+ +
var o = {
+  property: function ([parameters]) {},
+  get property() {},
+  set property(value) {},
+};
+ +

In ECMAScript 2015 gibt es eine kürzere Schreibweise, mit der das Schlüsselwort "function" überflüssig wird.

+ +
// Kurzschreibweise für Methoden Namen (ES2015)
+var o = {
+  property([parameters]) {},
+  * generator() {}
+};
+ +

In ECMAScript 2015 gibt es eine Möglichkeit Eigenschaften mit einer Generatorfunktion zu definierten:

+ +
var o = {
+  *generator() {
+    ........
+  }
+};
+ +

Diese ist gleich zur ES5 ähnlichen Notation (aber ECMAScript 5 hat keine Generatorfunktionen):

+ +
var o = {
+  generator = function* () {
+    ........
+  }
+}
+ +

Für weitere Informationen und Beispiele zu Methoden, siehe Methodendefinitionen.

+ +

Berechnete Bezeichnernamen

+ +

Beginnend mit ECMAScript 2015, unterstützt die Objekt Initialisierer Syntax auch berechnete Bezeichnernamen für Objekt Eigenschaften. Das gestatt dem Programmierer einen Ausdruck in eckigen Klammern anzugeben, aus welchem der Bezeichnernamen für die Objekt Eigenschaft berechnet wird. Die Schreibweise dafür ist analog zu der Klammer-Notation für den Zugriff auf Objekt Eigenschaften welche Sie bereits benutzt haben. Dieselbe Syntax kann nun für Eigenschaften Bezeichner verwendet werden:

+ +
// Computed property names (ES2015)
+var i = 0;
+var a = {
+  ["foo" + ++i]: i,
+  ["foo" + ++i]: i,
+  ["foo" + ++i]: i
+};
+
+console.log(a.foo1); // 1
+console.log(a.foo2); // 2
+console.log(a.foo3); // 3
+
+var param = 'size';
+var config = {
+  [param]: 12,
+  ["mobile" + param.charAt(0).toUpperCase() + param.slice(1)]: 4
+};
+
+console.log(config); // { size: 12, mobileSize: 4 }
+ +

Spread Eigenschaften

+ +

Die Vorschlag von Rest/Spread Eigenschaft für ECMAScript (Stage 4) fügt Spread Eigenschaften zu Objektliteralen hinzu. Er kopiert eigene aufzählbare Eigenschaften des genutzten Objektes in ein neues Objekt.

+ +

Oberflächliches Clonen (ausgenommen Eigenschaften) oder Verschmelzen von Objekten ist nun mit einer Kürzeren Syntax als {{jsxref("Object.assign()")}} möglich.

+ +
var obj1 = { foo: 'bar', x: 42 };
+var obj2 = { foo: 'baz', y: 13 };
+
+var clonedObj = { ...obj1 };
+// Object { foo: 'bar', x: 42 };
+
+var mergeObj = { ...obj1, ...obj2 };
+// Object { foo: 'baz', x: 42, y: 13 }
+ +

Zu beachten ist, dass {{jsxref("Object.assign()")}} Setters benutzt, was der Spread Operator nicht macht.

+ +

Prototypmutationen

+ +

Eine Eigenschaft Definition der Form __proto__: Wert oder "__proto__": Wert erzeugt keine Eigenschaft mit dem Namen __proto__. Wenn der angegebene Wert ein Objekt oder null ist, wird stattdessen der [[Prototyp]] des erzeugten Objektes auf den angegebenen Wert geändert. (Das Objekt wird nicht verändert, falls der Wert kein Objekt oder null ist.)

+ +
var obj1 = {};
+assert(Object.getPrototypeOf(obj1) === Object.prototype);
+
+var obj2 = { __proto__: null };
+assert(Object.getPrototypeOf(obj2) === null);
+
+var protoObj = {};
+var obj3 = { "__proto__": protoObj };
+assert(Object.getPrototypeOf(obj3) === protoObj);
+
+var obj4 = { __proto__: "not an object or null" };
+assert(Object.getPrototypeOf(obj4) === Object.prototype);
+assert(!obj4.hasOwnProperty("__proto__"));
+
+ +

Pro Objekt-Literal ist nur eine einzelne Prototypmutation erlaubt: mehrfache Prototyp Mutationen führen zu einem Syntax Fehler.

+ +

Eigenschaftsdefinitionen welche nicht von der Doppelpunkt Notation Gebrauch machen, sind keine Prototyp Mutationen: es sind Eigenschaftsdefinitionen die sich verhalten wie jede andere Definition von Eigenschaftsbezeichnern auch.

+ +
var __proto__ = "variable";
+
+var obj1 = { __proto__ };
+assert(Object.getPrototypeOf(obj1) === Object.prototype);
+assert(obj1.hasOwnProperty("__proto__"));
+assert(obj1.__proto__ === "variable");
+
+var obj2 = { __proto__() { return "hello"; } };
+assert(obj2.__proto__() === "hello");
+
+var obj3 = { ["__prot" + "o__"]: 17 };
+assert(obj3.__proto__ === 17);
+
+ +

Objektliteral-Notation vs JSON

+ +

Die Objekt-Literal Notation ist nicht dasselbe wie die JavaScript Object Notation (JSON). Obwohl sie ähnlich aussehen, gibt es Unterschiede zwischen ihnen:

+ + + +

Spezifikationen

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpezifikationStatusKommentar
{{SpecName('ES1')}}{{Spec2('ES1')}}Initiale Definition.
{{SpecName('ES5.1', '#sec-11.1.5', 'Object Initializer')}}{{Spec2('ES5.1')}}Getter und Setter hinzugefügt.
{{SpecName('ES2015', '#sec-object-initializer', 'Object Initializer')}}{{Spec2('ES2015')}}Kurzschreibweise für Methoden-/Eigenschaftsnamen und berechnete Eigenschaftsnamen hinzugefügt.
{{SpecName('ESDraft', '#sec-object-initializer', 'Object Initializer')}}{{Spec2('ESDraft')}}
Rest/Spread Properties for ECMAScript EntwurfStage 4 (Fertig).
+ +

Browserkompatibilität

+ +
+ + +

{{Compat("javascript.operators.object_initializer")}}

+
+ +

Siehe auch

+ + diff --git a/files/de/web/javascript/reference/operators/objekt_initialisierer/index.html b/files/de/web/javascript/reference/operators/objekt_initialisierer/index.html deleted file mode 100644 index 32c30b7f16..0000000000 --- a/files/de/web/javascript/reference/operators/objekt_initialisierer/index.html +++ /dev/null @@ -1,315 +0,0 @@ ---- -title: Objekt Initialisierer -slug: Web/JavaScript/Reference/Operators/Objekt_Initialisierer -tags: - - ECMAScript 2015 - - JSON - - JavaScript - - Literal - - Methods - - Object - - Primary Expression - - computed - - mutation - - properties -translation_of: Web/JavaScript/Reference/Operators/Object_initializer ---- -
{{JsSidebar("Operators")}}
- -

Objekte können mit new Object(), Object.create(), oder mit der literal Notation (Initialisierungs Notation) initialisiert werden. Ein Objekt Initialisierer ist eine Komma getrennte Liste von null oder mehreren Paaren von Eigenschafts-Namen und zugehörigen Werten eines Objektes, eingeschlossen in geschwungene Klammern ({}).

- -
{{EmbedInteractiveExample("pages/js/expressions-objectinitializer.html")}}
- - - -

Syntax

- -
var o = {};
-var o = { a: "foo", b: 42, c: {} };
-
-var a = "foo", b = 42, c = {};
-var o = { a: a, b: b, c: c };
-
-var o = {
-  property: function ([parameters]) {},
-  get property() {},
-  set property(value) {},
-};
-
- -

Neue Schreibweisen in ECMAScript 2015

- -

Man sollte in der Kompatibilitätstabelle die Unterstützung dieser Schreibweisen nachschlagen. In Umgebungen, die diese nicht unterstützen, entstehen Syntaxfehler.

- -
// Kurzschreibweisen für Eigenschaftsnamen (ES2015)
-var a = "foo", b = 42, c = {};
-var o = { a, b, c };
-
-// Kurzschreibweise Methoden Namen (ES2015)
-var o = {
-  property([parameters]) {}
-};
-
-// Berechnete Eigenschaftsnamen (ES2015)
-var prop = "foo";
-var o = {
-  [prop]: "hey",
-  ["b" + "ar"]: "there",
-};
- -

Beschreibung

- -

Ein Objekt Initialisierer ist ein Ausdruck welcher die Initialisierung eines {{jsxref("Object")}} beschreibt. Objekte bestehen aus Eigenschaften, welche verwendet werden, um ein Objekt zu beschreiben. Die Werte der Objekt Eigenschaften können {{Glossary("primitive")}} Datentypen oder andere Objekte enthalten.

- -

Objekte erzeugen

- -

Ein leeres Objekt ohne Eigenschaften kann wie folgt erzeugt werden:

- -
var object = {};
- -

Jedoch: die Vorteile der literalen oder Initialisierer Notation versetzen Sie in die Lage, Objekte inklusive Eigenschaften, innerhalb geschwungener Klammern, schneller zu erzeugen. Sie schreiben einfach eine Liste von Schlüssel:Werte Paaren, getrennt durch ein Komma. Der folgende Quellcode erzeugt ein Objekt mit drei Eigenschaften mit den Schlüsseln "foo", "age" und "baz"Die Werte dieser Schlüssel sind: die Zeichenkette "bar", die Zahl 42 und die dritte Eigenschaft hat ein anderes Objekt als Wert.

- -
var object = {
-  foo: "bar",
-  age: 42,
-  baz: { myProp: 12 },
-}
- -

Auf Eigenschaften zugreifen

- -

Sobald ein Objekt erzeugt worden ist, möchte man auf seine Eigenschaften lesend oder schreibend zugreifen. Auf die Eigenschaften eines Objektes kann mit der Punktnotation oder der Klammer-Notation zugegriffen werden. Siehe Eigenschaftszugriffe für weiter Informationen.

- -
object.foo; // "bar"
-object["age"]; // 42
-
-object.foo = "baz";
-
- -

Eigenschaften definieren

- -

Wir haben bereits gelernt, wie man Eigenschaften mit Hilfe der Initialisierungs Syntax schreibt. Oft gibt es Variablen im Code, die Sie in einem Objekt verwenden möchten. Man sieht oft Quellcode wie den folgenden:

- -
var a = "foo",
-    b = 42,
-    c = {};
-
-var o = {
-  a: a,
-  b: b,
-  c: c
-};
- -

Mit ECMAScript 2015 ist eine kürzere Schreibweise verfügbar, um das Gleiche zu erreichen:

- -
var a = "foo",
-    b = 42,
-    c = {};
-
-// Kurzschreibweise für Eigenschaftsnamen in ES2015
-var o = { a, b, c };
-
-// In anderen Worten
-console.log(); // true
- -

Doppelte Eigenschaftsnamen

- -

Bei Verwendung des gleichen Namens für Ihre Eigenschaften, wird die zweite Eigenschaft die erste überschreiben.

- -
var a = {x: 1, x: 2};
-console.log(a); // { x: 2}
-
- -

Im strikten Modus von ECMAScript 5 wurden doppelte Eigenschaftsnamen als {{jsxref("SyntaxError")}} gewertet. Mit der Einführung von berechneten Eigenschaftsnamen in ECMAScript 2015 wurde diese Einschränkung entfernt, was Duplikate zur Laufzeit möglich macht.

- -
function haveES2015DuplicatePropertySemantics(){
-  "use strict";
-  try {
-    ({ prop: 1, prop: 2 });
-
-    // No error thrown, duplicate property names allowed in strict mode
-    return true;
-  } catch (e) {
-    // Error thrown, duplicates prohibited in strict mode
-    return false;
-  }
-}
- -

Methoden Definitionen

- -

Eine Eigenschaft eines Objekts kann auch auf eine Funktion oder einen Getter oder Setter-Methode verweisen.

- -
var o = {
-  property: function ([parameters]) {},
-  get property() {},
-  set property(value) {},
-};
- -

In ECMAScript 2015 gibt es eine kürzere Schreibweise, mit der das Schlüsselwort "function" überflüssig wird.

- -
// Kurzschreibweise für Methoden Namen (ES2015)
-var o = {
-  property([parameters]) {},
-  * generator() {}
-};
- -

In ECMAScript 2015 gibt es eine Möglichkeit Eigenschaften mit einer Generatorfunktion zu definierten:

- -
var o = {
-  *generator() {
-    ........
-  }
-};
- -

Diese ist gleich zur ES5 ähnlichen Notation (aber ECMAScript 5 hat keine Generatorfunktionen):

- -
var o = {
-  generator = function* () {
-    ........
-  }
-}
- -

Für weitere Informationen und Beispiele zu Methoden, siehe Methodendefinitionen.

- -

Berechnete Bezeichnernamen

- -

Beginnend mit ECMAScript 2015, unterstützt die Objekt Initialisierer Syntax auch berechnete Bezeichnernamen für Objekt Eigenschaften. Das gestatt dem Programmierer einen Ausdruck in eckigen Klammern anzugeben, aus welchem der Bezeichnernamen für die Objekt Eigenschaft berechnet wird. Die Schreibweise dafür ist analog zu der Klammer-Notation für den Zugriff auf Objekt Eigenschaften welche Sie bereits benutzt haben. Dieselbe Syntax kann nun für Eigenschaften Bezeichner verwendet werden:

- -
// Computed property names (ES2015)
-var i = 0;
-var a = {
-  ["foo" + ++i]: i,
-  ["foo" + ++i]: i,
-  ["foo" + ++i]: i
-};
-
-console.log(a.foo1); // 1
-console.log(a.foo2); // 2
-console.log(a.foo3); // 3
-
-var param = 'size';
-var config = {
-  [param]: 12,
-  ["mobile" + param.charAt(0).toUpperCase() + param.slice(1)]: 4
-};
-
-console.log(config); // { size: 12, mobileSize: 4 }
- -

Spread Eigenschaften

- -

Die Vorschlag von Rest/Spread Eigenschaft für ECMAScript (Stage 4) fügt Spread Eigenschaften zu Objektliteralen hinzu. Er kopiert eigene aufzählbare Eigenschaften des genutzten Objektes in ein neues Objekt.

- -

Oberflächliches Clonen (ausgenommen Eigenschaften) oder Verschmelzen von Objekten ist nun mit einer Kürzeren Syntax als {{jsxref("Object.assign()")}} möglich.

- -
var obj1 = { foo: 'bar', x: 42 };
-var obj2 = { foo: 'baz', y: 13 };
-
-var clonedObj = { ...obj1 };
-// Object { foo: 'bar', x: 42 };
-
-var mergeObj = { ...obj1, ...obj2 };
-// Object { foo: 'baz', x: 42, y: 13 }
- -

Zu beachten ist, dass {{jsxref("Object.assign()")}} Setters benutzt, was der Spread Operator nicht macht.

- -

Prototypmutationen

- -

Eine Eigenschaft Definition der Form __proto__: Wert oder "__proto__": Wert erzeugt keine Eigenschaft mit dem Namen __proto__. Wenn der angegebene Wert ein Objekt oder null ist, wird stattdessen der [[Prototyp]] des erzeugten Objektes auf den angegebenen Wert geändert. (Das Objekt wird nicht verändert, falls der Wert kein Objekt oder null ist.)

- -
var obj1 = {};
-assert(Object.getPrototypeOf(obj1) === Object.prototype);
-
-var obj2 = { __proto__: null };
-assert(Object.getPrototypeOf(obj2) === null);
-
-var protoObj = {};
-var obj3 = { "__proto__": protoObj };
-assert(Object.getPrototypeOf(obj3) === protoObj);
-
-var obj4 = { __proto__: "not an object or null" };
-assert(Object.getPrototypeOf(obj4) === Object.prototype);
-assert(!obj4.hasOwnProperty("__proto__"));
-
- -

Pro Objekt-Literal ist nur eine einzelne Prototypmutation erlaubt: mehrfache Prototyp Mutationen führen zu einem Syntax Fehler.

- -

Eigenschaftsdefinitionen welche nicht von der Doppelpunkt Notation Gebrauch machen, sind keine Prototyp Mutationen: es sind Eigenschaftsdefinitionen die sich verhalten wie jede andere Definition von Eigenschaftsbezeichnern auch.

- -
var __proto__ = "variable";
-
-var obj1 = { __proto__ };
-assert(Object.getPrototypeOf(obj1) === Object.prototype);
-assert(obj1.hasOwnProperty("__proto__"));
-assert(obj1.__proto__ === "variable");
-
-var obj2 = { __proto__() { return "hello"; } };
-assert(obj2.__proto__() === "hello");
-
-var obj3 = { ["__prot" + "o__"]: 17 };
-assert(obj3.__proto__ === 17);
-
- -

Objektliteral-Notation vs JSON

- -

Die Objekt-Literal Notation ist nicht dasselbe wie die JavaScript Object Notation (JSON). Obwohl sie ähnlich aussehen, gibt es Unterschiede zwischen ihnen:

- - - -

Spezifikationen

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SpezifikationStatusKommentar
{{SpecName('ES1')}}{{Spec2('ES1')}}Initiale Definition.
{{SpecName('ES5.1', '#sec-11.1.5', 'Object Initializer')}}{{Spec2('ES5.1')}}Getter und Setter hinzugefügt.
{{SpecName('ES2015', '#sec-object-initializer', 'Object Initializer')}}{{Spec2('ES2015')}}Kurzschreibweise für Methoden-/Eigenschaftsnamen und berechnete Eigenschaftsnamen hinzugefügt.
{{SpecName('ESDraft', '#sec-object-initializer', 'Object Initializer')}}{{Spec2('ESDraft')}}
Rest/Spread Properties for ECMAScript EntwurfStage 4 (Fertig).
- -

Browserkompatibilität

- -
- - -

{{Compat("javascript.operators.object_initializer")}}

-
- -

Siehe auch

- - diff --git a/files/de/web/javascript/reference/operators/optional_chaining/index.html b/files/de/web/javascript/reference/operators/optional_chaining/index.html new file mode 100644 index 0000000000..8ef763b3cd --- /dev/null +++ b/files/de/web/javascript/reference/operators/optional_chaining/index.html @@ -0,0 +1,194 @@ +--- +title: Optionale Verkettung +slug: Web/JavaScript/Reference/Operators/Optionale_Verkettung +tags: + - Experimentell + - JavaScript + - Operator + - Optionale Verkettung + - Referenz + - Verkettung +translation_of: Web/JavaScript/Reference/Operators/Optional_chaining +--- +
{{JSSidebar("Operators")}}
+ +

{{SeeCompatTable}}

+ +

Der Optionale-Verkettungs-Operator (Optional Chaining) ?. ermöglicht es, einen Wert aus einer Eigenschaft tief innerhalb einer Verkettung von Objekt-Eigenschaften auszulesen, ohne dabei explizit überprüfen zu müssen, ob jede Referenz in der Kette valide ist.Der ?. Operator funktioniert ähnlich wie der . -Verkettungs Operator, außer dass er keinen Fehler bei einem {{glossary("nullish")}} ({{JSxRef("null")}} oder {{JSxRef("undefined")}}) Wert auswirft, sondern stattdessen den Ausdruck beendet und undefined zurückgibt. Wird er mit Funktionsaufrufen verwendet, wirft der Aufruf undefined zurück, wenn die Funktion nicht existiert.

+ +

Das Ergebnis sind kürzere und einfacherere Anweisungen wenn auf verkettete Eigenschaften zugegriffen wird, bei denen die Möglichkeit besteht, dass sie fehlen. Er kann außerdem hilfreich sein, wenn man den Inhalt eines Objektes erhalten möchte wenn es keine Garantie dafür gibt welche Eigenschaften benötigt werden.

+ +
{{EmbedInteractiveExample("pages/js/expressions-optionalchainingoperator.html")}}
+ +
+ + + +

Syntax

+ +
obj?.prop
+obj?.[expr]
+arr?.[index]
+func?.(args)
+
+ +

Beschreibung

+ +

Der Optionale-Verkettungs-Operator ermöglicht einen Weg auf Werte in einer Verkettung aus Eigenschaften zuzugreifen, wenn die Möglichkeit existiert, dass eine der Referenzen oder Funktionen in der Kette undefined oder null sind.

+ +

Als Beispiel nehmen wir ein Objekt obj, dass eine verschachtelte Struktur besitzt. Ohne Optionale Verkettung müssen wir beim Zugriff auf einen Wert jede Referenz innerhalb der Kette auf ihre Existenz überprüfen:

+ +
let nestedProp = obj.first && obj.first.second;
+ +

Der Wert von obj.first wird darauf geprüft nicht-null (und nicht-undefined) zu sein und erst dann greifen wir auf den Wert obj.first.second zu. Dies verhindet einen Fehler der auftreten würde wenn wir direkt obj.first.second ansprechen ohne zuvor obj.first zu prüfen.

+ +

Mit dem Optionale-Verkettungs-Operator (?.) allerdings müssen wir nicht explizit testen und können eine Abkürzung auf Basis des Wertes von obj.first nutzen bevor auf auf obj.first.second zugreifen:

+ +
let nestedProp = obj.first?.second;
+ +

Durch die Verwendung des ?.-Operators statt nur dem . stellet JavaScript sicher, dass zuvor geprüft wird ob obj.first nicht null oder undefined ist bevor auf obj.first.second zugegriffen wird. Wenn obj.first null oder undefined ist, wird der Ausdruck automatisch sofort beendet und wirft den Wert undefined zurück

+ +

Das ist dasselbe wie folgender Ausdruck:

+ +
let nestedProp = ((obj.first === null || obj.first === undefined) ? undefined : obj.first.second);
+ +

Optionale Verkettung mit Funktionsaufrufen

+ +

Optionale Verkettung kann verwendet werden um Funktionen aufzurufen, die womöglich nicht existeiren. Das kann hilfreich sein wenn man z.B. eine API verwenden möchte die möglicherweise nicht verfügbar ist, entweder durch das Alter der Implementierung oder weil die Funktionalität nicht für das Gerät verfügbar ist.

+ +

Verwendet man optionale Verkettung mit Funktionsaufrufen, wird der Ausdruck automatisch undefined zurückwerfen, sollte die Funktion nicht existieren:

+ +
let result = someInterface.customMethod?.();
+ +
+

Note: Wenn eine Eigenschaft mit dem Namen existiert, die aber keine Funktion ist, wird ?. trotzdem eine {{JSxRef("TypeError")}} Ausnahme auslösen (x.y ist keine Funktion).

+
+ +

Optionale Callbacks oder Event Handler handhaben

+ +

If you use callbacks or fetch methods from an object with a destructuring assignment, you may have non-existent values that you cannot call as functions unless you have tested their existence. Using ?., you can avoid this extra test:

+ +
// Written as of ES2019
+function doSomething(onContent, onError) {
+  try {
+    // ... do something with the data
+  }
+  catch (err) {
+    if (onError) { // Testing if onError really exists
+      onError(err.message);
+    }
+  }
+}
+
+ +
// Using optional chaining with function calls
+function doSomething(onContent, onError) {
+  try {
+   // ... do something with the data
+  }
+  catch (err) {
+    onError?.(err.message); // no exception if onError is undefined
+  }
+}
+
+ +

Optional chaining with expressions

+ +

You can also use the optional chaining operator when accessing properties with an expression using the bracket notation of the property accessor:

+ +
let nestedProp = obj?.['prop' + 'Name'];
+
+ +

Array item access with optional chaining

+ +
let arrayItem = arr?.[42];
+ +

Examples

+ +

Basic example

+ +

This example looks for the value of the name property for the member bar in a map when there is no such member. The result is therefore undefined.

+ +
let myMap = new Map();
+myMap.set("foo", {name: "baz", desc: "inga"});
+
+let nameBar = myMap.get("bar")?.name;
+ +

Short-circuiting evaluation

+ +

When using optional chaining with expressions, if the left operand is null or undefined, the expression will not be evaluated. For instance:

+ +
let potentiallyNullObj = null;
+let x = 0;
+let prop = potentiallyNullObj?.[x++];
+
+console.log(x); // 0 as x was not incremented
+
+ +

Stacking the optional chaining operator

+ +

With nested structures, it is possible to use optional chaining multiple times:

+ +
let customer = {
+  name: "Carl",
+  details: {
+    age: 82,
+    location: "Paradise Falls" // detailed address is unknown
+  }
+};
+let customerCity = customer.details?.address?.city;
+
+// … this also works with optional chaining function call
+let duration = vacations.trip?.getTime?.();
+
+ +

Combining with the nullish coalescing operator

+ +

The nullish coalescing operator may be used after optional chaining in order to build a default value when none was found:

+ +
let customer = {
+  name: "Carl",
+  details: { age: 82 }
+};
+const customerCity = customer?.city ?? "Unknown city";
+console.log(customerCity); // Unknown city
+ +

Specifications

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
Proposal for the "optional chaining" operatorStage 4
+ +

Browser compatibility

+ +
+ + +

{{Compat("javascript.operators.optional_chaining")}}

+
+ +

Implementation Progress

+ +

The following table provides a daily implementation status for this feature, because this feature has not yet reached cross-browser stability. The data is generated by running the relevant feature tests in Test262, the standard test suite of JavaScript, in the nightly build, or latest release of each browser's JavaScript engine.

+ +
{{EmbedTest262ReportResultsTable("optional-chaining")}}
+ +

See also

+ + diff --git a/files/de/web/javascript/reference/operators/optionale_verkettung/index.html b/files/de/web/javascript/reference/operators/optionale_verkettung/index.html deleted file mode 100644 index 8ef763b3cd..0000000000 --- a/files/de/web/javascript/reference/operators/optionale_verkettung/index.html +++ /dev/null @@ -1,194 +0,0 @@ ---- -title: Optionale Verkettung -slug: Web/JavaScript/Reference/Operators/Optionale_Verkettung -tags: - - Experimentell - - JavaScript - - Operator - - Optionale Verkettung - - Referenz - - Verkettung -translation_of: Web/JavaScript/Reference/Operators/Optional_chaining ---- -
{{JSSidebar("Operators")}}
- -

{{SeeCompatTable}}

- -

Der Optionale-Verkettungs-Operator (Optional Chaining) ?. ermöglicht es, einen Wert aus einer Eigenschaft tief innerhalb einer Verkettung von Objekt-Eigenschaften auszulesen, ohne dabei explizit überprüfen zu müssen, ob jede Referenz in der Kette valide ist.Der ?. Operator funktioniert ähnlich wie der . -Verkettungs Operator, außer dass er keinen Fehler bei einem {{glossary("nullish")}} ({{JSxRef("null")}} oder {{JSxRef("undefined")}}) Wert auswirft, sondern stattdessen den Ausdruck beendet und undefined zurückgibt. Wird er mit Funktionsaufrufen verwendet, wirft der Aufruf undefined zurück, wenn die Funktion nicht existiert.

- -

Das Ergebnis sind kürzere und einfacherere Anweisungen wenn auf verkettete Eigenschaften zugegriffen wird, bei denen die Möglichkeit besteht, dass sie fehlen. Er kann außerdem hilfreich sein, wenn man den Inhalt eines Objektes erhalten möchte wenn es keine Garantie dafür gibt welche Eigenschaften benötigt werden.

- -
{{EmbedInteractiveExample("pages/js/expressions-optionalchainingoperator.html")}}
- -
- - - -

Syntax

- -
obj?.prop
-obj?.[expr]
-arr?.[index]
-func?.(args)
-
- -

Beschreibung

- -

Der Optionale-Verkettungs-Operator ermöglicht einen Weg auf Werte in einer Verkettung aus Eigenschaften zuzugreifen, wenn die Möglichkeit existiert, dass eine der Referenzen oder Funktionen in der Kette undefined oder null sind.

- -

Als Beispiel nehmen wir ein Objekt obj, dass eine verschachtelte Struktur besitzt. Ohne Optionale Verkettung müssen wir beim Zugriff auf einen Wert jede Referenz innerhalb der Kette auf ihre Existenz überprüfen:

- -
let nestedProp = obj.first && obj.first.second;
- -

Der Wert von obj.first wird darauf geprüft nicht-null (und nicht-undefined) zu sein und erst dann greifen wir auf den Wert obj.first.second zu. Dies verhindet einen Fehler der auftreten würde wenn wir direkt obj.first.second ansprechen ohne zuvor obj.first zu prüfen.

- -

Mit dem Optionale-Verkettungs-Operator (?.) allerdings müssen wir nicht explizit testen und können eine Abkürzung auf Basis des Wertes von obj.first nutzen bevor auf auf obj.first.second zugreifen:

- -
let nestedProp = obj.first?.second;
- -

Durch die Verwendung des ?.-Operators statt nur dem . stellet JavaScript sicher, dass zuvor geprüft wird ob obj.first nicht null oder undefined ist bevor auf obj.first.second zugegriffen wird. Wenn obj.first null oder undefined ist, wird der Ausdruck automatisch sofort beendet und wirft den Wert undefined zurück

- -

Das ist dasselbe wie folgender Ausdruck:

- -
let nestedProp = ((obj.first === null || obj.first === undefined) ? undefined : obj.first.second);
- -

Optionale Verkettung mit Funktionsaufrufen

- -

Optionale Verkettung kann verwendet werden um Funktionen aufzurufen, die womöglich nicht existeiren. Das kann hilfreich sein wenn man z.B. eine API verwenden möchte die möglicherweise nicht verfügbar ist, entweder durch das Alter der Implementierung oder weil die Funktionalität nicht für das Gerät verfügbar ist.

- -

Verwendet man optionale Verkettung mit Funktionsaufrufen, wird der Ausdruck automatisch undefined zurückwerfen, sollte die Funktion nicht existieren:

- -
let result = someInterface.customMethod?.();
- -
-

Note: Wenn eine Eigenschaft mit dem Namen existiert, die aber keine Funktion ist, wird ?. trotzdem eine {{JSxRef("TypeError")}} Ausnahme auslösen (x.y ist keine Funktion).

-
- -

Optionale Callbacks oder Event Handler handhaben

- -

If you use callbacks or fetch methods from an object with a destructuring assignment, you may have non-existent values that you cannot call as functions unless you have tested their existence. Using ?., you can avoid this extra test:

- -
// Written as of ES2019
-function doSomething(onContent, onError) {
-  try {
-    // ... do something with the data
-  }
-  catch (err) {
-    if (onError) { // Testing if onError really exists
-      onError(err.message);
-    }
-  }
-}
-
- -
// Using optional chaining with function calls
-function doSomething(onContent, onError) {
-  try {
-   // ... do something with the data
-  }
-  catch (err) {
-    onError?.(err.message); // no exception if onError is undefined
-  }
-}
-
- -

Optional chaining with expressions

- -

You can also use the optional chaining operator when accessing properties with an expression using the bracket notation of the property accessor:

- -
let nestedProp = obj?.['prop' + 'Name'];
-
- -

Array item access with optional chaining

- -
let arrayItem = arr?.[42];
- -

Examples

- -

Basic example

- -

This example looks for the value of the name property for the member bar in a map when there is no such member. The result is therefore undefined.

- -
let myMap = new Map();
-myMap.set("foo", {name: "baz", desc: "inga"});
-
-let nameBar = myMap.get("bar")?.name;
- -

Short-circuiting evaluation

- -

When using optional chaining with expressions, if the left operand is null or undefined, the expression will not be evaluated. For instance:

- -
let potentiallyNullObj = null;
-let x = 0;
-let prop = potentiallyNullObj?.[x++];
-
-console.log(x); // 0 as x was not incremented
-
- -

Stacking the optional chaining operator

- -

With nested structures, it is possible to use optional chaining multiple times:

- -
let customer = {
-  name: "Carl",
-  details: {
-    age: 82,
-    location: "Paradise Falls" // detailed address is unknown
-  }
-};
-let customerCity = customer.details?.address?.city;
-
-// … this also works with optional chaining function call
-let duration = vacations.trip?.getTime?.();
-
- -

Combining with the nullish coalescing operator

- -

The nullish coalescing operator may be used after optional chaining in order to build a default value when none was found:

- -
let customer = {
-  name: "Carl",
-  details: { age: 82 }
-};
-const customerCity = customer?.city ?? "Unknown city";
-console.log(customerCity); // Unknown city
- -

Specifications

- - - - - - - - - - - - - - - - -
SpecificationStatusComment
Proposal for the "optional chaining" operatorStage 4
- -

Browser compatibility

- -
- - -

{{Compat("javascript.operators.optional_chaining")}}

-
- -

Implementation Progress

- -

The following table provides a daily implementation status for this feature, because this feature has not yet reached cross-browser stability. The data is generated by running the relevant feature tests in Test262, the standard test suite of JavaScript, in the nightly build, or latest release of each browser's JavaScript engine.

- -
{{EmbedTest262ReportResultsTable("optional-chaining")}}
- -

See also

- - diff --git a/files/de/web/javascript/reference/operators/remainder/index.html b/files/de/web/javascript/reference/operators/remainder/index.html new file mode 100644 index 0000000000..19403ab883 --- /dev/null +++ b/files/de/web/javascript/reference/operators/remainder/index.html @@ -0,0 +1,78 @@ +--- +title: Modulo (%) +slug: Web/JavaScript/Reference/Operators/Modulo +tags: + - Division mit Rest + - Divisionsalgorithmus + - Restwert + - Restwertberechnung +translation_of: Web/JavaScript/Reference/Operators/Remainder +--- +
{{jsSidebar("Operators")}}
+ +

Der Modulo-Operator (%) gibt den Restwert zurück, der übrig bleibt wenn ein Operand durch einen anderen geteilt wird. Das Vorzeichen ergibt sich aus der Wahl der Quotienten.

+ +
{{EmbedInteractiveExample("pages/js/expressions-remainder.html")}}
+ +
+ + + +

Syntax

+ +
Operator: var1 % var2
+
+ +

Examples

+ +

Remainder with positive dividend

+ +
 12 % 5  //  2
+ 1 % -2 //  1
+ 1 % 2  //  1
+ 2 % 3  //  2
+5.5 % 2 // 1.5
+
+ +

Remainder with negative dividend

+ +
-12 % 5 // -2
+-1 % 2  // -1
+-4 % 2  // -0
+ +

Remainder with NaN

+ +
NaN % 2 // NaN
+ +

Specifications

+ + + + + + + + + + +
Specification
{{SpecName('ESDraft', '#sec-multiplicative-operators', 'Remainder operator')}}
+ +

Browser compatibility

+ + + +

{{Compat("javascript.operators.remainder")}}

+ +

See also

+ + diff --git a/files/de/web/javascript/reference/operators/spread_operator/index.html b/files/de/web/javascript/reference/operators/spread_operator/index.html deleted file mode 100644 index ee125663f4..0000000000 --- a/files/de/web/javascript/reference/operators/spread_operator/index.html +++ /dev/null @@ -1,220 +0,0 @@ ---- -title: Spread-Operator -slug: Web/JavaScript/Reference/Operators/Spread_operator -tags: - - ECMAScript 2015 - - Iterator - - JavaScript - - Operator -translation_of: Web/JavaScript/Reference/Operators/Spread_syntax -translation_of_original: Web/JavaScript/Reference/Operators/Spread_operator ---- -
{{jsSidebar("Operators")}}
- -

Mit der Spread-Syntax kann ein einzelner Ausdruck dort expandiert werden, wo mehrere Argumente (bei Funktionsaufrufen), mehrere Elemente (für Array-Literale) oder mehrere Variablen (für destrukturierende Anweisungen) erwartet werden.

- -

Syntax

- -

Für Funktionsaufrufe:

- -
myFunction(...iterableObj);
-
- -

Für Array-Literale:

- -
[...iterableObj, 4, 5, 6]
- -

Beispiele

- -

Ein besseres "apply"

- -

Beispiel: Für gewöhnlich wird {{jsxref( "Function.prototype.apply")}} verwendet, wenn man die Elemente eines Arrays als Argumente eines Funktionsaufrufs nutzen möchte:

- -
function myFunction(x, y, z) { }
-var args = [0, 1, 2];
-myFunction.apply(null, args);
- -

Mit dem ES2015 Spread-Operator kann das nun wie folgt geschrieben werden:

- -
function myFunction(x, y, z) { }
-var args = [0, 1, 2];
-myFunction(...args);
- -

Die Spread-Syntax kann für jedes beliebige Argument der Argumentliste verwendet werden, und sie kann auch mehrmals verwendet werden:

- -
function myFunction(v, w, x, y, z) { }
-var args = [0, 1];
-myFunction(-1, ...args, 2, ...[3]);
- -

Ein mächtigeres Array-Literal

- -

Beispiel: Wenn man ohne den Spread-Operator ein neues Array erstellen will, bei dem ein Teil davon ein bereits bestehendes Array sein soll, dann ist die Array-Literal-Syntax nicht mehr ausreichend und man muss auf imperative Programmierung mit einer Kombination aus push, splice, concat, etc. zurückgreifen. Mit der Spread-Syntax jedoch kann das viel prägnanter ausgedrückt werden:

- -
var parts = ['shoulders', 'knees'];
-var lyrics = ['head', ...parts, 'and', 'toes']; // ["head", "shoulders", "knees", "and", "toes"]
-
- -

Genau wie der Spread-Operator für Argumentlisten kann ... überall im Array-Literal verwendet werden, auch mehrmals.

- -

"Apply" für "new"

- -

Beispiel: In ES5 kann new nicht mit apply kombiniert werden (nach den ES5-Regeln führt apply einen [[Call]] aus, keinen [[Construct]]). Die Spread-Syntax von ES2015 unterstützt dies auf ganz natürliche Weise:

- -
var dateFields = readDateFields(database);
-var d = new Date(...dateFields);
- -

Ein Array kopieren

- -
var arr = [1,2,3];
-var arr2 = [...arr]; // wie arr.slice()
-arr2.push(4);        // arr2 wird [1,2,3,4], arr bleibt unverändert.
- -

Ein besseres "push"

- -

Beispiel: {{jsxref("Global_Objects/Array/push", "push")}} wird oft verwendet um alle Elemente eines Arrays an das Ende eines bestehenden Arrays anzuhängen. Das wird in ES5 oft wie folgt umgesetzt:

- -
var arr1 = [0, 1, 2];
-var arr2 = [3, 4, 5];
-// Append all items from arr2 onto arr1
-Array.prototype.push.apply(arr1, arr2);
- -

Mit dem Spread-Operator von ES2015 wird daraus:

- -
var arr1 = [0, 1, 2];
-var arr2 = [3, 4, 5];
-arr1.push(...arr2);
- -

Nur "apply" für iterables

- -
var obj = {"key1":"value1"};
-function myFunction(x) {
-    console.log(x) // undefined
-}
-myFunction(...obj);
-var args = [...obj];
-console.log(args, args.length); // [] 0
- -

Rest-Syntax (Parameter)

- -

Rest-Syntax sieht genauso aus wie die Spread-Syntax und wird für das Destrukturieren von Arrays und Objekten eingesetzt. Rest-Syntax ist sozusagen das Gegenteil von Spread-Syntax:  Spread klappt die einzelnen Bestandteile eines Arrays aus, während Rest verschiedene einzelne Elemente zu einem Array zusammenfasst.

- -

Spezifikationen

- - - - - - - - - - - - - - - - - - - - - -
SpezifikationStatusKommentar
{{SpecName('ES2015', '#sec-array-initializer')}}{{Spec2('ES2015')}}Definiert in verschiedenen Abschnitten der Spezifikation: Array Initializer, Argument Lists
{{SpecName('ESDraft', '#sec-array-initializer')}}{{Spec2('ESDraft')}} 
- -

Browser-Kompatibilität

- -

{{CompatibilityTable}}

- -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Spread-Operation innerhalb von Array-Literalen{{CompatChrome("46")}}{{CompatGeckoDesktop("16")}}{{CompatIE("Edge")}}{{CompatNo}}7.1
Spread-Operation innerhalb von Funktionsaufrufen{{CompatChrome("46")}}{{CompatGeckoDesktop("27")}}{{CompatIE("Edge")}}{{CompatNo}}7.1
Spread-Operation beim Destrukturieren ("destructuring"){{CompatChrome("49")}}{{CompatGeckoDesktop("34")}}{{CompatNo}}{{CompatUnknown}}{{CompatUnknown}}
-
- -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
FeatureAndroidAndroid WebviewFirefox Mobile (Gecko)IE MobileOpera MobileSafari MobileChrome for Android
Spread-Operation innerhalb von Array-Literalen{{CompatNo}}{{CompatChrome("46")}}{{CompatGeckoMobile("16")}}{{CompatNo}}{{CompatNo}}8{{CompatChrome("46")}}
Spread-Operation innerhalb von Funktionsaufrufen{{CompatNo}}{{CompatChrome("46")}}{{CompatGeckoMobile("27")}}{{CompatNo}}{{CompatNo}}8{{CompatChrome("46")}}
Spread-Operation beim Destrukturieren ("destructuring"){{CompatNo}}{{CompatNo}}{{CompatGeckoDesktop("34")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatNo}}
-
- -

Siehe auch

- - diff --git a/files/de/web/javascript/reference/operators/vergleichsoperatoren/index.html b/files/de/web/javascript/reference/operators/vergleichsoperatoren/index.html deleted file mode 100644 index ceedd1eb07..0000000000 --- a/files/de/web/javascript/reference/operators/vergleichsoperatoren/index.html +++ /dev/null @@ -1,244 +0,0 @@ ---- -title: Vergleichsoperatoren -slug: Web/JavaScript/Reference/Operators/Vergleichsoperatoren -tags: - - JavaScript - - Operator - - Reference -translation_of: Web/JavaScript/Reference/Operators -translation_of_original: Web/JavaScript/Reference/Operators/Comparison_Operators ---- -
{{jsSidebar("Operators")}}
- -

JavaScript kennt sowohl den strikten als auch den Typ konvertierenden Vergleich. Ein strikter Vergleich (z. B. ===) gibt nur true zurück, wenn der gleiche Typ und der gleiche Wert vorhanden sind. Der häufiger verwendete abstrakte Vergleich (z. B. ==) wandelt die Operanden in den gleichen Typen um, bevor sie verglichen werden. Bei relationalen Vergleichsoperatoren (z. B. <=) werden die Operanden vor dem Vergleich zuerst in elementare Datentypen konvertiert und dann in gleiche Typen umgewandelt.

- -

Strings werden entsprechend der lexikographischen Ordnung, basierend auf den Unicode, verglichen.

- -
{{EmbedInteractiveExample("pages/js/expressions-comparisonoperators.html")}}
- - - -

Merkmale von Vergleichen:

- - - -

Gleichheitsoperatoren

- -

Gleichheit (==)

- -

Der Gleichheitsoperator konvertiert die Operanden, wenn sie nicht vom gleichen Typs sind und prüft dann auf strikte Gleichheit. Sind beide Operanden Objekte, vergleicht JavaScript die Referenzen; Referenzen gelten als gleich, wenn sie auf das gleiche Objekt im Speicher zeigen.

- -

Syntax

- -
x == y
-
- -

Beispiele

- -
1    ==  1     // true
-'1'  ==  1     // true
-1    == '1'    // true
-0    == false  // true
-0    == null   // false
-var object1 = {'key': 'value'}, object2 = {'key': 'value'}
-object1 == object2 // false
-0    == undefined  // false
-null == undefined  // true
-
- -

Ungleichheit (!=)

- -

Der Ungleichheitsoperator gibt true zurück, wenn die Operanden nicht gleich sind. Wenn die beiden Operanden nicht vom gleichen Typ sind, versucht JavaScript die Operanden in einen, für den Vergleich passenden Typ, umzuwandeln. Wenn beide Operanden Objekte sind, vergleicht JavaScript die Referenzen; Referenzen sind ungleich, wenn sie auf verschiedene Objekte im Speicher verweisen.

- -

Syntax

- -
x != y
- -

Beispiele

- -
1 !=   2     // true
-1 !=  "1"    // false
-1 !=  '1'    // false
-1 !=  true   // false
-0 !=  false  // false
-
- -

Identität / strikte Gleichheit (===)

- -

Der Identitätsoperator gibt true zurück, wenn die Operanden strikt gleich sind (siehe oben) ohne eine Typkonvertierung

- -

Syntax

- -
x === y
- -

Beispiele

- -
3 === 3   // true
-3 === '3' // false
-var object1 = {'key': 'value'}, object2 = {'key': 'value'}
-object1 === object2 // false
-
- -

Nicht identisch / Strikte Ungleichheit (!==)

- -

Der strikte Ungleichheitsoperator gibt true zurück, wenn die Operanden nicht vom gleichen Typ sind bzw. ungleich sind.

- -

Syntax

- -
x !== y
- -

Beispiele

- -
3 !== '3' // true
-4 !== 3   // true
-
- -

Relationale Operatoren

- -

Jeder dieser Operatoren wird die valueOf() Funktion aufrufen, bevor ein Vergleich durchgeführt wird.

- -

Größer-als-Operator (>)

- -

Der Größer-als-Operator gibt true zurück, wenn der linke Operand größer als der rechte Operand ist.

- -

Syntax

- -
x > y
- -

Beispiele

- -
4 > 3 // true
-
- -

Größer-oder-gleich-Operator (>=)

- -

Der Größer-oder-gleich-Operator gibt true zurück, wenn der linke Operand größer als oder gleich dem rechten Operanden ist.

- -

Syntax

- -
 x >= y
- -

Beispiele

- -
4 >= 3 // true
-3 >= 3 // true
-
- -

Kleiner-als-Operator (<)

- -

Der Kleiner-als-Operator gibt true zurück, wenn der linke Operand kleiner als der rechte Operand ist.

- -

Syntax

- -
 x < y
- -

Beispiele

- -
3 < 4 // true
-
- -

Kleiner-oder-gleich-Operator (<=)

- -

Der Kleiner-oder-gleich-Operator gibt true zurück, wenn der linke Operand kleiner oder gleich dem rechten Operanden ist.

- -

Syntax

- -
 x <= y
- -

Beispiele

- -
3 <= 4 // true
-
- -

Die Gleichheitsoperatoren anwenden

- -

Die Standard-Gleichheitsoperatoren (== und !=) benutzen den Abstract Equality Comparison Algorithmus, um zwei Operanden zu vergleichen. Sind die Operanden unterschiedlichen Typs, wird vor dem Vergleich zuerst versucht sie in gleiche Typen umzuwandeln; z.B. wird beim Ausdruck 5 == '5'  das Zeichen auf der rechten Seite in eine Zahl konvertiert.

- -

Die strikten Gleichheitsoperatoren (=== und !==) benutzen den Strict Equality Comparison Algorithmus und sind dafür gedacht, Operanden des gleichen Typs zu vergleichen. Wenn die Operanden von unterschiedlichen Typen sind, ist das Ergebnis immer false, wie 5 !== '5'.

- -

Strikte Gleichheitsoperatoren sollten verwendet werden, wenn die Operanden sowohl einen bestimmten Typen als auch Wert haben sollen. Ansonsten benutzt man die abstrakten Gleichheitsoperatoren, die es einem erlauben Operanden unterschiedlicher Typen zu vergleichen.

- -

Wenn beim Vergleich eine Typkonvertierung vorgenommen wird (z.B. beim nicht-strikten Vergleich), konvertiert JavaScript in die Typen {{jsxref("String")}}, {{jsxref("Number")}}, {{jsxref("Boolean")}} und {{jsxref("Object")}} und führt den Vergleich dann aus:

- - - -
Hinweis: String Objekte sind vom Typ Objekte, nicht String! String Objekte werden selten eingesetzt, so dass das folgende Ergebnis überraschend sein kann:
- -
// true, da beide Operanden vom Typ String sind (string primitives)
-'foo' === 'foo'
-
-var a = new String('foo');
-var b = new String('foo');
-
-// false, da a und b auf verschiedene Objekte zeigen
-a == b
-
-// false, da a und b auf verschiedene Objekte zeigen
-a === b
-
-// true, da a und 'foo' verschiedene Typen sind und das Objekt (a)
-// vor dem Vergleich zum String 'foo' umgewandelt wird
-a == 'foo' 
- -

Spezifikationen

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SpezifikationStatusKommentar
{{SpecName('ES1')}}{{Spec2('ES1')}}Initial Definition. Implementiert in JavaScript 1.0
{{SpecName('ES3')}}{{Spec2('ES3')}}Fügt === und !== Operatoren hinzu. Implementiert in JavaScript 1.3
{{SpecName('ES5.1', '#sec-11.8')}}{{Spec2('ES5.1')}}In verschiedenen Kapiteln der Spezifikation definiert: Relational Operators, Equality Operators
{{SpecName('ES6', '#sec-relational-operators')}}{{Spec2('ES6')}}In verschiedenen Kapiteln der Spezifikation definiert: Relational Operators, Equality Operators
{{SpecName('ESDraft', '#sec-relational-operators')}}{{Spec2('ESDraft')}}In verschiedenen Kapiteln der Spezifikation definiert: Relational Operators, Equality Operators
- -

Browserkompatibilität

- - - -

{{Compat("javascript.operators.comparison")}}

- -

Siehe auch

- - diff --git a/files/de/web/javascript/reference/operators/zuweisungsoperator/index.html b/files/de/web/javascript/reference/operators/zuweisungsoperator/index.html deleted file mode 100644 index 5df33bfe62..0000000000 --- a/files/de/web/javascript/reference/operators/zuweisungsoperator/index.html +++ /dev/null @@ -1,413 +0,0 @@ ---- -title: Zuweisungsoperator -slug: Web/JavaScript/Reference/Operators/Zuweisungsoperator -tags: - - JavaScript - - Operator -translation_of: Web/JavaScript/Reference/Operators#Assignment_operators -translation_of_original: Web/JavaScript/Reference/Operators/Assignment_Operators ---- -
{{jsSidebar("Operators")}}
- -

Ein Zuweisungsoperator weist dem linken Operanten einen Wert auf Basis des rechten Operanten zu.

- -
{{EmbedInteractiveExample("pages/js/expressions-assignment.html")}}
- - - -

Überblick

- -

Der Basiszuweisungsoperator ist das Gleich (=), welches den Wert des rechten Operanten dem linken Operanten zuweist. So wird bei x = y der Wert von y x zugewiesen. Die anderen Zuweisungsoperatoren sind Kurzformen für Standardoperationen, wie es in den folgenden Definition und Beispielen gezeigt wird.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameKurzformoperatorBedeutung
Zuweisungx = yx = y
Additionszuweisungx += yx = x + y
Subtraktionszuweisungx -= yx = x - y
Multiplikationszuweisungx *= yx = x * y
Divisionszuweisungx /= yx = x / y
Restzuweisungx %= yx = x % y
Potenzierungszuweisungx **= yx = x ** y
Links verschiebende Zuweisungx <<= yx = x << y
Rechts verschiebende Zuweisungx >>= yx = x >> y
Vorzeichenlose rechts verschiebende Zuweisungx >>>= yx = x >>> y
Bitweise AND Zuweisungx &= yx = x & y
Bitweise XOR Zuweisungx ^= yx = x ^ y
Bitweise OR Zuweisungx |= yx = x | y
- -

Zuweisung

- -

Einfacher Zuweisungsoperator, welcher den Wert zu einer Variablen zuweist. Der Zuweisungsoperator gibt den zugewiesenen Wert zurück. Eine Verkettung der Zuweisungsoperatoren ist möglich, um einen Wert mehreren Variablen zuzuweisen. Sie in den Beispielen.

- -

Syntax

- -
Operator: x = y
-
- -

Beispiele

- -
// Folgende Variablen sind vorausgesetzt
-//  x = 5
-//  y = 10
-//  z = 25
-
-x = y     // x ist 10
-x = y = z // x, y und z sind alle 25
-
- -

Additionszuweisung

- -

Der Additionszuweisungsoperator addiert den Wert des rechten Operanten zu einer Variablen und weist das Ergebnis der Variablen zu. Die Typen der Operanten entscheiden über das Verhalten des Additionszuweisungsoperator. Addition oder Konkatination sind möglich. Siehe beim {{jsxref("Operators/Arithmetic_Operators", "Additionsoperator", "#Addition", 1)}} für mehr Details nach.

- -

Syntax

- -
Operator:  x += y
-Bedeutung: x  = x + y
-
- -

Beispiele

- -
// Die folgenden Variablen werden vorausgesetzt
-//  foo = 'foo'
-//  bar = 5
-//  baz = true
-
-
-// Number + Number -> Addition
-bar += 2 // 7
-
-// Boolean + Number -> Addition
-baz += 1 // 2
-
-// Boolean + Boolean -> Addition
-baz += false // 1
-
-// Number + String -> Konkationation
-bar += 'foo' // "5foo"
-
-// String + Boolean -> Konkatination
-foo += false // "foofalse"
-
-// String + String -> Konkationation
-foo += 'bar' // "foobar"
-
- -

Subtraktionszuweisung

- -

Der Subtraktionszuweisungsoperator subtahiert den Wert des rechten Operanten von einer Variablen und weist das Ergebnis der Variablen zu. Siehe beim {{jsxref("Operators/Arithmetic_Operators", "Subraktionsoperator", "#Subtraction", 1)}} für mehr Details nach.

- -

Syntax

- -
Operator:  x -= y
-Bedeutung: x  = x - y
-
- -

Beispiele

- -
// Die folgenden Variablen werden vorausgesetzt
-//  bar = 5
-
-bar -= 2     // 3
-bar -= 'foo' // NaN
-
- -

Multiplikationszuweisung

- -

Der Multiplikationszuweisungsoperator multipliziert den Wert des rechten Operanten zu einer Variablen und weist das Ergebnis der Variablen zu. Siehe beim {{jsxref("Operators/Arithmetic_Operators", "Multiplikationsoperator", "#Multiplication", 1)}} für mehr Details nach.

- -

Syntax

- -
Operator:  x *= y
-Bedeutung: x  = x * y
-
- -

Beispiele

- -
// Die folgenden Variablen werden vorausgesetzt
-//  bar = 5
-
-bar *= 2     // 10
-bar *= 'foo' // NaN
-
- -

Divisionszuweisung

- -

Der Divisionszuweisungsoperator dividiert eine Variable durch den rechten Operanten zu und weist das Ergebnis der Variablen zu. Siehe beim {{jsxref("Operators/Arithmetic_Operators", "Divisionsoperator", "#Division", 1)}} für mehr Details nach.

- -

Syntax

- -
Operator:  x /= y
-Bedeutung: x  = x / y
-
- -

Beispiele

- -
// Die folgenden Variablen werden vorausgesetzt
-//  bar = 5
-
-bar /= 2     // 2.5
-bar /= 'foo' // NaN
-bar /= 0     // Infinity
-
- -

Restzuweisung

- -

Der Restzuweisungsoperator dividiert einer Variable durch den rechten Operanten und weist den Rest des Ergebnis der Variablen zu. Siehe beim {{jsxref("Operators/Arithmetic_Operators", "Restoperator", "#Remainder", 1)}} für mehr Details nach.

- -

Syntax

- -
Operator:  x %= y
-Bedeutung: x  = x % y
-
- -

Beispiele

- -
// Die folgenden Variablen werden vorausgesetzt
-//  bar = 5
-
-bar %= 2     // 1
-bar %= 'foo' // NaN
-bar %= 0     // NaN
-
- -

Potenzierungszuweisung

- -

Der Potenzierungszuweisungsoperator potenziert einer Variable mit den rechten Operanten und weist das Ergebnis der Variablen zu. Siehe beim {{jsxref("Operators/Arithmetic_Operators", "Exponentialoperator", "#Exponentiation", 1)}} für mehr Details nach.

- -

Syntax

- -
Operator:  x **= y
-Bedeutung: x  = x ** y
-
- -

Beispiele

- -
// Die folgenden Variablen werden vorausgesetzt
-//  bar = 5
-
-bar **= 2     // 25
-bar **= 'foo' // NaN
- - - -

Der links verschiebende Zuweisungsoperator verschiebt um die Anzahl Bits im rechten Operanten in der Variablen und weist das Ergebnis der Variablen zu. Siehe beim {{jsxref("Operators/Bitwise_Operators", "links verschiebenden Operator", "#Left_shift", 1)}} für mehr Details nach.

- -

Syntax

- -
Operator:  x <<= y
-Bedeutung: x   = x << y
-
- -

Beispiele

- -
var bar = 5; //  (00000000000000000000000000000101)
-bar <<= 2; // 20 (00000000000000000000000000010100)
-
- -

Rechts verschiebende Zuweisung

- -

Der rechts verschiebende Zuweisungsoperator verschiebt um die Anzahl Bits im rechten Operanten in der Variablen und weist das Ergebnis der Variablen zu. Siehe beim {{jsxref("Operators/Bitwise_Operators", "rechts verschiebenden Operator", "#Right_shift", 1)}} für mehr Details nach.

- -

Syntax

- -
Operator:  x >>= y
-Bedeutung: x   = x >> y
-
- -

Beispiele

- -
var bar = 5; //   (00000000000000000000000000000101)
-bar >>= 2;   // 1 (00000000000000000000000000000001)
-
-var bar -5; //    (-00000000000000000000000000000101)
-bar >>= 2;  // -2 (-00000000000000000000000000000010)
-
- -

Vorzeichenlose rechts verschiebende Zuweisung

- -

Der vorzeichenlose rechts verschiebende Zuweisungsoperator verschiebt um die Anzahl Bits im rechten Operanten in der Variablen und weist das Ergebnis der Variablen zu. Siehe beim {{jsxref("Operators/Bitwise_Operators", "vorzeichenlose rechts verschiebenden Operator", "#Unsigned_right_shift", 1)}} für mehr Details nach.

- -

Syntax

- -
Operator:  x >>>= y
-Bedeutung: x    = x >>> y
-
- -

Beispiele

- -
var bar = 5; //   (00000000000000000000000000000101)
-bar >>>= 2;  // 1 (00000000000000000000000000000001)
-
-var bar = -5; // (-00000000000000000000000000000101)
-bar >>>= 2; // 1073741822 (00111111111111111111111111111110)
- -

Bitweise UND Zuweisung

- -

Der bitweise UND Zuweisungsoperator nutzt die Bitrepräsentation beider Operanten, führt eine bitweises UND Operation aus und weist das Ergebnis der Variablen zu. Siehe beim {{jsxref("Operators/Bitwise_Operators", "bitweisen UND Operator", "#Bitwise_AND", 1)}} für mehr Details nach.

- -

Syntax

- -
Operator:  x &= y
-Bedeutung: x  = x & y
-
- -

Beispiele

- -
var bar = 5;
-// 5:     00000000000000000000000000000101
-// 2:     00000000000000000000000000000010
-bar &= 2; // 0
-
- -

Bitweise XOR Zuweisung

- -

Der bitweise XOR Zuweisungsoperator nutzt die Bitrepräsentation beider Operanten, führt eine bitweises XOR Operation aus und weist das Ergebnis der Variablen zu. Siehe beim {{jsxref("Operators/Bitwise_Operators", "bitweisen XOR Operator", "#Bitwise_XOR", 1)}} für mehr Details nach.

- -

Syntax

- -
Operator:  x ^= y
-Bedeutung: x  = x ^ y
-
- -

Beispiele

- -
var bar = 5;
-bar ^= 2; // 7
-// 5: 00000000000000000000000000000101
-// 2: 00000000000000000000000000000010
-// -----------------------------------
-// 7: 00000000000000000000000000000111
-
- -

Bitweise ODER Zuweisung

- -

Der bitweise ODER Zuweisungsoperator nutzt die Bitrepräsentation beider Operanten, führt eine bitweises ODER Operation aus und weist das Ergebnis der Variablen zu. Siehe beim {{jsxref("Operators/Bitwise_Operators", "bitweisen ODER Operator", "#Bitwise_OR", 1)}} für mehr Details nach.

- -

Syntax

- -
Operator:  x |= y
-Bedeutung: x  = x | y
-
- -

Beispiele

- -
var bar = 5;
-bar |= 2; // 7
-// 5: 00000000000000000000000000000101
-// 2: 00000000000000000000000000000010
-// -----------------------------------
-// 7: 00000000000000000000000000000111
-
- -

Beispiele

- -

Linker Operant mit anderem Zuweisungsoperator

- -

In ungewöhnlichen Situationen kann ein Zuweisungsoperator (z. B. x += y) nicht identisch mit der äquivalenten Zuweisung (hier x = x + y). Wenn der linke Operant einer Zuweisung selbst eine Zuweisung enthält, wird der linke Operant nur einem ausgewertet. Zum Beispiel:

- -
a[i++] += 5         // i wird einmal ausgewertet
-a[i++] = a[i++] + 5 // i wird zweimal ausgewertet
-
- -

Spezifikationen

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SpezifikationStatusKommentar
{{SpecName('ESDraft', '#sec-assignment-operators', 'Assignment operators')}}{{Spec2('ESDraft')}} 
{{SpecName('ES2015', '#sec-assignment-operators', 'Assignment operators')}}{{Spec2('ES2015')}} 
{{SpecName('ES5.1', '#sec-11.13', 'Assignment operators')}}{{Spec2('ES5.1')}} 
{{SpecName('ES1', '#sec-11.13', 'Assignment operators')}}{{Spec2('ES1')}}Initiale Definition.
- -

Browserkompatibilität

- - - -

{{Compat("javascript.operators.assignment")}}

- -

Siehe auch

- - diff --git a/files/de/web/javascript/reference/statements/default/index.html b/files/de/web/javascript/reference/statements/default/index.html deleted file mode 100644 index f8845c9591..0000000000 --- a/files/de/web/javascript/reference/statements/default/index.html +++ /dev/null @@ -1,121 +0,0 @@ ---- -title: default -slug: Web/JavaScript/Reference/Statements/default -tags: - - JavaScript - - Keyword -translation_of: Web/JavaScript/Reference/Statements/switch -translation_of_original: Web/JavaScript/Reference/Statements/default ---- -
{{jsSidebar("Statements")}}
- -

Das default Schlüsselwort kann in JavaScript in zwei Situationen verwendet werden: Innerhalb eines {{jsxref("Statements/switch", "switch")}} Statements, oder mit einem {{jsxref("Statements/export", "export")}} Statement.

- -
{{EmbedInteractiveExample("pages/js/statement-default.html")}}
- - - -

Syntax

- -

Innerhalb eines {{jsxref("Statements/switch", "switch")}} Statements:

- -
switch (expression) {
-  case value1:
-    // Das Statement wird ausgeführt, wenn das Ergebnis der expression mit value1 übereinstimmt
-    [break;]
-  default:
-    // Das Statement wird ausgeführt, wenn keiner Werte mit dem Wert der expression übereinstimmt
-    [break;]
-}
- -

Mit dem {{jsxref("Statements/export", "export")}} Statement:

- -
export default nameN 
- -

Beschreibung

- -

Für mehr Informationen, siehe die

- - - -

Beispiele

- -

Verwenden von default in switch Statements

- -

Wenn im folgenden Beispiel expr den Wert "Oranges" oder "Apples" hat, wird das Programm die jeweiligen Werte abgleichen und das dazugehörige Statement ausführen. Das default Schlüsselwort hilft, alle übrigen (nicht speziell behandelten) Fälle zu behandeln.

- -
switch (expr) {
-  case 'Oranges':
-    console.log('Oranges are $0.59 a pound.');
-    break;
-  case 'Apples':
-    console.log('Apples are $0.32 a pound.');
-    break;
-  default:
-    console.log('Sorry, we are out of ' + expr + '.');
-}
- -

Verwenden von default mit export

- -

Wenn Sie einen einzelnen Wert oder einen "fallback" Wert für ein Modul brauchen, können Sie einen default export verwenden:

- -
// module "my-module.js"
-let cube = function cube(x) {
-  return x * x * x;
-}
-export default cube;
- -

Dann kann der default export in einem anderen Skript direkt importiert werden:

- -
// module "my-module.js"
-import myFunction from 'my-module';
-console.log(cube(3)); // 27
-
- -

Spezifikationen

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SpezifikationStatusKommentar
{{SpecName('ES6', '#sec-switch-statement', 'switch statement')}}{{Spec2('ES6')}} 
{{SpecName('ES6', '#sec-exports', 'Exports')}}{{Spec2('ES6')}} 
{{SpecName('ESDraft', '#sec-switch-statement', 'switch statement')}}{{Spec2('ESDraft')}} 
{{SpecName('ESDraft', '#sec-exports', 'Exports')}}{{Spec2('ESDraft')}} 
- -

Browserkompatibilität

- - - -

{{Compat("javascript.statements.default")}}

- -

Siehe auch

- - diff --git a/files/de/web/javascript/reference/statements/function/index.html b/files/de/web/javascript/reference/statements/function/index.html new file mode 100644 index 0000000000..64a54347bc --- /dev/null +++ b/files/de/web/javascript/reference/statements/function/index.html @@ -0,0 +1,190 @@ +--- +title: Funktion +slug: Web/JavaScript/Reference/Statements/funktion +translation_of: Web/JavaScript/Reference/Statements/function +--- +
{{jsSidebar("Statements")}}
+ +

Die Funktionsdeklaration definiert eine Funktion mit den angegebenen Parametern.

+ +

Es kann auch eine Funktion mit dem {{jsxref("Function")}}-Konstruktor und einem {{jsxref("Operators/function", "Funktionsausdruck")}} deklariert werden.

+ +

Syntax

+ +
function name([param,[, param,[..., param]]]) {
+   [statements]
+}
+
+ +
+
name
+
Der Funktionsname.
+
+ +
+
param
+
Der Name des Arguments, der an die Funktion übergeben werden soll. Eine Funktion kann bis zu 255 Argumente haben.
+
+ +
+
statements
+
Die Ausdrücke, aus denen der Funktionskörper besteht.
+
+ +

Beschreibung

+ +

Eine Funktion, die mit der Funktionsdeklaration erstellt wurde, ist ein Function -Objekt und hat alle Eigenschaften, Methoden und Verhalten des Function-Objekts. Siehe {{jsxref("Function")}} für detaillierte Information über Funktionen.

+ +

Eine Funktion kann auch mit einem Ausdruck erzeugt werden (siehe {{jsxref("Operators/function", "function expression")}}).

+ +

Standardmäßig geben Funktionen undefined zurück. Um einen beliebigen anderen Wert zurückzugeben muss die Funktion einen {{jsxref("Statements/return", "return")}}-Ausdruck haben, der den Wert der Rückgabe angibt.

+ +

Bedingungskreierte Funktionen

+ +

Funktionen können bedingungskreiert werden. Das heißt: Eine Funktionsanweisung kann innerhalb einer if-Anweisung verschachtelt werden. Die meisten modernen Browser, abseits von Mozilla, werden solche konditionsbasierten Deklarationen als unkonditionelle Deklarationen behandeln und die Funktion erstellen, ob wahr oder nicht, siehe dieser Artikel für eine Übersicht. Deshalb sollten sie so nicht verwendet werden. Stattdessen sollten Funktionsausdrücke für eine konditionelle Erstellung verwendet werden.

+ +

Hochziehen der Funktionsdeklaration

+ +

Funktionsdeklarationen in Javascript ziehen die Funktionsdefinition hoch. D. h. Funktionen können benutzt werden noch bevor sie deklariert wurden:

+ +
hochgezogen(); // loggt "foo"
+
+function hochgezogen() {
+  console.log("foo");
+}
+
+ +

Zu beachten ist aber, dass {{jsxref("Operators/function", "Funktionsausdrücke")}} nicht hochgezogen werden:

+ +
nichtHochgezogen(); // TypeError: nichtHochgezogen is not a function
+
+var nichtHochgezogen = function() {
+   console.log("bar");
+};
+
+ +

Beispiele

+ +

Mit function

+ +

Der folgende Code deklariert eine Funktion, die die Summe aller Verkäufe zurückgibt, wenn sie die Anzahl der verkauften Einheiten a, b, und c übergeben bekommt.

+ +
function berechne_verkäufe(einheit_a, einheit_b, einheit_c) {
+   return einheit_a*79 + einheit_b * 129 + einheit_c * 699;
+}
+
+ +

Spezifikationen

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpezifikationStatusKommentar
{{SpecName('ES6', '#sec-function-definitions', 'Function definitions')}}{{Spec2('ES6')}} 
{{SpecName('ES5.1', '#sec-13', 'Function definition')}}{{Spec2('ES5.1')}} 
{{SpecName('ES3', '#sec-13', 'Function definition')}}{{Spec2('ES3')}} 
{{SpecName('ES1', '#sec-13', 'Function definition')}}{{Spec2('ES1')}}Initial definition. Implemented in JavaScript 1.0.
+ +

Browserkompatibilität

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
Allowed in sloppy mode{{CompatChrome(49.0)}}    
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidAndroid WebviewFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
Allowed in sloppy mode{{CompatNo}} +

{{CompatChrome(49.0)}}

+
    
+
+ +

Siehe auch

+ + diff --git a/files/de/web/javascript/reference/statements/funktion/index.html b/files/de/web/javascript/reference/statements/funktion/index.html deleted file mode 100644 index 64a54347bc..0000000000 --- a/files/de/web/javascript/reference/statements/funktion/index.html +++ /dev/null @@ -1,190 +0,0 @@ ---- -title: Funktion -slug: Web/JavaScript/Reference/Statements/funktion -translation_of: Web/JavaScript/Reference/Statements/function ---- -
{{jsSidebar("Statements")}}
- -

Die Funktionsdeklaration definiert eine Funktion mit den angegebenen Parametern.

- -

Es kann auch eine Funktion mit dem {{jsxref("Function")}}-Konstruktor und einem {{jsxref("Operators/function", "Funktionsausdruck")}} deklariert werden.

- -

Syntax

- -
function name([param,[, param,[..., param]]]) {
-   [statements]
-}
-
- -
-
name
-
Der Funktionsname.
-
- -
-
param
-
Der Name des Arguments, der an die Funktion übergeben werden soll. Eine Funktion kann bis zu 255 Argumente haben.
-
- -
-
statements
-
Die Ausdrücke, aus denen der Funktionskörper besteht.
-
- -

Beschreibung

- -

Eine Funktion, die mit der Funktionsdeklaration erstellt wurde, ist ein Function -Objekt und hat alle Eigenschaften, Methoden und Verhalten des Function-Objekts. Siehe {{jsxref("Function")}} für detaillierte Information über Funktionen.

- -

Eine Funktion kann auch mit einem Ausdruck erzeugt werden (siehe {{jsxref("Operators/function", "function expression")}}).

- -

Standardmäßig geben Funktionen undefined zurück. Um einen beliebigen anderen Wert zurückzugeben muss die Funktion einen {{jsxref("Statements/return", "return")}}-Ausdruck haben, der den Wert der Rückgabe angibt.

- -

Bedingungskreierte Funktionen

- -

Funktionen können bedingungskreiert werden. Das heißt: Eine Funktionsanweisung kann innerhalb einer if-Anweisung verschachtelt werden. Die meisten modernen Browser, abseits von Mozilla, werden solche konditionsbasierten Deklarationen als unkonditionelle Deklarationen behandeln und die Funktion erstellen, ob wahr oder nicht, siehe dieser Artikel für eine Übersicht. Deshalb sollten sie so nicht verwendet werden. Stattdessen sollten Funktionsausdrücke für eine konditionelle Erstellung verwendet werden.

- -

Hochziehen der Funktionsdeklaration

- -

Funktionsdeklarationen in Javascript ziehen die Funktionsdefinition hoch. D. h. Funktionen können benutzt werden noch bevor sie deklariert wurden:

- -
hochgezogen(); // loggt "foo"
-
-function hochgezogen() {
-  console.log("foo");
-}
-
- -

Zu beachten ist aber, dass {{jsxref("Operators/function", "Funktionsausdrücke")}} nicht hochgezogen werden:

- -
nichtHochgezogen(); // TypeError: nichtHochgezogen is not a function
-
-var nichtHochgezogen = function() {
-   console.log("bar");
-};
-
- -

Beispiele

- -

Mit function

- -

Der folgende Code deklariert eine Funktion, die die Summe aller Verkäufe zurückgibt, wenn sie die Anzahl der verkauften Einheiten a, b, und c übergeben bekommt.

- -
function berechne_verkäufe(einheit_a, einheit_b, einheit_c) {
-   return einheit_a*79 + einheit_b * 129 + einheit_c * 699;
-}
-
- -

Spezifikationen

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SpezifikationStatusKommentar
{{SpecName('ES6', '#sec-function-definitions', 'Function definitions')}}{{Spec2('ES6')}} 
{{SpecName('ES5.1', '#sec-13', 'Function definition')}}{{Spec2('ES5.1')}} 
{{SpecName('ES3', '#sec-13', 'Function definition')}}{{Spec2('ES3')}} 
{{SpecName('ES1', '#sec-13', 'Function definition')}}{{Spec2('ES1')}}Initial definition. Implemented in JavaScript 1.0.
- -

Browserkompatibilität

- -

{{CompatibilityTable}}

- -
- - - - - - - - - - - - - - - - - - - - - - - - - - - -
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
Allowed in sloppy mode{{CompatChrome(49.0)}}    
-
- -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
FeatureAndroidAndroid WebviewFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
Allowed in sloppy mode{{CompatNo}} -

{{CompatChrome(49.0)}}

-
    
-
- -

Siehe auch

- - diff --git a/files/de/web/javascript/reference/template_literals/index.html b/files/de/web/javascript/reference/template_literals/index.html new file mode 100644 index 0000000000..54885ed5a3 --- /dev/null +++ b/files/de/web/javascript/reference/template_literals/index.html @@ -0,0 +1,219 @@ +--- +title: Template-Strings +slug: Web/JavaScript/Reference/template_strings +translation_of: Web/JavaScript/Reference/Template_literals +--- +
{{JsSidebar("More")}}
+ +

Template-Strings sind {{jsxref("String", "String-Symbole")}}, die über mehrere Zeilen gehende Zeichenketten sowie eingebettete Javascript-Ausdrücke ermöglichen.

+ +

Syntax

+ +
`string text`
+
+`string text line 1
+ string text line 2`
+
+`string text ${expression} string text`
+
+tag `string text ${expression} string text`
+
+ +

Beschreibung

+ +

Template-Strings sind anstelle von doppelten bzw. einfachen Anführungszeichen in zwei Akzente Gravis ` (Französisch: accent grave, Englisch: backtick) eingeschlossen.

+ +

Sie können Platzhalter beinhalten, die durch das Dollarsymbol gefolgt von geschweiften Klammern gekennzeichnet sind (${expression}). Auf diese Weise dienen sie als Vorlagen (Englisch: template), die, zentral definiert, während des Programmablaufs an verschiedenen Stellen individuell eingesetzt werden können.

+ +

Die Ausdrücke in den Platzhaltern sowie der Text selbst können an eine optionale Funktion übergeben werden. Falls vor dem Template-String ein Ausdruck vorhanden ist (hier als tag bezeichnet), wird der Template-String „Tagged Template String“ genannt. In diesem Fall wird der tag-Ausdruck (üblicherweise eine Funktion) mit dem verarbeiteten Template-String aufgerufen, um den Text vor der Ausgabe zu bearbeiten.

+ +

Ein Gravis kann in einen Template-String durch Maskieren mit dem Rückstrich \ eingefügt werden:

+ +
`\`` === '`' // --> true
+ +

Der Gravis und das einfache Anführungszeichen

+ +

Der Gravis befindet sich auf deutschen Tastaturen rechts neben dem ß und ist nur zusammen mit der Hochstelltaste und einer anschließenden Betätigung der Leertaste zu erreichen.

+ +

Das Zeichen wird gelegentlich mit dem einfachen Anführungszeichen ' verwechselt; dieses befindet sich rechts neben dem Ä.

+ +

Im normalen Sprachgebrauch wird es meist zusammen mit den Tasten e oder a genutzt um è bzw. à zu schreiben, analog zur Notwendigkeit einer zusätzlichen Betätigung der Leertaste für ` alleine.

+ +

Mehrzeilige Zeichenketten

+ +

In normale Zeichenketten sind Zeilenumbrüche nur durch Einfügen der Sequenz \n zu erreichen:

+ +
console.log("string text line 1\nstring text line 2");
+// Ausgabe:
+// string text line 1
+// string text line 2
+
+// Identische Ausgabe, jedoch deutlicher durch Trennung:
+console.log("string text line 1\n" +
+"string text line 2");
+
+ +

Das gleiche Ergebnis kann mit Template-Strings einfacher und übersichtlicher erreicht werden, indem der Text so, wie er erscheinen soll, über mehrere Zeilen geschrieben wird:

+ +
console.log(`string text line 1
+string text line 2`);
+// Ausgabe:
+// string text line 1
+// string text line 2
+ +

Ausdrücke in Zeichenketten

+ +

Um Javascript-Ausdrücke in normale Strings einzufügen, müsste die folgende Syntax genutzt werden:

+ +
var a = 5;
+var b = 10;
+console.log("Fifteen is " + (a + b) + " and\nnot " + (2 * a + b) + ".");
+// Ausgabe:
+// Fifteen is 15 and
+// not 20.
+ +

Mit Template-Strings können nun die syntaktischen Vorteile genutzt werden um solche Ersetzungen leserlicher zu machen:

+ +
var a = 5;
+var b = 10;
+console.log(`Fifteen is ${a + b} and
+not ${2 * a + b}.`);
+// Ausgabe:
+// Fifteen is 15 and
+// not 20.
+ +

Verschachtelte Vorlagen

+ +

Das Verschachteln von Template-Strings ist manchmal die einfachste und lesbarste Möglichkeit, konfigurierbare Vorlagen zu erhalten, denn auch innerhalb von ${ } können Template-Strings verwendet werden

+ +

Die nachfolgenden drei Beispiele haben eine identische Funktion:

+ +

ECMAScript 5:

+ +
let classes = 'header';
+classes += (isLargeScreen() ?
+  '' : item.isCollapsed ?
+    ' icon-expander' : ' icon-collapser');
+
+ +

Eine nicht verschachtelte Vorlage mit ECMAScript 2015:

+ +
const classes = `header ${ isLargeScreen() ? '' :
+  (item.isCollapsed ? 'icon-expander' : 'icon-collapser') }`;
+ +

Verschachtelte Vorlage mit ECMAScript 2015:

+ +
const classes = `header ${ isLargeScreen() ? '' :
+  `icon-${item.isCollapsed ? 'expander' : 'collapser'}` }`;
+ +

Tagged Template-Strings

+ +

Eine erweiterte Form der Template-Strings sind Tagged Template-Strings. Mit ihnen kann die Ausgabe von Template-Strings mit einer Funktion ändern.

+ +

Das erste Argument enthält ein Array von Strings ("Hello" und "world" in diesem Beispiel). Alle Argumente nach dem ersten sind die Werte der verarbeiteten (manchmal auch cooked genannt, „vorgekocht“) Ausdrücke (hier: "15" und "50").

+ +

Im folgenden Beispiel heißt die Funktion tag, was aber keinen besonderen Grund hat, da sie jeden gewünschten Namen haben kann.

+ +
var a = 5;
+var b = 10;
+
+function tag(strings, ...values) {
+  console.log(strings[0]); // "Hello "
+  console.log(strings[1]); // " world "
+  console.log(values[0]);  // 15
+  console.log(values[1]);  // 50
+
+  return "Bazinga!";
+}
+
+tag`Hello ${ a + b } world ${ a * b}`;
+// "Bazinga!"
+
+ +

Tag-Funktionen müssen keinen String zurückgeben, wie das folgende Beispiel zeigt.

+ +
function template(strings, ...keys) {
+  return (function(...values) {
+    var dict = values[values.length - 1] || {};
+    var result = [strings[0]];
+    keys.forEach(function(key, i) {
+      var value = Number.isInteger(key) ? values[key] : dict[key];
+      result.push(value, strings[i + 1]);
+    });
+    return result.join('');
+  });
+}
+
+var t1Closure = template`${0}${1}${0}!`;
+t1Closure('Y', 'A');  // "YAY!"
+var t2Closure = template`${0} ${'foo'}!`;
+t2Closure('Hello', {foo: 'World'});  // "Hello World!"
+
+ +

Raw Strings

+ +

Die Eigenschaft raw, verfügbar für das erste Argument eines Tagged Template-Strings, erlaubt den Zugriff auf den unverarbeiteten String, also ohne Escape-Sequenzen auszuwerten.

+ +
function tag(strings, ...values) {
+  console.log(strings.raw[0]);
+  // "string text line 1 \\n string text line 2"
+}
+
+tag`string text line 1 \n string text line 2`;
+
+ +

Zusätzlich exisitert die Methode {{jsxref("String.raw()")}} um unverarbeitete Strings zu erstellen, genauso wie sie die vorgegebene Template-Funktion und String-Verknüpfung erstellen würde.

+ +
String.raw`Hi\n${2+3}!`;
+// "Hi\\n5!"
+
+str.length;
+// 6
+
+str.split('').join(',');
+// "H,i,\,n,5,!"
+
+ +

Sicherheit

+ +

Template-Strings SOLLTEN NIEMALS von Nutzern erstellt werden, denen nicht vertraut werden kann, da diese Zugriff auf Variablen und Funktionen haben.

+ +
`${console.warn("this is",this)}`; // "this is" Window
+
+let a = 10;
+console.warn(`${a+=20}`); // "30"
+console.warn(a); // 30
+
+ +

Spezifikationen

+ + + + + + + + + + + + + + +
SpezifikationStatusKommentar
{{SpecName('ES6', '#sec-template-literals', 'Template Literals')}}{{Spec2('ES6')}}Erste Definition. Definiert in mehreren Abschnitten der Spezifikation: Template Literals, Tagged Templates
+ +

Browserkompatibilität

+ + + +

{{Compat("javascript.grammar.template_literals")}}

+ +

See also

+ + diff --git a/files/de/web/javascript/reference/template_strings/index.html b/files/de/web/javascript/reference/template_strings/index.html deleted file mode 100644 index 54885ed5a3..0000000000 --- a/files/de/web/javascript/reference/template_strings/index.html +++ /dev/null @@ -1,219 +0,0 @@ ---- -title: Template-Strings -slug: Web/JavaScript/Reference/template_strings -translation_of: Web/JavaScript/Reference/Template_literals ---- -
{{JsSidebar("More")}}
- -

Template-Strings sind {{jsxref("String", "String-Symbole")}}, die über mehrere Zeilen gehende Zeichenketten sowie eingebettete Javascript-Ausdrücke ermöglichen.

- -

Syntax

- -
`string text`
-
-`string text line 1
- string text line 2`
-
-`string text ${expression} string text`
-
-tag `string text ${expression} string text`
-
- -

Beschreibung

- -

Template-Strings sind anstelle von doppelten bzw. einfachen Anführungszeichen in zwei Akzente Gravis ` (Französisch: accent grave, Englisch: backtick) eingeschlossen.

- -

Sie können Platzhalter beinhalten, die durch das Dollarsymbol gefolgt von geschweiften Klammern gekennzeichnet sind (${expression}). Auf diese Weise dienen sie als Vorlagen (Englisch: template), die, zentral definiert, während des Programmablaufs an verschiedenen Stellen individuell eingesetzt werden können.

- -

Die Ausdrücke in den Platzhaltern sowie der Text selbst können an eine optionale Funktion übergeben werden. Falls vor dem Template-String ein Ausdruck vorhanden ist (hier als tag bezeichnet), wird der Template-String „Tagged Template String“ genannt. In diesem Fall wird der tag-Ausdruck (üblicherweise eine Funktion) mit dem verarbeiteten Template-String aufgerufen, um den Text vor der Ausgabe zu bearbeiten.

- -

Ein Gravis kann in einen Template-String durch Maskieren mit dem Rückstrich \ eingefügt werden:

- -
`\`` === '`' // --> true
- -

Der Gravis und das einfache Anführungszeichen

- -

Der Gravis befindet sich auf deutschen Tastaturen rechts neben dem ß und ist nur zusammen mit der Hochstelltaste und einer anschließenden Betätigung der Leertaste zu erreichen.

- -

Das Zeichen wird gelegentlich mit dem einfachen Anführungszeichen ' verwechselt; dieses befindet sich rechts neben dem Ä.

- -

Im normalen Sprachgebrauch wird es meist zusammen mit den Tasten e oder a genutzt um è bzw. à zu schreiben, analog zur Notwendigkeit einer zusätzlichen Betätigung der Leertaste für ` alleine.

- -

Mehrzeilige Zeichenketten

- -

In normale Zeichenketten sind Zeilenumbrüche nur durch Einfügen der Sequenz \n zu erreichen:

- -
console.log("string text line 1\nstring text line 2");
-// Ausgabe:
-// string text line 1
-// string text line 2
-
-// Identische Ausgabe, jedoch deutlicher durch Trennung:
-console.log("string text line 1\n" +
-"string text line 2");
-
- -

Das gleiche Ergebnis kann mit Template-Strings einfacher und übersichtlicher erreicht werden, indem der Text so, wie er erscheinen soll, über mehrere Zeilen geschrieben wird:

- -
console.log(`string text line 1
-string text line 2`);
-// Ausgabe:
-// string text line 1
-// string text line 2
- -

Ausdrücke in Zeichenketten

- -

Um Javascript-Ausdrücke in normale Strings einzufügen, müsste die folgende Syntax genutzt werden:

- -
var a = 5;
-var b = 10;
-console.log("Fifteen is " + (a + b) + " and\nnot " + (2 * a + b) + ".");
-// Ausgabe:
-// Fifteen is 15 and
-// not 20.
- -

Mit Template-Strings können nun die syntaktischen Vorteile genutzt werden um solche Ersetzungen leserlicher zu machen:

- -
var a = 5;
-var b = 10;
-console.log(`Fifteen is ${a + b} and
-not ${2 * a + b}.`);
-// Ausgabe:
-// Fifteen is 15 and
-// not 20.
- -

Verschachtelte Vorlagen

- -

Das Verschachteln von Template-Strings ist manchmal die einfachste und lesbarste Möglichkeit, konfigurierbare Vorlagen zu erhalten, denn auch innerhalb von ${ } können Template-Strings verwendet werden

- -

Die nachfolgenden drei Beispiele haben eine identische Funktion:

- -

ECMAScript 5:

- -
let classes = 'header';
-classes += (isLargeScreen() ?
-  '' : item.isCollapsed ?
-    ' icon-expander' : ' icon-collapser');
-
- -

Eine nicht verschachtelte Vorlage mit ECMAScript 2015:

- -
const classes = `header ${ isLargeScreen() ? '' :
-  (item.isCollapsed ? 'icon-expander' : 'icon-collapser') }`;
- -

Verschachtelte Vorlage mit ECMAScript 2015:

- -
const classes = `header ${ isLargeScreen() ? '' :
-  `icon-${item.isCollapsed ? 'expander' : 'collapser'}` }`;
- -

Tagged Template-Strings

- -

Eine erweiterte Form der Template-Strings sind Tagged Template-Strings. Mit ihnen kann die Ausgabe von Template-Strings mit einer Funktion ändern.

- -

Das erste Argument enthält ein Array von Strings ("Hello" und "world" in diesem Beispiel). Alle Argumente nach dem ersten sind die Werte der verarbeiteten (manchmal auch cooked genannt, „vorgekocht“) Ausdrücke (hier: "15" und "50").

- -

Im folgenden Beispiel heißt die Funktion tag, was aber keinen besonderen Grund hat, da sie jeden gewünschten Namen haben kann.

- -
var a = 5;
-var b = 10;
-
-function tag(strings, ...values) {
-  console.log(strings[0]); // "Hello "
-  console.log(strings[1]); // " world "
-  console.log(values[0]);  // 15
-  console.log(values[1]);  // 50
-
-  return "Bazinga!";
-}
-
-tag`Hello ${ a + b } world ${ a * b}`;
-// "Bazinga!"
-
- -

Tag-Funktionen müssen keinen String zurückgeben, wie das folgende Beispiel zeigt.

- -
function template(strings, ...keys) {
-  return (function(...values) {
-    var dict = values[values.length - 1] || {};
-    var result = [strings[0]];
-    keys.forEach(function(key, i) {
-      var value = Number.isInteger(key) ? values[key] : dict[key];
-      result.push(value, strings[i + 1]);
-    });
-    return result.join('');
-  });
-}
-
-var t1Closure = template`${0}${1}${0}!`;
-t1Closure('Y', 'A');  // "YAY!"
-var t2Closure = template`${0} ${'foo'}!`;
-t2Closure('Hello', {foo: 'World'});  // "Hello World!"
-
- -

Raw Strings

- -

Die Eigenschaft raw, verfügbar für das erste Argument eines Tagged Template-Strings, erlaubt den Zugriff auf den unverarbeiteten String, also ohne Escape-Sequenzen auszuwerten.

- -
function tag(strings, ...values) {
-  console.log(strings.raw[0]);
-  // "string text line 1 \\n string text line 2"
-}
-
-tag`string text line 1 \n string text line 2`;
-
- -

Zusätzlich exisitert die Methode {{jsxref("String.raw()")}} um unverarbeitete Strings zu erstellen, genauso wie sie die vorgegebene Template-Funktion und String-Verknüpfung erstellen würde.

- -
String.raw`Hi\n${2+3}!`;
-// "Hi\\n5!"
-
-str.length;
-// 6
-
-str.split('').join(',');
-// "H,i,\,n,5,!"
-
- -

Sicherheit

- -

Template-Strings SOLLTEN NIEMALS von Nutzern erstellt werden, denen nicht vertraut werden kann, da diese Zugriff auf Variablen und Funktionen haben.

- -
`${console.warn("this is",this)}`; // "this is" Window
-
-let a = 10;
-console.warn(`${a+=20}`); // "30"
-console.warn(a); // 30
-
- -

Spezifikationen

- - - - - - - - - - - - - - -
SpezifikationStatusKommentar
{{SpecName('ES6', '#sec-template-literals', 'Template Literals')}}{{Spec2('ES6')}}Erste Definition. Definiert in mehreren Abschnitten der Spezifikation: Template Literals, Tagged Templates
- -

Browserkompatibilität

- - - -

{{Compat("javascript.grammar.template_literals")}}

- -

See also

- - diff --git a/files/de/web/javascript/reference/veraltete_und_abgeschaffte_features/index.html b/files/de/web/javascript/reference/veraltete_und_abgeschaffte_features/index.html deleted file mode 100644 index 412bddc553..0000000000 --- a/files/de/web/javascript/reference/veraltete_und_abgeschaffte_features/index.html +++ /dev/null @@ -1,291 +0,0 @@ ---- -title: Veraltete und abgeschaffte Features -slug: Web/JavaScript/Reference/Veraltete_und_abgeschaffte_Features -translation_of: Web/JavaScript/Reference/Deprecated_and_obsolete_features ---- -
{{JsSidebar("More")}}
- -

Diese Seite listet die Features JavaScriptes auf, die veraltet sind( das bedeutet, dass noch benutzbar, aber Entfernung geplant) und abgeschafft sind( das bedeutet: nicht länger benutzbar).

- -

Veraltete Features

- -

Diese veralteten Features können noch benutzt werden, aber sollten mit Vorsicht benutzt werden, da erwartet wird, dass sie in Futura endgültig abgeschafft werden. Man sollte daran arbeiten, sie von seinem Code zu entfernen.

- -

RegExp-Eigenschaften

- -

The following properties are deprecated. This does not affect their use in {{jsxref("String.replace", "replacement strings", "", 1)}}:

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
PropertyDescription
{{jsxref("RegExp.n", "$1-$9")}} -

Parenthesized substring matches, if any.
- Warning: Using these properties can result in problems, since browser extensions can modify them. Avoid them!

-
{{jsxref("RegExp.input", "$_")}}See input.
{{jsxref("RegExp.multiline", "$*")}}See multiline.
{{jsxref("RegExp.lastMatch", "$&")}}See lastMatch.
{{jsxref("RegExp.lastParen", "$+")}}See lastParen.
{{jsxref("RegExp.leftContext", "$`")}}See leftContext.
{{jsxref("RegExp.rightContext", "$'")}}See rightContext.
{{jsxref("RegExp.input", "input")}}The string against which a regular expression is matched.
{{jsxref("RegExp.lastMatch", "lastMatch")}}The last matched characters.
{{jsxref("RegExp.lastParen", "lastParen")}}The last parenthesized substring match, if any.
{{jsxref("RegExp.leftContext", "leftContext")}}The substring preceding the most recent match.
{{jsxref("RegExp.rightContext", "rightContext")}}The substring following the most recent match.
- -

The following are now properties of RegExp instances, no longer of the RegExp object:

- - - - - - - - - - - - - - - - - - - - - - - - - - - - -
PropertyDescription
{{jsxref("RegExp.global", "global")}}Whether or not to test the regular expression against all possible matches in a string, or only against the first.
{{jsxref("RegExp.ignoreCase", "ignoreCase")}}Whether or not to ignore case while attempting a match in a string.
{{jsxref("RegExp.lastIndex", "lastIndex")}}The index at which to start the next match.
{{jsxref("RegExp.multiline", "multiline")}}Whether or not to search in strings across multiple lines.
{{jsxref("RegExp.source", "source")}}The text of the pattern.
- -

RegExp methods

- - - -

Function properties

- - - -

Legacy generator

- - - -

Iterator

- - - -

Object methods

- - - -

Date methods

- - - -

Functions

- - - -

Proxy

- - - -

let

- - - -

Escape sequences

- - - -

String methods

- - - -

Obsolete features

- -

These obsolete features have been entirely removed from JavaScript and can no longer be used as of the indicated version of JavaScript.

- -

Object

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
PropertyDescription
{{jsxref("Global_Objects/Object/count", "__count__")}}Returns the number of enumerable properties directly on a user-defined object.
{{jsxref("Global_Objects/Object/Parent", "__parent__")}}Points to an object's context.
{{jsxref("Global_Objects/Object/eval", "Object.prototype.eval()")}}Evaluates a string of JavaScript code in the context of the specified object.
{{jsxref("Object.observe()")}}Asynchronously observing the changes to an object.
{{jsxref("Object.unobserve()")}}Remove observers.
{{jsxref("Object.getNotifier()")}}Creates an object that allows to synthetically trigger a change.
- -

Function

- - - - - - - - - - - - -
PropertyDescription
{{jsxref("Global_Objects/Function/arity", "arity")}}Number of formal arguments.
- -

Array

- - - - - - - - - - - - - - - - -
PropertyDescription
{{jsxref("Array.observe()")}}Asynchronously observing changes to Arrays.
{{jsxref("Array.unobserve()")}}Remove observers.
- -

Number

- - - -

ParallelArray

- - - -

Statements

- - - -

E4X

- -

See E4X for more information.

- -

Sharp variables

- -

See Sharp variables in JavaScript for more information.

diff --git a/files/de/web/javascript/reference/veraltete_und_abgeschaffte_features/the_legacy_iterator_protocol/index.html b/files/de/web/javascript/reference/veraltete_und_abgeschaffte_features/the_legacy_iterator_protocol/index.html deleted file mode 100644 index 017dcea16a..0000000000 --- a/files/de/web/javascript/reference/veraltete_und_abgeschaffte_features/the_legacy_iterator_protocol/index.html +++ /dev/null @@ -1,78 +0,0 @@ ---- -title: The legacy Iterator protocol -slug: >- - Web/JavaScript/Reference/Veraltete_und_abgeschaffte_Features/The_legacy_Iterator_protocol -tags: - - ES2015 - - JavaScript - - Obsolet - - next() - - veralteter Iterator -translation_of: >- - Web/JavaScript/Reference/Deprecated_and_obsolete_features/The_legacy_Iterator_protocol ---- -
{{jsSidebar("More")}}
- -
Kein Standard. Das veraltete Iterator-Protokoll war ein SpiderMonkey-spezifisches Feature, welches in Firefox 58 entfernt wurde. Als Alternative werden for..of Schleifen und das iterator protocol empfohlen.
- -

Das veraltete Iterator-Protokoll

- -

Vor Version 26 implementierte Firefox ein anderes Iterator-Protokoll, welches dem ES2015 Iterator protocol Standard entspricht.

- -

Ein Objekt ist ein veralteter Iterator, wenn es eine next()  Methode mit den folgenden Semantiken implementiert, welches zum Ende der Iteration {{jsxref("Global_Objects/StopIteration", "StopIteration")}} wirft.

- - - - - - - - - - - - -
PropertyValue
nextEine Funktion ohne Argumente, welche einen Wert zurückgibt.
- -

Unterschied zwischen dem veralteten und dem ES2015 Iterator-Protokoll

- - - -

Einfaches Beispiel mit dem alten Protokoll

- -
function kreiereIterator(array){
-    var nextIndex = 0;
-
-    return {
-       next: function(){
-           if(nextIndex < array.length){
-               return array[nextIndex++];
-           else
-               throw new StopIteration();
-       }
-    }
-}
-
-var it = kreiereIterator(['yo', 'ya']);
-
-console.log(it.next()); // 'yo'
-console.log(it.next()); // 'ya'
-try{
-    console.log(it.next());
-}
-catch(e){
-    if(e instanceof StopIteration){
-         // Iteration beendet.
-    }
-}
-
- -

Siehe auch

- - diff --git a/files/de/web/javascript/speicherverwaltung/index.html b/files/de/web/javascript/speicherverwaltung/index.html deleted file mode 100644 index 82f8977c23..0000000000 --- a/files/de/web/javascript/speicherverwaltung/index.html +++ /dev/null @@ -1,184 +0,0 @@ ---- -title: Speicherverwaltung -slug: Web/JavaScript/Speicherverwaltung -tags: - - JavaScript -translation_of: Web/JavaScript/Memory_Management ---- -
{{JsSidebar("Advanced")}}
- -

Einleitung

- -

Bei Low-Level Programmiersprachen wie C, die zur systemnahen Programmierung eingesetzt werden, existieren Funktionen - wie z. B. malloc() und free() - womit explizit Speicher angefordert und wieder freigegeben werden kann. Bei JavaScript gibt es keine solchen Funktionen, sondern der benötigte Speicher wird bei der Erzeugung neuer Objekte (z. B. benutzerdefinierte Objekte oder vordefinierte Objekte wie String) zugewiesen. Die Speicherfreigabe erfolgt automatisch im Hintergrund durch die Garbage Collection (wörtlich: "Müllabfuhr"; automatische Speicherbereinigung). Dieser Automatismus führt oft zu Verwirrung und lässt so manchen Entwicklern irrtümlich glauben, man müsse sich über die Speicherverwaltung keine Gedanken machen.

- -

Zyklus der Speichernutzung

- -

Unabhängig von der eingesetzten Programmiersprache läuft der Zyklus für die Speichernutzung immer ungefähr gleich ab:

- -
    -
  1. Alloziierung/Zuweisung des benötigten Speichers.
  2. -
  3. Benutzung des Speichers (lesen, schreiben).
  4. -
  5. Freigabe des alloziierten Speichers, wenn er nicht mehr benötigt wird.
  6. -
- -

Der erste und zweite Schritt erfolgt bei allen Programmiersprachen explizit. Der letzte Schritt, die Freigabe des Speichers, wird bei Low-Level-Sprachen explizit und bei höheren Programmiersprachen wie JavaScript meist implizit vorgenommen.

- -

Speicherzuweisung bei JavaScript

- -

Initialisierung von Werten

- -

Um dem Programmierer die Arbeit zu erleichtern, weist JavaScript bei der Zuweisung von Werten je nach Typ automatisch die benötigte Menge an Speicher zu:

- -
-
var n = 123; // alloziiert Speicher für eine Number
-var s = "azerty"; // alloziiert Speicher für einen String
-
-var o = {
-  a: 1,
-  b: null
-}; // alloziiert Speicher für das Objekt und enthaltene Werte
-
-var a = [1, null, "abra"]; // (wie bei Objekten) alloziiert Speicher für das Array und enthaltene Werte
-
-function f(a){
-  return a + 2;
-} // alloziiert eine Function (die ein aufrufbares Objekt ist)
-
-// Funktions-Ausdrücke alloziieren ebenfalls ein Objekt
-someElement.addEventListener('click', function(){
-  someElement.style.backgroundColor = 'blue';
-}, false);
-
-
- -

Allokation über Funktionsaufrufe

- -

Einige Funktionen allozieren Objekte:

- -
var d = new Date();
-var e = document.createElement('div'); // alloziiert ein DOM-Element
-
- -

Andere Methoden allozieren neue Werte oder Objekte:

- -
var s = "azerty";
-var s2 = s.substr(0, 3); // s2 ist ein neuer String
-// Da Strings immutable sind, weist JavaScript evtl. hier
-// keinen neuen Speicher zu, sondern merkt sich nur [0, 3],
-// dass s2 die ersten beiden Elemente von s enthält
-
-var a = ["ouais ouais", "nan nan"];
-var a2 = ["generation", "nan nan"];
-var a3 = a.concat(a2); // neues Array mit den 4 Elementen von a und a2
-
- -

Werte

- -

Bei der Zuweisung von Werten wird in den Speicher geschrieben und beim Abfragen von Werten der Speicher ausgelesen. Weist man also z. B. einer Objekteigenschaft einen Wert zu oder übergibt einen Wert als Argument an eine Funktion, wird dieser in den Speicher geschrieben und beim Abfragen des Werts der Speicher ausgelesen.

- -

Freigabe des Speichers, wenn dieser nicht mehr benötigt wird

- -

Bei diesem Vorgang tauchen am häufigsten Probleme mit der Speicherverwaltung auf, da es keine leichte Aufgabe ist, zu entscheiden, wann der benötigte Speicher tatsächlich nicht mehr gebraucht wird. Oftmals muss der Entwickler selbst bestimmen, an welcher Stelle die Freigabe eines Speicherbereichs erfolgen soll.

- -

Höhere Programmiersprachen setzten häufig eine Softwarekomponente namens Garbage Collector ein, dessen Aufgabe darin besteht, die Speicherallokation zu überwachen und nicht mehr benötigten Speicher wieder freizugeben. Dieser Prozess basiert auf einer Abschätzung, da das zugrundeliegende Problem - zu entscheiden, wann Speicher nicht mehr benötigt wird - unentscheidbar ist (nicht durch einen Algorithmus lösbar).

- -

Garbage Collection

- -

Wie oben schon erwähnt, gibt es keine eindeutige Lösung für das zugrunde liegende Problem. Aus diesem Grund implementieren Garbage Collections einen beschränkten Algorithmus. Dieser Abschnitt liefert Informationen zum Verständnis der wichtigsten Algorithmen der Garbage Collection und deren Beschränkungen.

- -

Referenzen

- -

Der Grundgedanke auf dem Garbage Collection-Algorithmen hauptsächlich basieren, ist die Idee der Referenz. Im Zusammenhang mit der Speicherverwaltung spricht man davon, dass ein Objekt ein anderes Objekt referenziert, wenn ersteres (entweder implizit oder explizit) Zugriff auf letzteres hat. Zum Beispiel hat ein JavaScript-Objekt eine Referenz auf dessen Prototype (implizite Referenz) und dessen Eigenschaftswerte (explizite Referenz).

- -

In diesem Kontext wird also der Begriff Objekt etwas breiter aufgefasst, als im Zusammenhang mit JavaScript-Objekten und beinhaltet außerdem auch Sichtbarkeitsbereiche von Funktionen (bzw. den globalen Sichtbarkeitsbereich).

- -

Referenzzählung der Garbage Collection

- -

Dies ist der naivste Algorithmus der Garbage Collection. Er reduziert einfach "ein Objekt wird nicht mehr benötigt" auf "kein anderes Objekt referenziert auf das Objekt". Ein Objekt wird also dann von der Garbage Collection entsorgt, wenn keine Referenzen auf das Objekt existieren.

- -

Beispiel

- -
var o = {
-  a: {
-    b:2
-  }
-}; // 2 Objekte wurden erstellt. Das eine referenziert auf das andere als dessen Eigenschaft.
-// Das Objekt a wird referenziert, weil es der Variablen o zugewiesen wurde.
-// Da auf alle Objekte irgendwie referenziert wird, kann keines entsogt werden
-
-var o2 = o; // Die Variable 'o2' ist das zweite Objekt mit einer Referenz auf das Objekt
-o = 1; // nun hat das Objekt, das sich ursprünglich in o befand eine einzige Referenz durch 'o2'
-
-var oa = o2.a; // Referenz auf die Eigenschaft 'a' des Objekts.
-// Nun hat das Objekt 2 Referenzen: Eine als Eigenschaft, die andere als Variable 'oa'
-
-o2 = "yo"; // Das objekt, welches sich anfangs in 'o' befand hat nun keine Referenzen mehr
-// und kann von der Garbage Collection entsorgt werden.
-// Jedoch wird die Eigenschaft 'a' noch immer durch die Variable 'oa' referenziert und kann daher nicht freigegeben werden
-
-oa = null; // Nun existieren keine Refrenzen mehr auf die Eigenschaft 'a'
-// und das Objekt kann entsorgt werden.
-
- -

Beschränkung: gegenseitige Referenzen

- -

Dieser naive Algorithmus ist deshalb beschränkt, weil Objekte, die gegenseitig aufeinender referenzieren, gar nicht mehr benötigt werden könnten, aber nicht entsorgt werden dürfen, da noch auf sie referenziert wird.

- -
function f(){
-  var o = {};
-  var o2 = {};
-  o.a = o2; // o referenziert o2
-  o2.a = o; // o2 referenziert o
-
-  return "azerty";
-}
-
-f();
-// die Objekte werden erzeugt und referenzieren gegenseitig aufeinander.
-// Sie werden außerhalb des Sichtbarkeitsbereichs der Funktion nicht verwendet
-// und könnten daher nach der Funktionsausführung freigegeben werden
-// Der Referenzzählungsalgorithmus erkennt jedoch nur, dass auf beide Objekte
-// noch referenziert wird und entsorgt daher keines der beiden
-
- -

Praxisbeispiel

- -

Bei Internet Explorer 6, 7 ist bekannt, dass sie einen Garbage Collector mit Referenzzählung für DOM-Objekte einsetzen. Es gibt daher ein bekanntes Muster für die systematische Erzeugung von Speicherlecks:

- -
var div = document.createElement("div");
-div.onclick = function(){
-  doSomething();
-}; // Das div hat eine Referenz über die Event-Handler-Eigenschaft 'onclick'.
-// Der Handler hat auch eine Referenz auf das div, da die div-Variable
-// innerhalb Sichtbarkeitsbereich der Funktion ansprechbar ist.
-// Dieser Kreislauf sorgt dafür, dass beide Objekte nicht entsorgt werden
-// und ein Speicherleck entsteht
-
- -

Mark-and-Sweep-Algorithmus

- -

Dieser Algorithmus reduziert die Definition "ein Objekt wird nicht mehr gebraucht" auf "ein Objekt ist nicht erreichbar".

- -

Der Algorithmus nimmt an, dass ein Satz von root-Objekten (bei JavaScript das globale Objekt) existiert. Der Algorithmus sucht dann von diesen Anfangsobjekten aus alle referenzierten Objekte, dann von den referenzierten Objekten alle Objekte, die auf andere Objekte referenzieren und so weiter. Auf diese Weise erkennt der Algorithmus alle erreichbaren Objekte und sammelt alle unerreichbaren Objekte.

- -

Dieser Algorithmus ist besser als der vorherige, da Objekte, die nicht referenziert sind als unerreichbar gelten, jedoch Objekte, die unerreichbar sind, nicht unbedingt keine Referenzen haben (gegenseitige Referenz).

- -

Im Jahr 2012 arbeiten alle modernen Browser mit einem Mark-and-Sweep-Garbage Collector. Alle Verbesserungen der letzen Jahre im Bereich der Garbage Collection bei JavaScript (generational/incremental/concurrent/parallel garbage collection) sind Verbesserungen der Implementierung des Algorithmus, jedoch keine Änderungen des Algorithmus selbst oder der Definition von "ein Objekt wird nicht mehr gebraucht".

- -

Gegenseitige Verweise stellen kein Problem mehr dar

- -

Bei dem Beispiel oben zu gegenseitigen Verweisen wird auf die beiden Objekte nicht mehr von einem Objekt aus verwiesen, welches über das globale Objekt erreichbar ist. Daher werden sie vom Garbage Collector als unerreichbar angesehen.

- -

Dasselbe gilt für das nächste Beispiel. Sobald das div und der Handler unerreichbar geworden sind, werden sie vom Gabage Collector entsorgt, obwohl sie noch gegenseitig aufeinander verweisen.

- -

Einschränkung: Objekte müssen explizit unerreichbar gemacht werden

- -

Obwohl dies als Einschränkung gilt, gibt es in der Praxis kaum solche Situationen und deshalb denkt kaum jemand über die Garbage Collection nach.

- -

Weitere Informationen

- - diff --git a/files/de/web/javascript/vergleiche_auf_gleichheit_und_deren_verwendung/index.html b/files/de/web/javascript/vergleiche_auf_gleichheit_und_deren_verwendung/index.html deleted file mode 100644 index 2b9be0a283..0000000000 --- a/files/de/web/javascript/vergleiche_auf_gleichheit_und_deren_verwendung/index.html +++ /dev/null @@ -1,424 +0,0 @@ ---- -title: Vergleiche auf Gleichheit und deren Verwendung -slug: Web/JavaScript/Vergleiche_auf_Gleichheit_und_deren_Verwendung -translation_of: Web/JavaScript/Equality_comparisons_and_sameness ---- -
{{jsSidebar("Intermediate")}}
- -
-

JavaScript bietet drei verschiedene Operationen an, um Werte zu vergleichen:

- - - -

Die Wahl der Operation hängt von der Art des gewünschten Vergleichs auf Gleichheit ab.

-
- -

Kurz gesagt nimmt double equals eine Typkonvertierung der Operanden vor, bevor der Vergleich der Werte gemacht wird. Bei triple equals werden die Werte ohne vorherige Typkonvertierung miteinander verglichen. Wenn sich die Datentypen der beiden Operanden unterscheiden liefert triple equals immer false zurück. Object.is verhält sich wie triple equals und bietet darüber hinaus eine spezielle Behandlung für NaN und -0 und +0 an. -0 und +0 sind für Object.is ungleich während Object.is(NaN, NaN) true ist. Laut IEEE 754 ergibt ein Vergleich von zwei NaN mit double equals oder triple equals false. Diese drei Operationen unterscheiden sich ihrere Behandlung von primitiven Datentypen. Es wird nicht geprüft, ob die beiden Operanden konzeptionell diesselbe Struktur besitzen. Für die nichtprimitiven Objekte x und y, welche diesselbe Struktur besitzen aber zwei unterschiedliche Objekte sind, ergeben die drei Operationen false.

- -

Strikte Gleichheit mit ===

- -

Strikte Gleichheit prüft zwei Werte auf Gleichheit. Keiner der Werte wird vor dem Vergleich implizit konvertiert. Wenn die Werte verschiedene Datentypen haben, werden die Werte als ungleich betrachtet. Anderenfalls, wenn die Werte denselben Datentyp haben und keine Zahlen sind, werden sie als gleich betrachtet, solange sie denselben Wert haben. Wenn beide Werte Zahlen sind, werden sie als gleich betrachtet, solange beide nicht NaN sind und denselben Wert haben oder der eine Wert +0 und der andere Wert -0 ist.

- -
var num = 0;
-var obj = new String("0");
-var str = "0";
-var b = false;
-
-console.log(num === num); // true
-console.log(obj === obj); // true
-console.log(str === str); // true
-
-console.log(num === obj); // false
-console.log(num === str); // false
-console.log(obj === str); // false
-console.log(null === undefined); // false
-console.log(obj === null); // false
-console.log(obj === undefined); // false
-
- -

Strikte Gleichheit ist fast immer die am meisten geeignete Vergleichsoperation. Für alle Werte, die keine Zahlen sind, verwendet sie die naheliegende Semantik: ein Wert ist nur mit sich selbst gleich. Für Zahlen kommt eine leicht unterschiedliche Semantik zum Einsatz, da zwei Grenzfälle berücksichtigt werden müssen.  Im ersten Grenzfall kann die Zahl 0 als Gleitkommazahl ein positives oder negatives Vorzeichen haben. Dies kann zur Repräsentation von bestimmten mathematischen Lösungen nützlich sein. Da aber in den meisten Situationen nicht zwischen +0 und -0 unterschieden wird, behandelt die strikte Gleichheit diese zwei Werte als gleich. Der zweite Grenzfall ergibt sich dadruch, dass Gleitkommazahlen einen keine-Zahl Wert haben, NaN (not-a-number). Dadurch können Lösungen für schlecht definierte mathematische Probleme dargestellt werden (z.B.: negativ unendlich plus positiv undendlich). Strikte Gleichheit behandelt NaN als ungleich zu jedem anderen Wert und sich selbst. Der einzige Fall, in dem (x !== x) true ergibt, ist, wenn x den Wert NaN hat.

- -

Lose Gleichheit mit ==

- -

Lose Gleichheit vergleicht zwei Werte auf deren Gleichheit, nachdem beide zu demselben Datentyp konvertiert wurden. Nach der Konvertierung (ein oder beide Werte können konvertiert werden) wird der finale Vergleich wie bei === ausgeführt.  Lose Gleichheit ist symmetrisch: A == B hat immer dieselbe Semantik wie B == A für alle Werte von A und B.

- -

Der Vergleich auf Gleichheit wird wie folgt für Operanden mit den verschiedenen Datentypen ausgeführt:

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
 Operand B
  UndefinedNullNumberStringBooleanObject
Operand AUndefinedtruetruefalsefalsefalseIsFalsy(B)
NulltruetruefalsefalsefalseIsFalsy(B)
NumberfalsefalseA === BA === ToNumber(B)ToNumber(B) === AToPrimitive(B) == A
StringfalsefalseB === ToNumber(A)A === BToNumber(A) === ToNumber(B)ToPrimitive(B) == A
BooleanfalsefalseToNumber(A) === BToNumber(A) === ToNumber(B)A === Bfalse
ObjectIsFalsy(A)IsFalsy(A)ToPrimitive(A) == BToPrimitive(A) == Bfalse -

A === B

-
- -

In der oberen Tabelle versucht ToNumber(A) sein Argument vor dem Vergleich in eine Zahl zu konvertieren. Das Verhalten ist äquivalent zu +A (der unäre + Operator).  ToPrimitive(A) versucht sein Argument, das ein Objekt ist, in einen primitiven Wert zu konvertieren. Dazu wird eine unterschiedliche Sequenz von A.toString und A.valueOf Methoden von A aufzurufen.

- -

Traditionell und laut ECMAScript sind alle Objekte lose ungleich zu undefined und null. Aber die meisten Webbbrowser erlauben einer sehr kleinen Menge von Objekten (speziell das document.all Objekt für jede Seite), dass sie sich in bestimmten Kontexten so verhalten, als ob sie den Wert undefined emulieren.  Lose Gleichheit ist ein derartiger Kontext. Daher ergibt die Methode IsFalsy(A) genau dann true, wenn A ein Objekt ist, das undefined emuliert. In allen anderen Fällen ist ein Objekt nie lose gleich zu undefined oder null.

- -
var num = 0;
-var obj = new String("0");
-var str = "0";
-var b = false;
-
-console.log(num == num); // true
-console.log(obj == obj); // true
-console.log(str == str); // true
-
-console.log(num == obj); // true
-console.log(num == str); // true
-console.log(obj == str); // true
-console.log(null == undefined); // true
-
-// both false, except in rare cases
-console.log(obj == null);
-console.log(obj == undefined);
-
- -

Manche Entwickler haben die Ansicht, dass die Verwendung der losen Gleichheit fast nie eine gute Idee ist. Das Resultat des Vergleichs mit strikter Gleichheit ist einfacher vorherzusagen und die Auswertung ist schneller, da keine Konvertierung der Werte stattfindet.

- -

Same-value Gleichheit

- -

Same-value Gleichheit adressiert den dritten Fall: Bestimmung, ob zwei Werte in allen Kontexten funktional identisch sind. Dieser Anwendungsfall demonstriert eine Instanz des Liskovschen Substitutionsprinzip. Eine Instanz tritt auf, wenn versucht wird ein nicht veränderbares Property zu verändern:

- -
// Add an immutable NEGATIVE_ZERO property to the Number constructor.
-Object.defineProperty(Number, "NEGATIVE_ZERO",
-                      { value: -0, writable: false, configurable: false, enumerable: false });
-
-function attemptMutation(v)
-{
-  Object.defineProperty(Number, "NEGATIVE_ZERO", { value: v });
-}
-
- -

Object.defineProperty wird eine Exception werfen, wenn ein Versuch zum Verändern eines unveränderbares Property es verändern würde. Es passiert nichts, solange keine Veränderung stattfinden soll.  Wenn v -0 ist, wurde keine Veränderung angefragt und somit wird keine Exception geworfen. Wenn v aber +0 ist, hätte Number.NEGATIVE_ZERO nicht länger seinen unveränderbaren Wert. Wenn ein unveränderbares Property neudefiniert wird, wird der neu spezifizierte Wert intern mittels der Same-value Gleichheit mit dem aktuellen Wert verglichen.

- -

Die Same-value Gleichheit wird von der Object.is Methode angeboten.

- -

Abstrakte Gleichheit, strikte Gleichheit und same-value Gleichheit in der Spezifikation

- -

In ECMAScript 5 wird der Vergleich mit == in Section 11.9.3, The Abstract Equality Algorithm beschrieben. Der === Vergleich ist in 11.9.6, The Strict Equality Algorithm zu finden. (Diese beiden Abschnitte sind kurz und verständlich. Hinweis: zuerst den Abschnitt Strict Equality Algorithm lesen) ECMAScript 5 beschreibt auch die same-value Gleichheit in Section 9.12, The SameValue Algorithm für die interne Verwendung in der JavaScript Engine. Dieser Abschnitt ist hauptsächlich derselbe wie Strict Equality Algorithm mit der Ausnahme, dass sich 11.9.6.4 und 9.12.4 in der Behandlung von Zahlen (Number) unterscheiden. ECMAScript 2015 schlägt vor, dass dieser Algorithmus über Object.is angeboten wird.

- -

Wir können erkennen, dass mit double und triple equals, mit der Ausnahme der vorhergehenden Typkonvertierung in 11.9.6.1, der Strict Equality Algorithm eine Teilmenge des Abstract Equality Algorithm ist, weil 11.9.6.2–7 dem Abschnitt 11.9.3.1.a–f entspricht.

- -

A model for understanding equality comparisons?

- -

Prior to ES2015, you might have said of double equals and triple equals that one is an "enhanced" version of the other. For example, someone might say that double equals is an extended version of triple equals, because the former does everything that the latter does, but with type conversion on its operands. E.g., 6 == "6". (Alternatively, someone might say that double equals is the baseline, and triple equals is an enhanced version, because it requires the two operands to be the same type, so it adds an extra constraint. Which one is the better model for understanding depends on how you choose to view things.)

- -

However, this way of thinking about the built-in sameness operators is not a model that can be stretched to allow a place for ES2015's Object.is on this "spectrum". Object.is isn't simply "looser" than double equals or "stricter" than triple equals, nor does it fit somewhere in between (i.e., being both stricter than double equals, but looser than triple equals). We can see from the sameness comparisons table below that this is due to the way that Object.is handles NaN. Notice that if Object.is(NaN, NaN) evaluated to false, we could say that it fits on the loose/strict spectrum as an even stricter form of triple equals, one that distinguishes between -0 and +0. The NaN handling means this is untrue, however. Unfortunately, Object.is simply has to be thought of in terms of its specific characteristics, rather than its looseness or strictness with regard to the equality operators.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Sameness Comparisons
xy=====Object.is
undefinedundefinedtruetruetrue
nullnulltruetruetrue
truetruetruetruetrue
falsefalsetruetruetrue
"foo""foo"truetruetrue
{ foo: "bar" }xtruetruetrue
00truetruetrue
+0-0truetruefalse
0falsetruefalsefalse
""falsetruefalsefalse
""0truefalsefalse
"0"0truefalsefalse
"17"17truefalsefalse
[1,2]"1,2"truefalsefalse
new String("foo")"foo"truefalsefalse
nullundefinedtruefalsefalse
nullfalsefalsefalsefalse
undefinedfalsefalsefalsefalse
{ foo: "bar" }{ foo: "bar" }falsefalsefalse
new String("foo")new String("foo")falsefalsefalse
0nullfalsefalsefalse
0NaNfalsefalsefalse
"foo"NaNfalsefalsefalse
NaNNaNfalsefalsetrue
- -

When to use Object.is versus triple equals

- -

Aside from the way it treats NaN, generally, the only time Object.is's special behavior towards zeros is likely to be of interest is in the pursuit of certain meta-programming schemes, especially regarding property descriptors when it is desirable for your work to mirror some of the characteristics of Object.defineProperty. If your use case does not require this, it is suggested to avoid Object.is and use === instead. Even if your requirements involve having comparisons between two NaN values evaluate to true, generally it is easier to special-case the NaN checks (using the isNaN method available from previous versions of ECMAScript) than it is to work out how surrounding computations might affect the sign of any zeros you encounter in your comparison.

- -

Here's an in-exhaustive list of built-in methods and operators that might cause a distinction between -0 and +0 to manifest itself in your code:

- -
-
- (unary negation)
-
- -
-
-

It's obvious that negating 0 produces -0. But the abstraction of an expression can cause -0 to creep in when you don't realize it. For example, consider:

- -
let stoppingForce = obj.mass * -obj.velocity
- -

If obj.velocity is 0 (or computes to 0), a -0 is introduced at that place and propogates out into stoppingForce.

-
-
- -
-
Math.atan2
-
Math.ceil
-
Math.pow
-
Math.round
-
- -
-
It's possible for a -0 to be introduced into an expression as a return value of these methods in some cases, even when no -0 exists as one of the parameters. E.g., using Math.pow to raise -Infinity to the power of any negative, odd exponent evaluates to -0. Refer to the documentation for the individual methods.
-
- -
-
Math.floor
-
Math.max
-
Math.min
-
Math.sin
-
Math.sqrt
-
Math.tan
-
- -
-
It's possible to get a -0 return value out of these methods in some cases where a -0 exists as one of the parameters. E.g., Math.min(-0, +0) evalutes to -0. Refer to the documentation for the individual methods.
-
- -
-
~
-
<<
-
>>
-
Each of these operators uses the ToInt32 algorithm internally. Since there is only one representation for 0 in the internal 32-bit integer type, -0 will not survive a round trip after an inverse operation. E.g., both Object.is(~~(-0), -0) and Object.is(-0 << 2 >> 2, -0) evaluate to false.
-
- -

Relying on Object.is when the signedness of zeros is not taken into account can be hazardous. Of course, when the intent is to distinguish between -0 and +0, it does exactly what's desired.

- -

Siehe auch

- - -- cgit v1.2.3-54-g00ecf