JavaScript中apply、call、bind用法和区别-基础篇

apply

Function.prototype.apply方法的用途

apply方法调用一个给定的this值函数，作为一个数组提供参数

const infos = {
message:‘Come On!’
};
function getInfos(){
return this.message;
}
getInfos.apply(infos);//‘Come On!’

call方法的作用和apply方法类似，区别就是call方法接受的是参数列表，而apply方法接受的是一个参数数组。

const infos = {
message:‘Xiao Laoda’
};
function getInfos(data){
return `${data} ${this.name}`;
};
getInfos.apply(infos,[‘Hello’]);//“Hello Xiao Laoda”

Function.prototype.call方法的用途

call方法使用一个指定的this值 和 单独给出的一个或多个参数来调用一个函数。

const infos = {
message:‘Come On!’
};
function getInfos(){
return this.message;
}
getInfos.call(infos);//‘Come On!’

call 方法接受一个参数列表，而apply方法接受一个数组

const infos = {
message:‘Xiao Laoda’
};
function getInfos(data){
return `${data} ${this.name}`;
};
getInfos.call(infos,‘Hello’);//“Hello Xiao Laoda”

Funciton.prototype.bind的用途

bind方法创建一个薪的函数，在bind调用时，这个薪函数的this被指定为bind的第一个参数，而其余参数作为新函数的参数

import React from ‘react’;
class MyComponent extends React.Component {
constructor(props){
super(props);
this.state = {
value : “”
}
this.handleChange = this.handleChange.bind(this);
// 将 “handleChange” 方法绑定到 “MyComponent” 组件
}
handleChange(e){
//do something amazing here
}
render(){
return (
<>
<input type={this.props.type}
value={this.state.value}
onChange={this.handleChange}
/>
</>
)
}
}