概述
关于this指向,有个误区就是“this”指向调用的函数。其实不然,提到this指向,需要详细讲到apply,call,bind,new等方法以及箭头函数,点运算符。
一、独立调用
在独立调用的时候,要分两种情况:严格模式和非严格模式。
- 非严格模式下:
独立调用的时候this指向window(浏览器中),或者为undefined(nodejs中)。
//浏览器中
function foo(){
let a = 2;
console.log(this.a)
}
var a = 3;
foo()//3
//nodejs中
function foo(){
var a = 2;
console.log(this.a)
}
var a = 3;
foo()//undefined,此时this指向一个空对象{}
- 严格模式下
在严格模式下。独立调用函数中this都为undefined.
function foo(){
"use strict"
let a = 2;
console.log(this.a)
}
var a = 3;
foo()//此时this为undefined
二、点运算符
当函数被作为另外一个函数的属性调用时候,被调用函数中的this指向调用的函数。
let foo = {
a : 2,
fn: function(){
console.log(this.a)
}
}
var a = 3;
foo.fn()//2
三、箭头函数
箭头函数比较特别,其中的this是在编译的时候确定指向的(在别的情况下this都是在执行的时候确定指向)。
在es6的箭头函数中,this会在编译的时候绑定上一层函数或全局。
function foo(){
return (a) => {
console.log(this.a)
}
}
var obj1 = {
a:1
}
var obj2 ={
a: 2
}
//箭头函数中的this绑定到foo上。
var bar = foo.call(obj1);
bar.call(obj2)//1
四、new
在构造函数中,this会被绑定到实例中。
function foo(a){
this.a = a
}
var bar = new foo(3)
bar.a//3
五、call、apply、bind
这三个函数都是起到函数中的this绑定到第一个参数中。
function foo(){
console.log(this.a)
}
var obj = {
a:1
}
foo.call(obj)//1
foo.apply(obj)//1
foo.bind(obj)()//1
至于三者之间的区别不是本文重点,所以可以简单的理解为:
bind大部分作为返回使用,call和apply则会立即执行。
apply的参数为一个数组,call的参数为一一传入的,当参数数量不定的时候使用apply。