前端学习实践笔记--JavaScript深入【1】
这一年中零零散散看过几本javascript的书,回过头看之前写过的javascript学习笔记,未免有点汗颜,突出“肤浅”二字,然越深入越觉得javascript的博大精深,有种只缘身在此山中的感觉,茫茫然而不得其要领,索性在一边写博文中,求得突破,乃至更上一层楼。
看过的书籍推荐:
《javascript语言精粹》 Douglas Crockford
《javascript设计模式》 Addy Osmani
《javascript设计模式》 Ross Harmes
《悟透javascript》 李战
《javascript语言精髓与编程实践》 周爱民
这些书是在绝大部分javascript书籍中较好的几本了,市面上的javascript,不得不说,水分太多,养分太少。很多书翻几页也就困了。反倒是网上有些不错的博客,博客园里面,博客园的知识库里面,还有一些其他的个人博客,都是挺不错的,但是大多都比较分散,知识点也比较散落。另外由于随着javascript本身的更新,还有jQuery,YUI等一系列插件的出现,NodeJS兴起等等的影响,不同浏览器的更新以及兼容性问题,导致了原生JS的逐渐冷落,但是不管怎么说,也遮不住JS这门语言本身的魅力。
JS有很多深邃的地方值得学习,接下来着重介绍一些比较好玩的东西,这些也是我看了很多的书和博文累积起来的,但是最好的读者是稍微有点JS基础了,因为我讲的东西可能会有点跳跃,不是基础的教程。
不讲解那些复杂拗口的语法,或者那些深坑,或者那些晦涩难懂的设计模式,通过简单的实例来学习实践区分静态语言和动态语言的区别于共同点
楼主是一个记性很差,特别怕麻烦的人,楼主忠于且坚信用最简单的技术实现用户需求,能抓老鼠的猫才是猫的原则,反对过分追求优化,追求复杂的设计模式。
只求能干净的实现我的功能。主要分以下几点来讲解:
1. var 变量 声明 函数声明 提前
2. call apply的使用
3. new 实例化,复制,引用的区别
4. 原型链的使用
5. 闭包保持用户状态
6. 面向对象的实现,继承
7. this指针
8. 数组,对象,json
9. AMD,CMD简介
10. js中的深坑
11. 继续深入方向
1. var 变量 声明 函数声明提前
提到变量/函数声明,理解一个核心,JS的解析和执行时分开的,了解了这个,很多问题和怪事就都明白了。
JS代码在执行的时候,会经过两个步骤,首先是解析(预编译),然后再执行。解析就是声明变量,还没有赋值,所以是undefined的,到了具体执行的时候才会给予具体的值。要把一条赋值语句分成两部分看,例如var a = 5; 应该是 var a; a = 5;这样两部分看,复杂的情况如下几个例子:
/**
* 变量声明和函数表达式(我更觉得应该叫定义,但是大家好像默认都是声明了)
* 都是用var来声明,所以如果将函数具体内容看做是一个值得话,跟变量赋值其实是一回事
* 下面语句执行的顺序如下:
* 首先进行变量声明,即var f;所以第一个输出时undefined
* 因为有两个var f的定义,之后的定义覆盖之前的定义,所以第二个输出时25
* 第三个输出时f函数的具体内容
* 如果将var f = 0; 和var f = function(x){return x*x;}顺序倒过来,那第二个输出就要报错了,
* 第三个输出是0
*
*/
//console.log(f);
//var f = 0;
//var f = function(x){
// return x*x;
//}
//console.log(f(5));
//console.log(f); /**
* 变量声明和函数声明
* 下面语句的执行输出结果如下:
* 第一个输出是函数的具体内容
* 第二个输出是16,
* 第三个输出是0
* 问题在于从技术上说,function语句并非是一个语句.
* JS中语句会引发动态的行为,
* 但是函数定义描述的却是静态的程序结构。
* 语句是在运行时执行的,而函数则是实际运行之前,
* 当JS代码被解析或被编译时定义的。
* 当JS解析程序遇到一个函数定义时,它就解析并存储构成函数主体的语句,
* 然后定义一个和该函数同名的属性
* (如果函数定义在其它的函数中,那么就在调用对象中定义这个属性,
* 否则在全局对象中定义这个属性)以保存它。这会产生一些奇怪的行为。
* 总结来说就是函数声明优于比变量声明。
*/
console.log(f);
console.log(f(4));
function f(x){
return x*x;
}
var f = 0;
console.log(f);
事实上,js的解析器对函数声明与函数表达式并不是一视同仁地对待的。对于函数声明,js解析器会优先读取,确保在所有代码执行之前声明已经被解析,而函数表达式,如同定义其它基本类型的变量一样,只在执行到某一句时也会对其进行解析,所以在实际中,它们还是会有差异的,具体表现在,当使用函数声明的形式来定义函数时,可将调用语句写在函数声明之前,而后者,这样做的话会报错。
2. call apply的使用
1、方法定义
call方法:
语法:call([thisObj[,arg1[, arg2[, [,.argN]]]]])
定义:调用一个对象的一个方法,以另一个对象替换当前对象。
说明:
call 方法可以用来代替另一个对象调用一个方法。call 方法可将一个函数的对象上下文从初始的上下文改变为由 thisObj 指定的新对象。
如果没有提供 thisObj 参数,那么 Global 对象被用作 thisObj。
apply方法:
语法:apply([thisObj[,argArray]])
定义:应用某一对象的一个方法,用另一个对象替换当前对象。
说明:
如果 argArray 不是一个有效的数组或者不是 arguments 对象,那么将导致一个 TypeError。
如果没有提供 argArray 和 thisObj 任何一个参数,那么 Global 对象将被用作 thisObj, 并且无法被传递任何参数。
简单来说,区别就是apply方法后面传递的参数是数组,而call方法是add.call(doubleAdd,a,b,c)形式的. 具体执行的方法看call、apply前面的函数,
如果没有提供thisObj,相当于Global。
具体来说,看几个例子:
function add(a,b)
{
alert(a+b);
}
function sub(a,b)
{
alert(a-b);
} add.call(sub,3,1); //== add.call(null,3,1);
//输出4 sub.call(null,3,1);
//输出2
//这里稍微涉及到this指针,this指向的是运行时的上下文
function Class1()
{
this.name = "class1"; this.showNam = function()
{
alert(this.name);
}
this.detail = "hello-1";
this.showDetail = function(){
alert(this.detail);
}
} function Class2()
{
this.name = "class2";
this.detail = "hello-2";
this.showDetail = function(){
alert(this.detail);
}
} var c1 = new Class1();
var c2 = new Class2(); c1.showNam.call(c2);
c1.showNam();
c1.showDetail();
c2.showDetail();
// class2
// class1
//hello-1
//hello-2
还可以用call实现继承,具体例子就不给出了,参考文章JS中的call()和apply()方法 ...里面写的很详细,该说的也都说了。
3. new 实例化,复制,引用的区别
记住function有对象化能力,体现在使用new上。如果没有使用new新创建一个对象(即复制一份相同内容), 即还是引用,对函数内部变量的改变会导致其他引用值的改变。
这里涉及到对象的概念,统一在对象的时候再说吧。。今天就写到这里了。
以上全部都属个人原创,请大家转载的时候附上原创链接: http://www.cnblogs.com/tonylp
前端学习实践笔记--JavaScript深入【1】的更多相关文章
- 前端学习实践笔记--JavaScript深入【3】
这章主要讨论闭包和原型,以及面向对象和继承. 闭包 闭包充分利用了JS里面作用域的概念,作用域的好处是内部函数可以访问定义它们的外部函数的参数和变量.使用闭包主要是为了读取函数内部的变量或者将函数内部 ...
- 前端学习实践笔记--JavaScript深入【2】
趁热继续再来学习一波,接下来主要介绍函数,object,数组,面向对象,new实例化. 在介绍“对象”之前,首先得梳妆打扮一番吧,那这梳妆打扮主要有两条路线,一条是淑女范(利用函数对象化),一条是邻家 ...
- 每天成长一点---WEB前端学习入门笔记
WEB前端学习入门笔记 从今天开始,本人就要学习WEB前端了. 经过老师的建议,说到他每天都会记录下来新的知识点,每天都是在围绕着这些问题来度过,很有必要每天抽出半个小时来写一个知识总结,及时对一天工 ...
- 前端学习 第二弹: JavaScript中的一些函数与对象(1)
前端学习 第二弹: JavaScript中的一些函数与对象(1) 1.apply与call函数 每个函数都包含两个非继承而来的方法:apply()和call(). 他们的用途相同,都是在特定的作用域中 ...
- Day17-18前端学习之路——Javascript事件
用户在某个元素上点击鼠标或悬停光标. 用户在键盘中按下某个按键. 用户调整浏览器的大小或者关闭浏览器窗口. 一个网页停止加载. 提交表单. 播放.暂停.关闭视频. 发生错误. 更多事件:https:/ ...
- 【InfluxDB】InfluxDB学习实践笔记
InfluxDB是用Go编写的一个开源分布式时序.事件和指标数据库,无需外部依赖.它与Elasticsearch.Graphite等类似.比较适用于与事件紧密相关的数据,例如实时日志数据.实时监控数据 ...
- 《疯狂前端开发讲义jQuery+Angular+Bootstrap前端开发实践》学习笔记
<疯狂前端开发讲义jQuery+Angular+Bootstrap前端开发实践>学习笔记 二〇一九年二月十三日星期三2时28分54秒 前提:本书适合有初步HTML.CSS.JavaScri ...
- vue—你必须知道的 js数据类型 前端学习 CSS 居中 事件委托和this 让js调试更简单—console AMD && CMD 模式识别课程笔记(一) web攻击 web安全之XSS JSONP && CORS css 定位 react小结
vue—你必须知道的 目录 更多总结 猛戳这里 属性与方法 语法 计算属性 特殊属性 vue 样式绑定 vue事件处理器 表单控件绑定 父子组件通信 过渡效果 vue经验总结 javascript ...
- 【前端】Web前端学习笔记【2】
[2016.02.22至今]的学习笔记. 相关博客: Web前端学习笔记[1] 1. this在 JavaScript 中主要有以下五种使用场景 在全局函数调用中,this 绑定全局对象,浏览器环境全 ...
随机推荐
- html选择图片后预览,保存并上传
html代码:------------------添加-------------------------- accept="image/gif,image/jpeg,image/jpg,im ...
- JAVA的单例模式与延时加载
延迟加载(lazy load)是(也称为懒加载),也叫延迟实例化,延迟初始化等,主要表达的思想就是:把对象的创建延迟到使用的时候创建,而不是对象实例化的时候创建.延迟加载机制是为了避免一些无谓的性能开 ...
- Linear Algebra lecture3 note
Matrix multiplication(4 ways!) Inverse of A Gauss-Jordan / find inverse of A Matrix multiplication ...
- 【我是老中医】codeblocks无法编译的问题解决方法
前几天把codeblocks的文件夹移动到移动硬盘里面,结果发现从此以后代码不能编译了,当时没有注意,就改用vs写代码,发现真的不是很习惯,正好学妹也碰到这种问题问我怎么解决,然后就百度了一下. 我的 ...
- select 函数1
Select在Socket编程中还是比较重要的,可是对于初学Socket的人来说都不太爱用Select写程序,他们只是习惯写诸如connect.accept.recv或recvfrom这样的阻塞程序( ...
- X86 Socket 通信
struct txd_socket_handler_t { int fd; }; txd_socket_handler_t *txd_tcp_socket_create() { txd_socket_ ...
- VIM常用快捷键
光标前插入i,行首插入 拷贝当前行 yy或者Y 删除一行dd,删除后进入插入模式cc或者S 粘贴p 撤销u,重做ctrl + r 删除一行dd,删除后进入插入模式cc或者S
- 【总结】matlab求两个序列的相关性
首先说说自相关和互相关的概念. 自相关 在统计学中的定义,自相关函数就是将一个有序的随机变量系列与其自身作比较.每个不存在相位差的系列,都与其都与其自身相似,即在此情况下,自相关函数值最大. 在信号 ...
- Torch 7 load saved model failed, 加载保存的模型失败
Torch 7 load saved model failed, 加载保存的模型失败: 可以尝试下面的解决方案:
- unity panel删除drawcall失败导致的残留影像
ngui panel 被隐藏或者删除的时候调用ondisable,清空drawcall,如果这个操作是在ontriggerenter等物理操作中就会删除不掉导致留下残影 解决方式 : 讲这些操转移到协 ...