本文已参与「新人创作礼」活动,一起开启掘金创作之路。
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