this 的四种绑定规则

2018-09-07

简单介绍this

1： 有对象，就指向调用对象
2：没有对象，就指向全局对象
3：用new构造，就指向新对象
4： 通过apply或call或bind来改变this的所指。

一：函数有所属对象时：指向所属对象。

函数有所属对象时，通常通过.表达式调用，这时this自然指向所属对象。
var myObject={value:100};
myObject.getValue=function(){
console.log(this.value)   //输出100

//输出 { value: 100, getValue: [Function] }
//其实就是myObject对象本身
console.log(this)  //输出的就是myObject对象

return this.value;
}
console.log(myObject.getValue());   //100  因为getValue() 的返回值 this.value,即是myObject.value

总结： getValue() 属于对象myObject,并且myObject进行.调用，因此this指向对象myObject

二：函数没有所属对象：指向全局对象

var myObject={value:100};
myObject.getValue=function(){
var foo=function(){
console.log(this.value)   //undefind  因为value 为被赋值
console.log(this)    //输出全局对象global
}
foo(); //函数调用

return this.value;  
}
console.log(myObject.getValue()); // => 100

总结：在上述代码中，foo函数虽然定义在getValue的函数体内，但实际上它既不属于getValue也不属于myObject.
foo并没有绑定在任何对象上，所以调用它是，他的this指针指向全局对象global.

三：构造器中的this:指向新对象

1:要以构造函数的方式调用函数，只需要在调用时在函数名称前加new 关键字
 使用构造器new一个对象时，this就指向新对象.this会绑定在新对象上。
 例： var oneObject=function(){
 this.value=100;
 }

 var myObj=new oneObject()
 console.log(myObj.value)  //100
 console.log(myObj)  //SomeClass {value: 100} value: 100__proto__: Object

四：apply和call调用以及bind绑定：指向绑定的对象

   var myObject={
        value:100
    }
    var foo=function(){
        console.log(this);  //window
        console.log(this.value);  //undefind
        console.log("...............");
    }
    foo();
    foo.apply(myObject);  //{value:100}
    foo.call(myObject);    //{value:100}
    var newFoo=foo.bind(myObject);   //{value:100}
    newFoo();

总结：foo本来指向全局对象window,但是call,apply和bind将this绑定到了myObject上，所以，
foo里，面的this就指向了myObject.