JavaScript
文章平均质量分 64
AFeng521web
这个作者很懒,什么都没留下…
展开
-
深入理解javascript函数系列第三篇——属性和方法
前面的话函数是javascript中特殊的对象,可以拥有属性和方法,就像普通对象拥有属性和方法一样。甚至可以用Function()构造函数来创建新的函数对象。一、属性【length属性】:arguments对象的length属性表示实参的个数,而函数的length属性则表示形参的个数。function add(x,y){ console.log(arguments....原创 2018-04-30 16:22:28 · 139 阅读 · 0 评论 -
深入理解javascript闭包系列第一篇——到底什么才是闭包
前面的话闭包已经成为近乎神话的概念,它非常重要又难以掌握,而且还很难定义。本文就从闭包的定义说起。古老定义:闭包(closure),是指函数变量可以保存在函数作用域内,因此看起来是函数将变量“包裹”了起来。那这样说来,包含变量的函数就是闭包。//按照古老定义,包含变量n的函数foo就是闭包function foo() { var n = 0;}console.lo...转载 2018-05-07 00:13:46 · 254 阅读 · 0 评论 -
深入理解javascript闭包系列第二篇——从执行环境角度看闭包
前面的话本文从执行环境的角度来分析闭包,通过用图示的方式对代码内容进行逐行解释。说明:下面按照代码执行流的顺序对图示进行详细说明。function foo(){ var a = 2; function bar(){ console.log(a); } return bar;}var baz = foo();baz();【1...转载 2018-05-07 01:02:08 · 186 阅读 · 0 评论 -
深入理解javascript闭包系利第三篇——IIFE
前面的话严格来讲,IIFE并不是闭包,因为它不满足函数成为闭包的三个条件,但一般地,人们认为IIFE就是闭包,毕竟闭包有多个定义,本文将详细介绍IIFE是实现和用途。实现函数跟随一对圆括号()表示函数调用。//函数声明语句写法function test(){};test();//函数表达式写法var test = function(){};test();但有时需要在...转载 2018-05-07 13:13:44 · 197 阅读 · 0 评论 -
深入理解javascript函数系列第一篇——函数概述
前面的话函数对于任何一门语言来说都是核心的概念。通过函数可以封装任意多条语句,而且可以在任何地方,任何时候调用执行。在javascript世界里,函数即就是对象,程序可以随意操控它们,函数可以嵌套在其他函数中定义,这样它们就可以访问它们被定义时所处作用域中的任何变量,它(函数)给javascript带来了非常强劲的编程能力。函数定义:总共有三种函数定义的方式【1】:函数声明语句 ...转载 2018-04-29 20:30:16 · 147 阅读 · 0 评论 -
深入理解javascript函数系列第二篇——函数参数
前面的话javascript函数的参数与大多数其它语言的参数有所不同,函数不介意传递进来多少个参数,也不在乎传进来的参数是什么数据类型,甚至可以不传参数。本文是深入理解javascript函数系列第二篇——函数参数。arguments javascript中的函数定义并未指定函数形参的类型,函数也未对传入的实参值做任何类型检查,实际上,javascript函数调用甚至不检查传入形参的个数...转载 2018-04-30 00:48:38 · 331 阅读 · 0 评论 -
深入理解javascript闭包系利第四篇——常见的一个循环和闭包的错误详解
前面的话关于常见的一个循环和闭包的错误,我们从执行环境图示的方式对此进行详细的解释。犯错function foo(){ var arr = []; for(var i = 0; i < 2; i++){ arr[i] = function(){ return i; } } return a...转载 2018-05-08 00:29:59 · 194 阅读 · 0 评论 -
深入理解this机制系列第一篇——this的4种绑定规则
一、默认绑定全局环境中,this默认绑定到window。console.log(this === window); //true函数独立调用时,this默认绑定到window。function foo() { console.log(this === window)}foo(); //true被嵌套的函数独立调用时,this默认绑定到window。/...转载 2018-05-15 00:15:06 · 361 阅读 · 0 评论 -
深入理解javascript的this机制系列第二篇——this绑定优先级
前面的话上一篇介绍了this的绑定规则,那如果在函数的调用位置上同时存在两种以上的绑定规则该怎么办?先给出一个结论: new绑定 > 显示绑定 > 隐式绑定 > 默认绑定一、显示绑定 pk 隐式绑定(显示绑定胜出)function foo() { console.log( this.a );}var obj1 = { a: 2, ...转载 2018-05-15 20:19:24 · 224 阅读 · 0 评论 -
深入理解javascript闭包系列第五篇——闭包的10中形式
前面的话根据闭包的定义,我们知道,无论通过何种手段,只要将内部函数传递到所在的词法作用域以外,它都会持有对原始作用域的引用,无论在何处执行这个函数都会使用闭包。接下来,我们将详细介绍闭包的10种形式。返回值最常用的一种形式是函数作为返回值返回。var F = function(){ var b = 'local'; var N = function(){ ...转载 2018-05-26 09:09:58 · 267 阅读 · 0 评论 -
深入理解javascript的this机制系列第三篇——箭头函数
前面的话this机制与函数的调用有关,而作用域与函数的定义有关。那么有什么可以将this机制和作用域联系在一起呢? ES6新增内容——箭头函数。一、痛点对于闭包的痛点在于,闭包的this默认绑定到window对象,但又常常需要访问嵌套函数的this,所以常常在嵌套函数中使用var that = this,然后在闭包中使用that代替this,使用作用域查找的方法来找到嵌套函...转载 2018-05-22 23:23:59 · 173 阅读 · 0 评论 -
javascript方法封装集合
一、兼容性实现getElementsByClassNamefunction getElesByClassName(className, parentId) { //先通过能力检测,看是否支持 if(!document.getElementsByClassName) { document.getElementsByClassName = function(cl...原创 2018-08-22 20:41:56 · 257 阅读 · 0 评论 -
深入理解javascript作用域系列第五篇——一张图理解执行环境和作用域
前面的话对于执行环境(execution contexr)和作用域(scope)并不容易区分,甚至很多人认为它们就是一回事,只是高程和犀牛书关于作用域的两种不同翻译而已。但实际上,它们并不相同,却相互纠缠在一起。概念【作用域】:作用域是一套规则,用于确定在何处以及如何查找标识符。关于LHS查询和RHS查询详见作用域系列第一篇内部原理。 作用域分为词法作用域和动态作用域。javascr...转载 2018-05-06 00:03:10 · 741 阅读 · 0 评论 -
深入理解javascript作用域系列第四篇——块作用域
前面的话尽管函数的作用域是最常见的作用域单元,也是现行大多数javascript最普遍的设计方法,但在其他类型的作用域单元也是存在的,并且通过使用其他类型的作用域单元甚至可以实现维护起来更加优秀,简洁的代码,比如块作用域。随着ES6的推广,块作用域也将用得越来越广泛。letfor (var i= 0; i<10; i++) { console.log(i);}上...转载 2018-05-05 19:49:39 · 219 阅读 · 1 评论 -
深入理解javascript函数系列第四篇——ES6函数扩展
前面的话ES6标准关于函数部分的扩展,主要涉及以下四个方面:参数默认值、rest参数、扩展运算符和箭头函数。参数默认值一般地,为参数设置默认值进行如下设置。function log(x, y) { y = y || 'World'; console.log(x, y);}但这样设置实际上是有问题的,如果y的值本身是假值(包括false、undefined、nu...转载 2018-04-30 18:30:13 · 117 阅读 · 0 评论 -
Ajax学习笔记
一、什么是AjaxAjax是Asynchronous Javascript and XML 的缩写,就是异步的JavaScript 和 XML,他是指一种创建交互式网页应用的网页开发技术。 主要包含的技术:基于web标准(standrads-based presentation)XHTML + CSS的表示。使用DOM(Document Object Model)进行动态显示及交互。...原创 2018-04-20 10:53:13 · 349 阅读 · 0 评论 -
深入理解javascript函数系列第五篇——函数式编程
一、定义简单说,“函数式编程”是一种“编程范式”(programming paradigm),也就是如何编写程序的方法论。它属于“结构化编程”的一种,主要思想就是把运算过程尽量写成一系列嵌套的函数调用。以函数作为主要载体的编程方式,用函数去拆解,抽象一般的表达式。举例说明函数式编程假如现在有这样一个数学表达式。(1 + 2) * 3 - 4传统的过程式编程,会这样写...原创 2018-05-01 16:58:26 · 310 阅读 · 0 评论 -
深入理解javascript函数系列第六篇——高阶函数
一、定义高阶函数(Higher-order function):javascript中的函数其实都是指向某个变量,既然变量可以指向函数(用一个变量表示函数),函数的参数能接收变量,那么一个函数就可以接受另一个函数作为参数,这种函数就叫做高阶函数,也就是操作函数的函数,有以下两种情况:函数可以作为参数被传递函数可以作为返回值输出javascript中的函数显示满足高阶函数的条件,在...转载 2018-05-01 23:19:41 · 228 阅读 · 0 评论 -
深入理解javascript对象系列第一篇——初识对象
一、对象的定义javascript的基本数据类型包括undefined、null、boolean、string、number和object。对象和其它基本类型值不同的是,对象是一种复合值:它将许多值(原始值或者其它对象)聚合在一起,可以通过名字访问这些值。 于是,对象也可以看做是属性的无序集合、每一个属性都是一个名值对。属性名是字符串,因此我们可以把对象看成是从字符串到值的映射。二、...转载 2018-05-02 00:22:14 · 156 阅读 · 0 评论 -
深入理解javascript对象系利第二篇——属性操作
前面的话对于对象来说,属性操作是绕不开的话题,类似于“增删改查”的基本操作,属性操作分为属性查询、属性设置、属性删除,还有属性继承。一、属性查询属性查询一般有两种方法,包括点运算符和方括号运算符。var o = { p: 'Hello World'};o.p // "Hello World"o['p'] // "Hello World"[注意点]:变量中可以存...转载 2018-05-02 14:12:27 · 176 阅读 · 0 评论 -
深入理解javascript对象系列第三篇——神秘的属性描述符
前面的话对于操作系统中的文件,我们可以轻易的将其设置为只读、隐藏、系统文件、普通文件。对于对象来说,属性描述符提供了类似的功能,用来描述对象中属性的值,是否可以配置,是否可以修改以及是否可枚举。一、属性描述符类型:对象的属性描述符的类型分为两种:数据属性和访问器属性。数据属性数据属性(data property)包含一个数据值的位置,在这个位置可以读取和写入值。数据...转载 2018-05-02 23:19:09 · 165 阅读 · 0 评论 -
深入理解javascript对象系列第四篇——对象拷贝
前面的话对象拷贝分为浅拷贝(shallow)和深拷贝(deep)两种。浅拷贝只复制一层对象的属性,并不会进行递归复制,而javascript存储对象时都只是存储对象的地址。 所以浅拷贝会导致对象中的子对象指向同一块内存地址(修改一个对象会影响另一个)。而深拷贝则不同,它不仅将原对象的各个属性逐个复制出去。而且将原对象上各个属性所包含的对象也依次采用深拷贝的方法递归复制到新对象上,拷贝了所有...转载 2018-05-03 00:05:37 · 137 阅读 · 0 评论 -
深入理解javascript作用域系列第二篇——词法作用域和动态作用域
前面的话大多数时候,我们对作用域产生混乱的主要原因是分不清应该按照函数位置的嵌套顺序,还是按照函数的调用顺序来进行变量查找,在加上this机制的干扰,使得变量查找极易出错。这实际上是由两种作用域工作模型导致的,作用域分词法作用域和动态作用域,分清这两种作用域模型就能够对变量的查找过程有清晰的认识。一、词法作用域第一篇介绍过,编译器的第一个工作阶段叫做分词(token),就是把由字符...转载 2018-05-04 00:17:07 · 255 阅读 · 0 评论 -
深入理解javascript作用域系利第一篇——内部原理
前面的话javascript拥有一套设计良好的规则来存储变量,并且之后可以很方便找到这些变量,这套规则被称之为作用域。作用域貌似简单,实则复杂,由于作用域与this机制非常容易混淆,使得理解作用域的原理更为重要。内部原理分为:编译、执行、查询、嵌套和异常一、编译以var a = 2;为例,说明Javascript内部编译的过程,主要分为三步。【1】:分词(token...转载 2018-05-03 20:14:33 · 165 阅读 · 0 评论 -
深入理解javascript作用域系列第三篇——声明提升(hoisting)
前面的话一般认为,javascript代码在执行时时由上到下一行一行执行的。但是实际上这并不完全正确,主要是因为声明提升的存在。变量的声明提升a = 2;var a;console.log(a);直觉上,会认为是undefined,因为var a 声明在a = 2;之后,可能变量被重新赋值了,因为会被赋予默认值undefined。但是,真正的输出结果却是2。 就算是下...转载 2018-05-04 22:07:39 · 191 阅读 · 0 评论 -
JavaScript中实现继承的八种方式
1.原型链继承核心思想:子类的原型等于父类的一个实例。function Parent() { this.name = 'afeng';}Parent.prototype.getName = function() { console.log(this.name);}function Child() {}// 这里是最关键的一步Child.prototype = ...原创 2019-07-17 00:02:46 · 197 阅读 · 0 评论