很久没用js了,最近因为要做个项目,要用到前端,于是重拾起来看看。本文应该适合于跟我一样,用过js但是又记得不是很清楚的孩纸。
[TOC]
历史
具体可以参见 javascript历史这篇文章 ,我这里就简要说说.
- Netscape 发明了 JavaScript
- 1997 年,JavaScript 1.1 作为一个草案提交给欧洲计算机制造商协会(ECMA),ECMAScript 作为 JavaScript 实现的基础
- 2005年,苹果公司在KHTML引擎基础上,建立了WebKit引擎。
- 2005年,Ajax方法(Asynchronous Javascript and XML)正式诞生,Jesse James Garrett发明了这个词汇。它开始流行的标志是,2月份发布的Google Maps项目大量采用该方法。它几乎成了新一代网站的标准做法,促成了Web 2.0时代的来临。
- 2011年6月,ECMAscript 5.1版发布,并且成为ISO国际标准(ISO/IEC 16262:2011)。目前浏览器使用的都是该标准,ECMA6还没有完全兼容。
- 2008年,V8编译器诞生。这是Google公司为Chrome浏览器而开发的,它的特点是让Javascript的运行变得非常快。它提高了JavaScript的性能,推动了语法的改进和标准化,改变外界对JavaScript的不佳印象。同时,V8是开源的,任何人想要一种快速的嵌入式脚本语言,都可以采用V8,这拓展了JavaScript的应用领域。
- 2009年,Node.js项目诞生,创始人为Ryan Dahl,它标志着Javascript可以用于服务器端编程,从此网站的前端和后端可以使用同一种语言开发。并且,Node.js可以承受很大的并发流量,使得开发某些互联网大规模的实时应用变得容易。
总之js已经变成世界上最流行的语言了,github上js的好多项目,star都破万了,java的一般只是破千,可见js的影响力之大。
语法
开发环境
学习语法前我们先准备一下开发环境,比较靠谱的就是用chrome自带的devtool,完全够用了,而且还支持commomjs的console的打印。
首先建一个html文件,算是一个壳。
<html>
<script src="./index.js"></script>
</html>
然后在同级目录下新建index.js文件。输入
alert("hello world!")
再用chrome 浏览器打开之前新建的html文件,就完成了。现在点击chrome的设置-》更多工具-》开发者工具-》source,你就可以看到我们的js代码了,这个界面也可以编辑js文件的。如下图:var的作用域
js变量作用域可分为:"全局变量"和"局部变量"
- "全局变量":申明在函数之外的变量
- "局部变量":申明在函数体中的变量,并且只能在当前函数体内访问,如:function(){var a = 0;}
注:在申明变量时凡是没有var关键字,而直接赋值的变量均为全局变量
例子1:
function test() {
a = 30;
var b = 20;
}
test();
console.log("a="+a); //这里很明显,a为全局变量
console.log("b="+b);//b为局部变量,故在函数test外调用是,提示未定义
var a=1;
function main(){
var a=2;//局部变量
console.log(a);//2
}
main();
console.log(a);//1
//函数作用域忧于全局作用域
最特殊的例子
var a = 1;
function test() {
console.log("a="+a); //这里a为undefined
/*函数中声明的变量在整个函数中都有定义。如果函数内部有定义变量,即使在定义之前输出但会先执行后面定义语句,然后判断输出结果,所以说声明的变量在整个函数中都是起作用的。*/
var a = 2;
}
test();
函数体会先判断外面的a有没有被重新定义,有的话就清除掉变量的定义,出了函数体再恢复。
let和var关键字异同
声明后未赋值,表现相同
'use strict';
(function() {
var varTest;
let letTest;
console.log(varTest); //输出undefined
console.log(letTest); //输出undefined
}());
使用未声明的变量,表现不同:
(function() {
console.log(varTest); //输出undefined(注意要注释掉下面一行才能运行)
console.log(letTest); //直接报错:ReferenceError: letTest is not defined
var varTest = 'test var OK.';
let letTest = 'test let OK.';
}());
重复声明同一个变量时,表现不同:
'use strict';
(function() {
var varTest = 'test var OK.';
let letTest = 'test let OK.';
var varTest = 'varTest changed.';
let letTest = 'letTest changed.'; //直接报错:SyntaxError: Identifier 'letTest' has already been declared
console.log(varTest); //输出varTest changed.(注意要注释掉上面letTest变量的重复声明才能运行)
console.log(letTest);
}());
变量作用范围,表现不同
'use strict';
(function() {
var varTest = 'test var OK.';
let letTest = 'test let OK.';
{
var varTest = 'varTest changed.';
let letTest = 'letTest changed.';
}
console.log(varTest); //输出"varTest changed.",内部"{}"中声明的varTest变量覆盖外部的letTest声明
console.log(letTest); //输出"test let OK.",内部"{}"中声明的letTest和外部的letTest不是同一个变量
}());
命名规范
- 变量名称 必须为 小写字母。
- 类的命名使用骆驼命名规则,例如:
Account, EventHandler - 常量 必须 在对象(类)或者枚举变量的前部声明。枚举变量的命名必须要有实际的意义,并且其成员 必须 使用骆驼命名规则或使用大写:
var NodeTypes ={
Element :1,
DOCUMENT:2
} - 变量如果设置为私有,则前面 必须 添加下划线。
this._somePrivateVariable = statement;
基本类型 string , number ,boolean
javascript虽然是松散型的语言,定义变量用var就可以了,但是实际上内部仍然有数据类型的区分,可以使用特性数据类型的方法。
String
字符串文本是由单引号或双引号所引用的字符。单引号和双引号没有区别。
在转换的时候,很容易出问题,例如
console.log("30"+3) //33
console.log("30"-3) //27
讲到String就不能不提到正则,js对于正则的支持是非常强大的。w3c介绍
直接量语法:
/pattern/attributes
调用时直接使用/"reg"/i.test()的形式
attributes 描述
i 执行对大小写不敏感的匹配。
g 执行全局匹配(查找所有匹配而非在找到第一个匹配后停止)。
m 执行多行匹配。
test方法是说检索字符串中指定的值。返回 true 或 false。
Boolean
true,false
boolean主要是转换的问题,像c语言一样,如果是数字,只有0和NAN是false,否则为true。
空字符串是false,否则为true,对象都是true,undefined和null也是false
双重否定符(!!)或者Boolean()可以显示将其它类型转成布尔值.
例如!!1 = true
Boolean(1) = true
Number
js支持的数字范围是-2e31 到2e31之间,如果超出,是Infinity和-Infinity,这两个是特殊的Number类型。
NaN(not a number) .如果一个字符串或者布尔不能转换成数字,那么他的值就是NaN。例如
var nValue = 1.0;
if(nValue == 'one') //false one被转成NaN
还有isNaN(),用来监测是否是数字
,null和undefine也是nan
至于数据类型的方法,大家自己查api文档吧~
操作符
注意的是js不能这样赋值
var a1,a2 =3;
这样a1就没有定义了
函数
函数分为两种
// 1。 声明函数
function Name(){
}
//或者
var func = function(params){
}
// 2. 匿名函数
var name = new function(){
}
当js解析它时,和声明式函数不一样,它将动态创建一个匿名函数,当其被调用后,该函数就将被自动删除。如果在一个循环体内使用一个匿名函数,则每次使用都会被创建。
PS:!!函数就是一个对象
面向对象
原型
Object对象有一个prototype属性,通过它可以扩展任意对象。
js本身可以动态创建方法和属性,但是创建出来的只适用于当前对象。例如下面方法:
var num = new Number()
num.add=function(val1,val2){return val1 + val2}
var sum = num.add(8,3)
当通过protype扩展对象时,扩展的方法或属性将适用于对象的所有实例,但是当扩展对象实例的时候,新的方法和属性只适用于对象实例。例如
Number.prototype.add=function(val1,val2{return val1+val2};
var num = new Number();
var sum=num.add()
继承
call()和apply()
call()和apply的作用都是调用其它对象的构造函数,对本对象进行赋值。