函数的this指向和改变的方式

函数的this指向

this是函数运行时自动生成的一个内部对象

函数的this指向其实只有两种，在es6出来以前只有一种：

1. function关键字定义出来的函数，this指向调用它的对象，this的指向不是在创建时决定，而是由执行环境决定，通过一些方法改变它指向的除外...

2. 箭头函数，箭头函数this始终指向定义它的作用域所属的对象，并且不能被改变。

 

1. 普通定义的函数

 

普通函数的调用是由window来进行的，所以this是指向全局对象的，浏览器端就是指向window。

// 1.正常定义的函数

function con(){
    console.log(this)  
}
con(); 
// window


// 2.定时器传入的匿名函数参数

setTimeout(function (){
    console.log(this)
},1000)
// window

 

2. 对象的属性是函数的（这种函数也叫方法）

 

对象的函数属性，由于是对象来调用的，所以，里边的this指向的就是调用的对象本身

var a = {
  con: function(){
    console.log(this)
  }  
}

a.con()
// a对象

 

3. 构造函数的函数属性

 

构造函数里的this下的函数属性，对应的是构造出来的实例对象

function Person(){
  this.name = '';
  this.say = function(){
    console.log(this)
  }  
}

var person = new Person()

person.say()
// person对象

 

4. 箭头函数

 

箭头函数里的this，永远指向定义它的时候的作用域

var a = {
    b:()=>{console.log(this)}
}

a.b()
// window

 

 

改变this指向的方法

 

1. bind方法

 

函数的bind方法，可以在函数定义的时候，通过点语法来调用，传入一个参数，生成一个作用域为传入参数的函数

var a = {
    b:function(){
        console.log(this)
    }.bind(this)
}

a.b()
// window

 

2. call方法

 

函数的call方法，使用方式和bind不同，call是函数调用时，绑定作用域对象的

var a = {
    b:function(){
        console.log(this)
    }
}

a.b()
// a对象

a.b.call(this)
// window

 

3. apply方法

 

apply方法和call方法用法差不多，也是调用时使用

不过apply方法和call方法不同的是：

call方法调用时，第一个参数传作用域对象，剩下的参数传函数原来接受的参数

apply方法调用时，第一个参数和call一样，传绑定的作用域对象，不一样的是第二个参数apply要求传入一个参数数组

var a = {
    b:function(a,b,c){
        console.log(a,b,c)
        console.log(this)
    }
}

a.b(1,2,3)
// 1 2 3

a.b.call(this,1,2,3)
// 1 2 3
// window

a.b.apply(this,[1,2,3])
// 1 2 3
// window