Problem: Break the Web 1. You already added these methods – by extending Array.prototype – Sometimes, your crafted methods don’t have the same semantics to the ES6 standards 2. Too generic name to add it – “values”, “keys” etc. • In this talk, we’ll show the actual BtW cases
Problem: Well-known with problem • Newly added properties will hide the variable in the with block • @@unscopables (in ES6) hides some properties in with block – (“values”, “entries” etc.) (function () { var values = []; // If object inherits Array.prototype, inner "values" variable becomes // Array.prototype. with (object) { values = ...; } })());
Case Study 1: MooTools • MooTools has its own Array#contains – FYI: MooTools also has its own String#contains • However, it checks the methods enumerability when extending the other object – So MooTools doesn’t consider about newly added Array methods
Case Study 1: MooTools • Investigating MooTools and non-enumerable Only listed standard methods are considered object.forEachMethod = function(fn){ if (!methodsEnumerable) for (var i = 0, l = methods.length; i < l; i++){ fn.call(prototype, prototype[methods[i]], methods[i]); } for (var key in prototype) fn.call(prototype, prototype[key], key) }; Array.implement({ // ... contains: function(item, from){ return this.indexOf(item, from) != -1; }, // ... });
Case Study 1: MooTools • Investigating MooTools and non-enumerable Only listed standard methods are considered object.forEachMethod = function(fn){ if (!methodsEnumerable) for (var i = 0, l = methods.length; i < l; i++){ fn.call(prototype, prototype[methods[i]], methods[i]); } for (var key in prototype) fn.call(prototype, prototype[key], key) }; Array.implement({ // ... contains: function(item, from){ return this.indexOf(item, from) != -1; }, // ... }); There’s no standard method definition, but it becomes non-enumerable
Case Study 1: MooTools • Investigating MooTools and non-enumerable Only listed standard methods are considered object.forEachMethod = function(fn){ if (!methodsEnumerable) for (var i = 0, l = methods.length; i < l; i++){ fn.call(prototype, prototype[methods[i]], methods[i]); } for (var key in prototype) fn.call(prototype, prototype[key], key) }; Array.implement({ // ... contains: function(item, from){ return this.indexOf(item, from) != -1; }, // ... }); There’s no standard method definition, but it becomes non-enumerable Array.prototype.contains = function () { ...; }; If there’s non-enumerable “contains”, it becomes non-enumerable
Case Study 1: MooTools • And Break the Web There’s no “contains” There’s no “contains” in Element ...('Array', Array, [ 'pop', 'push', 'reverse', 'shift', 'sort', 'splice', 'unshift', 'concat', 'join', 'slice', 'indexOf', 'lastIndexOf', 'filter', 'forEach', 'every', 'map', 'some', 'reduce', 'reduceRight' ]) ... // Now, 'contains' is not enumerated. Array.forEachMethod(function(method, name){ Elements.implement(name, method); }); element.contains(...);
Case Study 1: MooTools • And Break the Web There’s no “contains” There’s no “contains” in Element ...('Array', Array, [ 'pop', 'push', 'reverse', 'shift', 'sort', 'splice', 'unshift', 'concat', 'join', 'slice', 'indexOf', 'lastIndexOf', 'filter', 'forEach', 'every', 'map', 'some', 'reduce', 'reduceRight' ]) ... // Now, 'contains' is not enumerated. Array.forEachMethod(function(method, name){ Elements.implement(name, method); }); element.contains(...); There’s no element.contains!
Case Study 2: Breaking outlook.com • Array.prototype.values breaks the existing code in outlook.com – http://windowssystemspecialist.blogspot.jp/2014/10/fixing-blank-calendar- with-chrome-38.html
Case Study 2: Breaking outlook.com • Exposing Array.prototype.values in V8 breaks the outlook.com in stable 38 // Old code. "values" in n Array.prototype n [[Prototype]] … Object.prototype [[Prototype]]
Case Study 2: Breaking outlook.com • Exposing Array.prototype.values in V8 breaks the outlook.com in stable 38 // Old code. "values" in n Array.prototype n [[Prototype]] … Object.prototype [[Prototype]] “values”: …
Case Study 2: Breaking outlook.com • Exposing Array.prototype.values in V8 breaks the outlook.com in stable 38 // Old code. "values" in n Array.prototype n [[Prototype]] … Object.prototype [[Prototype]] “values”: … Trapped Becomes always true
Case Study 2: Breaking outlook.com • Exposing Array.prototype.values in V8 breaks the outlook.com in stable 38 // Old code. "values" in n Array.prototype n [[Prototype]] … Object.prototype [[Prototype]] “values”: … Trapped Becomes always true // Appropriate code. n.hasOwnProperty("values”)
Conclusion • Take the appropriate way – e.g. If you’d like to check own property existence, you should use obj.hasOwnProperty • Don’t trust the current shape of Objects overly – ECMAScript standards will extend the prototypes • And don’t use with – Use “use strict”
constellation
miyashino
pistatium
opelab
hiashisan
kohbis
hk_shino
tmokmss
line_developers
colopl
autifyhq
yoshiiryo1
.png){kind=icon}
pharma_x_tech
sugarenia
schacon
addyosmani
soudai
jacobian
iamctodd
hursman
jakevdp
eileencodes
rocio
sferik
aki_iinuma