当前位置: 首页 > news >正文

JS中闭包、函数与对象的介绍和用法

闭包
闭包概念:当一个内部函数被调用,就会形成闭包,闭包就是能够读取其他函数内部变量的函数,定义在一个函数内部的函,创建一个闭包环境,让返回的这个子程序抓住i,以便在后续执行时可以保持对这个i的引用。
内部函数比外部函数有更长的生命周期;函数可以访问它被创建时所处的上下文环境。

如:
页面中有10个div,循环绑定每个div的点击事件

var divs=document.getElementsByTagName("div");
            for (var i=0;i<divs.length;i++) {
                divs[i].onclick=function(){
                    alert(i);
                }
            }

运行结果:10
因为点击事件的函数内部使用外部的变量i一直在变化,当我们指定click事件时并没有保存i的副本,这样做也是为了提高性能,但达不到我们的目的,我们要让他执行的上下文保存i的副本,这种机制就是闭包。
修改代码:

var divs=document.getElementsByTagName("div");
            for (var i=0;i<divs.length;i++) {
                divs[i].onclick=(function(n){
                    return function(){
                        alert(n);    
                    }
                })(i);
            }

n是外部函数的值,但是内部函数(点击事件)需要使用,返回函数前的n被临时驻留在内存中给点击事件使用,简单说就是函数的执行上下文被保存起来,i生成了多个副本。

对象
1、对象常量
对象的定义

//空对象
        var obj1={};
        
        //对象中的属性
        var obj2={name:"foo",age:19};
        var obj3={"nick name":"dog"};
        
        //对象中的方法
        var obj4={
            price:99,
            inc:function(){
                this.price+=1;
            }
        }

对象中可包含的内容:
对象常量可以出现在任何允许表达式出现的地方,对象、数组、函数可以相互间嵌套,形式可以多种多样。对象的值可以是:数组,函数,对象,基本数据类型等。

 //对象中可包含的内容
            var obj5 = [{
                name: "jack"
            }, {
                name: "lucy",  //常量
                hobby:["读书","上网","代码"],  //数组
                friend:{name:"mark",height:198,friend:{}},  //对象
                show:function(){  //函数
                    console.log("大家好,我是"+this.name);
                }
            }];
            //对象中的this是动态的,指向的是:调用者
            obj5[1].show();

2、对象取值
方法一:直接使用点号运算

            //3取值
            var obj6={"nick name":"pig",realname:"Rose"};
            console.log(obj6.realname);
            //console.log(obj6.nick name);  错误

方法二:使用索引器,当对象中的key有空格是

            //3取值
            var obj6={"nick name":"pig",realname:"Rose"};
            
            console.log(obj6["realname"]);
            console.log(obj6["nick name"]);

3、对象枚举(遍历)

var obj7={weight:"55Kg","nick name":"pig",realname:"Rose"};        
            for (var key in obj7) {
                console.log(key+":"+obj7[key]);
            }

4、对象更新与添加
如果对象中存在属性就修改对应值,如果不存在就添加。对象通过引用传递,它们永远不会被复制

var obj8={realname:"King"};
            obj8.realname="Queen";  //修改
            obj8.weight=1000;  //添加属性
            obj8.show=function()  //添加方法
            {
                console.log(this.realname+","+this.weight);
            }
            obj8.show();
    输出:Queen,1000

5、对象封装
使用对象封装的好处是可以减少全局变量的污染机会,将属性,函数都隶属一个对象。
封装前:

var name="foo";   //name是全局的,被暴露
 i=1;  //全局的,没有var关键字声明的变量是全局的,与位置关系不大
            function show(){  //show 是全局的,被暴露
                console.log("name->"+name);
                console.log(++i);
            }
            
            //i是全局的 2
            show();  
            //3
            show();

封装后:

    //对外只暴露bar,使用闭包封装
            var bar=function(){
                var i=1;
                return{
                    name:"bar",
                    show:function(){
                        console.log("name->"+this.name);
                        console.log(++i);
                    }
                };
            };
            
            var bar1=bar();
            //2
            bar1.show();
            //3
            bar1.show();
            
            var bar2=bar();
            //2,因为被封装,且闭包,i是局部私有的
            bar2.show();

函数
1、参数对象 (arguments)
第一个函数中有一个默认对象叫arguments,类似数组,但不是数组,该对象是传递给函数的参数

function counter(){
                var sum=0;
                for(var i=0;i<arguments.length;i++){
                    sum+=arguments[i];
                }
                return sum;
            }
            
            console.log(counter(199,991,1,2,3,4,5));
            console.log(counter());
            
            运行结果:
            1205
            0 

这里的arguments是一个隐式对象,不声明也在函数中,内部函数可以访问外部函数的任意内容

2、构造函数
在javascript中对象构造函数可以创建一个对象。

 /*构造函数*/
          //可以简单的认为是一个类型的定义
           function Student(name,age){
                 this.name=name;
                 this.age=age;
                 this.show=function(){
                     console.log(this.name+","+this.age);
                 }
           }
           
           //通过new关键字调用构造函数,创建一个对象tom
           var rose=new Student("rose",18);
           var jack=new Student("jack",20);
           
           rose.show();
           jack.show();
            
          结果:
          rose,18
          jack,20

相关文章:

  • IE报vuex requires a Promise polyfill in this browser问题解决
  • 从零开始学习Vue(一)
  • 从零开始学习Vue(三)
  • jmeter使用BeanShell断言
  • 裁掉你的前端吧,切版网帮你解决
  • 简介Doxygen
  • 2048-控制台版本
  • 第一章 深入理解Magento - Magento强大的配置系统
  • Directx9.0 学习教程3 -图形学之创建点 线 三角形 等
  • [微信小程序] 使用ES6特性Class后出现编译异常
  • maven管理项目用junit测试遇到的找不到编译类问题
  • 2017中国手机趋势报告:天猫手机客单价2104元,品质时代来临
  • docker 在Windows下使用遇到的坑
  • CSS鼠标属性值
  • django-1.11.3 源码详解 -- 0001 django-admin.py 的调用逻辑
  • (十五)java多线程之并发集合ArrayBlockingQueue
  • 《Javascript高级程序设计 (第三版)》第五章 引用类型
  • 《剑指offer》分解让复杂问题更简单
  • canvas实际项目操作,包含:线条,圆形,扇形,图片绘制,图片圆角遮罩,矩形,弧形文字...
  • classpath对获取配置文件的影响
  • ES6简单总结(搭配简单的讲解和小案例)
  • js操作时间(持续更新)
  • Sublime Text 2/3 绑定Eclipse快捷键
  • vue+element后台管理系统,从后端获取路由表,并正常渲染
  • Webpack4 学习笔记 - 01:webpack的安装和简单配置
  • 理解IaaS, PaaS, SaaS等云模型 (Cloud Models)
  • 买一台 iPhone X,还是创建一家未来的独角兽?
  • 每天10道Java面试题,跟我走,offer有!
  • 融云开发漫谈:你是否了解Go语言并发编程的第一要义?
  • 手机端车牌号码键盘的vue组件
  • 通过几道题目学习二叉搜索树
  • 微信小程序设置上一页数据
  • 小程序开发之路(一)
  • 源码之下无秘密 ── 做最好的 Netty 源码分析教程
  • 正则表达式小结
  • 哈罗单车融资几十亿元,蚂蚁金服与春华资本加持 ...
  • ​3ds Max插件CG MAGIC图形板块为您提升线条效率!
  • #我与Java虚拟机的故事#连载04:一本让自己没面子的书
  • (第9篇)大数据的的超级应用——数据挖掘-推荐系统
  • (附源码)springboot课程在线考试系统 毕业设计 655127
  • (欧拉)openEuler系统添加网卡文件配置流程、(欧拉)openEuler系统手动配置ipv6地址流程、(欧拉)openEuler系统网络管理说明
  • (三)uboot源码分析
  • (小白学Java)Java简介和基本配置
  • (中等) HDU 4370 0 or 1,建模+Dijkstra。
  • (转)MVC3 类型“System.Web.Mvc.ModelClientValidationRule”同时存在
  • (转)机器学习的数学基础(1)--Dirichlet分布
  • *2 echo、printf、mkdir命令的应用
  • .naturalWidth 和naturalHeight属性,
  • .net 托管代码与非托管代码
  • .NET中使用Protobuffer 实现序列化和反序列化
  • @Autowired和@Resource的区别
  • @Documented注解的作用
  • @javax.ws.rs Webservice注解
  • @Transactional类内部访问失效原因详解
  • [ HTML + CSS + Javascript ] 复盘尝试制作 2048 小游戏时遇到的问题