JavaScript的this的四种调用模式

　　调用一个函数将暂停当前函数的执行，传递控制权和参数给新函数。除了声明时定义的形式参数，每个函数接收两个附加的参数：this和arguments。参数this在面向对象编程中非常重要，它的值取决于调用的模式。在JavaScript中一共有四种调用模式：⑴方法调用模式、⑵函数调用模式、⑶构造器调用模式和⑷apply调用模式。这些模式在如何初始化关键参数this上存在差异。

　　JavaScript的this总是指向一个对象，而具体指向哪个对象是在函数运行时基于函数执行环境动态绑定的，而非函数被申明时的环境。

[14/06日,15]

1、函数调用模式

　　函数调用模式（The Function Invocation Pattern）：当函数不作为对象的属性被调用时，就是普通函数方式，此时的this总是指向全局对象，在浏览器的JavaScript里，这个全局对象就是window对象。简而言之：当一个函数并非一个对象的属性时，那么它被当作一个函数来调用。

1 //在浏览器的JavaScript 里，这个全局对象是window 对象。
2 window.name = 'globalName';
3 var getName = function(){
4   return this.name;
5 };
6 console.log(getName()); // globalName

　　或者

 1 window.name = 'globalName';
 2 var myObject = {
 3   name: 'sven',
 4   getName: function(){
 5     return this.name;
 6   }
 7 };
 8 var getName = myObject.getName;
 9 console.log(getName()); // globalName 以普通函数调用，this指向全局对象，window。
10 console.log(myObject.getName()); // sven 以对象属性调用this指向myObject对象

　　当函数以函数模式调用时，this被绑定到全局对象。这是语言设计上的一个错误。倘若语言设计正确，当内部函数被调用时，this应该仍然绑定到外部函数的this变量。这个设计错误的后果是方法不能利用内部函数来帮助它工作，因为内部函数的this被绑定了错误的值，所以不能共享该方法对对象的访问权。幸运的是，有一个很容易的解决方案：如果该方法定义一个变量并给它赋值为this，那么内部函数就可以通过那个变量访问到this。按照约定，给那么变量命名为that。

　　例如，在div节点的点击时间函数内部，有一个局部的callback方法，而当callback方法被当作普通函数调用时，callback内部的this指向了window（这是因为，this指向对象，是在运行时，基于函数的执行环境动态绑定，普通函数可以理解为window的属性，所以普通函数调用时，this指向window）。但是，实际上需要指向该div的节点。

 1 <html>
 2 </body>
 3 <script>
 4 window.id = 'window';
 5 var oDiv = document.getElementById('div1');
 6 oDiv.onclick = function(){
 7   console.log(this.id); // div1
 8   var callback = function(){
 9     console.log(this.id); // window
10   }
11   callback();
12 };
13 </script>
14 </html>

　　简易的解决方法是，声明一个that变量，将div的引用保存起来。代码如下：

1 oDiv.onclick = function(){
2   var that = this; // 保存div 的引用
3   var callback = function(){
4     console.log(that.id); // div1
5   }
6   callback();
7 };

posted on 2015-06-14 18:21 yahari 阅读(187) 评论(0) 收藏举报

刷新页面返回顶部