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按值传递和按引用传递

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

  1. 前端常用的库和实用技术之JavaScript多线程

    多线程概念: 多线程是指从软件或硬件上实现多个线程并发执行的技术.具有多线程能力的计算机因有硬件支持而能够在 同一时间执行多于一个线程,进而提升整理处理性能.具有这种能力的系统包括对称多处理机,多核心 ...

  2. 前端常用的库和实用技术之JavaScript面向切面编程

    Aspect Oriented Programming(AOP)面向切面编程是一个比较热门的话题. AOP主要实现的目的是针对业务处理过程中的切面进行提取,它所面对的是处理过程 中的某个步骤或阶段,以 ...

  3. 前端常用的库和实用技术之JavaScript高级函数

    1.惰性载入函数 <!DOCTYPE html> <html lang="en"> <head> <meta charset=" ...

  4. 前端常用的库和实用技术之JavaScript 模块化

    模块化概念 AMD是requirejs在推广过程中对模块化定义的规范化产出. 异步加载模块,依赖前置,提前执行 Define定义模块define(['require','foo'],function( ...

  5. javascript功能插件大集合 前端常用插件 js常用插件

    转载来源:https://github.com/jobbole/aw... 包管理器管理着 javascript 库,并提供读取和打包它们的工具.•npm – npm 是 javascript 的包管 ...

  6. python进阶05 常用问题库（1）json os os.path模块

    python进阶05 常用问题库(1)json os os.path模块 一.json模块(数据交互) web开发和爬虫开发都离不开数据交互,web开发是做网站后台的,要跟网站前端进行数据交互 1.什 ...

  7. Python常用的库简单介绍一下

    Python常用的库简单介绍一下fuzzywuzzy ,字符串模糊匹配. esmre ,正则表达式的加速器. colorama 主要用来给文本添加各种颜色,并且非常简单易用. Prettytable ...

  8. WEB前端常用网站收集

    WEB前端常用网站收集整理 w3school.w3schools 前端里.脚本之家.素材家园 17素材.frontopen NEC更好的CSS方案.一些常用的JS实例 Bootstrap  官网  h ...

  9. Vue-ui常用组件库整理

    Vue-ui常用组件库整理 查看全部整理内容==> element-ui Element 是由饿了么UED设计.饿了么大前端开发的一套基于 Vue 2.0 的桌面端组件库. 这款是我用了很久的, ...

随机推荐

  1. 更改eclipse中jsp默认编码格式为UTF-8

        本文首发于cartoon的博客     转载请注明出处:https://cartoonyu.github.io/cartoon-blog     近段时间一直在学java三大框架,遇到了一个问 ...

  2. 52-Ubuntu-打包压缩-2-打包/解包

    tar是Linux中最常用的备份工具,此命令可以把一系列文件打包到一个大文件中,也可以把一个打包的大文件恢复成一系列文件. 序号 命令 作用 01 tar -cvf 打包文件.tar 被打包文件 打包 ...

  3. c# mvc 简洁大气官网

    后台管理 https://g.alicdn.com/idleFish-F2e/app-basic/item.html?itemid=580281597427&ut_sk=1.WCB2zfWM% ...

  4. IOS 表单含有input框和有position: fixed导致错位的问题

    在input框聚焦失焦的时候,都调用以下js即可 setScrollTop() { let scrollTop = document.body.scrollTop + document.documen ...

  5. 带你彻底理解RSA算法原理,很简单的

    1. 什么是RSA RSA算法是现今使用最广泛的公钥密码算法,也是号称地球上最安全的加密算法. 在了解RSA算法之前,先熟悉下几个术语 根据密钥的使用方法,可以将密码分为 对称密码 和 公钥密码 对称 ...

  6. 判断有向无环图(DAG)

    1.拓扑排序 bfs 所有入度为0的先入选. 2.tarjan 1个点1个集合 3.暴力 一个点不能重新到达自己

  7. Java 基础 - JDK 和 JRE 有什么区别

    总结 JRE(Java Runtime Environment),就是 Java 运行环境,包括JVM虚拟机(java.exe等)和基本的类库(rt.jar等). JDK (Java Developm ...

  8. MTT学习小记

    这是个毒瘤题才有的毒瘤东西--奶一口NOI不考 拆系数FFT: 考虑做NTT时模数不是NTT模数(\(2^a*b+1\))怎么办? 很容易想到拆次数FFT. 比如说现在求\(a*b\),设\(m=\s ...

  9. Oozie安装

    Oozie的安装与部署 1.解压Oozie $ tar -zxf /opt/softwares/oozie-4.0.0-cdh5.3.6.tar.gz -C /opt/modules/cdh/ 2.H ...

  10. NX二次开发-UFUN输入特征TAG,获取特征所有表达式TAG和个数UF_MODL_ask_exps_of_feature

    NX9+VS2012 #include <uf.h> #include <uf_modl.h> UF_initialize(); //创建块 UF_FEATURE_SIGN S ...