js 双冒号(::)运算符

Posted 2022-03-17 胖鹅68

文章目录

• 一、参考
• 二、call(),applay(),bind() 函数
• • 2.1 API 说明
  • 2.2 API 差异说明
• 三、 箭头函数 VS. 双冒号运算符
• • 3.1 ( :: ) 双冒号
  • 3.2 react 中的使用案例

一、参考

1. 阮一峰 双冒号运算符

二、call(),applay(),bind() 函数

2.1 API 说明

let arg = [arg1, arg2, arg3......]

1. call(target,...arg）　　
第一个参数，是this指向
第二个参数，`及其以后的参数都是数组里面的元素，就是说要全部列举出来`；

2. applay(target, arg)
第一个参数，是this指向
第二个参数，`是一个参数数组`

3. bind(target)
第一个参数，是this指向

2.2 API 差异说明

1. bind是返回对应函数
2. 便于稍后调用，apply、call是立即调用；

三、 箭头函数 VS. 双冒号运算符

1.箭头函数可以绑定this，因为箭头函数无自己的this，始终指向箭头函数外层的this，但是，箭头函数并不适用于所有场合

2.双冒号运算符，可以替代call(),applay(),bind()

3.1 ( :: ) 双冒号

冒号左边是对象，右边是函数，该运算符会自动将左边的对象，作为上下文环境（即this对象），绑定到右边的函数上面。

foo::bar;
// 等同于
bar.bind(foo);

foo::bar(...arguments);
// 等同于
bar.apply(foo, arguments);

双冒号左边为空，右边是一个对象的方法，则等于将该方法绑定在该对象上面。

var method = obj::obj.foo;
//==
var method = ::obj.foo;
let log  = ::console.log;
//==
let log =console.log.bind(console)

3.2 react 中的使用案例

render() 
  let  props, state  = this;
  return (
    <div style=position: 'relative'>
       props.layout.eastWidth !== 0 && props.browser.width >= 1440 && props.layout.switchState &&
      <div className="east-switch-cls">
          <Switch defaultChecked=true size="small" onChange=::this.switchChange />
          <span>i18n('ibody.rightInfo','右侧信息')</span>
          /* <span className="east-switch-cls-line"> </span> */
      </div> 
      <div className="content-layout-east" style=
          width: props.layout.eastWidth,
          height: state.height,
          display: !state.isShow ? 'none' : 'block',
          overflowY: props.overflowY
      > props.layout.eastWidth ?  props.children : "" </div>
    </div>
  )

onChange=::this.switchChange 等价于 onChange=this::this.switchChange 即 onChange=this.switchChange.bind(this)