Awhile back, I wrote a post on how to access Ruby objects from inside your JavaScript enviroment when using The Ruby Racer. It showed just some of the many ways that you can access Ruby state and call Ruby code from within JavaScript. However, the story doesn't end there. The Ruby Racer is, after all, a two way bridge, and I thought it would be useful to document some of the ways in which you can access your JavaScript environment from within Ruby.
\nLet's start with the Context#eval method, which is used to execute JavaScript code from Ruby. Its the most intuitive way,\nand what gets used most often for examples.
Given a string, it compiles it as JavaScript source and then executes it inside the context. Nothing\ncrazy there:
\nV8::Context.new do |cxt|\n cxt.eval('1 + 1') #=> 2\n cxt.eval('foo = {bar: \"bar\", baz: \"baz\"}')\n cxt.eval('foo.bar') #=> \"bar\"\n cxt.eval('foo.baz') #=> \"baz\"\n cxt.eval('new Object()') #=> [object Object]\nendAmong other things, the context captures what functions and objects are defined in the global scope\nwhenever anything gets eval()'d. So, for example, the Object constructor used in the last line is stored\nin the context.
As a tool for embedding however, eval() is the most blunt and (often) inefficient method available.\nFor this reason The Ruby Racer, sports an extensive Ruby API for\ninteracting with JavaScript objects which includes accessing properties, calling functions and methods, as well\nas creating new instances. In fact, I rarely use eval() at all to manipulate a JavaScript context\nexcept for loading source files into the interpreter.
The Ruby API consists of V8::Object and all of its subclasses:
V8::Context.new do |cxt|\n cxt.eval('new Object()').class #=> V8::Object\n cxt.eval('(function() {})').class #=> V8::Function\n cxt.eval('new Array()).class #=> V8::Array\nendThe most fundamental operations in dealing with JavaScript objects are the getting and setting of values.\nCoincidentally, this is also a fundamental concept in Ruby, so it comes as no great surprise that we can re-use\nthose constructs in Ruby that deal with property access to mirror those same operations on their JavaScript\ncounterparts: the []()/[]=() and foo()/foo=() methods:
given the following context:
\ncxt = V8::Context.new\norder = cxt.eval('order = {eggs: \"over-easy\"}')we can read the eggs property of our order in several differnt ways.\nVia hash access (note that both string and symbol are acceptable as key values):
order['eggs'] #=> \"over-easy\"\norder[:eggs] #=> \"over-easy\"Values can be set with the hash-style access as well, and changes made from Ruby\nwill be reflected accordingly on the JavaScript side
\norder['eggs'] = \"sunny side up\"\ncxt.eval('order.eggs') #=> \"sunny side up\"For property names that are also valid Ruby method names, you can access them just\nlike you would with Ruby properties declared with attr_reader or attr_accessor. Again,\nchanges made to the object in this way will be reflected in JavaScript:
order.eggs #=> \"sunny side up\"\n order.eggs = \"scrambled\"\n cxt.eval('order.eggs') #=> \"scrambled\"\nendIn the cases where the property name is not a valid Ruby method name, hash-style access is mandatory:
\norder['Extra $%#@! Mayonaise!'] = trueV8::Object also includes Enumerable and allows you to access all properties of a given object.
order.each do |key, value|\n puts \"#{key} -> #{value}\"\nend\n\n#outputs:\neggs -> scrambled\nExtra $%#@! Mayonaise! -> trueAs a convenience, V8::Context delegates the hash access functions to the JavaScript object which serves\nas its global scope.
order == cxt['order'] #=> true\norder == cxt.scope['order'] #=> trueNot much to see here, but before you move along: A V8::Array is like every other V8::Object except it has a length property, and\nit enumerates over the items stored at indices instead of the key, value pairs of its properties.
array = cxt.eval('[\"green\", \"red\", \"golden\"]')\narray.length #=> 3\narray.map {|color| \"#{color} slumbers\"} #=> ['green slumbers', 'red slumbers', 'golden slumbers']Consider the classic \"Circle\" example from every object oriented playbook you'll ever read. In JavaScript,\nthe way to implement the circle \"class\" is with a constructor function.
\ncircle = cxt.eval<<-JS\n function Circle(radius) {\n this.radius = radius\n this.area = function() {\n return this.radius * this.radius * Math.PI\n }\n this.circumference = function() {\n return 2 * Math.PI * this.radius\n }\n }\n new Circle(5)\nJSNow that we have the Circle constructor defined, and we have a reference to an instance of it in Ruby,\nwe can call its methods just as though it were a normal Ruby object. Of course, only we know\nthat under the covers the implementation is actually in JavaScript:
circle.class #=> V8::Object\ncircle.radius #=> 5\ncircle.area() #=> 25Π\ncircle.circumference() #=> 10ΠIn JavaScript, methods are just object properties that happen to be functions. Therefore, you can get\na reference to the actual function value just as you could from JavaScript simply by accessing the property\nby name. The resulting value is an instance of V8::Function.
area = circle['area']\ncircumference = circle['circumference']\narea.class #=> V8::Function\ncircumference.class #=> V8::FunctionOnce you have a reference to a V8::Function, there are two ways to call the underlying JavaScript code\n(Actually there are three, but the third will be covered in the next section). These are the call() and\nmethodcall() methods. To understand the difference between these two methods, it helps to understand how\nJavaScript functions themselves are invoked. In the event, there is the option to pass an object\nwhich will serve as the implicit invocant or this value. If no this is provided, the function will\nuse the global scope in its place. Take for example the following JavaScript
var circle = new Circle(5)\nvar area = circle.area //=> [object Function]\n//no invocant, corresponds to ruby call()\narea() //=> NaN, there is no global 'radius'.\n//call with invocant, corresponds ruby methodcall()\narea.apply(circle) //=> 25ΠThe same code in Ruby:
\narea = circle['area']\narea.class #=> V8::Function\narea.call() #=> NaN\narea.methodcall(circle) #=> 25ΠBecause of this mechanism, JavaScript method invocation is much more flexible than Ruby in the sense that\nvirtually any object can be used as the invocant of any function provided it has the requisite properties\nto satisfy the function's requirements:
\narea.methodcall(:radius => 5) #=> 25Π\nother_circle = OpenStruct.new\nother_circle.radius = 10\narea.methodcall(other_circle) #=> 100ΠA very powerful construct indeed.
\nBut wait, there's more! Any JavaScript function can be either invoked normally, or, combined with the new keyword,\nas a constructor. It's what we used in the original eval() block to create the instance of Circle whose methods we were messing\nabout with.
That was not quite necessary since we can invoke functions as constructors from Ruby too. This is done with the new\nmethod of V8::Function.
Circle = cxt['Circle']\ncircle2 = Circle.new(3)\ncircle2.radius #=> 3\ncircle2.area #=> 9Π\ncircle2.circumference #=> 6ΠInterestingly, when used as a constructor, a JavaScript function is almost completely indistinguishable from a Ruby class.\nThis apparent duality between classes and functions is behind the decision to represent Ruby classes reflected into JavaScript as functions
\nThe driving goal in all of these cases is the ability to author intuitive, tightly bound JavaScript, which necessarily doesn't\ninvolve evaluating strings to get what you want done. In closing, if there is something missing from this API you think would\nbe useful, I would love to hear about it
","frontmatter":{"date":"October 25, 2010","description":null,"tags":["javascript","ruby","therubyracer"],"img":null}}}},"pageContext":{"id":"581a91cf-5326-546f-b793-dbd69b6f6d52"}}, "staticQueryHashes": ["1241260443"]}