深入了解js中的this

384 阅读2分钟

本文已参与「新人创作礼」活动,一起开启掘金创作之路。
this不是指自身,而是一个指针

1. 默认绑定

-this的词法作用域在哪生效,this就绑定哪里。 换句话说this在哪里被调用,或者被谁调用在没有其他绑定的情况下就指向谁。以上代码中,fun在全局中被调用,所以fun中的this指向全局,为默认绑定


var a = 4

function fun() {
    var a = 3
    console.log(this.a);
}

fun()//输出4

-严格模式下,全局对象无法进行默认绑定,所以会导致this只能绑定在undefined上,所以报错

'use strict'
var a = 4

function fun() {
    var a = 3
    console.log(this.a);
}

fun()//报错

2.隐式绑定

-当函数引用有上下文对象时,并且被这个对象调用时,隐式绑定的规则就会把函数调用中的this绑定到这个上下文对象

function fun() {
    var a = 3
    console.log(this.a);
}
var obj = {
    a: 4,
    f: fun
}
obj.f()//输出4

3. 隐式丢失

-当隐式绑定的函数丢失了绑定对象,就会默认对象(就是隐式绑定的时候没有调用而是送给别人)

function fun() {
    var a = 3
    console.log(this.a);
}
var obj = {
    a: 4,
    f: fun
}
var k = obj.f
k()

4. 显示绑定

a.call() 函数a的this指向window -a.call(b) 把a的this绑定都b对象上上 借用隐式绑定规则把a的this拿到复制放到b身上然后调用

function fun() {
    var a = 3
    console.log(this.a);
}
var obj = {
    a: 4
}
fun.call(obj)、//输出4 达到了隐式绑定同样的效果

带参数的 call()

function fun(b, c) {
    var a = 3
    console.log(this.a);
    console.log(b + c)
}
var obj = {
    a: 4

}
fun.call(obj, 2, 3)//输出4 5

a.apply(b) a.apply(b,[])跟call差不多只是后面不是多个参数列表,而是包含多个参数的数组!

function fun(b, c) {
    var a = 3
    console.log(this.a);
    console.log(b + c)
}
var obj = {
    a: 4

}
fun.apply(obj, [2, 3])//输出4 5

var bar =a.bind(b) bind()跟call()不同之处在于,call没有返回值,二bind返回一个函数 bar()

function fun(b, c) {
    var a = 3
    console.log(this.a);
    console.log(b + c)
}
var obj = {
    a: 4

}
fun.bind(obj, 2, 3)()//输出4 5

5.箭头函数

function fun() {
    console.log('abc');
}
fun()
//上面是普通函数下面是箭头函数
var k = () => {
    console.log('abc');
}
k()

这就是普通函数跟箭头函数的区别

var a = 5
var k = () => {
    var a = 9
    console.log(this.a);
}
k()//浏览器输出 5

因为箭头函数没有this,所有永远指向外面的一层,本例中是指向k,默认绑定为window