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] 匹配a或b
量词 描述
{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();
    }
})();