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

Popular posts from this blog

apache - Remove .php and add trailing slash in url using htaccess not loading css -

javascript - jQuery show full size image on click -