1. 程式人生 > >node.js design patterns (the arrow function)

node.js design patterns (the arrow function)

大家首先來看一片程式碼:
這個程式碼很簡單 定義了一個簡單的 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();