一. eval

  eval()函数计算JavaScript字符串,并把它作为脚本代码来执行。如果参数是一个表达式,eval()函数将执行表达式。如果参数是Javascript语句,eval()将执行Javascript语句。

图1.1

  如上图所示,第一个eval内部为一个函数表达式,在执行该函数的同时,定义了两个全局变量X和Y,所以结果分别为200、4、27。

  由于因为它会执行任意传给它的代码,在代码字符串未知或者是来自一个不信任的源时,会导致安全问题,同时非常耗性能(它会执行两次2次,一次解析成js语句,一次执行),最重要的是,99.9%使用eval 的场景都有不使用eval的解决方案,所以在任何情况下我们都应该避免使用eval函数。

二. null与undefined 的区别

  (1) null表示一个对象是“没有值”的值,也就是值为“空”;undefined表示一个变量声明了没有初始化(即没有赋值)。

  (2) undefined不是一个有效的JSON,而null是;undefined的类型(typeof)是undefined,而null的类型(typeof)是object。

  (3) 在验证null时,一定要使用“===” ,因为“==”无法分别null和undefined!

图2.1

三. 事件与事件流

  (1) 事件

  事件是文档或者浏览器窗口中发生的,特定的交互瞬间,也可以理解为是用户或浏览器自身执行的某种动作,如click,change和hover都是事件的名字,同时事件是javaScript和DOM之间交互的桥梁。

  (2) 事件流

  事件发生时会在元素节点与根节点之间按照特定的顺序传播,路径所经过的所有节点都会收到该事件,这个传播过程即DOM事件流。事件流有两种模型,即捕获型事件流和冒泡型事件流。

  冒泡型事件流:事件的传播是从最特定的事件目标到最不特定的事件目标。即从DOM树的叶子到根。

  捕获型事件流:事件的传播是从最不特定的事件目标到最特定的事件目标。即从DOM树的根到叶子。

图3.1

  如上图所示,DOM标准采用捕获+冒泡,两种事件流都会触发DOM的所有对象,从document对象开始,也在document对象结束。DOM标准规定事件流包括三个阶段:事件捕获阶段、处于目标阶段和事件冒泡阶段。

  (1) 事件捕获阶段:实际目标(<div>)在捕获阶段不会接收事件。也就是在捕获阶段,事件从document到<html>再到<body>就停止了。

  (2) 处于目标阶段:事件在<div>上发生并处理。但是事件处理会被看成是冒泡阶段的一部分。

  (3) 冒泡阶段:事件又传播回文档。

  来个例子搞一下,如下图:

图3.2

  上图点击btn1的区域,会先弹出“btn1”,紧跟着弹出“content”,这就是一个最典型的冒泡事件。

图3.3

  上图代码运行结果为:先弹出“btn1”,然后弹出“btn2”,最后弹出“content ”。它与前一个代码的区别是,一个是绑定,一个是注册。即DOM元素只能绑定一个事件,类似变量,后面的会把前面的覆盖掉;但是DOM元素可以注册多个事件,即在注册第一个事件的时候,同时注册了第二个事件,所以在执行的时候,会从第二个(也就是当前元素的最后一个注册事件)开始执行,直到执行完第三个事件。

四. 闭包

  闭包,官方对闭包的解释是:一个拥有许多变量和绑定了这些变量的环境的表达式(通常是一个函数)。因而,这些变量也是该表达式的一部分。闭包的特点如下:

  1. 作为一个函数变量的一个引用,当函数返回时,其处于激活状态。
  2.   2. 一个闭包就是当一个函数返回时,一个没有释放资源的栈区。

  简单的说,Javascript允许使用内部函数,即函数定义和函数表达式位于另一个函数的函数体内。而且,这些内部函数可以访问它们所在的外部函数中声明的所有局部变量、参数和声明的其他内部函数。当其中一个这样的内部函数在包含它们的外部函数之外被调用时,就会形成闭包。

图4.1

  如上图所示,给函数原型增加一个方法,同时创建一个实例,会得到结果3.14159。

图4.2

  上图就是把一个函数return为一个变量,那么当创建该函数的实例的时候,所有该变量具有的方法都可以被调用,同时还是在函数作用域之外被调用,即闭包,结果依旧为3.14159。

图4.3

这属于最容易理解的方式,即直接new一个对象,给它赋予各种属性和方法,最终结果依旧为3.14159。

图4.4

  这种方式是使用最多的一种方式,也是最方便的一种方式。(var obj = {}就是声明一个空的对象。)

  闭包的用途如下:

  1. 函数只需要执行一次,其内部变量无需维护,比如UI的初始化;
  2. 前端缓存。假设有一个很耗性能和时间的函数对象,每次调用都需要很久的时间,那么我们就需要将计算出来的值存储起来,当调用这个函数的时候,首先在缓存中查找,如果找不到,则进行计算,然后更新缓存并返回值,如果找到了,直接返回查找到的值即可。闭包正是可以做到这一点,因为它不会释放外部的引用,从而函数内部的值可以得以保留。
  3. 封装函数(组件化)
  4. 实现类和继承(参考第一种写法)

五. call与apply

  1. 共同点

  都“可以用来代替另一个对象调用一个方法,将一个函数的对象上下文从初始的上下文改变为由thisObj指定的新对象”。

  1. 不同点

  apply:apply(thisObj,[argArray])。最多只能有两个参数——新this对象和一个数组argArray。如果给该方法传递多个参数,则把参数都写进这个数组里面,当然,即使只有一个参数,也要写进数组里。如果argArray不是一个有效的数组或arguments对象,那么将导致一个TypeError。如果没有提供argArray和thisObj任何一个参数,那么Global对象将被用作thisObj,并且无法被传递任何参数。

  call:call(thisObj,Object)。它可以接受多个参数,第一个参数与apply一样,后面则是一串参数列表。这个方法主要用在js对象各方法相互调用的时候,使当前this实例指针保持一致,或者在特殊情况下需要改变this指针。如果没有提供thisObj参数,那么 Global 对象被用作thisObj。

图5.1

  如上图所示,无论是apply还是call,它的结果都是一样的,都是调用的前面的函数的方法,但是传的参数是不一样的,当然这只是在参数方面的不同。

图5.2

  如上,就是利用call和apply实现继承,通过给函数赋予属性和方法,然后给另一个函数继承原函数,再创建新函数的实例,就实现了最简单的继承。

  图5.3

  如上图所示,即一种多重继承的实现方式。

个人JS体系整理(二)的更多相关文章

  1. JS知识点整理(二)

    前言 这是对平时的一些读书笔记和理解进行整理的第二部分,第一部分请前往:JS知识点整理(一).本文包含一些易混淆.遗漏的知识点,也会配上一些例子,也许不是很完整,也许还会有点杂,但也许会有你需要的,后 ...

  2. 个人JS体系整理(三)

    一. 严格模式 JavaScript 严格模式(strict mode)即在严格的条件下运行.首先声明,严格模式是ES5中提出来的,准确来说就是一句指令Use strict,它的目的是指定代码在严格条 ...

  3. 谷歌浏览器内核Cef js代码整理(二) 滚动条

    1.隐藏滚动条 document.documentElement.style.overflow = 'hidden';隐藏竖向滚动条:document.documentElement.style.ov ...

  4. 个人JS体系完善(一)

    个人JS体系整理(一) 一. 原型 JS每声明一个Function,都有Prototype原型,Prototype原型是函数的一个默认属性,在函数的创建过程中由JS编译器自动添加,也就是说每当生产一个 ...

  5. 常用js方法整理common.js

    项目中常用js方法整理成了common.js var h = {}; h.get = function (url, data, ok, error) { $.ajax({ url: url, data ...

  6. 项目中常用js方法整理common.js

    抽空把项目中常用js方法整理成了common.js,都是网上搜集而来的,大家一起分享吧. var h = {}; h.get = function (url, data, ok, error) { $ ...

  7. 【高德地图API】从零开始学高德JS API(二)地图控件与插件——测距、圆形编辑器、鼠标工具、地图类型切换、鹰眼鱼骨

    原文:[高德地图API]从零开始学高德JS API(二)地图控件与插件——测距.圆形编辑器.鼠标工具.地图类型切换.鹰眼鱼骨 摘要:无论是控件还是插件,都是在一级API接口的基础上,进行二次开发,封装 ...

  8. 单元测试系列之十:Sonar 常用代码规则整理(二)

    摘要:帮助公司部署了一套sonar平台,经过一段时间运行,发现有一些问题出现频率很高,因此有必要将这些问题进行整理总结和分析,避免再次出现类似问题. 作者原创技术文章,转载请注明出处 ======== ...

  9. Java 日志体系(二)jcl 和 slf4j

    Java 日志体系(二)jcl 和 slf4j <java 日志体系(一)统一日志>:https://www.cnblogs.com/binarylei/p/9828166.html &l ...

随机推荐

  1. MyEclipse安装jbpm插件

    介绍如何在MyEclipse8.6里安装jbpm插件. 工具/原料 MyEclipse8.6 jbpm-4.4.rar 方法/步骤 1 下载jbpm包并解压 下载最新的jbpm包,本文以jbpm4.4 ...

  2. Xmodem通信协议实例

    在工作时串口通信的过程中需要传输文件,这里就就需要使用通信协议,此时选择的是Xmodem协议作简要研究 1.什么是Xmodem协议 Xmodem协议是串口通信中广泛使用到的异步文件传输协议.以128字 ...

  3. web页面导出到Excel乱码解决

    引言: 前几天 在做web项目的时候 需要导出页面上的数据 到Excel里面 但有的时候出现乱码(有de时候不出现 很奇怪) 原来的代码是这样的: HttpContext.Current.Respon ...

  4. O2O和B2C、C2C的区别

    B2C.C2C是在线支付,购买的商品会塞到箱子里通过物流公司送到你手中;O2O是在线支付,购买线下的商品.服务,再到线下去享受服务. O2O模式的核心很简单,就是把线上的消费者带到现实的商店中去.在线 ...

  5. 使用 Github 和 Hexo 快速搭建个人博客

    导语 个人兴趣爱好特别广泛,喜欢捣鼓各种小东西自娱自乐.虽然都没能深入研究,但是自己的“孩子”还是很想拿出来遛遛得人一句夸奖的.所以刚学 Markdown 的时候很是有想过要搭个个人博客来玩玩,一来激 ...

  6. Navicat for Oracle中如何使用外键

    转自:https://blog.csdn.net/weixin_39183543/article/details/80555104 1. 外键名最后保存的时候自动生成: 2. 参考模式自动生成: 3. ...

  7. Delphi XE2 新控件 布局Panel TGridPanel TFlowPanel

    Delphi XE2 新控件 Firemonkey 布局Panel Windows平台VCl TGridPanel TFlowPanel FMX 跨平台 TLayout TGridLayout TFl ...

  8. Spring4新的javaConfig注解

    1.@RestController spring4为了更方便的支持restfull应用的开发,新增了RestController的注解,比Controller注解多的功能就是给底下的RequestMa ...

  9. springmvc 处理器方法返回的是string 重定向到处理器方法

  10. java格式化数字、货币、金钱

    网上摘来的,以后可能会用到 java开发中经常会有数字.货币金钱等格式化需求,货币保留几位小数,货币前端需要加上货币符号等.可以用java.text.NumberFormat和java.text.De ...