this的指向

目录

方法中的this

单独使用 this

函数中使用 this（默认）

事件中的 this

显式函数绑定

通过call改变this的指向

通过 apply改变this的指向

通过bind改变this的指向

---

• 在方法中，this 表示该方法所属的对象。

• 如果单独使用，this 表示全局对象。

• 在函数中，this 表示全局对象。

• 在事件中，this 表示接收事件的元素。

• 在显式函数绑定时，我们可以自己决定this的指向

方法中的this

 var person = {
  firstName: "LeBron",
  lastName : "James",
  id       : 8888,
  fullName : function() {
    return this.firstName + " " + this.lastName;
  }
};

在上面的对象方法中， this指代的是 person对象；在对象方法中， this 指向调用它所在方法的对象

单独使用 this

单独使用 this，则它指向全局对象。

var a=this

在浏览器中，window 就是该全局对象为 [object Window]:

在局部作用域指向的是global

var a = function () {

  console.log(this);//输出global

}

a()

在node中，指向的是一个{}

console.log(this)//输出 {}

函数中使用 this（默认）

在函数中，函数的所属者默认绑定到 this 上。

在浏览器中，window 就是该全局对象为 [object Window]:

在node中，指向的就是global对象

事件中的 this

 <button οnclick="this.style.display='none'"> 点我后我就消失了 </button>

this指的是button

显式函数绑定

通过apply、call、bind改变this的指向

var obj = {
  name: 'briup',
  sayName: function () {
    console.log(this.name);
  }
}
var b = obj.sayName;
b(); //undefined 相当于global.b()
obj.sayName(); // briup

通过call改变this的指向

call(执行环境对象,实参列表）

 var obj = {
  name: 'briup',
  sayName: function (a,b) {
    console.log(this.name);
    console.log(a,b); // 1,2
  }
}
var b = obj.sayName;
b.call(obj,1,2); // briup

通过 apply改变this的指向

apply(执行环境对象,实参列表数组)

var obj = {
  name: 'briup',
  sayName: function (a,b) {
    console.log(this.name);
    console.log(a,b); // 100,200
  }
}
var b = obj.sayName;
b.apply(obj,[100,200]); // briup

通过bind改变this的指向

bind(执行环境对象)(实参列表)

 var obj = {
  name: 'briup',
  sayName: function (a,b,c) {
    console.log(this.name);
    console.log(a,b,c); // 1,2,3
  }
}
var b = obj.sayName;
b.bind(obj); // 代码没有被打印,这就是bind和call、apply方法的不同，实际上bind方法返回的是一个修改过后的函数。
// 新建一个变量c来接收bind修改后的函数
var c = b.bind(obj, 1, 2);
console.log(c); // 发现c是一个[Function: bound sayName]函数
// 执行c
c(3); // briup