node.js design patterns (the arrow function)
阿新 • • 發佈:2019-02-11
大家首先來看一片程式碼:
這個程式碼很簡單 定義了一個簡單的 greeter 原型 、
接受name作為引數。然後再原型中加入了greet 方法
例項化之後傳入引數呼叫 greet方法。打印出hello world
function DelayedGreeter(name){
this.name=name;
}
DelayedGreeter.prototype.greet=function(){
console.log('Hello '+this.name);
};
const greeter=new DelayedGreeter('World'); //打印出 Hello world
greeter.greet();
接著 咱們在greet中加入一個setimeout函式
function DelayedGreeter(name){
this.name=name;
}
DelayedGreeter.prototype.greet=function(){
setTimeout(function cb(){
console.log('Hello '+this.name);
},500);
};
const greeter=new DelayedGreeter('World'); //打印出 Hello undefined
greeter.greet();
這時候打印出hello undefined
這是為什麼呢。
1. 這個超時回掉函式的作用域和 greet方法的作用域是不同的,this的值是undefined.
在 node.js 引入箭頭函式之前 為了解決這個問題需要使用bind函式修改greet方法,如下
function DelayedGreeter(name){
this.name=name;
}
DelayedGreeter.prototype.greet=function(){
setTimeout( (function cb(){
console.log('Hello '+this .name);
}).bind(this),500);
};
const greeter=new DelayedGreeter('World'); //打印出 Hello World
greeter.greet();
但是有了箭頭函式之後 由於它們是繫結到自身作用域的 因此可以只使用一個箭頭函式作為回撥來解決這個問題
function DelayedGreeter(name){
this.name=name;
}
DelayedGreeter.prototype.greet=function(){
setTimeout( ()=>console.log('Hello' + this.name),500);
};
const greeter=new DelayedGreeter('World'); //打印出 Hello world
greeter.greet();