this的四种绑定形式
一 , this的默认绑定
当一个函数没有明确的调用对象的时候，也就是单纯作为独立函数调用的时候，将对函数的this使用默认绑定：绑定到全局的window对象.
一个例子
function fire () {
// 我是被定义在函数内部的函数哦！
function innerFire() {
console.log(this === window)
}
innerFire(); // 独立函数调用
}
fire(); // 输出true
//即使函数innerFire是包含在函数fire里面的,但是由于函数innerFire是独立调用,所以函数innerFire内的this还是指向window.
二 , this的隐式绑定
当函数被一个对象“包含”的时候，我们称函数的this被隐式绑定到这个对象里面了，这时候，通过this可以直接访问所绑定的对象里面的其他属性
第一个例子
var obj = {
a: 1,
fire: function () {
console.log(this.a)
}
}
obj.fire(); // 输出1
//函数fire包含在对象obj里,所以this就隐式绑定到对象obj.this就可以访问obj的属性.
第二个例子
// 我是第一段代码
function fire () {
console.log(this.a)
}
var obj = {
a: 1,
fire: fire
}
obj.fire(); // 输出1
// 我是第二段代码
var obj = {
a: 1,
fire: function () {
console.log(this.a)
}
}
obj.fire(); // 输出1
//这个例子说明了函数被定义在对象内部和外部没有任何区别.也说明了this绑定是动态的(在运行时绑定而不是书写时)
隐式绑定丢失的问题
一个例子
var obj = {
a: 1, // a是定义在对象obj中的属性 1
fire: function () {
console.log(this.a)
}
}
var a = 2; // a是定义在全局环境中的变量 2
var fireInGrobal = obj.fire;
fireInGrobal(); // 输出 2
可以这么理解,函数在成为对象的属性的时候,是具有独立性的.打个比方就像当初波兰加入了华约,波兰是华约的一份子,但他并不是华约缔造的.后来苏联解体,华约的一部分势力范围,不是全部(俄罗斯就不是)变成了北约的势力范围了.于是波兰加入了北约,和新的大哥混了.回到这个函数,对象obj就是华约,函数fire就是波兰,属性a:1就是俄罗斯.现在,曾经的华约势力范围obj.fire变成了以世界警察fireInGrobal为首的北约的地盘,于是波兰加入北约,听候大哥fireInGrobal的差遣.大哥问,谁才是老大?fireInGrobal(),波兰高呼Americana = 2.
其实多数情况下，是不会发生this绑定丢失的，只有一种情况下会丢失，函数没有执行，当做值传递了。不管是赋值操作，还是当做回调函数的参数传递。
三 , this的显示绑定
在上一个例子中,fireInGrobal()和obj.fire调用的结果是不同的,在赋值过程中,this绑定丢失了.call就是为了解决这个问题的.
call的基本使用方式： fn.call(object)
fn : 上一例子中的 fireInGrobal
**object : 上一例子中的 obj **
作用 : 大哥问谁是老大,波兰说是俄罗斯(重新把this绑定回obj)
一个例子
var obj = {
a: 1, // a是定义在对象obj中的属性
fire: function () {
console.log(this.a)
}
}
var a = 2; // a是定义在全局环境中的变量
var fireInGrobal = obj.fire;
fireInGrobal(); // 输出2
fireInGrobal.call(obj); // 输出1
每次执行都要加入call吗?很麻烦.我们可以这样改一下
var obj = {
a: 1, // a是定义在对象obj中的属性
fire: function () {
console.log(this.a)
}
}
var a = 2; // a是定义在全局环境中的变量
var fn = obj.fire;
var fireInGrobal = function () {
fn.call(obj) //硬绑定
}
fireInGrobal(); // 输出1
如果使用bind,会更简单
//上一个例子中的代码
var fireInGrobal = function () {
fn.call(obj) //硬绑定
}
//可以简化为
var fireInGrobal = fn.bind(obj);
call和bind的区别是：在绑定this到对象参数的同时：
1.call将立即执行该函数
2.bind不执行函数，只返回一个可供执行的函数
3.当然还有apply,他们的区别是这样的:
- 他们的作用一模一样,区别在于传入参数形式不同.
- apply接受两个参数,第一个指定this对象的指向,第二个参数为一个带下标的集合,这个集合可以为数组,也可以为类数组,apply把这个集合中的元素作为参数传递给被调用的函数.
var func = function( a, b, c ){
alert([a,b,c]); //输出[1,2,3]
};
func.apply( null, [ 1, 2, 3 ] );
- call传入的参数不固定,与apply相同的是,第一个参数也是代表函数体内的this指向,从第二个参数开始往后,每个参数被依次传入函数.
var func = function( a, b, c ){
alert([a,b,c]); //输出[1,2,3]
};
func.call( null, 1, 2, 3 );
- 当使用call或apply的时候,如果第一个参数是null,this会指向默认宿主对象,在浏览器中就是window.
四 , new绑定
执行new操作的时候，将创建一个新的对象，并且将构造函数的this指向所创建的新对象.
例子
function foo (a) {
this.a = a;
}
var a1 = new foo (1);
var a2 = new foo (2);
var a3 = new foo (3);
var a4 = new foo (4);
console.log(a1.a); // 输出1
console.log(a2.a); // 输出2
console.log(a3.a); // 输出3
console.log(a4.a); // 输出4
如果构造函数显式使用return返回一个对象,那么调用表达式的值就是这个对象
var obj = {a:1};
function fn(){
this.a = 2;
return obj;
}
var test = new fn();
console.log(test);//{a:1}
