this多个绑定规则优先级比较

90 阅读1分钟

学习了四条规则,接下来开发中我们只需要去查找函数的调用应用了哪条规则即可,但是如果一个函数调用位置应用了多条规则,优先级谁更高呢?

1. 默认规则的优先级最低

毫无疑问,默认规则的优先级是最低的,因为存在其他规则时,就会通过其他规则的方式来绑定this

2. 显示绑定优先级高于隐式绑定

代码测试:

vars = {
    name: "obj",
    foo: function() {
    console.log(this)
    }
}

// obj.foo()  //{name:"obj",foo:f}

// 1.call/apply的显示绑定高于隐式绑定
// obj.foo.apply('abc')   // "abc"
// obj.foo.call('abc')    //"abc"

// 2.bind 高于隐式绑定
// var bar = obj.foo.bind("cba")
// bar()   //"cha"

// 3. 更明显的比较
function foo() {
    console.log(this)
}

var obj = {
    name: "obj",
    foo: foo.bind("aaa")
}

obj.foo()  //"aaa"

3、new绑定高于隐式绑定

var obj = {
    name: "obj",
    foo: function() {
    console.log(this)
    }
}

// new的优先级高于隐式绑定
var f = new obj.foo()  //foo()

4、new绑定高于显示绑定

new关键字不能和apply或call一起来使用

// new的优先级高于bind
function foo() {
    console.log(this)
}

var bar = foo.bind("aaa")

var obj = new bar()   //foo()

结论:new绑定 > 显示绑定(apply/call/bind) > 隐式绑定(obj.foo()) > 默认绑定(独立函数调用)