Flands Blog HomeArchivesTags
JavaScript笔记

笔记标题啥的有点乱，就这样看吧，注释也有。

其他代码说明

`<li>第${j+1}</li>`					//${}
<script src="a.js"></script>
console.log()						//输出日志

语句

if语句

if(str) {}
else if() {}
else {}
a<1?为真结果:为假结果

选择语句

switch() {
case '1': 代码 break;
default:都不符合;}

循环遍历

for(var i=0;i<=Class.length;i++){
            Class[i].checked=true;		//选中
        }
while(){}
do{	}while()

异常

try{if() throw "自定义的错误提示"}
catch(){}
finally{无论如何都执行}

函数

function aaaa()
  {
     alert("调用函数");
  }
var length = arguments.length		//多个传参

<input type="button"  value="点击我" onclick="aaaa();" />  

参数传递
值传递只传递值，参数为对象时是引用传递

function P(x,y){
    this.x = x;
    this.y = y;
//公共方法
P.prototype.move = function(sX,sY){
    this.x += sX;
    this.y += sY;
}
}

var point = new P(1,1)		//point以P为原型克隆创建函数，这种方法避免P.move输出function
P.move(2,1)					//从公共属性里查找方法

事件方法

弹出提示

alert("str");						//弹出提示字符串
alert(hello);						//弹出提示变量
prompt("提示"，"默认输入值")；			//可输入值对话框
confirm("str")；						//消息确定取消对话框

打开新窗口

window.open('URL', '窗口名称', '参数字符串')
名称.close();		//关闭

窗口名称
_blank：在新窗口显示目标网页
_self：在当前窗口显示目标网页
_top：框架网页中在上部窗口中显示目标网页
代码 参数 作用
top(width) Number 方向上间隔像素
menubar yes,no 菜单
toolbar yes,no 工具条
scrollbars yes,no 滚动条
status yes,no 状态栏

事件

onclick 		//鼠标单击
onmouseover  	//鼠标经过
onmouseout 		//鼠标移开
onchange 		//文本框内容改变
onselect		//文本框内容被选中
onfocus			//光标聚集
onblur			//光标离开
onload			//网页导入
onunload		//关闭网页

时间对象

var date = new Date(2012, 10, 1);	//获取时间
date.get/set 	返回\设置	
FullYear()		//年份(四位数表示)
Year()			//年份
Month()			//月，0为1月
Date()			//日
Hours()			//小时，24制
Minutes()		//分钟
Seconds()		//秒钟
Time()			//时间(毫秒计)，以此转为num后传入new Date()即可

字符串

string
String()								//转数字
\"										//转义
.toLowerCase()							//转为小写字母
.toUpperCase()							//转为大写字母
.charAt(string.length-1)				//返回最后一个字符
.indexOf(a, b)							//检索a(区分大小写)，从b位置找，可设.length-1
.indexOf("o",string.indexOf("o")+1))	//检索第二个,当无时，返回-1
.split("",3)							//分割每个字符，分割3次，可为正则
.slice(起点,终点(可为-1))					//和下面一样
.substring( 起点 ， 终点(不包含)? )
.substr(起点,长度)
.search(re)							//正则，返回索引位置，未找到为-1
.match(re)							//返回匹配到的字符，+g为全局，返回所有，未找到为null
.replace(re|字符串,替换字符串)      //.replace(/\s+/g, "")替换空字符串

数学方法

parseInt('')					//字符串转整数,遇到字母停止转换
parseFloat('')					//字符串转浮点
Number('100.1')					//有字母就NaN
(100.123).toFixed(2)   			//保留小数点

对象方法

.constructor()				//获取对象由哪种方法构造
.toString()					//转字符串方法
.hasOwnprorerty("属性")		//是否包含某种属性，返回布尔值

数组

arr

原始数组被改变
.forEach()					//遍历数组，传入函数fun(item){a.b +=5;}
.reverse()					//倒序
.sort()						//排序，a-b低-高，b-a高-低
.push()						//在最后添加数组
.unshift()					//在最前添加数组
.shift()					//取出第一个元素，且被删除
.pop()						//取出最后一个元素，且被删除
.splice(索引位置，删掉几个，插入元素)

对原数组没有修改
.slice(包含开始，不包含结束)	//获取索引数组数据
newArr.concat()					//合并数组
.join(";")					//合并数组，用分号隔开
.map(函数)					//返回新的数组
.reduce(函数,初始值)			//返回一个数值，求和

正则

/1/.test('1')				//返回true|flase，只要包含则true
匹配一个位置 描述
^ 起始位置
$ 结尾位置
\b 单词边界
匹配一类字符串 描述
[abc] abc中一个
[0-9] 一个数字
[^0-9] 非数字的一个字符
[a-z] 一个字母
. 任一字符(换行除外)
特殊意义的字符 描述
\d 等价[0-9]
\D 非数字[^0-9]
\s 空白符
\S 非空白符[^\s]
\w [A-Za-z0-9]
(a b)或[ab]
量词 描述
{m,n} m到n次
* 无穷次{0,}
? {0,1}
+ {1,}
\w [A-Za-z0-9]

一般添加’.’来匹配到换行符，然后返回false开始回溯
贪婪模式:根据表达式去匹配尽可能多的内容。回溯:当匹配为false时则回溯到倒数第一个true，返回结果

非贪婪模式(惰性模式)，添加’?’:匹配尽可能少的内容。回溯:匹配到第一个true就结束

独占模式，添加’+’:同贪婪，匹配为false不会回溯，直接结束匹配

捕获 描述
() 捕获
(?:) 不捕获 
str.match(正则表达式)		//捕获字符串
str.replace(正则,'替换内容$1')		//正则捕获的结果保存在$里，如果捕获5，则自动改为$5

JSON

JSON.parse(文本,转换函数?)					//JSON转JS对象，IE6,7不支持
JSON.stringify(数值,[想要传入的属性名称]?)		//JS对象转JSON
IE6.7支持方式
if (!window.JSON){
    window.JSON = {
        parse: function(sJSON){
            return eval('(' +s.JSON+')');
        }
        stringify: function(){
            //...
        }
    };
}

JS高级篇

类型

原始类型和对象类型

直接定义为原始类型，存储于栈内存
var a=123; 栈内存的复制为深拷贝，创建新的内存值与变量

对象类型存储于堆内存，{}[] 创建新对象为浅拷贝，指向原有变量的堆内存

隐式类型转换

  • 数字+字符串=字符串
  • .转为对象类型

隐式类型转换结果(特殊)

类型 原值 布尔 数字
Undefined Undefined NaN
Null null 0
String “” false
String “la” NaN
Number NaN false
Object {} true NaN
有数字的几乎都为true，false的Number为0，原值多少String就是多少，Object为类型+值。所有的对象都为true。
转换方式:Number(num.value)
  • Number(),String(),Boolean()
  • parseInt(),parseFloat() //转为整数，浮点
  • !,!! //两个!!取到对象的布尔值

类型识别

typeof

typeof "jerry";	//"string"
typeof undefined;//"undefined"
typeof null;//"object"
typeof {name:"a"};//"object"
typeof function(){}
  • 可以识别标准类型，Null除外
  • 不能识别具体的对象类型，function除外

instanceof

[] instanceof Array	//true
/\d/ instanceof RegExp //true
1 instanceof Number //false
"jerry" instanceof String //false
  • 判别所有对象类型
  • 不能判别原始类型

Object.prototype.toString.call

function type(obj){
    return Object.prototype.toString.call(obj).slice(8,-1)}
  • 识别标准类型以及内置对象类型
  • 不能识别自定义的对象类型

constructor

  • 构造对象的构造函数本身
  • 判断标准类型(undefined/Null除外)
  • 判别内置对象类型
  • 判别自定义对象类型

函数

函数定义

JS执行前会解释部分代码

function a(){} 函数声明

  • 可以在函数定义前被调用(函数定义前置)
  • 同名以最后的为准
  • 作用域:逐级向上查询

var a = function (){} 函数定义

  • 不能再函数定义前调用
  • 作用域:只能访问本地作用域和全局作用域

函数调用

  • 函数调用模式 add(1)
    this指向全局
  • 方法调用模式 add.a(1)
    this指向调用者
  • 构造函数调用模式 var a = new Function()
    this指向被构造的对象
  • apply(call)调用模式
    this指向第一个参数

arguments

  • Array-like
  • arguments[index]
  • arguments.lenth

函数传参

  • 按值传递
  • 原始类型变量
  • 按共享传递
  • 对象类型

first-class function

  • 函数作为参数
  • 异步回调函数
  • 函数作为返回值
  • function.prororype.bind()接受第一个参数，绑定在var对象中，执行var对象或者给var对象传入参数才会执行
  • 柯里化:接受一个参数,return一个函数用来接受余下函数

原型

  • 原型：以一个具体函数为对象创建一个对象
  • 类:抽象出一个对象，以此创建一个类

构造方式

  • Object.create(proto)
  • proto 一个对象，作为新创建对象的原型，原型为_proto_
  • 构造函数
  • 使用prototype设置原型
  • 使用new创建对象` var a = new b(‘’)
  • 创建后构造函数中有原函数名的方法
  • obj.hasOwnProperty('属性')判断属性是否是自身的属性，返回布尔值

原型链

构造出的的函数删除修改自身属性都不会影响原型，且可以访问原型上的方法

变量作用域

  • 静态作用域
  • 称为词法作用域
  • 由程序定义的位置决定
  • 动态作用域
  • 查找栈内最后的对象
  • 词法环境
  • 形参
  • 函数声明
  • 变量
  • …
  • 环境记录初始化:声明提前，匿名函数指向父元素
  • 函数声明会因为初始化时而被定义作用域
  • 函数定义会随着环境的改变而改变作用域

闭包

子函数访问父函数的对象的作用域

  • 保存函数的执行状态
  • 封装
  • 保存在return{}内使用各种方法

  • 性能优化

    function add(){ var i = 0; return function(){ alert(i++); } } var f= add(); f(); f();

以上代码由于返回一个保存外部环境的匿名函数，导致i的没有被释放，i的值被保存，之所以执行两次后i === 2

  • 闭包由函数与其相关的引用环境组合而成
  • 闭包允许函数访问其引用环境中的变量(又称自由变量)
  • 广义上说，所有JS的函数都可以称为闭包，因为JS函数在创建时保存了当前的词法环境

闭包的应用

  • 保存现场

以下方式导致alert(i)只会是length的值

function add(nodes) {
    for (var i=0;i<nodes.length;i++) {
        nodes[i].onclick = function() {alert(i);}
}}

正确方式,每次执行调用helper(i)保存现场 

function add(nodes){
    function helper(i){
        return function(){alert(i);}    
for (var i=0;i<nodes.length;i++){
    nodes[i].onclick = helper(i)}
}
  • 封装
  • 外部变量无法访问内部，内部可以访问外部
  • return{}中添加匿名函数方法

面向对象

全局变量

  • var a = 'a'
  • window.a = 'a' 定义在window上的属性，可以使用Delete方法删除。
  • 函数内var a; 同上
  • 函数内var a=b='a' b定义到全局上了
  • 函数内a='a' 定义为全局

封装

对象中

  • 私有方法–访问–私有属性、公有属性
  • 公有方法–访问–私有方法、私有属性、公有属性

定义方法

无信息隐藏

function a(){
    this.a=null;this.step1=function(){}} 

function a(){
    thisa=null}  
var pro=a.prototype;
pro.step=function(){}

信息隐藏(外部无法访问,由人为约束)

function a(){
    var _a=['a'];
    this.getConfig=function(){
        return _a;}}
pro._step=function(){}

继承

类继承 

(function () {
    function ClassA() {}
    ClassA.classMethod = function () {};

    function ClassB() {
    ClassA.apply(this,arguments);
        }

    ClassB.prototype = new ClassA();
    ClassB.prototype.constructor = ClassB;
    ClassB.prototype.api = function () {
        ClassA.prototype.api.apply(this,arguments);
        };

    var b = new ClassB();
    b.api();
    })();

ClassA是父类，ClassB是子类
原型继承

(function () {
    var proto = {
        action1: function () {},
        action2: function () {}
    };
    var obj = Object.create(proto);
})();

不支持ES5原型继承的解决方案

var clone = (function () {
    var F = function () {};
    return function (proto) {
        F.prototype = proto;
        return new F();
    }
})();
JS