关于js的function

function* (摘抄自:http://www.cnblogs.com/yuzhengbo/p/6807914.html)
用法
function* fn() { console.log(1); //暂停! yield; //调用next方法继续执行 console.log(2); } var iter = fn(); iter.next(); //1 iter.next(); //2

 1、函数生成器特点是函数名前面有一个‘*’

  2、通过调用函数生成一个控制器

  3、调用next()方法开始执行函数

  4、遇到yield函数将暂停

  5、再次调用next()继续执行函数

 

消息传递

  除了暂停和继续执行外,生成器同时支持传值。

  用法如下:

 function* fn() {
        var a = yield 'hello';
        yield;
        console.log(a);
    }
    var iter = fn();
    var res = iter.next();
    console.log(res.value); //hello
    iter.next(2);
    iter.next(); //2

 可以看到,yield后面有一个字符串,在第一次调用next时,暂停在这里且返回给了iter.next()。

  而暂停的地方是一个赋值语句,需要一个变量给a,于是next()方法中传了一个参数2替换了yield,最后打印a得到了2。

 

异步应用   

  通过yield来实现异步控制流程:

  function fn(a, b) {
        //假设这是一个ajax请求
        ajax('url' + a + b, function(data) {
            //数据请求到会执行it.next
            it.next(data);
        });
    }
    //这里是函数生成器
    function* g() {
        //当异步操作完毕yield会得到值
        //这里会自动继续执行
        var text = yield fn(a, b);
        console.log(text);
    }
    var it = g();
    it.next();

 这里做了简化处理,忽略了一些错误处理。

  确实很巧妙,通过回调函数来继续执行函数生成器,然后得到数据。

  然而,直接在回调里拿数据不行么。书上讲,这样异步操作符合大脑思考模式,函数的执行看起来‘同步’了。

 

yield+promise

  重点来了。

  先回忆之前promise对异步的实现:

  function request(url) {
        return new Promise(function(resolve, reject) {
            //ajax异步请求完成会调用resolve决议
            ajax(url, resolve);
        });
    }
    request('url').then(function(res) {
        console.log(res);
    })

 流程大概是调用函数传入url,由于会立即决议,触发ajax请求函数。异步请求完调用调用回调函数,也就是resolve,然后根据返回的resolve调用then方法获取数据。

  现在将yield与promise综合在一起:

 function foo(x) {
        return request('url' + x);
    }
    //等待promise决议值返回
    function* fn() {
        var text = yield foo(1);
    }
    var it = fn();
    //返回一个promise
    var p = it.next().value;
    //对promise处理
    p.then(function(text) {
        //这里继续执行生成器
        it.next(text);
    })

封装

  可以将上面的yield+promise进行封装,得到下面的函数

   function run(gen) {
        //获取除了生成器本身以外的参数
        var args = [].slice.call(arguments, 1),
            it;
        //it = main()
        it = gen.apply(this, args);
        return Promise.resolve().then(function handleNext(value) {
            //第一次启动无value
            var next = it.next(value);
            return (function handleResult(next) {
                //执行完毕返回
                if (next.done) {
                    return next.value;
                } else {
                    //如果还有就决议next.value传给handleNext
                    return Promise.resolve(next.value).then(handleNext, function(err) {});
                }
            })(next);
        });
    }
    //这是一个函数生成器
    function* main() {
        //...
    };
    //该调用会自动异步运行直到结束
    run(main);

  如果有两个异步操作,获取到返回的两个数据后,再进行第三个异步操作,可以这么做:

    function foo() {
        var p1 = request('url1'),
            p2 = request('url2');
        //每一个request异步请求完成后会自动解除yield
        var r1 = yield p1,
            r2 = yield p2;
        var r3 = yield request('url3' + r1 + r2);
        console.log(r3);
    }

Arrow function
(摘抄自:https://www.so.com/s?q=Arrow+function++js&src=srp&fr=dlm&psid=7fd5f5db235771f593b3453739279db0&ls=n482bfbdf97)

箭头函数与传统的JavaScript函数主要区别在于以下几点:
1.对 this 的关联。函数内置 this 的值,取决于箭头函数在哪儿定义,而非箭头函数执行的上下文环境。
2.new 不可用。箭头函数不能使用 new 关键字来实例化对象,不然会报错。
3.this 不可变。函数内置 this 不可变,在函数体内整个执行环境中为常量。
4.没有arguments对象。更不能通过arguments对象访问传入参数。只能使用显式命名或其他ES6新特性来完成。

这些差异的存在是有理可循的。首先,对this的绑定是JavaScript错误的常见来源之一。容易丢失函数内置数值,或得出意外结果。其次,将箭头函数限制为使用固定this引用,有利于JavaScript引擎优化处理。

一、语法

箭头函数的语法很简单,定义自变量,然后是箭头和函数主体。自变量和主题因使用不同可以采用更简洁的格式。下面这个例子就是采用传一个参数和返回一个值的箭头函数。

代码如下:

var reflect = value => value;
// 等同于:

var reflect = function(value) {
return value;
};

可以看出,传一个参数就直接写就好了,不用加小括号。箭头指向函数主体,不过函数主体也只是简单的一条返回语句,所以也不用加大括号。函数构造完毕赋给reflect加以引用。
若需传入多个参数,则应加上小括号。例如:

代码如下:

var sum = (num1, num2) => num1 + num2;
// 等同于:
var sum = function(num1, num2) {
return num1 + num2;
};
sum()方法为两参数相加并回传结果。跟前一个例子的唯一区别是传入了两个参数,所以要用小括号括起来。它与传统函数一样,括号内由逗号将传入参数分开。同样,如果该函数不需要传入参数,那也要以空括号来代替。
代码如下:
var sum = () => 1 + 2;
// 等同于:
var sum = function() {
return 1 + 2;
};

若你想使用标准的函数体,或者函数体内可能有更多的语句要执行,则要用大括号将函数体括起来,并明确定义返回值。例如:

代码如下:

var sum = (num1, num2) => { return num1 + num2; }
//等同于:
var sum = function(num1, num2) {
return num1 + num2;
};

大括号内的部分基本等同于传统函数,除了arguments参数不可用外。
因为大括号是函数主体的标志。而箭头函数若要返回自定义对象的话,就必须用小括号把该对象括起来先。例如:

代码如下:

var getTempItem = id = > ({
id: id,
name: "Temp"
});
// 等同于:
var getTempItem = function(id) {
return {
id: id,
name: "Temp"
};
};

上例可以看出,用小括号包含大括号则是对象的定义,而非函数主体。

二、使用

JavaScript最常见错误之一就是函数内部this关联。因为this是根据函数当前的执行环境去取值的,这样就会在调用时产生误解,以导致对其他的不相关对象产生了影响。参见下例:

代码如下:

var PageHandler = {
id: "123456",
init: function() {
document.addEventListener("click", function(event) {
this.doSomething(event.type); // error
}, false);
},
doSomething: function(type) {
console.log("Handling " + type + " for " + this.id);
}
};

在这段代码中,本意是想让PageHandler的init()方法用于构建交互作用,并在点击事件处理函数中调用this.doSomething()。但是代码并未按设计初衷来执行,运行时this指向了全局对象而不是PageHandler,从而造成this.doSomething()调用无效出现报错,因为全局对象中不存在doSomething方法。
当然,可以在函数中使用bind()将this与PageHandler明确关联起来,见下:

代码如下:

var PageHandler = {

id: "123456",

init: function() {
document.addEventListener("click", (function(event) {
this.doSomething(event.type);
}).bind(this), false);
},

doSomething: function(type) {
console.log("Handling " + type + " for " + this.id);
}
};

虽然看着有些怪,但现在代码执行是符合预期的。通过调用函数的bind(this),又创建了一个已关联现有this的新函数返回,就是说为了达到目的额外又包了一层。
因为箭头函数已经支持this关联,所以这里用箭头函数会更爽快些,看下例:
代码如下:

var PageHandler = {

id: "123456",

init: function() {
document.addEventListener("click",
event = > this.doSomething(event.type), false);
},

doSomething: function(type) {
console.log("Handling " + type + " for " + this.id);
}
};

这个实例中的事件处理函数调用了this.doSomething()的箭头函数。this的取值即为init()内的this值。故而它等效于bind()。
箭头函数简明扼要的特性,也使它成为其他函数自变量的理想选择。例如,若要在ES5上,使用定制比较器来排列数组,典型的代码见下:

代码如下:

var result = values.sort(function(a, b) {
return a - b;
});

上例用了许多语法来实现一个简单的操作。若使用箭头函数,则可写成很精炼的代码:

代码如下:

var result = values.sort((a, b) => a - b);

数组的sort/map/reduce等方法都支持回调函数。用箭头函数可以简化书写流程,解放你的双手去做你想做的事情。

三、补充

箭头函数的确与传统函数有不同之处,但仍存在共同的特点。例如:
1.对箭头函数进行typeof操作会返回“function”。
2.箭头函数仍是Function的实例,故而instanceof的执行方式与传统函数一致。
3.call/apply/bind方法仍适用于箭头函数,但就算调用这些方法扩充当前作用域,this也依旧不会变化。
箭头函数与传统函数最大的不同之处在,禁用new操作。

posted @ 2018-11-11 20:40  悦研  阅读(290)  评论(0编辑  收藏  举报