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. 什么是NVMe硬盘？

    本文摘自:https://zhidao.baidu.com/question/590890784.html NVMe硬盘指的是非易失性内存主机控制器接口规范(Non-Volatile Memory e ...

  2. 如何省略.jsx文件名

    在webpack.config.js文件夹中module.exports中添加: resolve:{ extensions:[".js", ".jsx", &q ...

  3. 在命令行中运行Hadoop自带的WordCount程序

    1.启动所有的线程服务 start-all.sh 记得要查看线程是否启动 jps 2.在根目录创建 wordcount.txt 文件 放置一些数据 3.创建  hdfs dfs -mkdir /文件夹 ...

  4. ubuntu 搭建嵌入式开发环境tftp的方法

    网上很多安装的时候都要安装tftpd-hpa tftp-hpa xinetd三个安装包,经我测试,xinetd无需安装,安装好前两个后,修改tftpd-hpa的配置文件即可:etc/default/t ...

  5. jenkins+jhipster集成

    准备工作: 安装Jenkins 新建一个Jhipster项目 开始集成: 新建一个Jenkins构建项目 只配置源代码 构建,成功,稍微有点信心了 配置执行构建脚本 ./mvnw package -P ...

  6. DFS问题举例：N个整数选k个使其和为x

    N个整数选k个使其和为x,若有多个方案,选择元素平方和最大的一个 #include<cstdio> #include<cmath> #include<cstring> ...

  7. spring的组成模块

    spring的核心组件(骨骼架构)——   共同创建了Bean关系网络 Core:主要定义了资源的访问方式 Context:给spring提供一个运行时的环境 Bean:Bean的定义,创建以及解析 ...

  8. BBS论坛 登录功能

    四.登录功能 前端页面html代码: <!DOCTYPE html> <html lang="en"> <head> <meta char ...

  9. UVA11021 Tribles 概率dp

    题目传送门 题意:开始有$k$只兔子,每只都是活一天就死,每只死前都会有$pi$的概率生出$i$只兔子.求$m$天后兔子死光的概率. 思路: 设$f[i]$为一只兔子在第i天死完的概率,那么答案就是$ ...

  10. Razor页面之添加TagHelper

    1.右键项目-----添加------新建项 2.创建Razor试图导入 (Razor View  Imports) 3.在创建的_ViewImports.cshtml中添加 @AddTagHelpe ...