You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
This is not exactly a regret but "how it works" or "why it is like this", trying to explain here the subtle difference between property assignment (=) and property definition (defineProperty), I hope this is not confusing (comments, corrections are welcome), apparently we need to get used to it :
varHTMLElement=function(){};HTMLElement.prototype={getinnerHTML(){returnthis.html_},setinnerHTML(val){this.html_=val},a: 'a'};varDIV=newHTMLElement();DIV.innerHTML='c';// Assignment operator "=", called as '[[Put]' below.// If the property (own or inherited) does exist, is not an accessor and is // allowed to be modified, this creates a new own property 'innerHTML' // (if the property is inherited) or modifies the existing one.// If the property does not exist, this creates a new own property 'innerHTML'.// If the property is an accessor, this does trigger the accessor // (our case here).console.log(DIV.innerHTML);//c// OK, normalObject.defineProperty(DIV,'innerHTML',{value:'b',writable : true,enumerable : true,configurable : true});// Called as '[[DefineOwnProperty]]' below.// This does define or modify a new 'innerHTML' own property that will // be returned prior to the inherited one (if it exists, our case here).console.log(DIV.innerHTML);//b// OK, so what ?// Now consider for example http://wiki.ecmascript.org/doku.php?id=strawman:object_extension_literals// To make it short the proposal is about extending an object literal :// DIV.{width:'100px',height:'100px'}// Surprisingly, the proposal does allow to do :// DIV.{width='100px',height='100px'}// the difference is that ':' stands for [[DefineOwnProperty]]// and '=' for [[Put]]// OK, surprising, but so what ? (again)// Now consider that while coding, you might do :// DIV.{innerHTML:'my html'}// This will not have the effect you could expect, but just create a new // 'innerHTML' own property, therefore your div will not contain 'my html'// Instead, you should have written :// DIV.{innerHTML='my html'}deleteDIV.innerHTML;// Delete the own propertyconsole.log(DIV.innerHTML);// c// Returns the inherited one//Other exampleconsole.log(DIV.a);//a// Inherited propertyDIV.a='b';console.log(DIV.a);//b// New own propertyObject.defineProperty(DIV,'a',{value:'c',writable : true,enumerable : true,configurable : true});// Modify the own propertyconsole.log(DIV.a);//cdeleteDIV.a;// Delete the own propertyconsole.log(DIV.a);//a// Returns the inherited property
Maybe this sentence from Brendan Eich can summarize what is happening : "There really is a difference between assigning and defining in JS. Assigning runs setters, even inherited ones. Defining overrides or shadows."
This is not exactly a regret but "how it works" or "why it is like this", trying to explain here the subtle difference between property assignment (=) and property definition (defineProperty), I hope this is not confusing (comments, corrections are welcome), apparently we need to get used to it :
Maybe this sentence from Brendan Eich can summarize what is happening : "There really is a difference between assigning and defining in JS. Assigning runs setters, even inherited ones. Defining overrides or shadows."
Other examples can be found here : http://wiki.ecmascript.org/doku.php?id=strawman:define_properties_operator
The text was updated successfully, but these errors were encountered: