概要:本篇博客主要介绍函数的一些类型以及常见示例 1.匿名函数 使用匿名函数的常见示例: window.onload = function(){ assert(true,'power!'); }; //创建一个匿名函数作为事件处理程序,这里无需定义函数名,直接在其位置为其赋值即可; var ninja = { shout: function(){ assert(true,"Ninja"); } }; ninja.shout(); //创建一个函数,将其作为ninja的一个方法,使用sh…

1. 代码求值机制 JavaScript中,有很多不同的代码求值机制. ● eval()函数 ● 函数构造器 ● 定时器 ● <script>元素 - 用eval()方法进行求值 作为定义在全局作用域内的eval()方法,该方法将在当前上下文内,执行所传入字符串形式的代码. 基本功能 ● 该方法将执行传入代码的字符串 ● 在调用eval()方法的作用域内进行代码求值 例如: eval("5+5") (function(){ eval("var ninja = 6&…

1.定时器和线程 - 设置和清除定时器 JavaScript提供了两种方式,用于创建定时器以及两个相应的清除方法.这些方法都是window对象上的方法. 方法 格式 描述 setTimeout   id=setTimeout(fn,delay)  启动一个定时器,在一段时间(delay)之后执行传入的callback,并返回该定时器的唯一标识 clearTimeout  clearTimout(id) 如果定时器还未触发,传入定时器标识即可取消该定时器 setInterval id=setInt…

概要:本篇博客主要介绍JavaScript的原型 1.对象实例化 - 初始化的优先级 初始化操作的优先级如下: ● 通过原型给对象实例添加的属性 ● 在构造器函数内给对象实例添加的属性 在构造器内的绑定操作优先级永远都高于在原型上的绑定操作优先级.因为构造器的this上下文指向的是实例自身,所以我们可以在构造器内对核心内容执行初始化操作. - 协调引用 如下代码观察原型变化时的行为: function Ninja(){ this.swung = true; } var ninja = new N…

概要:本篇博客主要介绍了JavaScript的闭包 1.闭包的工作原理 简单地说,闭包就是一个函数在创建时允许该自身函数访问并操作该自身函数之外的变量时所创建的作用域. 例如: var outerValue = 'ninja'; var later; function outerFunction(){ var innerValue = 'samurai'; function innerFunction(){ debugger console.assert(outerValue,"I can se…

概要:本篇博客主要介绍了JavaScript的函数. 1.第一型对象 JavaScript的函数可以像对象一样引用,因此我们说函数是第一型对象.除了可以像其他对象类型一样使用外,函数还有一个特殊的功能,它们可以被调用.这些调用,通常是以异步的方式进行调用. 2.回调 回调是高效利用JavaScript必不可少的一部分. 3.函数声明 如果一个函数不需要用名称进行引用,则不需要对它命名.命名一个函数时,该名称在整个函数声明范围内都是有效的.此外,函数声明在顶层,window对象上的同名属性则会引用…

匿名函数 对于什么是匿名函数,这里就不做过多介绍了.我们需要知道的是,对于JavaScript而言,匿名函数是一个很重要且具有逻辑性的特性.通常,匿名函数的使用情况是:创建一个供以后使用的函数.简单的举个例子如下: window.onload = function() { alert('hello'); } var templateObj = { shout:function() { alert('作为方法的匿名函数') } } templateObj.shout(); setTimeout(f…

书名 "学徒"=>"忍者" 性能分析 console.time('sss') console.timeEnd('sss') 函数 函数是第一类对象 通过字面量创建 function minjaFunction(){} 在变量或数组或者对象中的函数 let obj = { name: 'zhangsan', age() { return 1 } }; let arr = [1, 2, 3, 4, () => { return 1; }]; let nums…

…

…

闭包的私有变量 function Ninja() { let feints = 0; this.getFeints = function () { return feints }; this.feint = function () { feints++; return feints } } let ninja1 = new Ninja(); 每一个通过ninja1 构造函数创建的对象实例可以获得各自的实例方法,但是私有变量不允许直接访问,为什么要保持私有变量的引用?,因为这些私有变量并不是对象的…

本文章共2377字,预计阅读时间5-10分钟. 前言 没有前言. 你准备好成为同事眼中深藏不露.高深莫测.阳光帅气的前端开发了吗? 那就开始吧! 本文秉承宗旨:代码实用与逼格并存. 提升JS代码Level 位运算取整(OS:这比parseInt香) 原理:因为浮点数是不支持位运算的,所以会先把1.1转成整数1再进行位运算,就好像是对浮点数向下求整. 注意:以下取整方法适用于32位有符号整数(有符号整数使用 31 位表示整数的数值,用第 32 位表示整数的符号,0 表示正数,1 表示负数.数值范围…

最近在研读一本巨著<JavaScript忍者秘籍>,里面有一篇文章提到了这3个概念. 书中的源码可以在此下载.我将源码放到了线上,如果不想下载,可以直接访问在线网址,修改页面名就能访问到相应示例代码. 一.DOM特性和DOM属性 attribute(特性),是我们赋予某个事物的特质或对象,attribute是HTML标签上的特性,它的值只能够是字符串 property(属性),是早已存在的不需要外界赋予的特质,property是DOM中的属性,是JavaScript里的对象 在访问元素特性值时…

1.What's is 函数重载? );//Here is int 10 print("ten");//Here is string ten } 可以发现在C++中会根据参数的类型自动选择合适的函数执行,如果把上面的代码改造成Javascript代码如下: function print(i) { console.log("Here is num"+i); } function print(str) { console.log("Here is string…

最近,在阅读 jQuery 之父 John Resig 力作:Secrets of the JavaScript Ninja(JavaScript忍者秘籍).关于第九章提及的 JavaScript 之运行时代码,感觉蛮不错.因此,顺便在博客园记录一下. 有关运行时.编译时就不再做过多介绍,相信,大部分同学或多或少熟悉一门强类型语言,比如:C#.Java 之类.就以 C# 为例,程序员编写的 .cs 文件最终将编译成 .dll 程序集中,如果 .cs 中有语法错误,将无法编译通过.而像 JavaS…

在<JavaScript忍者秘籍>2.4测试条件基础知识中,作者给出了一个精简版的assert和assert组的实现,对于初学者而言,这无疑是一个很好的例子,既让我们得到了一个好用的小工具,又让我们看到了用javascript实现这个工具是如此的简单. 这里主要是从代码角度最2.4章节做一些补充和说明,包括原有代码中的一些bug及其修正.当然了,既然涉及到了代码解析,这就不能说是初学者的范畴了,至少要多javascript中的函数声明,函数实现,函数闭包等内容有了基本的了解后,才能看懂这篇文章…

一.事件循环 JavaScript是单线程,同一个时间只能做一件事情,所以执行任务需要排队.如果前一个耗时很长,那么下一个只能等待. 1)两种任务 为了更好的处理任务,JavaScript语言的设计者将任务分为两种:同步任务(synchronous)与异步任务(asynchronous). 同步任务:在主线程上排队执行的任务. 异步任务:放在"任务队列"(task queue)中,只有当主线程空了,才会将"任务队列"中的任务放到主线程中. 这就是JavaScript…

最近在看John Resig 与 Bear Bibeault的<JavaScript 忍者秘籍>.这本书处处提现了js的魔法(从我这个写强类型语言的人看来).js能够点石成金,处处体现着它特有的魅力.所以将一些有意思的地方记录了下来. 1.准备知识 1.1 闭包 闭包是一个函数在创建时,允许该自身函数访问并操作该自身函数以外的变量时所创建的作用域.闭包可以让函数访问所有存在于该函数声明时的作用域内的变量和函数. <script> var outerValue = "nin…

主要是个人的学习网站,书籍推荐,还有个人学习经历,以及一些学习经验或技巧 JavaScript学习网站推荐 如果想快速入门,这些是很推荐的网站      快速入门,很快能让你了解前端,有什么,做什么,要学什么,怎么做 w3cschool  http://www.w3school.com.cn/index.html  MDN  https://developer.mozilla.org/zh-CN/docs/Web/JavaScript   菜鸟教程http://www.runoob.com/js…

说到JavaScript实现动画效果,不得不想到两个函数,setTimeout和setInterval. setTimeout的常用的使用方法为 setTimeout(callback, delay),setInterval常用的使用方法为setInterval(callback, delay) 两者的区别 setTimeout(function repeat(){ /* Some Long block of code... */ setTimeout(repeat, 10) }, 10) se…

一 参考文献 <JavaScript忍者秘籍>   二 函数特征总结 1. 函数是[第一型对象(first-class object)]:可以像这门语言的其它对象一样使用 函数可以共处,可以将其视为其它任意类型的JavaScript对象: 普通的JavaScript数据类型,函数可以被任意变量进行引用, 或者声明成对象字面量,甚至可将其作为函数参数进行传递. ①可以通过[字面量][创建] ②可以[赋值]给[变量].[数组]或[其他对象的属性] ③可以作为一个独立实体的[参数][传递]给函数(见…

事件循环 事件循环不仅仅包含事件队列,而是具有至少两个队列,除了事件,还要保持浏览器执行的其他操作.这些操作被称为任务,并且分为两类:宏任务(或通常称为任务)和微任务. 单次循环迭代中,最多处理一个宏任务(其余的在队列中等待),而队列中的所有微任务都会被处理.当微任务队列处理完成并清空时,事件循环会检查是否需要更新UI渲染,如果是,则会重新渲染UI视图.至此,当前事件循环结束. 事件循环基于两个基本原则: 一次处理一个任务. 一个任务开始后直到运行完成,不会被其他任务中断. 两类任务队列都是独立…

Javascript学习-简单测试环境 在<JavaScript忍者秘籍>2.4测试条件基础知识中,作者给出了一个精简版的assert和assert组的实现,对于初学者而言,这无疑是一个很好的例子,既让我们得到了一个好用的小工具,又让我们看到了用javascript实现这个工具是如此的简单. 这里主要是从代码角度最2.4章节做一些补充和说明,包括原有代码中的一些bug及其修正.当然了,既然涉及到了代码解析,这就不能说是初学者的范畴了,至少要多javascript中的函数声明,函数实现,函数闭包…

本博文基于知乎"JavaScript作用域问题?"一问,而引起了对JavaScript事件循环和单线程等概念与实践上的研究.深入理解. 一.概念 0.关键词:JavaScript单线程.事件循环(event loop).事件队列(event queue).执行栈(execution context stack) 1.JavaScript引擎属于单线程作业.所谓单线程,是指在JS引擎中负责解释和执行JavaScript代码的线程只有一个,也不妨叫它主线程.JavaScript引擎属于单线…

不同的调用机制决定了函数上下文对象的不同: 1.  作为普通函数进行调用时,其上下文是全局对象window; 2.  作为(对象)方法进行调用时,其上下文对象时拥有该方法的对象; 3.  作为构造器(通过 new xxx())进行调用时,其上下文是一个新分配的对象; 4.  通过函数的apply()或者call()方法进行调用时,上下文可以设置成任意值; 判断一个函数是作为普通函数调用,还是即将被作为构造器函数(new一个新实例对象): 1. 通过arguments.callee可以得到当前执行…

1.单点断言 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>断言----assert</title> <style type="text/css"> #results li.pass { color:green; } #results li.fail { color:red; } </style>…

注:本文来源  可译网 事件冒泡是你在学习javaScript旅途中遇到的一个术语,它涉及到当一个元素被另一个元素嵌套时调用事件处理的顺序,并且两个元素注册了同一个事件(例如,点击事件). 但是事件冒泡仅仅是难题的一部分.它经常和事件捕获和事件传播一起被提及,并且对这三个概念有着很深的了解是学习javaScript事件必不可少的,例如,假如你想实现事件委托. 在这篇文章中,我会解释这些术语,并展示它们如何组合在一起.我还将向您展示如何对JavaScript事件流的基本了解可以让您对应用程序进行细…

JavaScript 中的模块化 最早的基于立即执行函数,闭包的模块化 const MountClickModule = function(){  let num = 0;  const handleClick = ()=>{    console.log(++num);  }   return {    countClick:()=>{      document.addEventListener('click',handleClick)    }  }}(); MountClickModu…

Skip to content PersonalOpen sourceBusinessExplore Sign upSign in PricingBlogSupport   This repository     Watch169 Star1,182 Fork389 jobbole/awesome-programming-books CodeIssues 9Pull requests 2Projects 0PulseGraphs 经典编程书籍大全,涵盖:计算机系统与网络.系统架构.算法与数据结构…

简单的说,事件委托(event delegation)是在DOM上层(也就是在触发事件的元素的父元素上)定义事件的处理程序,而不是定义在触发事件的元素本身上. 首先我们来举这样一个例子:我有N个li元素,我想让点击过的li元素背景颜色都变为黄色.非常简单的一个例子是吧? 我们可以通过如下代码实现: var oBox = document.getElementById('box');var aLi = oBox.children;for(var i=0;i<aLi.length;i++){ add…