【Javascript】即時実行関数式の挙動

即時実行関数式の挙動

obオブジェクトのabc2メソッドを即時実行関数式にすると、thisにはグローバルオブジェクトがセットされる。

対処方法
その1:callメソッドを使う
その2:applyメソッドを使う
その3:thisでなくobオブジェクトを使う

最近、これを知って驚いた(￣▽+￣*)。

<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<title>00</title>
<style type="text/css">
</style>
<script type="text/javascript">

var value="red";
var ob={};

ob.value="blue";

ob.abc=function(){
document.writeln("this.value="+this.value+"<br/>");//blue
};

ob.abc();

//即時実行関数式
ob.abc2=(function(){
document.writeln("this.value="+this.value+"<br/>");//red
})();

//対処方法 その1
//callメソッドを使う
ob.abc3=(function(){
document.writeln("this.value="+this.value+"<br/>");//blue
}).call(ob);

//対処方法 その2
//applyメソッドを使う
ob.abc4=(function(){
document.writeln("this.value="+this.value+"<br/>");//blue
}).apply(ob);

//対処方法 その3
//thisでなくobオブジェクトを使う
ob.abc5=(function(){
document.writeln("ob.value="+ob.value+"<br/>");//blue
})();

</script>
</head>
<body>

</body>
</html>