this的前世今生

this为何物

在js中每个函数都有内部属性this以及arguments，其实函数本身也是有属性的(函数本身就是Function的实例，记住只有对象才具有属性)，一般来说，函数本身具有5个属性(name，arguments，prototype，caller，length)

//自定义的函数  
function foo(){}  
console.log(Object.getOwnPropertyNames(foo));

//js中自带的函数Window  
console.log(Object.getOwnPropertyNames(Window));

其实我觉得this表示的是函数执行过程的上下文环境，this绑定的方法含有4种方法，首先介绍默认绑定(直接使用不带任何修饰的函数引用进行调用的，使用严格模式，全局对象就无法使用默认绑定)以及隐式绑定(调用位置是否有上下文，或者说是是否被某个对象拥有或者包含)

function say(name){
   this.name = name;
   console.log(this.name);
   console.log(this);//打印出this对象
}
say("vicco");//默认绑定

say函数中this指向的是window对象

var obj = {
   name : "苍老师",
   speak : function(){
      console.log("Hello My name is "+this.name);  
   }
};
obj.speak();//隐式绑定

其实可以发现这两种this绑定的方式可以调用栈和调用位置来进行理解
调用栈(为了到达当前执行位置调用的所有函数)
调用位置(在当前正在执行函数的前一个调用中)
比较难以理解两个名词，可以用代码解释

function say(){
   console.log(this.name);
}
say();//默认绑定

另外为什么输出this.name为空字符串，这是因为this.name等价于window.name，用来标明窗口的名字，如果最顶层窗口不是使用window.open()打开的话，其window.name为空字符串(ps:其指的是顶层窗口还是窗口中的frame或者iframe，待实验验证)

var obj = {
   name : "苍老师",
   speak : function(){
      console.log("Hello My name is "+this.name);  
   }
};
obj.speak();//隐式绑定

隐式缺失*(我更喜欢称为"披着羊皮的狼")*

第一种情况

第二种情况

第三种情况

显式绑定

new绑定

扫码关注w3ctech微信公众号