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. C语言——二维数组

    目录 二维数组 一.二维数组的定义 二.二维数组的初始化 三.通过赋初值定义二维数组的大小 四.二维数组与指针 二维数组 一.二维数组的定义 类型名 数组名[ 常量表达式1 ][ 常量表达式2 ] i ...

  2. java.io.FileNotFoundException: [WEB-INF/spring-servlet.xml] cannot be opened because it does not exist

    今天启动web 项目出现错误提示: java.io.FileNotFoundException: [WEB-INF/spring-servlet.xml] cannot be opened becau ...

  3. 关于Ms Sql server 表列等是否存在

    select object_id('名称') ,object_id('名称','类型') 1. 等价于 select * from sys.objects where name ='名称' selec ...

  4. ios网络学习------2 用非代理方法实现同步post请求

    #pragma mark - 这是私有方法,尽量不要再方法中直接使用属性,由于一般来说属性都是和界面关联的,我们能够通过參数的方式来使用属性 #pragma mark post登录方法 -(void) ...

  5. mongo之$rename更新一个字段的名称（可批量）

    $rename操作逻辑执行$unset 老名称和新的名称,然后执行 $set新名称运行.因此,操作可能不保留文档中字段的顺序; 即重命名的字段可以在文档内移动. 1.重命名字段:一级字段 格式: db ...

  6. 《代码大全2》读书笔记 Week2

    <代码大全2>第四.五章 第四章“关键的‘构建’决策”主要有以下三要点:1.每种编程语言都有优点和缺点,程序员应根据需要选择编程语言,尽量选择熟悉的语言以提高生产效率.作为一种表达工具,编 ...

  7. SQL索引操作

    1. 创建索引 create index 索引名 on 表名(列名); 2. 删除索引 drop index 索引名; 3. 创建组合索引 create index 索引名 on 表名(列名1,,列名 ...

  8. SSL/TLS工作原理

    以前已经介绍过HTTP协议和HTTPS协议的区别,这次就来了解一下HTTPS协议的加密原理. 为了保证网络通信的安全性,需要对网络上传递的数据进行加密.现在主流的加密方法就是SSL (Secure S ...

  9. bzoj1037题解

    [解题思路] DP.f[i][j][x][y]表示已选了i个♂和j个♀,其中♂比♀多x,♀比♂多y(x,y≥0). 递推式转移方程: (f[i+1][j][x+1][max(y-1,0)]+=f[i] ...

  10. NX二次开发-UFUN拾取向量对话框UF_UI_specify_vector

    #include <uf.h> #include <uf_ui.h> UF_initialize(); //拾取向量对话框 ], pnt[]; int mode = UF_UI ...