1.默认绑定
核心:独立函数调用
// 例1:(直接调用)
function foo() {
console.log(this)
}
foo() //window、global
// 例2:(直接调用)
function foo1() {
console.log(this)
}
function foo2() {
console.log(this)
foo1()
}
function foo3(params) {
console.log(this)
foo2()
}
foo3()
// 例3:(函数作为参数传递)
const obj = {
name: 'zhangsan',
foo: function() {
console.log(this)
}
}
const foo1 = obj.foo
obj.foo()
foo1()
// 例4:(函数作为参数传递)
function foo() {
function bar() {
console.log(this)
}
return bar
}
const fn = foo()
fn()
2.隐式绑定
核心:将函数以对象的属性的方式进行调用
function foo() {
console.log(this)
}
const person = {
name: 'zhangsan',
age: '19',
fn: foo
}
foo() //独立函数调用
person.fn() //以对象属性的方式调用
3.显式绑定
使用call/apply/bind
function foo() {
console.log(this)
}
foo()
foo.call({name: 'zhangsan'}) //直接执行
foo.apply({name: 'lisi'}) //直接执行
const fn = foo.bind({name: 'wangwu'}) //返回一个函数
fn() //此函数的this已经被绑定
const obj = {age: 19}
obj.fun = fn
obj.fun() //由于fn的this已经被显式绑定,此时再将fn赋值给对象属性,调用时仍以显示绑定准
const obj1 = {
age: 20,
foo1:function () {
console.log(this)
}
}
obj1.foo1.call({age:'21'}) //以显式绑定为准
// 总结:显式绑定优先级高于 > 隐式绑定
4.new绑定
通过new调用一个函数时,会创建一个对象,这个对象将会赋值给函数中的this。
this === 创建出来的对象
new fun()执行的操作:
- 创建一个对象
- 将这个对象赋值给
fun中的this - 执行
fun中的代码 - 返回(当
fun函数自定义返回了一个对象实时,则返回自定义的对象,否则返回新创建的对象)
function foo() {
this.name = 'zhangsan'
this.age = 19
}
const obj = new foo()
console.log(obj)
5.this绑定的优先级
const obj = {
name: 'obj',
foo: function () {
this.age = 21
console.log(this)
}
}
// obj.foo() //{ name: 'obj', foo: [Function: foo], age: 21 }
// 1.显式绑定 > 隐式绑定
obj.foo.apply({name: 'zhangsan'}) //{ name: 'zhangsan', age: 21 }
obj.foo.call({name: 'lisi'}) //{ name: 'lisi', age: 21 }
// 2.new绑定 > 隐式绑定
const newObj = new obj.foo() //{ age: 21 }
// 3.new不能和apply/call一起使用,但是可以和bind对比,new > bind
const fooBinded = obj.foo.bind({name: 'liming'})
new fooBinded() //{ age: 21 }
综上:new > bind/call/apply > 隐式绑定 > 默认绑定
6.箭头函数的this
- 箭头函数的this与箭头函数的调用位置无关,由箭头函数定义的位置决定
- 箭头函数的this从定义其的环境中继承