JavaScript strict mode - "this is undefined" when extending jQuery widget's property -
below same pieces of code 1 in strict mode , isn't.
here works:
( function ( $ ) { $.widget( 'ui.mywidget', $.ui.dialog, { // here defined , overwritten. options: $.extend( this.options, { someproperty: 'somevalue' } ), _init: function() { console.log(this); // here defined. } }); } )( jquery );
here doesn't work:
( function ( $ ) { 'use strict'; $.widget( 'ui.mywidget', $.ui.dialog, { // here says "uncaught typeerror: cannot read property 'options' of undefined" options: $.extend( this.options, { someproperty: 'somevalue' } ), _init: function() { console.log(this); // here defined. } }); } )( jquery );
i've read this: https://developer.mozilla.org/en-us/docs/web/javascript/reference/functions_and_function_scope/strict_mode still nothing comes mind. need little hint , i'll able resolve on own.
does have idea why may not working in strict mode?
i don't know if original $.ui.dialog
has options
property because i'm extending custom widget has such property , above code made example. hope pictures well. if doesn't please request more information , i'll update question.
that expression, this.options
, evaluated in context of outer function:
(function( $ ) { // ... } )( jquery );
that function called plain, "naked" function call, , in strict mode value of this
undefined
.
looking more closely @ key portion of code:
$.widget( 'ui.mywidget', $.ui.dialog, { // here says "uncaught typeerror: cannot read property 'options' of undefined" options: $.extend( this.options, { someproperty: 'somevalue' } ), _init: function() { console.log(this); // here defined. } });
the expression this.options
looks it's buried in middle of lot of stuff, in reality it's going have evaluated before $.widget()
ever called, , before $.extend()
called value "options" property.
- before calling
$.widget()
, runtime has evaluate parameters. thus, it's got build object object literal. - to build object literal, has evaluate property values. means has call
$.extend()
. - to call
$.extend()
, has evaluate arguments. this.options
1 of arguments$.extend()
,this
undefined
. boom.
Comments
Post a Comment