js this指针绑定问题 及闭包小析

tips : 本博客示例部分引用至
http://developer.51cto.com/art/200907/136245.htm
http://coolshell.cn/articles/6731.html

js this 指针绑定

对于学过c++的同学，对象方法定义时，并不会显示定义this作为参数，但是在调用时，编译器会默认将this 传入本方法，而此时this指向的是当前实例【对象】

#include <iostream>using namespace std;class Person{       public  string name;    private int age;    public Person(string name,int age) {        this.name = name;        this.age = age;    }    public void setAge(int age) {          this.age= age;    }    public void sayHellow(){           cout<< this.name << "say hellow to you" << endl;    } };

python 类的定义，显示指定this参数，但调用类方法时，有编译器默认绑定this 指向当前实例

class people:      name = ''    __age = Null    def __init__(self,name,age):          self.name = name         self.__age = age;    def speak(self):          print("%s is %d years" %(self.name,self.__age))  

对于JS这种脚本语言也不例外，函数或者对象方法 被定义时，并不存在this变量，只有函数或对象方法被调用时，this作为参数隐性的传入，这样以来，当前谁调用该函数或对象方法 this指针就指向谁

var name = "Kevin Yang";  function sayHi(){      alert("你好，我的名字叫" + this.name);  }  sayHi(); 

此时，sayHi()方法被执行，在js中所有变量，对象，函数都默认归属于window对象，
换句话说，执行sayHi()函数，其实是在执行window对象下sayHi()对象方法 标准写法 window.sayHi() ，只不过window一般可以省略
也就是说 执行sayHi()时，默认将当前对象window传入【将this绑定到window对象】

var name = "Kevin Yang";  function sayHi(){     alert("你好，我的名字叫" + this.name);  }  var person = {};  person.sayHello = sayHi;  person.sayHello()

此时sayHi()函数引用， 被赋值给person对象的sayHellow属性，当执行sayHello时，当前对象是person，所以this执行person，但是person对象中没有name属性，所以undefined

function sayHi(){     alert("当前点击的元素是" + this.tagName);  }      

<input name="btnTest" type="button" value="点击我" onclick="sayHi()">

当按钮被点击时，实际上执行的是下面代码

document.getElementById("btnTest").onclick = function(){      sayHi();  }  

此时的sayHi()实际上还是 执行widowl.sayHi()所以 sayHi()函数中 this指向的是window对象
可以改进如下：

function sayHi(el){     alert("当前点击的元素是" + el.tagName);  }  <input name="btnTest" type="button" value="点击我" onclick="sayHi(this)">

改进后执行过程如下：

document.getElementById("btnTest").onclick = function(){     sayHi(this);  }  

临时变量导致的this指针丢失

var Utility = {      decode : function(str){           return unescape(str);      },      getCookie : function(key){           var value = "i%27m%20a%20cookie";           return this.decode(value);      }  };  alert(Utility.getCookie("identity")) var getCookFunc = Utility.getCookie;alert(getCookFunc("identity")) 

当Utility对象下getCookie方法 赋值给全局变量 getCookFunc后，执行getCookFun()实际上是 window.getCookFun() ，当前对象是window，所以调用getCookFun时，window被默认传入【this指向window对象】

---

tips : 详细参加本博客参考文档材料，见博客尾部

闭包

闭包使得函数内容定义的局部变量可以被外部访问到
使得局部函数内部的局部变量在函数执行完成后可以继续存在
在本质上，闭包就是将函数内部和函数外部连接起来的一座桥梁。

function greeting(name) {    var text = 'Hello ' + name; // local variable    // 每次调用时，产生闭包，并返回内部函数对象给调用者    return function() { alert(text); }}var sayHello=greeting("Closure");sayHello()  // 通过闭包访问到了局部变量text

当在一个循环中赋值函数时，这些函数将绑定同样的闭包

function buildList(list) {    var result = [];    for (var i = 0; i < list.length; i++) {        var item = 'item' + list[i];        result.push( function() {alert(item + ' ' + list[i])} );    }    return result;}function testList() {    var fnlist = buildList([1,2,3]);    // using j only to help prevent confusion - could use i    for (var j = 0; j < fnlist.length; j++) {        fnlist[j]();    }}

buildList()函数执行完成后，buildList函数内容定义的局部变量item , i 并没有销毁，因为buildList函数内部定义了匿名函数，并将匿名函数引用压入result列表中，最后返回result列表，赋值给testList函数内部定义的局部变量 fnlist ，
匿名函数【闭包】依赖父函数对象【buildList】，所以只要匿名函数引用还存在，垃圾回收机制就不会销毁buildList函数对象，buildList函数内部定义的局部变量也就依然存在于内存中。
当buildList函数内for循环执行完成后，i=4, item=’item’ + list[3]; 所以当循环执行闭包时，读取的变量i都是4，变量item都是’item’ + list[3]

---

参考：
http://coolshell.cn/articles/6731.html
http://www.ruanyifeng.com/blog/2009/08/learning_javascript_closures.html
https://zh.wikipedia.org/wiki/TypeScript
http://bonsaiden.github.io/JavaScript-Garden/zh/#function.closures