第四天
- 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 (
<div className="App">
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<h1 className="App-title">Welcome to React</h1>
</header>
<p className="App-intro">
To get started, edit <code>src/App.js</code> and save to reload.
</p>
<a href='www.baidu.com' onClick={() => this.boundHandleClick(5)}>
Function.prototype.bind
</a>
</div>
);
}
}
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 总是指向该类的实例。
