this绑定

105 阅读2分钟

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()执行的操作:

  1. 创建一个对象
  2. 将这个对象赋值给fun中的this
  3. 执行fun中的代码
  4. 返回(当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从定义其的环境中继承