JavaScript必须了解的知识点总结。
整理的知识点不全面但是很实用。
主要分三块:
(1)JS代码预解析原理(包括三个段落);
(2)函数相关(包括 函数传参,带参数函数的调用方式,闭包);
(3)面向对象(包括 对象创建、原型链,数据类型的检测,继承)。
JS代码预解析原理
/****************** JS代码预解析原理 ******************/
/*
JS代码预解析、变量作用域、作用域链等 应该能作为学习JS语言的入门必备知识。
下边给出些简要解释和一些典型的代码段,若要了解更多,能从网上搜索到更多相关示例。 引用网上的一段有关 “JS的执行顺序” 的解释:
如果一个文档流中包含多个script代码段(用script标签分隔的js代码或引入的js文件),它们的运行顺序是:
步骤1. 读入第一个代码段(js执行引擎并非一行一行地执行程序,而是一段一段地分析执行的)
步骤2. 做语法分析,有错则报语法错误(比如括号不匹配等),并跳转到步骤5
步骤3. 对var变量和function定义做“预解析”(永远不会报错的,因为只解析正确的声明)
步骤4. 执行代码段,有错则报错(比如变量未定义)
步骤5. 如果还有下一个代码段,则读入下一个代码段,重复步骤2
步骤6. 结束
*/
// 下边给出 三段觉得比较典型的代码示例:
/********** 一:基本的几条语句 **********/
alert(num); // undefined
var num = 0;
alert(str); // 错误:str未定义
str = "string";
alert(func); // undefined
var func = function (){ alert('exec func'); }
test(); // exec test
alert(test()); // 先exec test 后undefined
function test(){ alert('exec test'); } /********** 二:函数名与变量名相同 **********/
//var mark = 1;
function mark(x) {
return x * 2;
}
var mark;
alert(mark); // function mark(x) { return x * 2; }
// 去掉前边的var mark = 1;则会返回1 /********** 三:把第二段包括在语句块中 **********/
// 当有条件时候(代码包含在条件语句块里)
if (false) {
var mark1 = 1;
function mark1() {
alert("exec mark1");
}
//var mark1;
alert(mark1);
}
alert(mark1);
mark1();
// 由于解析浏览器解析不同,这段代码在不同浏览器里执行的结果不一致,具体原因可从网上查找答案
函数相关(包括 函数传参,带参数函数的调用方式,闭包)
/****************** 函数相关 ******************/ /********** 一:函数传参 **********/
/*
编程语言大概都有 值类型与引用类型 的区别,JS也不例外。
原始类型:undefined null number boolean 均为值类型。
string比较特殊,因为它是不可改变的,String类定义的方法都不能改变字符串的内容。
function object array 这三种为引用类型。
*/
/* JavaScript 函数传递参数时,是值传递。 ECMAScript 中,所有函数的参数都是按值来传递的。
基本类型值的传递和基本类型变量复制一致(采用在栈内新建值),
引用类型值的传递和引用类型变量的复制一致(栈内存放的是指针,指向堆中同一对象)。
具体参考:http://www.xiaoxiaozi.com/2010/03/05/1719/
*/
function setName(obj){
//obj拷贝了person的值(person是一个对象的引用地址),所以obj也指向了person所指向的对象。
obj.name = "xiaoxiaozi";
obj = {}; // 让obj 指向了另一个对象
obj.name = "admin";
}
var person = {};
setName(person);
alert(person.name); // xiaoxiaozi /********** 二:带参数函数的调用方式 **********/
/* 在DOM不同版本中,函数调用方式不太一样。标准推荐的是addEventListener和attachEvent
这两种方式有很多资料可查。但是有些已经不被推荐的函数调用仍旧有实际应用,相关资料发现的不多。
这里主要讨论这些函数调用方式
*/
var g = "全局变量";
function show(str) {
alert("my site: " + str);
}
setTimeout("show(g);",100); // g是全局变量,函数正确执行
function t() {
var url = "www.xujiwei.cn";
var num = 2;
//setTimeout("alert("+url+")", 3000); // 解析错误,www未定义
//setTimeout("alert("+num+")", 3000); // 解析正确,注意与上句对比
//setTimeout("show('url');", 2000); // url
//setTimeout("show("+ url +");", 2000); // 解析错误,www未定义
//setTimeout("show(url);", 2000); // 解析错误,url未定义
//setTimeout('"show("+ url +");"', 2000); // 解析错误,url未定义
//setTimeout("show('"+ url +"');", 2000); // 正确
//setTimeout(function(){show(url);},1000); // 正确
}
t();
/* 结论:
诸如onclick="xx();"等函数调用方式,在双引号内的内容直接解析为js语句执行。
若调用的函数带有参数,注意对比以上各种写法,保证传递进去的参数为正确的。
*/ /********** 三:闭包 **********/
/*
闭包,几乎是每个学习JS的朋友都要讨论的问题,因此各种相关资料应有尽有。
它的作用很大,但也有弊端,例如如果使用不当,容易引起内存泄漏等问题,因此有不少人
提倡少用闭包。 这里列出闭包的一种经典应用,一个有争议的应用。
*/
function test1() { //通过闭包,每次能传入不同的j值。
for (var j = 0; j < 3; j++) {
(function (j) {
setTimeout(function () { alert(j) }, 3000);
})(j);
}
}
test1();
/* 这个是闭包的典型应用 */ (function tt() {
for (var i = 1; i < 4; i++) {
document.getElementById("b" + i).attachEvent("onclick",
new Function('alert("This is button' + i + '");')); // 在IE中测试
}
})() // 立即执行函数,一个文件是否只能有一个?把上边函数写成立即执行出问题,怎么回事? /* 这个问题出现在论坛里,有很多争议
有说是new Function动态生成个闭包结构的函数,所以能保存外部变量。
有说是跟闭包无关,new Function,就是新定义了一个function,
i的值也作为这个新的function的参数固化在其内部了。
*/
面向对象(包括 对象创建、原型链,数据类型的检测,继承)
/****************** 面向对象 ******************/ /********** 一:对象创建、原型链 **********/
/* 讨论 构造函数(类方式)创建对象 ,深入理解这些内容,是很重要的
*/
function MyFunc() { }; //定义一个空函数
var anObj = new MyFunc(); //使用new操作符,借助MyFun函数,就创建了一个对象
// 等价于:
function MyFunc() { };
var anObj = {}; //创建一个对象
anObj.__proto__ = MyFunc.prototype;
MyFunc.call(anObj); //将anObj对象作为this指针调用MyFunc函数
/*
用 var anObject = new aFunction() 形式创建对象的过程实际上可以分为三步:
第一步:建立一个新对象(anObject);
第二步:将该对象内置的原型对象(__proto__)设置为构造函数prototype引用的那个原型对象;
第三步:将该对象作为this参数调用构造函数,完成成员设置等初始化工作。 对象建立之后,对象上的任何访问和操作都只与对象自身及其原型链上的那串对象有关,
与构造函数再扯不上关系了。
换句话说,构造函数只是在创建对象时起到介绍原型对象和初始化对象两个作用。 原型链:(参考:http://hi.baidu.com/fegro/blog/item/41ec7ca70cdb98e59152eed0.html)
每个对象(此处对象应该仅指大括号括起来的object,不包括function、array。待验证?)
都会在其内部初始化一个属性,就是__proto__,当我们访问一个对象的属性时,
如果这个对象内部不存在这个属性,那么他就会去__proto__里找这个属性,
这个__proto__又会有自己的__proto__,于是就这样 一直找下去,也就是我们平时所说的原型链的概念。
*/ /* 理解了对象创建的原理,可试着分析下边两个示例的结果 */
var yx01 = new function() {return "圆心"};
alert(yx01); // [object Object]
var yx02 = new function() {return new String("圆心")};
alert(yx02); // “圆心”
/* 解释:
"圆心"是基本的字符串类型,new String("圆心")则创建了一个string对象。
只要new表达式之后的构造函数返回一个引用对象(数组,对象,函数等),都将覆盖new创建的对象,
如果返回一个原始类型(无 return 时其实为 return 原始类型 undefined),
那么就返回 new 创建的对象。
参考:http://www.planabc.net/2008/02/20/javascript_new_function/
*/ /********** 二:数据类型的检测 **********/
/* 判断数据类型可能想到的方法:
constructor、typeof、instanceof、Object.prototype.toString.call()
*/
/***** 1、通过constructor属性 *****/
var myvar= new Array("a","b","c","d");
function A(){}
myvar.constructor = A;
var c = myvar.constructor;
alert(c); // function A(){}
//可见,通过constructor属性获取类型的方法很容易被修改,不应该用来判断类型。 /***** 2、通过typeof *****/
/*
typeof是一个操作符,而不是个函数。
typeof的实际应用是用来检测一个对象是否已经定义或者是否已经赋值。
如if(typeof a!="undefined"){},而不要去使用if(a)因为如果a不存在(未声明)则会出错。
typeof检测对象类型时一般只能返回如下几个结果:
number,boolean,string,function,object,undefined。
对于Array,Null,自定义对象 等使用typeof一律返回object,
这正是typeof的局限性。
*/
var num = new Number(1);
var arr = [1,2,3];
alert(typeof num); //object 而不是number
alert(typeof arr); //object 而不是Array
alert(typeof null); // object /***** 3、通过 instanceof *****/
/* 用instanceof操作符来判断对象是否是某个类的实例。
如果obj instanceof Class返回true,那么Class的原型与obj原型链上的某个原型是同一个对象,
即obj要么由Class创建,要么由Class的子类创建。
*/
function t(){};
t.prototype = Array.prototype;
//t.prototype = [];
var x = new t();
alert(x instanceof t);//弹出true
alert(x instanceof Array);//弹出true
alert(x instanceof Object);//弹出true
/*
由此可知,通过 instanceof 判断数据类型也不可靠。
因为一个对象(此处x)的原型链可以很长,每个原型的类型可以不同。 另外在iframe内也会容易出错:
即有个页面定义了一个数组a,页面又嵌套了一个IFrame,在Iframe里面通过 top.a instanceof Array, 是返回false的。
这个说明 父页面和内嵌iframe里的对象是不同的,不能混合在一起使用。
改成top.a instanceof top.Array 就会返回true
*/ /***** 4、通过 Object.prototype.toString.call() *****/
/*
Object.prototype.toString.call() 作用是:
1、获取对象的类名(对象类型)。
2、然后将[object、获取的类名]组合并返回。
可应用于判断Array,Date,Function等类型的对象
*/
var num = new Number(1);
var arr = [1,2,3];
alert(Object.prototype.toString.call(num)); // [object Number]
alert(Object.prototype.toString.call(arr)); // [object Array] // 扩展示例:(apply等价于call)
window.utils = {
toString: Object.prototype.toString,
isObject: function (obj) {
return this.toString.apply(obj) === '[object Object]';
},
isFunction: function (obj) {
return this.toString.apply(obj) === '[object Function]';
},
isArray: function (obj) {
return this.toString.apply(obj) === '[object Array]';
}
}
function A() { }
window.utils.isFunction(A); //true
window.utils.isObject(new A()); //true
window.utils.isArray([]); //true /*
jQuery等框架 就是用这个方法判断对象的类型的,因此可以把这种方法作为权威的判断方法。
但是,如果重写了Object.prototype.toString方法,这时候再用来判断数据类型可能就会出错,
所以,一般不要去重写Object.prototype.toString方法。
*/ /********** 三:继承 **********/
/*
JS继承和闭包一样,几乎是每个想深入学习JS的朋友都要讨论的问题,因此各种相关资料应有尽有。
JS继承代码的版本非常多,但原理都是一样的,核心都是利用了prototype对象。
为了和其他面向对象语言的风格相似,大多数都采用“类式”风格模拟。 继承的详细原理不再赘述,网上有许多资料介绍。
这里给出一个示例:Jquery作者John Resig写的继承。
(其中的详细注释是来自某个博客,不知道是谁原创,这里私自转帖出来)
*/
(function () {
// initializing变量用来标示当前是否处于类的创建阶段,
// - 在类的创建阶段是不能调用原型方法init的
// - 我们曾在本系列的第三篇文章中详细阐述了这个问题
// fnTest是一个正则表达式,可能的取值为(/\b_super\b/ 或 /.*/)
// - 对 /xyz/.test(function() { xyz; }) 的测试是为了检测浏览器是否支持test参数为函数的情况
// - 不过我对IE7.0,Chrome2.0,FF3.5进行了测试,此测试都返回true。
// - 所以我想这样对fnTest赋值大部分情况下也是对的:fnTest = /\b_super\b/;
var initializing = false, fnTest = /xyz/.test(function () { xyz; }) ? /\b_super\b/ : /.*/;
// 基类构造函数
// 这里的this是window,所以这整段代码就向外界开辟了一扇窗户 - window.Class
this.Class = function () { };
// 继承方法定义
Class.extend = function (prop) {
// 这个地方很是迷惑人,还记得我在本系列的第二篇文章中提到的么
// - this具体指向什么不是定义时能决定的,而是要看此函数是怎么被调用的
// - 我们已经知道extend肯定是作为方法调用的,而不是作为构造函数
// - 所以这里this指向的不是Object,而是Function(即是Class),那么this.prototype就是父类的原型对象
// - 注意:_super指向父类的原型对象,我们会在后面的代码中多次碰见这个变量
var _super = this.prototype;
// 通过将子类的原型指向父类的一个实例对象来完成继承
// - 注意:this是基类构造函数(即是Class)
initializing = true;
var prototype = new this();
initializing = false;
// 我觉得这段代码是经过作者优化过的,所以读起来非常生硬,我会在后面详解
for (var name in prop) {
prototype[name] = typeof prop[name] == "function" &&
typeof _super[name] == "function" && fnTest.test(prop[name]) ?
(function (name, fn) {
return function () {
var tmp = this._super; // 这里是必要的,第91行注释代码可说明之。
this._super = _super[name];
var ret = fn.apply(this, arguments);
this._super = tmp;
return ret;
};
})(name, prop[name]) :
prop[name];
}
// 这个地方可以看出,Resig很会伪装哦
// - 使用一个同名的局部变量来覆盖全局变量,很是迷惑人
// - 如果你觉得拗口的话,完全可以使用另外一个名字,比如function F()来代替function Class()
// - 注意:这里的Class不是在最外层定义的那个基类构造函数
// 这里的Class和上边的window.Class函数不一样,这里是window.Class内部的函数局部变量
function Class() {
// 在类的实例化时,调用原型方法init
if (!initializing && this.init)
this.init.apply(this, arguments);
}
// 子类的prototype指向父类的实例(完成继承的关键)
Class.prototype = prototype; // Class指代上边的Class,并非一开始的window.Class
// 修正constructor指向错误
// 是否可用Class.prototype.constructor = Class;来修正???
Class.constructor = Class;
// 子类自动获取extend方法,arguments.callee指向当前正在执行的函数
Class.extend = arguments.callee;
return Class;
};
})();
JavaScript必须了解的知识点总结。的更多相关文章
- JavaScript算法与数据结构知识点记录
JavaScript算法与数据结构知识点记录 zhanweifu
- JavaScript必须了解的知识点总结【转】
整理的知识点不全面但是很实用. 主要分三块: (1)JS代码预解析原理(包括三个段落): (2)函数相关(包括 函数传参,带参数函数的调用方式,闭包): (3)面向对象(包括 对象创建.原型链,数据类 ...
- 私人定制javascript中对象小知识点(Only For Me)
废话不多讲,先上笑话,然后再,.看懂这个的说明你的节操已经不再了. 晚饭后去理发店理发...割了吧...老板问我怎么剪,我悠悠的来一句往帅了剪...高潮往往令人想不到....旁边一在焗油烫头发的大妈说 ...
- 读《javascript语法精粹》知识点总结
昨天泡了大半天的读书馆,一口气看完了<javascript语法精粹>这本书,总体来说这本书还是写的不错,难怪那么多的推荐.<javascript语法精粹>主要是归纳与总结了ja ...
- JavaScript学习笔记——对象知识点
javascript对象的遍历.内存分布和封装特性 一.javascript对象遍历 1.javascript属性访问 对象.属性 对象[属性] //字符串格式 //javascript属性的访问方法 ...
- JavaScript学习笔记及知识点整理_3
1.js的事件冒泡及阻止方法:事件冒泡的概念:在一个对象上触发某类事件(比如单击onclick事件),如果此对象定义了此事件的处理程序,那么此事件就会调用这个处理程序,如果没有定义此事件处理程序或者事 ...
- JavaScript学习笔记及知识点整理_2
1.一般而言,在Javascript中,this指向函数执行时的当前对象.举例如下: var someone = { name: "Bob", showName: function ...
- JavaScript学习笔记及知识点整理_1
一.js的基础部分 1.==和===的区别:==在判断是否相等的时候会进行类型转换,有时会得到非常奇怪的结果,因此一般情况下都是用===判断是否相等2.strict模式:在js中,如果一个变量没有用v ...
- JavaScript 的数据类型 相关知识点
(1)基本数据类型介绍 JavaScript的数据类型分为两类:原始类型(primitive type)和对象类型(object type) 或者说是:可以拥有方法的类型和不能拥有方法的类型 或者说是 ...
随机推荐
- Gym 100646 F Tanks a Lot RMQ
Problem F: Tanks a Lot Imagine you have a car with a very large gas tank - large enough to hold what ...
- 使用极光推送(www.jpush.cn)向安卓手机推送消息【服务端向客户端主送推送】C#语言
在VisualStudio2010中新建网站JPushAndroid.添加引用json帮助类库Newtonsoft.Json.dll. 在web.config增加appkey和mastersecret ...
- 让不支持h5新标签的浏览器支持新标签
把这段js加到页面的头部就可以了,创建想让浏览器支持的标签即可 //条件判断是否支持 h5 if(window.applicationCache){ alert("支持h5") } ...
- From cls答辩
我没有想过有一天会因为wjmzbmr而开一篇. 因为看到了cls答辩的链接而震撼或是感动. 可能也跟最近身心比较疲惫有关...容易产生这样那样的感触... cls可能已不是我们这代OIER所能膜到的了 ...
- DP套DP HDOJ 4899 Hero meet devil(国王的子民的DNA)
题目链接 题意: 给n长度的S串,对于0<=i<=|S|,有多少个长度为m的T串,使得LCS(S,T) = i. 思路: 理解的不是很透彻,先占个坑. #include <bits/ ...
- $(document).ready,$(window).load,window.onload区别和联系
$(document).ready是在dom结构加载完毕就执行. $(window).load 等价于window.onload,必须等到页面内包括图片的所有元素加载完毕后才能执行. $(docume ...
- 关于WM_GETTEXT的应用
HWND hw = ::FindWindow(NULL,"Form1"); HWND hw2 = ::FindWindowEx(hw,NULL,NULL,NULL); int le ...
- JavaScript之基础篇
标识符 命名要求 以字母.下划线或者$开头: 由字母.下划线.$和数字组成. 关键字和保留字 关键字.保留字不可以作为标识符. 大小写敏感 区分大小写. 基本数据类型 Number 整数 浮点数 特殊 ...
- storm学习好文链接
大圆的那些事:http://www.cnblogs.com/panfeng412/tag/Storm/ xcc的博客:http://blog.csdn.net/damacheng/article/ca ...
- 做 Web 开发少不了这些的
抱歉,似乎有些标题党了.最近做服务器的热备,整理了些李纳斯工具的适用方法.看看还有不错的. 基本命令 sleep 500 暂停 ctrl + z 暂停 progress & 后台运行 jobs ...