前端常用的库和实用技术之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按值传递和按引用传递

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

前端常用的库和实用技术之JavaScript多线程
多线程概念: 多线程是指从软件或硬件上实现多个线程并发执行的技术.具有多线程能力的计算机因有硬件支持而能够在同一时间执行多于一个线程,进而提升整理处理性能.具有这种能力的系统包括对称多处理机,多核心 ...
前端常用的库和实用技术之JavaScript面向切面编程
Aspect Oriented Programming(AOP)面向切面编程是一个比较热门的话题. AOP主要实现的目的是针对业务处理过程中的切面进行提取,它所面对的是处理过程中的某个步骤或阶段,以 ...
前端常用的库和实用技术之JavaScript高级函数
1.惰性载入函数 <!DOCTYPE html> <html lang="en"> <head> <meta charset=" ...
前端常用的库和实用技术之JavaScript 模块化
模块化概念 AMD是requirejs在推广过程中对模块化定义的规范化产出. 异步加载模块,依赖前置,提前执行 Define定义模块define(['require','foo'],function( ...
javascript功能插件大集合前端常用插件 js常用插件
转载来源:https://github.com/jobbole/aw... 包管理器管理着 javascript 库,并提供读取和打包它们的工具.•npm – npm 是 javascript 的包管 ...
python进阶05 常用问题库（1）json os os.path模块
python进阶05 常用问题库(1)json os os.path模块一.json模块(数据交互) web开发和爬虫开发都离不开数据交互,web开发是做网站后台的,要跟网站前端进行数据交互 1.什 ...
Python常用的库简单介绍一下
Python常用的库简单介绍一下fuzzywuzzy ,字符串模糊匹配. esmre ,正则表达式的加速器. colorama 主要用来给文本添加各种颜色,并且非常简单易用. Prettytable ...
WEB前端常用网站收集
WEB前端常用网站收集整理 w3school.w3schools 前端里.脚本之家.素材家园 17素材.frontopen NEC更好的CSS方案.一些常用的JS实例 Bootstrap 官网 h ...
Vue-ui常用组件库整理
Vue-ui常用组件库整理查看全部整理内容==> element-ui Element 是由饿了么UED设计.饿了么大前端开发的一套基于 Vue 2.0 的桌面端组件库. 这款是我用了很久的, ...

随机推荐

剑指offer——58数组中数值和下标相等的元素
题目三: 数组中数值和下标相等的元素. 假设一个单调递增的数组里的每个元素都是整数并且是唯一的.请编程实现一个函数,找出数组中任意一个数值等于其下标的元素.例如,在数组{-3,-1,1,3,5}中,数 ...
剑指offer——54数组中的逆序对
题目描述在数组中的两个数字,如果前面一个数字大于后面的数字,则这两个数字组成一个逆序对.输入一个数组,求出这个数组中的逆序对的总数P.并将P对1000000007取模的结果输出. 即输出P%1000 ...
剑指offer——43数据流中的中位数
题目描述如何得到一个数据流中的中位数?如果从数据流中读出奇数个数值,那么中位数就是所有数值排序之后位于中间的数值.如果从数据流中读出偶数个数值,那么中位数就是所有数值排序之后中间两个数的平均值.我们 ...
MySQL数据库（一）—— 数据库介绍、MySQL安装、基础SQL语句
数据库介绍.MySQL安装.基础SQL语句一.数据库介绍 1.什么是数据库数据库即存储数据的仓库 2.为什么要用数据库 (1)用文件存储是和硬盘打交道,是IO操作,所以有效率问题 (2)管理不方便 ...
Ibatis sql语句
<?xml version="1.0" encoding="UTF-8" ?><!DOCTYPE sqlMap PUBLIC "-/ ...
【踩坑】IDEA 设置 JVM 参数
1.可视化界面设置 Run->Edit Configuration... 然后设置 2.配置文件设置打开 IDEA 安装目录,看到有一个 bin 目录,其中有两个 vmoptions 文件,需 ...
Size Assert
判断返回内容的大小
python的magic methods
https://pycoders-weekly-chinese.readthedocs.io/en/latest/issue6/a-guide-to-pythons-magic-methods.htm ...
CSS案例1（导航栏）
文本的装饰 text-decoration 通常我们用于给链接修改装饰效果使用技巧:在一行内的盒子内,我们设定行高等于盒子的高度,就可以使文字垂直居中. <head> <meta ...
阿里巴巴IPv6应用平台引领下一代互联网
摘要: 据预测,到2020年底我国IPv6终端设备将达到5亿,正在快速取代IPv4.阿里巴巴网络架构师张先国先生在2018 年GNTC 大会IPv6 专场上分享IPv6应用集团业务(支付宝.淘宝.天猫 ...

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

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

随机推荐

热门专题