这个问题类似于使用React时最好使用胖箭头函数还是在构造函数中绑定函数?但有点不同.您可以this在构造函数中绑定函数,或者只在构造函数中应用箭头函数.请注意,我只能在项目中使用ES6语法.
1.
class Test extends React.Component{
constructor(props) {
super(props);
this.doSomeThing = this.doSomeThing.bind(this);
}
doSomething() {}
}
Run Code Online (Sandbox Code Playgroud)
2.
class Test extends React.Component{
constructor(props) {
super(props);
this.doSomeThing = () => {};
}
}
Run Code Online (Sandbox Code Playgroud)
这两种方式的优点和缺点是什么?谢谢.
好吧我们有这个:
class Car {
constructor(name) {
this.kind = 'Car';
this.name = name;
}
printName() {
console.log('this.name');
}
}
Run Code Online (Sandbox Code Playgroud)
我想要做的是定义printName,如下所示:
class Car {
constructor(name) {
this.kind = 'Car';
this.name = name;
}
// we want to define printName using a different scope
// this syntax is close, but is *not* quite correct
printName: makePrintName(foo, bar, baz)
}
Run Code Online (Sandbox Code Playgroud)
其中makePrintName是一个仿函数,如下所示:
exports.makePrintName = function(foo, bar, baz){
return function(){ ... }
};
Run Code Online (Sandbox Code Playgroud)
这可能与ES6有关吗?我的编辑器和TypeScript不喜欢这个
注意:使用ES5,这很容易做到,看起来像这样:
var Car = function(){...};
Car.prototype.printName = makePrintName(foo, bar, baz);
Run Code Online (Sandbox Code Playgroud)
使用类语法,目前最适合我的方法是:
const …Run Code Online (Sandbox Code Playgroud) class App extends Component {
constructor(props) {
...
}
onChange = (e) => this.setState({term: e.target.value})
onSubmit(e){
e.preventDefault();
const api_key = "C1hha1quJAQZf2JUlK";
const url = `http://api.giphy.com/v1/gifs/search?q=${this.state.term}&api_key=${api_key}`;
}
render() {
return (
<div>
<form onSubmit={this.onSubmit}>
<input value={this.state.term} onChange={this.onChange}/>
<button>Search!</button>
</form>
</div>
);
}
}
Run Code Online (Sandbox Code Playgroud)
在类中声明的两种类型的函数(onChange和onSubmit)之间有什么区别.我在const url中引用this.sate时出错,如果我将其声明为ES6类方法但将其更改为箭头函数则修复它.
我想知道在这两种情况下如何处理"这个"
另外,我该怎么做呢?比方说,如果我想使用相同的onSubmit函数(ES6类方法),但是当我调用它时(在表单元素中)想要处理它,我该怎么做?
使用this.onSubmit.bind(this)?
我有一个 typescript 装饰器工厂,它控制台记录执行函数所花费的总时间、实际函数执行结果和传递给装饰器的参数。
例如
export function performaceLog(...args: any[]) {
return (target: Object, key: string, descriptor: TypedPropertyDescriptor<any>) => {
var msg = '';
if (args.length != 0) {
msg = args.map(arg => arg).join(' ');
}
if (descriptor === undefined) {
descriptor = Object.getOwnPropertyDescriptor(target, key);
}
if (typeof descriptor.value !== 'function') {
throw new SyntaxError('Only functions can be used with log decorators');
}
var originalMethod = descriptor.value.bind(target);
descriptor.value = function() {
var funcArgs: any = [];
for (var i = 0; i …Run Code Online (Sandbox Code Playgroud) javascript decorator typescript ecmascript-6 typescript-decorator
我试图从子类调用父类的函数,但关键字super是抛出和错误。我正在使用打字稿,这是项目中 package.json 的一个片段。
{
"scripts": {
"build": "tsc",
"start": "nodemon",
"prod": "npm run build && npm run start"
},
"dependencies": {
"body-parser": "^1.18.3",
"dotenv": "^6.1.0",
"express": "^4.16.4"
},
"devDependencies": {
"@types/body-parser": "^1.17.0",
"@types/dotenv": "^4.0.3",
"@types/express": "^4.16.0",
"@types/node": "^10.12.2",
"nodemon": "^1.18.5",
"ts-node": "^7.0.1",
"tslint": "^5.11.0",
"typescript": "^3.1.6"
}
}
Run Code Online (Sandbox Code Playgroud)
父类
export default class baseController {
public response = (message = "", status = 200) => (
req: Request,
res: Response
) => {
return res.status(status).send({
status: true, // true …Run Code Online (Sandbox Code Playgroud) javascript ×5
ecmascript-6 ×4
typescript ×3
reactjs ×2
constructor ×1
decorator ×1
es6-class ×1
express ×1
node.js ×1
tsconfig ×1