js bind函数详解

bind使用

// bind会构造一个新函数
// call 等会直接调用原函数 bind是新建函数 可以改变参数结构
function p(a, b, c) {
    console.log('a>>', a)
    console.log('b>>', b)
    console.log('c>>', c)
}
// f0指向this实例 a b c三个参数都在
f0 = p.bind(this)
f0(1, 2, 3)

// a参数已经被100占据 f1函数只剩下 b,c两个参数
f1 = p.bind(this, 100)
f1(2, 3)

// a b参数已经被100,200占据 f1函数只剩下 c一个参数
f2 = p.bind(this, 100, 200)
f2(3)

最终结果

a>> 1
b>> 2
c>> 3
a>> 100
b>> 2
c>> 3
a>> 100
b>> 200
c>> 3

实战应用

当你想从父组件传递给子组件 取消子组件显示的callback 可以指定this

<Child onHide={this.hideChild.bind(this)}></Child>

或者默认子组件调用只能是隐藏

<Child onHide={this.hideChild.bind(this,visible=false)}></Child>