前端常用的库和实用技术之JavaScript高级技巧

javascript高级技巧
变量作用域和闭包

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <script>
        // js是函数级作用域,在内部的变量内部都能访问,外部不能访问内部的,内部能访问外部的
        test();
        var j;
        j = 1000;
        function test(){
            if(false){
                var i=10;
            }else{
                var t =100;
            }
            console.log('bbb',t);
            console.log('cccc',j);
        }
        alert('....',t);
    </script>
    <script>
        var j = 100;
        ~(function test(){
            console.log(j);
        })();
        //100
        //-1
    </script>
    <script>
        var j =100;
        function test(){
            var j;
            alert(j);//拿不到外面的J,里面的j值,war在前面
            j=10
        }
        //执行test()根本取不到
        test()
    </script>
    <script>
        //闭包:闭包就是拿到本不属于它的东西
        var j = 100;
        function test(){
            var j;
            j = 10;
            var k = 666;
            return function(){
                return k;
            }
            alert(j);
        }
        var t = test()();
        alert(t);

    </script>
</body>
</html>

this指针的使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <script>
        // window.m = 100;
        // // this指针的使用
        // function test(){
        //     alert(this.m);
        // }
        // window.test();

        this.m = 1000;
        var obj = {
            m:100,
            test:function(){
                alert(this.m);
                return function(){
                    alert(this.m);//
                }
            }
        }
        // 谁调指向谁
        var t = obj.test()
        window.t();
        //上面等同于
    //    (obj.test()) ();
    </script>
</body>
</html>
<script>
        this.a = 1000;
        function test(){
            this.a = 1;
        }
        test.prototype.geta = function(){
            return this.a;
        }
        var p = new test;
        console.log(p.geta);
    </script>
    <script>
        function test(){
            this.a = 1;
        }
        test.prototype.a = 100;
        var p = new test;
        console.log(p);
    </script>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <input type="button" id="test" value="test" style="color:red;">
    <script>
        var style = {
            color:"green"
        }
        window.test();
        document.getElementById("test").click = test;
        function test(){
            alert(this.style.color);
        }
    </script>
</body>
</html>

按值传递和按引用传递

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <script>
        function test(num){
            //这里对num 创建了一个内存的副本
            var num = num+1;
            return num;
        }
        var num = 1;
        alert(test(num));
        alert(num);
    </script>
    <script>
    function test(obj){
        obj.age = "20"
        console.log('内部obj',obj);
    }
    var obj = {
        name:'xiaoming'
    }
    test(obj);
    console.log('外部的..',obj);
    </script>
</body>
</html>

by上面的例子其实不够经典也不够高级
本文看自前端常用的库和实用技术之JavaScript按值传递和按引用传递

原文地址:https://www.cnblogs.com/smart-girl/p/11548270.html

时间: 2024-10-01 06:35:52

前端常用的库和实用技术之JavaScript高级技巧的相关文章

使用prototype扩展的JavaScript常用函数库

Code highlighting produced by Actipro CodeHighlighter (freeware)http://www.CodeHighlighter.com/--> 1 /** * 检索数组元素(原型扩展或重载) * @param {o} 被检索的元素值 * @type int * @returns 元素索引 */ Array.prototype.contains = function(o) { var index = -1; for(var i=0;i<thi

前端常用插件、工具类库汇总(下)

前言 对本文感兴趣可以先加个收藏,也可以转发分享给身边的小伙伴,以后遇到类似的场景就来看看具体的插件及其用法. 上一篇<前端常用插件.工具类库汇总(上)>内容摘要: " 动画库 滚动库 轮播图 滚屏 弹出框 消息通知 下拉框 级联选择器 颜色选择器 时间日期处理 表单验证 分页插件 " >>前端常用插件.工具类库汇总(上) 本篇延续上一篇的内容继续给大家带来一系列关于前端插件.工具类的内容. 富文本编辑器 wangEditor http://www.wanged

Python常用的库简单介绍一下

Python常用的库简单介绍一下fuzzywuzzy ,字符串模糊匹配. esmre ,正则表达式的加速器. colorama 主要用来给文本添加各种颜色,并且非常简单易用. Prettytable 主要用于在终端或浏览器端构建格式化的输出. difflib ,[Python]标准库,计算文本差异 . Levenshtein ,快速计算字符串相似度. Chardet 字符编码探测器,可以自动检测文本.网页.xml的编码. shortuuid ,一组简洁URL/UUID函数库. ftfy ,Uni

WEB前端常用网站收集

WEB前端常用网站收集整理 王牌网站 w3school 菜鸟教程 RUNOOB NEC更好的CSS方案 前端里 脚本之家 17素材 frontopen JS实例 CSS整理与优化工具 图标类http://www.easyicon.net/http://findicons.com/http://preloaders.net/ 分享按钮,同时支持PC端和移动端前端导航站(公共库) 网页模板模板之家模板王 展示类WHYCSS 其他博客空间A Good User Interface张鑫旭 梦想天空 bo

smarty前端常用标签

{* {extends file='blockparent.tpl'} *} {*必须放在模板的第一行,如果要用子模板来扩展父模板,那么它只能有{block}的区域任何其他模板的内容将被忽略*} {config_load file='config.conf'}{*载入配置文件*} <html> <head> <meta charset='utf-8' /> <style type="text/css"> .nav{ margin-left

前端常用功能记录(二)—datatables表格(转)

前端常用功能记录(二)—datatables表格 并不是所有的后台开发都有美工和前端工程师来配合做页面,为了显示数据并有一定的美感,jQuery的DataTables插件对于像我这样的前端菜鸟来说真是雪中送炭,当然对于专业的前端开发者来说它更是锦上添花!DataTables提供了针对表格的排序.浏览器分页.服务器分页.筛选.格式化.统计等强大功能. 工作中对程序员的学习模式才深有体会,不是从入门到精通,而是从会用到了解.对于我来说,基本都是拿到一个知识先做个东西出来,再来细细品味个中的细节,然后

一枚前端UI组件库 KUI for Vue

一枚前端UI组件库 KUI for Vue 基于VUE 2.x 开发,在追求完美视觉体验的同时也保证了其性能高效. 欢迎批评.指正.吐槽.Star 和 捐助 文档 Docs: http://k-ui.xyz Blog: http://chuchur.com 特性 漂亮的UI,可定制主题 兼容IE9+ 组件丰富,功能强大 更新日志: Logs: http://vue.k-ui.xyz/log 安装 使用npm npm install kui-vue --save 使用CDN <!-- import

sublime Text3 前端常用插件

sublime Text3 前端常用插件 - File Switching (文件切换) --- Sublime Text提供了一个非常快速的方式来打开新的文件.只要按下Ctrl+ P并开始输入你想要打开的文件的名称.一旦找到文件,只需按enter键,就可以开始直接输入到该文件了! - Goto Symbols (跳转标记) --- 当你编辑一个大文件时,文件中有一堆方法,按`Ctrl + R将其全部列出来,使他们更容易找到.开始尝试的输入你想要的,然后按Enter 就可以快速跳转这个方法了.

38个常用Python库:数值计算、可视化、机器学习等8大领域都有了

一.数值计算 数值计算是数据挖掘.机器学习的基础.Python提供多种强大的扩展库用于数值计算,常用的数值计算库如下所示. 1. NumPy 支持多维数组与矩阵运算,也针对数组运算提供大量的数学函数库.通常与SciPy和Matplotlib一起使用,支持比Python更多种类的数值类型,其中定义的最重要的对象是称为ndarray的n维数组类型,用于描述相同类型的元素集合,可以使用基于0的索引访问集合中元素. 2. SciPy 在NumPy库的基础上增加了众多的数学.科学及工程计算中常用的库函数,