this的指向在函数定义的时候是确定不了的，只有函数执行的时候才能确定this到底指向谁。this 指向最后调用它的那个对象。
一. 函数调用模式（直接调用）
当一个函数并非一个对象的属性时，那么它就是被当做函数来调用的。在此种模式下，this被绑定为全局对象，在浏览器环境下就是window对象。
注意！！！直接调用并不是指在全局作用域下进行调用，在任何作用域下，直接通过 函数名(...) 来对函数进行调用的方式，都称为直接调用。
function func() {
let str = "hello";
console.log(this); // this -> window
console.log(this.str); //undefined
}
func(); // 全局作用域下的直接调用
(function (_global) {
// 通过 IIFE 限定作用域
function func() {
console.log(this); // this -> window
console.log(this.str); //undefined
}
func(); // 非全局作用域下的直接调用
})();
二. 方法调用模式(谁调用的this就指向谁)
当函数被保存为一个对象的属性时，它就可称为这个对象的方法。当一个方法被调用时，this被绑定到这个对象上。如果调用表达式包含一个提取属性的动作（. 或 []），那么它被称为方法调用。
- 单个对象时：
let obj = {
userName:"zhangsan",
sayName:function(){
console.log(this.userName); //zhangsan
console.log(this); //this -> obj
}
}
obj.sayName()
这里的this指向的对象是obj，因为调用这个sayName()函数是通过obj.sayName()执行的。
- 对象嵌套时：
let o = {
userName: "zhangsan",
b: {
age:18,
sayName: function () {
console.log(this.userName); //undefined
console.log(this.age); //18
console.log(this); //this -> b
}
}
}
o.b.sayName()
因为是o.b调用的这个函数，所以指向b这个对象，所以打印userName是undefined。
- 赋给全局变量
var userName = "lisi";
let obj = {
userName: "zhangsan",
obj_1: {
age:18,
sayName: function () {
console.log(this.userName); //lisi
console.log(this.age); //undefined
console.log(this); //this -> widow
}
}
}
let t = obj.obj_1.sayName;
t();
因为t是全局变量，在全局环境下执行，this指向window，所以打印userName是外边的全局变量，而此时this.age打印undefined。
三. 构造函数调用模式
new 调用一个构造函数，会创建一个新对象，而其中的 this 就指向这个新对象。
function Func(){
this.str = "hello";
console.log(this) //this ===> Func {str: "hello"}
}
let a = new Func();
console.log(a); //a ===> Func {str: "hello"}
console.log(a.str); //hello
构造函数中如果加入了return的话，分两种情况:
- return的是五种简单数据类型：String，Number，Boolean，Null，Undefined。
这种情况下，忽视return值，依然返回this对象
//Number
function Func(){
this.str = "hello"
console.log(this) //this -> Func {str: "hello"}
return 1
}
let a = new Func();
console.log(a); // a -> Func {str: "hello"}
console.log(a.str); //hello
//String
function Func(){
this.str = "hello"
console.log(this) // a -> Func {str: "hello"}
return "abc"
}
let a = new Func();
console.log(a.str) //hello
//Boolean
function Func(){
this.str = "hello"
console.log(this) //this -> Func {str: "hello"}
return false
}
let a = new Func();
console.log(a.str) //hello
//null
function Func(){
this.str = "hello"
console.log(this) // a -> Func {str: "hello"}
return null
}
let a = new Func();
console.log(a.str) //hello
//undefined
function Func(){
this.str = "hello"
console.log(this) // this -> (Func {str: "hello"})
return undefined
}
let a = new Func();
console.log(a.str); //hello
- return的是Object。
这种情况下，不再返回this对象，而是返回return语句的返回值。
//数组
function Func(){
this.str = "hello"
console.log(this) //this -> Func {str: "hello"}
return [1,2]
}
let a = new Func();
console.log(a) //a -> [1,2]
console.log(a[0]) //1
console.log(a.str) //undefined
//对象
function Func(){
this.str = "hello"
console.log(this) //this -> Func {str: "hello"}
return {user:"zhangsan",age:18}
}
let a = new Func();
console.log(a); //a -> {user:"zhangsan",age:18}
console.log(a.age); //18
console.log(a.str); //undefined
//函数
function Func(){
this.str = "hello"
console.log(this) //this -> Func {str: "hello"}
return function(){
}
}
let a = new Func();
console.log(a) //ƒ (){}
四、call、apply、bind
- call()
通过在call方法的第一个参数可以改变this的指向，this指向第一个参数。
var a = {
user: "zhangsan",
fn: function () {
console.log(this.user); //zhansan
console.log(this) //this -> a
}
}
var b = a.fn;
b.call(a);
call()方法除了第一个参数以外还可以添加多个参数
var a = {
user:"zhangsan",
fn:function(a,b){
console.log(this.user); //zhangsan
console.log(a+b); //3
}
}
var b = a.fn;
b.call(a,1,2);
- apply()
apply方法和call方法有些相似，它也可以改变this的指向
var a = {
user:"zhangsan",
fn:function(){
console.log(this.user); //zhangsan
}
}
var b = a.fn;
b.apply(a);
同样apply也可以有多个参数，但是不同的是，第二个参数必须是一个数组
var a = {
user:"zhangsan",
fn:function(a,b){
console.log(this.user); //zhangsan
console.log(a+b); //11
}
}
var b = a.fn;
b.apply(a,[10,1]);
注意如果call和apply的第一个参数写的是null，那么this指向的是window对象。
- bind()
bind方法和call、apply方法有些不同，但是不管怎么说它们都可以用来改变this的指向。
区别：
var a = {
user:"zhangsan",
fn:function(){
console.log(this.user);
}
}
var b = a.fn;
b.bind(a);
发现控制台并没有打印，对，这就是bind和call、apply方法的不同，实际上bind方法返回的是一个修改过后的函数。
var a = {
user:"zhangsan",
fn:function(){
console.log(this.user);
}
}
var b = a.fn;
var c = b.bind(a);
console.log(c); //function() {}
我们可以执行一下函数c看看，能不能打印出对象a里面的user
var a = {
user:"zhangsan",
fn:function(){
console.log(this.user); //zhangsan
}
}
var b = a.fn;
var c = b.bind(a);
c();
ok，同样bind也可以有多个参数，并且参数可以执行的时候再次添加，但是要注意的是，参数是按照形参的顺序进行的。
var a = {
user:"zhangsan",
fn:function(a,b,c){
console.log(this.user); //zhangsan
console.log(a,b,c); //10 1 2
}
}
var b = a.fn;
var c = b.bind(a,10);
c(1,2);
总结：call和apply都是改变上下文中的this并立即执行这个函数，bind方法可以让对应的函数想什么时候调就什么时候调用，并且可以将参数在执行的时候添加。