美文网首页菜鸟前端工程师
JavaScript学习笔记014-this指向0Iterato

JavaScript学习笔记014-this指向0Iterato

作者: Mr柳上原 | 来源:发表于2018-08-20 18:23 被阅读0次

    Author:Mr.柳上原

    • 付出不亚于任何的努力
    • 愿我们所有的努力,都不会被生活辜负
    • 不忘初心,方得始终

    在微信公众号看到一篇文章

    感触很深

    《在公司里,千万不要骂20多岁的小年轻,因为他们一不爽就不来了》

    《但是你们可以使劲骂30岁以后还拿5000左右工资的油腻中年人,因为他们不敢辞职》

    或许很残酷

    社会真的是这样

    说什么------浪子回头金不换,学习永远来得及,什么时候改好都不算晚.....

    这些都是假的

    社会没那么多时间会给你去改正

    一步跟不上

    只有被淘汰

    你唯一能做的

    就是每天都要进步

    每天都要学习

    每天都比昨天的自己好

    这样

    或许能有一丝机会

    不会被后来者取代

    这就是社会

    <!DOCTYPE html> <!-- 文档类型:标准html文档 -->
    
    <html lang='en'> <!-- html根标签 翻译文字:英文 -->
    
    <head> <!-- 网页头部 -->
    
    <meat charset='UTF-8'/> <!-- 网页字符编码 -->
    
    <meat name='Keywords' content='关键词1,关键词2'/>
    
    <meat name='Description' content='网站说明'/>
    
    <meat name='Author' content='作者'/>
    
    <title>前端59期学员作业</title> <!-- 网页标题 -->
    
    <link rel='stylesheet' type='text/css' href='css/css1.css'/> <!-- 外链样式表 -->
    
    <style type='text/css'> /*内部样式表*/
    
    </style>
    
    </head>
    
    <body> <!-- 网页主干:可视化区域 -->
    
    <script>
    
    /*
    函数的this指向:看函数的调用,谁调用就指向谁
    主动执行调用函数:
    call // call传递的实参是一个个值
    apply // apply传递的实参是一个数组
    
    不主动执行调用函数:
    bind // 不兼容低版本IE
    
    第一个参数为修改的this指向的对象,函数的实参依次写在第一个参数的后面
    */
    
    var a = 1;
    var obj = {
    a: 2
    }
    function fn(a, b, c){
    console.log(this.a);
    }
    fn.call(obj, 1, 2, 3); // this指向变为obj
    fn.apply(obj, [1, 2, 3]); // this指向变为obj
    fn.bind(obj, 1, 2, 3)( ); // this指向变成obj
    document.onclick = fn.bind(obj, 1, 2, 3); // 右边不主动执行
    
    // 定时器传参
    setTimeout(fn.bind(null, 1, 2, 3), 1000); // 不需要指向时,可以null
    setTimeout("fn(1, 2, 3)", 1000); // 第二种传参方法,字符串不会主动执行
    setTimeout("fn.call(null, 1, 2, 3)", 1000); // 需要修改指向时
    
    // 函数的this指向
    Function.prototype.bind = function (){
    console.log(this); // this指向调用它的函数
    return function (){ 
    fn();
    };
    }
    function fn(){ };
    fn.bind(); // fn调用bind
    fn.bind()(); // 执行的是return出来的匿名函数,匿名函数里的fu自执行,看起来如同fn执行
    
    // 类数组转数组
    function (){
    Array.prototype.slice.call(arguments);
    }
    fn(1, 2, 3, 4, 5, 6, 7);
    
    /*
    iterator:一种接口,用于遍历数据结构
    具备iterator接口的对象:
    能被 for of
    能被 ...
    原生具备iterator接口的数据结构:
    Array
    Map
    Set
    String
    函数的arguments对象
    NodeList对象
    */
    // 遍历流程
    let arr =["a", "b", "c"];
    let iter = arr[Symbol.iterator]( );
    iter.next( ) // {value: "a", done: false}
    iter.next( ) // {value: "b", done: false}
    iter.next( ) // {value: "c", done: false}
    iter.next( ) // {value: undefined, done: true}
    
    // 原生实现iterator
    function myIter(arr){
    let i = 0;
    return {
    next( ){
    let done = (i >= arr.length);
    let value = !done ? arr[i++] : undefined;
    return {
    value,
    done,
    }
    }
    }
    }
    
    /*
    generator:惰性函数
    必须用iterator接口调用
    调用一次,返回一次yield的值
    */
    // generator的写法
    function* fn( ){ // 一次执行可以返回多个值,有多少个yield就可以返回几个值
    yield console.log(1); // 暂停
    yield console.log(2);
    return console.log(3);
    }
    let iter = fn( );
    iter.next( ); // 1
    iter.next( ); // 2
    iter.next( ); // 3
    // for of输出
    for(let key of iter){ } // 1, 2, 3
    
    // generator的注意
    function* foo(x){
    var y = 2 * (yield (x + 1)); // yield返回值后默认变成undefined
    var z = yield (y / 3);
    return (x + y + z);
    }
    
    var a = foo(5);
    a.next( ); // 6
    a.next( ); // NaN
    a.next( ); // NaN
    
    var b = foo(5);
    b.next( ); // 6
    b.next(6); // 4
    b.next(4); // 21
    
    // generator函数调用
    function* foo(){
    yield 1;
    yield 2;
    }
    function* too(){
    yield 3;
    yield 4;
    yield* foo( ); // 同类型generator函数调用方法
    }
    for (let key of too){
    console.log(key); // 3, 1, 2, 4
    }
    
    </script>
    
    </body>
    
    </html>
    
    

    相关文章

      网友评论

        本文标题:JavaScript学习笔记014-this指向0Iterato

        本文链接:https://www.haomeiwen.com/subject/kqoliftx.html