前端常用的库和实用技术之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 的桌面端组件库. 这款是我用了很久的, ...

随机推荐

注解@Override
Android的开发者对@Override肯定是非常熟悉,不管是自己的代码中还是书上都会出现,但是他是什么意思呢?如下: @Override是伪代码,表示重写(当然不写也可以),不过写上有如下好处: ...
条件sql ibatis
<select id="MS-CUSTOM-PANDECT-INFO-BY-CONDITIONS" resultMap="R ...
python中函数的定义及调用
python中函数的定义及使用方法 1.函数的概念:函数是将具有独立功能的代码块组织为一个整体,使其具有特殊功能的代码集; 2.函数的作用:使用函数可以加强代码的复用性,提高程序编写的效率; 3.函数 ...
javascript 学习犯错记录
看w3c学习js,有时按自己想法来,会出一些莫名奇妙的错误,而这些问题百度到了,但因为学习原因基础不捞,导致看到了答案,却认为这不是答案 1.一个很简单的一个html,一个js文件我想在js中的b ...
Centos下的 docker安装
安装一些必要的系统工具:sudo yum install -y yum-utils device-mapper-persistent-data lvm2 添加软件源信息:sudo yum-config ...
三.Python数据类型详述
Python第三节数据类型详述一.多变量赋值 python允许多变量赋值多变量赋相同的值a = b = c = 1 多变量赋不同的值a, b, c = 1, 2, "fuckyou&qu ...
sqlldr details
https://www.csee.umbc.edu/portal/help/oracle8/server.815/a67792/ch05.htm Loading into Empty and Non- ...
笔记50 Mybatis快速入门（一）
一.Mybatis简介 MyBatis 是一款优秀的持久层框架,它支持定制化 SQL.存储过程以及高级映射.MyBatis 避免了几乎所有的 JDBC 代码和手动设置参数以及获取结果集.MyBatis ...
Java——方法的重写（覆盖）
2.2方法的重写(覆盖)(override,orverwrite) 2.2.1 什么时候方法要进行重写? 如果父类中的方法已经无法满足当前子类的业务需求,需要将父类中的方法进行重新写一遍.就是要改变父 ...
Oracle实现行转列+Mybatis
1.需求报表需要动态展示某几个公司分别在几个月内销售额情况(前端表头月份是动态的,月时间段是前端参数来选择的,最大为12个月), 页面展示如下 Oracle数据库中数据如下: 可以看到一个公司的月份 ...

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

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

随机推荐

热门专题