js 中多次bind的效果为什么会是这样？

Question

<script>
"use strict";
var a=function(){
    console.log("a")
    if(this){
        this()
    }
}

var b=function(){
    console.log("b")
    if(this){
        this()
    }
}

var c=function(){
    console.log("c")
    if(this){
        this()
    }
}

var d=a.bind(b)
var e=d.bind(c)
d()
e()


</script>

这段代码为什么执行结果是abab不能理解。。。

<script>
"use strict";
var a=function(){
    console.log("a")
    let t=eval("this")
    if(this){
        this()
        t()
    }
}

var b=function(){
    console.log("b")
    let t=eval("this")
    if(this){
        this()
        t()
    }
}

var c=function(){
    console.log("c")
    let t=eval("this")
    if(this){
        this()
        t()
    }
}

var x=function(){
    console.log("a")
    let t=eval("this")
    if(b){
        b()
        t()
    }
}

var d=a.bind(b)
var e=d.bind(c)
var f=x.bind(c)
e()
f()

</script>

就是这个“相当于”不理解啊，上面这个例子，是abbabc啊,说明第一次bind和并没有替换内部逻辑，纯粹就是第二次bind没有改变this的指向。

Answer 1

把 b bind 到 a 上时，d 就相当于

d = function() {
    console.log("a")
    if(b){
        b()
    }
}

所以 d 再 bind 谁都没影响

Answer 2

d = a.bind(b);
d();

这里d()的意思是将a的this绑定到b，然后执行。因此执行输出肯定是a, b。因此a中的this()实际上就等于b().但是当b中运行时，this的类型就已经是不是function了，因此运行肯定是会报错的。

e = d.bind(c);
e();

同样的道理，这里会首先执行d函数，然后执行c函数，但是在执行d的时候this就已经是undefined了，肯定就不会继续向下执行了，因此也就仅仅只执行了d函数，输出了a, b。

修改代码如下：

"use strict";
var a=function(){
    console.log("a")
    console.log('a:', typeof this);
    if(typeof this == 'function'){
        this()
    }
}

var b=function(){
    console.log("b")
    console.log('b:', typeof this);
    if(typeof this == 'function'){
        this()
    }
}

var c=function(){
    console.log("c")
    console.log('c:', typeof this);
    if(typeof this == 'function'){
        this()
    }
}

var d=a.bind(b)
var e=d.bind(c)
d()
e()

你可以更加直观的查看到this的变化与输出结果的对比。

a
a: function
b
b: undefined
a
a: function
b
b: undefined

Answer 3

在了解了this的用法之后
终于明白大佬说的

这个“相当于”不是指改变了a或b的结构，而是指对于d来说是这样。所以也不存在“第二次”绑定，因为第二次绑定是在d之上，跟a和b无关。总的来说就是，d让a绑定在了b上面，e让c绑定在了d上面，但d里并没有this指向，所以c什么东西都没改变。

这句话的意思了。于是写了个例子模拟了一下。

<script>
"use strict";
var a=function(){
    console.log("a")
    if(this){
        this()
    }
}

var b=function(){
    console.log("b")
}

var c=function(){
    console.log("c")
}

var d=a.bind(b)
var e=d.bind(c)
d()
e()


var f=function(){
    var obj=b
    obj.func=a
    obj.func()
}

var g=function(){
    var obj=c
    obj.func=f
    obj.func()
}

f()
g()


</script>

总之多谢各位大佬的解答。