之前有一篇文章写到了this,后来在面试的时候面试官说我写的太浅了,我又回去看了一下,确实哈哈哈哈哈哈,那么今天就从原理层面理解一下吧。

首先学习this的第一步是明白this既不指向函数自身,也不指向函数的词法作用域,this实际上是在函数被调用是发生的绑定,它指向是什么完全取决于在哪里被调用。

下面先简单介绍一下this的绑定规则:

1.默认绑定

首先先来看一段代码:

function foo() {
    var a = 5;
    console.log(this.a)
}

var a = 2;

foo();     //2

可能不熟悉javascript的朋友对这里有点困惑,因为在java等其他语言里面,this指向的是该对象的属性作用域,而javascript中在独立函数调用的时候,因为是全局调用的该函数,所以this指向的是全局,这里由于没有其他绑定方式,所以直接是默认绑定。

2.隐式绑定

考虑下面的代码:

function foo(){
    console.log(this.a)
]
var obj = {
    a:2,
    foo:foo
}

obj.foo();   // 2 

与默认绑定类似,隐式绑定规则也是会把调用者的this传入函数对象,这里是把obj作为this传入了foo中,最后得以输出2。

3.显式绑定

之前的绑定都是应用规则来绑定,必须间接引用才可以完成功能,如果不想在对象内包含函数引用的话,而又需求在某个对象上强制调用函数,这时候就需要显示绑定了,下面介绍两种显示绑定的方法,顺便介绍call,apply,bind这几个javascript内置函数的使用方法以及区别。

首先是call与apply,这两个函数的主要作用都是将this绑定到某个对象上,例如上述代码中加入foo.call(obj),foo中的this就会显式指向obj,this.a就是obj.a,返回的是foo执行的结果,其区别在于call之后的参数数量是按照原函数的参数+1传入的,例如foo.call(obj,1,2,3)而apply是以参数数组的方式传入的,如foo.apply(obj,[1,2,3])

3.1硬绑定

接下来是bind,bind可以理解为辅助绑定函数,该函数返回的是一个函数,考虑如下代码:

function bind(fn, obj) {
    return function() {
        return fn.apply(obj, arguments);
    }
}

虽然说bind函数实现起来没有这么简单,但是该代码已经能很好地表达硬绑定的思想了,返回了一个绑定了该对象的函数,相比之前的call与apply可以重复执行,如下:

function foo() {
    console.log(this.a)
}

let obj1 = {a: '3'};
let obj2 = {a: '7'};

const foo1 = foo.bind(obj1);
const foo2 = foo.bind(obj2);

foo1(); //3
foo2(); //7

3.2new绑定

这里需要明确的是JavaScript中的new机制和其他面向类的语言完全不同,js中的构造函数只是被new操作符调用时的函数,其并不属于某个类,也不会实例化一个类,从某种意义上来说,其只是被new操作符调用的普通函数而已。总结一下,就是不存在所谓的构造函数,而是只存在对于函数的构造调用。考虑如下代码:

function foo(a) {
    this.a = a;
}

const foo1 = new foo(2);

console.log(foo1.a) \\2

可以看到这里的new操作符构造了一个全新的对象,并且将新对象绑定到该函数调用的this,如果函数没有返回其他对象的话,new表达式会将该对象本身返回。与前面的bind对比来看,关于this的部分就是创建了一个全新的obj来供new出来的函数使用。

4.软绑定

这里的软绑定是修改了的默认绑定+硬绑定的产物,简单来说,就是在该软绑定之后,将遇到默认绑定的规则的时候,不再绑定到全局对象或者undefined,而是软绑定指定的默认对象,出现其他硬绑定场景时再将该绑定绑定带其他对象,相比之下这种绑定方式更加灵活。

5.箭头函数

这里再提到箭头函数,结合上文中描述的this指向,箭头函数的this就很好理解了,箭头函数直接继承的是外层函数或者全局的作用局来决定的,当有时需要使用_this = this来控制父级到子集的this指向时,箭头函数是一个不错的选择,但是尽量不要将箭头函数与bind也就是this风格混用,这样会导致代码结构混乱。

文章目录
1人点赞