美文网首页菜鸟前端工程师程序员我爱编程
JavaScript学习笔记008-this0arguments

JavaScript学习笔记008-this0arguments

作者: Mr柳上原 | 来源:发表于2018-08-16 16:01 被阅读4次

    Author:Mr.柳上原

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

    学习要有始有终

    狗熊掰棒子的故事大家都听过

    都觉得狗熊很傻

    也都觉得自己绝对不会那样做

    可往往经常做出那样的事情

    自己却还没觉得

    就比如编程学习

    前端学了一半,突然听说Python很火

    马上又去学Python,

    然后又听说go语言很火......

    无止境的丢了西瓜捡芝麻

    一直在不停的学习,却一个都没学好

    你与狗熊何其相似!!!

    <!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> <!-- 网页主干:可视化区域 -->
    <div class='box'></div>
    
    <script>
    
    // this
    function () {
    console.log(this);
    }
    let obj = {
    a: fn
    }
    fn(); // 函数自执行,当函数不依赖于任何对象时,this指向顶层对象
    obj.a(); // this指向函数依赖的对象obj
    document.onclick = fn; // this指向document
    box.onclick = fn; // this指向box
    
    
    // 函数关键字:arguments(不定参)类数组
    function fn() {
    console.log(arguments); // 当不确定实参个数的时候使用
    console.log(arguments.length); // 实参的个数
    console.log(arguments[0]); // 下标定位
    }
    fn(1, 2, 3, 4);
    fn(1);
    
    // rest参数
    let fn(a, ...b) { // ...b必须放到最后
    console.log(a); // rest可以同时存在形参,a  = 1
    console.log(b); // b为数组,b = [2, 3, 4]  [ ]
    }
    fn(1, 2, 3, 4);
    fn(1);
    
    // 箭头函数
    let add1 = function (n) {
    return n + 1;
    }
    add1(5);
    let add2 = (n) => n + 1; // 相当于函数内部return一个值
    add2(5);
    
    let add3 = function (n) {
    let a = n * 2;
    let b = a + 2;
    return b;
    }
    add3(5)
    let add4 = (n) => {
    let a = n * 2;
    let b = a + 2;
    return b; // 箭头函数复杂写法
    }
    add4(5);
    
    // 箭头函数的this
     let add5 = (n) => {
    console.log(this); // 箭头函数没有this,默认指向外层对象
    }
    
    // 箭头函数的arguments
    let add6 = (n) => {
    console.log(arguments); // 箭头函数没有arguments
    }
    
    // 严格模式:'use strict' 
    
    // 函数的名字
    function fn(a, b, c, d, e = 1, ...f) {}
    fn(1, 2, 3);
    console.log(fn.name); // 函数的名字,fn
    console.log(fn.length); // 函数的长度,返回的是形参的个数,默认形参和rest不算,4
    
    // iife 立即执行函数表达式
    // 可以把全局变量变成局部变量
    // 不会污染全局环境
    // iife 函数名字不能调用
    // es5:
    (function (){
    let a = 1;
    var b = 1;
    })();
    // es6:
    {
    let a = 1;
    var b = 1;
    }
    // 函数表达式和函数声明的区别:函数表达式可以直接加()立即执行
    let fn = function () {
    console.log('1');
    }(); 
    // 第一种写法
    (function (){})();
    // 第二种写法
    (function (){}());
    // 第三种写法
    !function (){}();
    // 第四种写法
    ~function (){}();
    // 第五种写法
    +function (){}();
    // 第六种写法
    -function (){}();
    
    </script>
    
    </body>
    
    </html>
    

    相关文章

      网友评论

        本文标题:JavaScript学习笔记008-this0arguments

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