Apparently a few people were pretty irritated the last time I posted about what you can make Javascript do (+foo instead of foo() for calls) so today I thought I’d post about a pattern that I actually use regularly. Of course, as with any pattern there are good reasons not to use it. Most of all:complexity… for example you may not be able to make your favourite development environment understand it. Speed shouldn’t be an issue though: It adds one entry to the name lookup tree, but that shouldn’t even really be measurable.<\/p>\n
When you do OOP Javascript you’ll often want to add a lot of stuff to the prototype of a constructor. Often people use object notation to get around having to type Foo.prototype.bar=… over and over again. Problem is: This replaces the prototype, so if you’re using inheritance it won’t work. You’d overwrite the inherited prototype:<\/p>\n
var BaseCtor=function(){};\r\n\r\nvar FailedInheritanceCtor=function(){};\r\nFailedInheritanceCtor.prototype=new BaseCtor;\r\nFailedInheritanceCtor.prototype={\r\n foo:0,\r\n bar:1\r\n};\r\n\r\nalert((new FailedInheritanceCtor) instanceof BaseCtor); \/\/false\r\n\r\nvar WorkingCtor=function(){};\r\nWorkingCtor.prototype=new BaseCtor;\r\nWorkingCtor.prototype.foo=0;\r\nWorkingCtor.prototype.bar=1;\r\n\r\nalert((new WorkingCtor) instanceof BaseCtor); \/\/true<\/pre>\nSo, you need to do assignments. Of course you could use a function to do them, but that’s one more unnecessary and ugly function call. Or you could use a temporary variable to point to the prototype… but unless you can use Javascript 1.7’s “let” statement that would mean contaminating the current scope. You could wrap it into an anonymous function, but that hardly improves readability.<\/p>\n
All of this can be avoided by using the poor man’s “let” (or poor browser’s: your choice): with()
\nWith pushes an object into the name lookup tree… the nice thing is that this object can be created right inside that statement<\/p>\n
with({hello:\"world\"})\r\n alert(hello); \/\/world<\/pre>\nAnd we can do the same stupid trick with the prototype property:<\/p>\n
var BaseCtor=function(){};\r\n\r\nvar WorkingCtor=function(){};\r\nWorkingCtor.prototype=new BaseCtor;\r\nwith({_:WorkingCtor.prototype}){\r\n _.foo=0;\r\n _.bar=1;\r\n}<\/pre>\nor like this if you want it more compact (I never do that though):<\/p>\n
var BaseCtor=function(){};\r\n\r\nvar WorkingCtor=function(){};\r\nwith({_:WorkingCtor.prototype=new BaseCtor}){\r\n _.foo=0;\r\n _.bar=1;\r\n}<\/pre>\nThere. simple. I usually combine it with a variable _ inside the methods to get to this, but that may feel wrong to you.<\/p>\n
var BaseCtor=function(){\r\n var _=this;\r\n};\r\n\r\nvar WorkingCtor=function(argFoo){\r\n var _=this;\r\n\r\n _.foo=argFoo;\r\n};\r\nWorkingCtor.prototype=new BaseCtor;\r\nwith({_:WorkingCtor.prototype}){\r\n _.foo=0;\r\n _.bar=function(argFoo){\r\n var _=this;\r\n\r\n alert(_.foo);\r\n };\r\n}\r\n\r\n(new WorkingCtor(1)).bar(); \/\/1\r\n<\/pre>\n","protected":false},"excerpt":{"rendered":"Apparently a few people were pretty irritated the last time I posted about what you can make Javascript do (+foo instead of foo() for calls) so today I thought I’d post about a pattern that I actually use regularly. Of course, as with any pattern there are good reasons not to use it. Most of … Continue reading A pattern for Javascript OOP that I actually use<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"_links":{"self":[{"href":"https:\/\/www.tapper-ware.net\/blog\/wp-json\/wp\/v2\/posts\/109"}],"collection":[{"href":"https:\/\/www.tapper-ware.net\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.tapper-ware.net\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.tapper-ware.net\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.tapper-ware.net\/blog\/wp-json\/wp\/v2\/comments?post=109"}],"version-history":[{"count":1,"href":"https:\/\/www.tapper-ware.net\/blog\/wp-json\/wp\/v2\/posts\/109\/revisions"}],"predecessor-version":[{"id":110,"href":"https:\/\/www.tapper-ware.net\/blog\/wp-json\/wp\/v2\/posts\/109\/revisions\/110"}],"wp:attachment":[{"href":"https:\/\/www.tapper-ware.net\/blog\/wp-json\/wp\/v2\/media?parent=109"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.tapper-ware.net\/blog\/wp-json\/wp\/v2\/categories?post=109"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.tapper-ware.net\/blog\/wp-json\/wp\/v2\/tags?post=109"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}