回答編集履歴

Function#bind のサンプルをjsfiddleにUP

2016/01/19 14:53

投稿

think49

スコア18194

answer CHANGED Viewed

@@ -87,7 +87,9 @@
 jQuery(window).on('resize', sampleA1.resizeEvent.bind(sampleA1));
 ```
-もう一つは `initialEvent()` 時に予め `bind` しておく方法(Lhankor_Mhy さんのアイデアです)。
+もう一つは `initialEvent()` 時に予め `bind` しておく方法(Lhankor_Mhy さんのアイデア)。
+jsfiddleにサンプルをUPしています。
+- [Function#bind で this 値を束縛する - JSFiddle](https://jsfiddle.net/066ko0qg/)
 ```JavaScript
 SampleClassA.prototype.initialEvent = function initialEvent () {

pointA, pointC がインクリメントされていなかった不具合修正

2016/01/19 14:53

投稿

think49

スコア18194

answer CHANGED Viewed

@@ -38,8 +38,9 @@
     this.doDisplay(); // (修正) 関数呼び出しする
   },
   updateResizeData: function updateResizeData () {
-    this.data.pointA = this.data.pointA++;
+    var data = this.data;
+    ++data.pointA;  // (修正) インクリメントされていなかった不具合を修正
-    this.data.pointC = this.data.pointC++;
+    ++data.pointC;  // (修正) インクリメントされていなかった不具合を修正
   },
   resizeEvent: function resizeEvent (event) {
     console.log(event);

Lhankor_Mhy さんのアイデアをお借りして `initialEvent\(\)` 時に予め `bind` しておくコードを追加

2016/01/19 14:37

投稿

think49

スコア18194

answer CHANGED Viewed

@@ -13,19 +13,16 @@
 ```JavaScript
 'use strict';
-function SampleClassA () {
+function SampleClassA () { ; }
-  this.data;
-  this.object;
-}
 SampleClassA.prototype = { // (修正) SampleClassAに修正
   setDefaultData: function setDefaultData () {
     this.data = {
       pointA: 10,
       pointB: 10,
       pointC: 10,
-      pointD: 10,
+      pointD: 10
     };
-    return true;
   },
   doDisplay: function doDisplay (/* [window] */) {
 //  this.object = new SampleLibrary.display(this.data); // (修正) ReferenceError の為、コメントアウト
@@ -35,25 +32,28 @@
       console.log(window.innerWidth, window.innerHeight);
     }
     console.log(this.data);
-    return true;
   },
   initialEvent: function initialEvent () {
     this.setDefaultData(); // (修正) 関数呼び出しする
     this.doDisplay(); // (修正) 関数呼び出しする
-    return true;
   },
   updateResizeData: function updateResizeData () {
     this.data.pointA = this.data.pointA++;
     this.data.pointC = this.data.pointC++;
-    return true;
   },
   resizeEvent: function resizeEvent (event) {
+    console.log(event);
     this.updateResizeData(); // TypeError: this.updateResizeData is not a function  (修正) 関数呼び出しする
     this.doDisplay(event.target); // (修正) 関数呼び出しする
-    return true;
-  },
+  }
 };
+SampleClassA.prototype.initialEvent = function initialEvent () {
+  this.resizeEvent = this.resizeEvent.bind(this);
+  this.setDefaultData(); // (修正) 関数呼び出しする
+  this.doDisplay(); // (修正) 関数呼び出しする
+}
 // (修正) 呼び出しコードを後ろに持ってくる
 var sampleA1 = new SampleClassA();
 //初期イベント
@@ -80,10 +80,34 @@
 # (方法2) `Function.prototype.bind` を使う
+一つは `onresize` のイベント定義時に `bind` する方法。
 ```JavaScript
 jQuery(window).on('resize', sampleA1.resizeEvent.bind(sampleA1));
 ```
+もう一つは `initialEvent()` 時に予め `bind` しておく方法(Lhankor_Mhy さんのアイデアです)。
+```JavaScript
+SampleClassA.prototype.initialEvent = function initialEvent () {
+  this.resizeEvent = this.resizeEvent.bind(this); // 予め bind しておく
+  this.setDefaultData();
+  this.doDisplay();
+}
+var sampleA1 = new SampleClassA();
+sampleA1.initialEvent();
+jQuery(window).on('resize', sampleA1.resizeEvent); // bind 済みの resizeEvent を指定する
+/**
+ * ただし、sampleA1.resizeEvent は bind 済みの為、後から Function.prototype.call で this 値を変更できない(意図的に汎用的ではない)
+ * this 値を変更するためには SampleClassA.prototype.resizeEvent を経由する必要がある
+ */
+console.log(sampleA1.resizeEvent !== SampleClassA.prototype.resizeEvent); // true
+sampleA1.resizeEvent.call(null, {target:{innerWidth: 777, innerHeight: 777}}); // Function.prototype.bind で束縛された this 値は書き換え不可能な為、TypeError にならない
+SampleClassA.prototype.resizeEvent.call({updateResizeData: Function(), doDisplay: console.log.bind(console)}, {target:{innerWidth: 777, innerHeight: 777}});  // bind されていない為、this 値を変更できる
+```
 # (方法3) `event.data` (jQuery API) を使う
 - [event.data | jQuery API Documentation](https://api.jquery.com/event.data/)
@@ -105,4 +129,9 @@
 jQuery に拘りがないのなら `addEventListener` の `handleEvent` を使う方法が最もスマートだと思います。
+## 更新履歴
+**(2016/1/19 23:28追記)**
+Lhankor_Mhy さんのアイデアをお借りして `initialEvent()` 時に予め `bind` しておくコードを追加しました。
 Re: ゲストユーザーさん

setDefaultData の関数名追加

2016/01/19 14:28

投稿

think49

スコア18194

answer CHANGED Viewed

@@ -18,7 +18,7 @@
   this.object;
 }
 SampleClassA.prototype = { // (修正) SampleClassAに修正
-  setDefaultData: function() {
+  setDefaultData: function setDefaultData () {
     this.data = {
       pointA: 10,
       pointB: 10,

SampleClassA\.prototype\.doDisplay のコード調整\(resize時の動作がわかりやすいように\)

2016/01/19 14:03

投稿

think49

スコア18194

answer CHANGED Viewed

@@ -12,39 +12,46 @@
 (地味に手間なのでサンプルでも動く事を確認してから掲載するようにしていただけると助かります)
 ```JavaScript
+'use strict';
-function SampleClassA() {
+function SampleClassA () {
-    this.data;
+  this.data;
-    this.object;
+  this.object;
 }
 SampleClassA.prototype = { // (修正) SampleClassAに修正
-    setDefaultData: function() {
+  setDefaultData: function() {
-        this.data = {
+    this.data = {
-            pointA: 10,
+      pointA: 10,
-            pointB: 10,
+      pointB: 10,
-            pointC: 10,
+      pointC: 10,
-            pointD: 10,
+      pointD: 10,
-        };
+    };
-        return true;
+    return true;
-    },
+  },
-    doDisplay: function() {
+  doDisplay: function doDisplay (/* [window] */) {
-//        this.object = new SampleLibrary.display(this.data); // (修正) ReferenceError の為、コメントアウト
+//  this.object = new SampleLibrary.display(this.data); // (修正) ReferenceError の為、コメントアウト
+    if (arguments.length > 0) {
+      var window = arguments[0];
+      console.log(window.innerWidth, window.innerHeight);
+    }
+    console.log(this.data);
-        return true;
+    return true;
-    },
+  },
-    initialEvent: function() {
+  initialEvent: function initialEvent () {
-        this.setDefaultData(); // (修正) 関数呼び出しする
+    this.setDefaultData(); // (修正) 関数呼び出しする
-        this.doDisplay(); // (修正) 関数呼び出しする
+    this.doDisplay(); // (修正) 関数呼び出しする
-        return true;
+    return true;
-    },
+  },
-    updateResizeData: function() {
+  updateResizeData: function updateResizeData () {
-        this.data.pointA = this.data.pointA++;
+    this.data.pointA = this.data.pointA++;
-        this.data.pointC = this.data.pointC++;
+    this.data.pointC = this.data.pointC++;
-        return true;
+    return true;
-    },
+  },
-    resizeEvent: function() {
+  resizeEvent: function resizeEvent (event) {
-        this.updateResizeData(); // TypeError: this.updateResizeData is not a function  (修正) 関数呼び出しする
+    this.updateResizeData(); // TypeError: this.updateResizeData is not a function  (修正) 関数呼び出しする
-        this.doDisplay(); // (修正) 関数呼び出しする
+    this.doDisplay(event.target); // (修正) 関数呼び出しする
-        return true;
+    return true;
-    },
+  },
 };
 // (修正) 呼び出しコードを後ろに持ってくる
@@ -52,7 +59,7 @@
 //初期イベント
 sampleA1.initialEvent();
 //windowサイズ変更時のイベント等
-$(window).on('resize', sampleA1.resizeEvent);
+jQuery(window).on('resize', sampleA1.resizeEvent);
 ```
 ## 解決法