Call method from object javascript

Javascript call method from object javascript code example

Since global variables are actually properties of the global object, you can view free functions as actually being methods of the global object. If you want to support this kind of usage you’ll have to manually reference the initial object: Solution 3: In Javascript you need to explicitly mention the The same is also true for other member variables (remember that in Javascript methods are just member variables that happen to be functions)

JavaScript call object method by its name [duplicate]

TJ’s answer is nearly there, except that (per the new code in your question) you need to either copy the arguments from onSubmit to thisSubmit , or use .apply() to copy them for you.

The code below uses the latter method, which avoids having to duplicate the function signature over and over:

new AjaxUpload(thisId, < action: thisUrl, name: 'thisfile', onSubmit: function() < imageObject[thisSubmit].apply(imageObject, arguments); >, onComplete: function() < imageObject[thisCallback].apply(imageObject, arguments); >>); 

If I’ve understood your question correctly, you need to use the square bracket syntax to access the properties:

new AjaxUpload(thisId, < action: thisUrl, name: 'thisfile', onSubmit: function () < //Anonymous function so you can pass arguments imageObject[thisSubmit]("myArg"); //Square brackets here >, onComplete: imageObject[thisCallback] //Square brackets here (no arguments) >); 

I’m assuming the thisSubmit and thisCallback local variables are meant to be the names of the functions that exist on imageObject .

Do both call those methods using names from those strings, and pass in arguments, you use a combination of bracketed syntax and closures:

var imageObject = < sendImage : function(obj) < "use strict"; var thisId = obj.attr('id'); var thisSubmit = obj.attr('data-submit'); var thisCallback = obj.attr('data-callback'); var thisUrl = $('#' + obj.attr('data-url')).text(); new AjaxUpload(thisId, < action: thisUrl, name: 'thisfile', onSubmit: function() < imageObject[thisSubmit](arg, anotherArg, etc); >, onComplete: function() < imageObject[thisCallback](arg, anotherArg, etc); >>); > // Presumably there are more methods here, or added later. > 

Javascript objects calling function from itself, Declaring self and binding it to this is a technique used to deal with the (somewhat interesting) intricacies of referring to the current object in JavaScript (because the example code uses window.setInterval). To reference a function within the current object, it is enough to use this.

OOP. Calling methods from within methods

The object the current method was invoked on is available via the special variable this . Any time you call a method on an object, this will refer, within the method, to the object.

var myExtension = < init: function() < this.onPageLoad(); >, onPageLoad: function() < // Do something >, >; 

this always refers to the calling object rather than the object the function is defined on or is a property of.

value = 'global'; var ob0 = < value: 'foo', val: function() < return this.value; >, >, ob1 = , ob2 = ; ob0.val(); // 'foo' ob1.val = ob0.foo; ob1.val(); // 'bar' ob0.val.call(ob2); // 'baz' var val = ob0.val; val(); // 'global' 

In the last case, val is executed as a free function (a function that isn’t bound to an object, i.e. not a method), in which case this takes on the value of the global object (which is window in web browsers) within the execution of val . Global variables are actually properties of the global object, hence val() returns ‘global’ (the value of the global variable named value ). Since global variables are actually properties of the global object, you can view free functions as actually being methods of the global object. From this viewpoint, the last two lines (when executed in global scope) are equivalent to:

window.val = ob0.val; window.val(); 

This viewpoint doesn’t exactly match the reality of scoping, though you’ll only notice the difference within functions. In a function, window.val = . will create a global while var val won’t.

value = 'global'; var ob0 = < value: 'foo', val: function() < return this.value; >, >; function lcl() < var val = ob0.val; // doesn't set a global named `val` return val(); // 'global' >lcl(); // 'global' val(); // error; nothing named 'val' function glbl() < window.val = ob0.val; // sets a global named `val` return window.val(); // 'global' >glbl(); // 'global' val(); // 'global' 

See MDN’s reference page for more on the call method used above. For more on the this variable, see «JavaScript “this” keyword» and «How does “this” keyword work within a JavaScript object literal?»

Assuming that you have called init like this:

But in Javascript functions are not actually bound to objects and you can call any function on any other object, like this:

myExtension.init.call(anotherObject); // or myExtension.init.apply(anotherObject); 

In this example this within init would be anotherObject , which doesn’t have onPageLoad defined. If you want to support this kind of usage you’ll have to manually reference the initial object:

In Javascript you need to explicitly mention the this

The same is also true for other member variables (remember that in Javascript methods are just member variables that happen to be functions)

Calling java methods in javascript code, i created a java class content method return a String, my question is how to call this function in my javascript code to use the returned value from the java method. I want to call client-side Java code embedded in browser. here is an exemple of what im talking about: in my webpage i have a javascript code, here is some of it:

Javascript: calling an object’s method in different ways

The first method the () are missing? It should be

document.getElementById("bid").onclick = ccc.inc(); 

«this» only works when the function has been called directly by the «instance», like in ccc.inc(). When passed as reference «this» refers to calling context, in this case the clickable element.

How to call a C++ method from javascript, I have a C++ method (which role is killing some processes). She needs 2 parameters : a hostname and a port. On the other hand, I am developing a web-application (using Nodejs and AngularJS), run

Javascript OOP — how the object call its instance method?

function MyHandler() < var thisInstance = this; this.begin = function() < $("#hiddenIframe").bind("dialogclose", function() < thisInstance.after(); >); > this.after = function() < //do something here >> 

Thank you, Juicy Scripter. I don’t know how jquery dialog calls dialogclose event handlers, but the described error indicates that context of the call of anonymous function with this.after(); inside it is not MyHandler , and this means something else there. To be explicit about whose method after is, define local variable in MyHandler constructor and use this variable when you need to call MyHandler instance methods inside functions that will be called in unknown context.

jQuery binded functions executed in context to what they binded.

You have #hiddenIframe as this in your event listener

You probably want to store pointer to your instance in some variable and use it later in contexts other than instance itself.

I don’t think any problem in you code. It works !!
There is also another simple way of representing the same Object i.e. in the form of JSON.

Dialog Box code with OOP java script function:

       Show the Dialog 
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
   

JavaScript call object method by its name, TJ’s answer is nearly there, except that (per the new code in your question) you need to either copy the arguments from onSubmit to thisSubmit, or use .apply() to copy them for you. The code below uses the latter method, which avoids having to duplicate the function signature over and over:

Источник

Явное указание this: «call», «apply»

Материал на этой странице устарел, поэтому скрыт из оглавления сайта.

Более новая информация по этой теме находится на странице https://learn.javascript.ru/call-apply-decorators.

Итак, мы знаем, что this – это текущий объект при вызове «через точку» и новый объект при конструировании через new .

В этой главе наша цель получить окончательное и полное понимание this в JavaScript. Для этого не хватает всего одного элемента: способа явно указать this при помощи методов call и apply .

Метод call

func.call(context, arg1, arg2, . )

При этом вызывается функция func , первый аргумент call становится её this , а остальные передаются «как есть».

Вызов func.call(context, a, b. ) – то же, что обычный вызов func(a, b. ) , но с явно указанным this(=context) .

Например, у нас есть функция showFullName , которая работает с this :

Пока объекта нет, но это нормально, ведь JavaScript позволяет использовать this везде. Любая функция может в своём коде упомянуть this , каким будет это значение – выяснится в момент запуска.

Вызов showFullName.call(user) запустит функцию, установив this = user , вот так:

function showFullName() < alert( this.firstName + " " + this.lastName ); >var user = < firstName: "Василий", lastName: "Петров" >; // функция вызовется с this=user showFullName.call(user) // "Василий Петров"

После контекста в call можно передать аргументы для функции. Вот пример с более сложным вариантом showFullName , который конструирует ответ из указанных свойств объекта:

var user = < firstName: "Василий", surname: "Петров", patronym: "Иванович" >; function showFullName(firstPart, lastPart) < alert( this[firstPart] + " " + this[lastPart] ); >// f.call(контекст, аргумент1, аргумент2, . ) showFullName.call(user, 'firstName', 'surname') // "Василий Петров" showFullName.call(user, 'firstName', 'patronym') // "Василий Иванович"

«Одалживание метода»

При помощи call можно легко взять метод одного объекта, в том числе встроенного, и вызвать в контексте другого.

Это называется «одалживание метода» (на англ. method borrowing).

Используем эту технику для упрощения манипуляций с arguments .

Как мы знаем, arguments не массив, а обычный объект, поэтому таких полезных методов как push , pop , join и других у него нет. Но иногда так хочется, чтобы были…

Нет ничего проще! Давайте скопируем метод join из обычного массива:

function printArgs() < arguments.join = [].join; // одолжили метод (1) var argStr = arguments.join(':'); // (2) alert( argStr ); // сработает и выведет 1:2:3 >printArgs(1, 2, 3);

1. В строке (1) объявлен пустой массив [] и скопирован его метод [].join . Обратим внимание, мы не вызываем его, а просто копируем. Функция, в том числе встроенная – обычное значение, мы можем скопировать любое свойство любого объекта, и [].join здесь не исключение.
2. В строке (2) запустили join в контексте arguments , как будто он всегда там был.

Здесь метод join массива скопирован и вызван в контексте arguments . Не произойдёт ли что-то плохое от того, что arguments – не массив? Почему он, вообще, сработал?

Ответ на эти вопросы простой. В соответствии со спецификацией, внутри join реализован примерно так:

function join(separator) < if (!this.length) return ''; var str = this[0]; for (var i = 1; i < this.length; i++) < str += separator + this[i]; >return str; >

Как видно, используется this , числовые индексы и свойство length . Если эти свойства есть, то все в порядке. А больше ничего и не нужно.

В качестве this подойдёт даже обычный объект:

var obj = < // обычный объект с числовыми индексами и length 0: "А", 1: "Б", 2: "В", length: 3 >; obj.join = [].join; alert( obj.join(';') ); // "A;Б;В"

…Однако, копирование метода из одного объекта в другой не всегда приемлемо!

Представим на минуту, что вместо arguments у нас – произвольный объект. У него тоже есть числовые индексы, length и мы хотим вызвать в его контексте метод [].join . То есть, ситуация похожа на arguments , но (!) вполне возможно, что у объекта есть свой метод join .

Поэтому копировать [].join , как сделано выше, нельзя: если он перезапишет собственный join объекта, то будет страшный бардак и путаница.

Безопасно вызвать метод нам поможет call :

function printArgs() < var join = [].join; // скопируем ссылку на функцию в переменную // вызовем join с this=arguments, // этот вызов эквивалентен arguments.join(':') из примера выше var argStr = join.call(arguments, ':'); alert( argStr ); // сработает и выведет 1:2:3 >printArgs(1, 2, 3);

Мы вызвали метод без копирования. Чисто, безопасно.

Ещё пример: [].slice.call(arguments)

В JavaScript есть очень простой способ сделать из arguments настоящий массив. Для этого возьмём метод массива: slice.

По стандарту вызов arr.slice(start, end) создаёт новый массив и копирует в него элементы массива arr от start до end . А если start и end не указаны, то копирует весь массив.

Вызовем его в контексте arguments :

function printArgs() < // вызов arr.slice() скопирует все элементы из this в новый массив var args = [].slice.call(arguments); alert( args.join(', ') ); // args - полноценный массив из аргументов >printArgs('Привет', 'мой', 'мир'); // Привет, мой, мир

Как и в случае с join , такой вызов технически возможен потому, что slice для работы требует только нумерованные свойства и length . Всё это в arguments есть.

Метод apply

Если нам неизвестно, с каким количеством аргументов понадобится вызвать функцию, можно использовать более мощный метод: apply .

Вызов функции при помощи func.apply работает аналогично func.call , но принимает массив аргументов вместо списка.

func.call(context, arg1, arg2); // идентичен вызову func.apply(context, [arg1, arg2]);

В частности, эти две строчки сработают одинаково:

showFullName.call(user, 'firstName', 'surname'); showFullName.apply(user, ['firstName', 'surname']);

Преимущество apply перед call отчётливо видно, когда мы формируем массив аргументов динамически.

Например, в JavaScript есть встроенная функция Math.max(a, b, c. ) , которая возвращает максимальное значение из аргументов:

При помощи apply мы могли бы найти максимум в произвольном массиве, вот так:

var arr = []; arr.push(1); arr.push(5); arr.push(2); // получить максимум из элементов arr alert( Math.max.apply(null, arr) ); // 5

В примере выше мы передали аргументы через массив – второй параметр apply … Но вы, наверное, заметили небольшую странность? В качестве контекста this был передан null .

Строго говоря, полным эквивалентом вызову Math.max(1,2,3) был бы вызов Math.max.apply(Math, [1,2,3]) . В обоих этих вызовах контекстом будет объект Math .

Но в данном случае в качестве контекста можно передавать что угодно, поскольку в своей внутренней реализации метод Math.max не использует this . Действительно, зачем this , если нужно всего лишь выбрать максимальный из аргументов? Вот так, при помощи apply мы получили короткий и элегантный способ вычислить максимальное значение в массиве!

В современном стандарте call/apply передают this «как есть». А в старом, без use strict , при указании первого аргумента null или undefined в call/apply , функция получает this = window , например:

Источник