2018-08-02

第四天

• javaScript 的 this 指向？
  答：请看以下代码

// Class
class myClass {
  constructor() {
    this.x = 42;
  }
  getX() {
    return this.x;
  }
}

var my = new myClass();
// 若类的方法内含 this, 默认指向类的实例。
console.log('直接调用实例的方法:' + my.getX());

// 未绑定this 若单独使用该方法，这里的 this 指向该方法运行时所在的环境。
var unboundGetX = my.getX;
// 这里this 指向了window。
console.log('unBoundGetX this内容:' + this);
// window没有 x property。
//console.log('unBoundGetX: error报错:' + unboundGetX());

// 绑定this
var boundGetX = my.getX.bind(my);
console.log('boundGetX:' + boundGetX());


// Object 的 this 用法 和 Class 一样。
var module = {
  x: 42,
  getX: function() {
    return this.x;
  }
}

console.log(module.getX());

var unboundGetX = module.getX;
console.log(unboundGetX());

var boundGetX = unboundGetX.bind(module);
console.log(boundGetX());

输出

> "直接调用实例的方法:42"
> "unBoundGetX this内容:[object Window]"
> "boundGetX:42"
> 42
> undefined
> 42

• bind() ？
  答：

function.bind(thisArg, arg1, arg2, ...)

bind() 函数会生成一个新的函数，称为 bound function。调用 bind() 方法的 function 称为 target function or wrapped function。

this.Arg: 调用 bound function 时，this 参数会传递给 target function。

arg1, arg2, ... : 预先添加到 bound function 的参数

bound function 有以下几个内部属性：TargetFunction, BoundThis, BoundArguments
BoundThis，当调用 targetFunction，它的值总被作为 this。
BoundArguments，调用 targetFunction 作为第一个参数列表。

• bind() 中的 arg1，arg2 是按什么顺序传递给 targetFunction 的？
  答：

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';

class App extends Component {

  constructor(props) {
    super(props);
    this.boundHandleClick = this.handleClick.bind(this, 2, 3, 4);
  }

  handleClick(id0, id1, id2, id3) {
    console.log(id0 + '\n' + id1 + '\n' + id2 + '\n' + id3);
  }

  render() {
    return (
      

        

          
          
Welcome to React
        
        

          To get started, edit src/App.js and save to reload.
        
         this.boundHandleClick(5)}>
          Function.prototype.bind
        
      
    );
  }
}
export default App;

输出

2
3
4
5

说明 bind() 预添加的 arg1, arg2 会先 bound target 调用传参的arguments。

• bind() 主要用法 ？
  用法1：创建一个函数，当函数调用时，this 总传给该函数。
  用法2：提前指定初始值，这些 values 跟随 this 参数之后，同时 values 插到 bound function 传参的前面。
  用法3：默认window.setTimeout()，this 指向会被置为 window。bind()，可以让当调用类方法时，this 总是指向该类的实例。