JavaScript高级程序设计 笔记

JavaScript高级程序设计笔记
笔记
1. 将所有的变量集中起来放在文件的开头,这样所有的变量都被定义,只是没有初始值,显示的虽然都是undefined.
2. 养成良好的编码习惯,加分号;
3. 闭包就是设定一定的作用域；
4. JQuery 动画-animate()使用方法:

.$(selector).animate({params},speed,callback);
$(“button”).click(function(){
        $(“div”).animate({left:’250px’});
});
$(“button”).click(function(){
        $(“div”).animate({
        Left:’250px’,
        Opacity:’0.5’,
        Height:’150px’,
        Width:’150px’
});
});

5 jQuery方法链接

$(“#p1”).css(“color”,”red”).sliderUp(2000).sliderDown(2000);

6 javascript的DOM操作
DOM选取文本元素的方法
通过id选取

Var section1 = document.getElementById(“section1”);

通过name选取

Var radiobuttons = document.getElementsByName(“facoriter_color”);

通过标签选取

Var spans = docunment.getElementsByTagName(“span”);
Var spans = document.getElementsByTageName(“span”)[0];

查找第一个p元素的所有span元素

Var firstpara = docunment.getElementByTagName(“span”)[0];
Var firstSpans = firstpara.getElementByTagName(“span”);

通过css类选取
元素基于属性值选取如
P[lang=”fr”]意思就是所有使用fr的段落如html这样写

通过css选择器选取
7. 设置计算属性

e.style.marginTop =topMargin +”px”;
e.style.left=(x0 + left_margin + left_border + left_padding) + “px”;

1. 8.

 var result = “Brick”.toLowerCase()  < “alphabet”.toLowerCase();//false
    Var result =”23”<”3”;//true
    Var result =”23”<3;//false

相等==和全等===
相等是转换数据类型后的值做比较
Var result =(“55”==55);//返回值true,因为字符串”55”将通过number()函数转换成了number数字类型55
Var result =(“55”===55);//返回值false,因为一个是字符串,一个是number类型
全等是不转换数据类型直接比较包括数据类型是否一样

9 Return 语句在不带任何返回值时,停止执行函数并返回undefined;此时函数体内没有写任何内容.

10 ECMAScript函数传递任意数量的参数,并且可以通过arguments对象来访问这些参数,比如:arguments[0]代表第一个函数的参数,arguments[1]代表第二个参数,一次类推.因为内部是数组表示的,可以定义1个参数,传3个参数,也可以定义3三参数,传1个参数,都不会有问题.
11. 内部环境可以通过作用域链访问所有的外部环境,但外部环境不能访问内部环境中的任何变量和函数.因为ECMAScript规定了作用域范围,只能向上访问父级,向上搜索作用域链,以查询变量和函数名,但任何环境都不能通过向下搜索作用域链而进入另一个执行环境.
12. 函数中的参数被当做变量,所以访问规则与执行环境中的变量是相同的.
13. Instanceof操作符用于检测对象类型,如果检测基本类型,则一直显示false,因为基本类型都不是对象.
14. Js没有块级作用域,什么叫块级作用域,就是{}里面的内容执行完就是一块,然后立刻被销毁,但js就不会立即销毁,而是在全局执行环境中都可以再调用.如代码

If(true) {
    var color = “blue”;
}

If语句就是一个块级作用域,其他语言的话if执行完后就被销毁了,但是在js中,在if外面写一个弹窗
Alert(color);
Color的值是blue,if语句中变量的声明会将变量继续添加到最新的当前的执行环境中,就是在if外部任然会存在,并且可以调用
以此证明任然能够调用if内部的变量,所以js没有块级作用域.
15. 局部变量只在函数内部执行,而全部变量则在全部环境中都可以被调用,如果初始化变量时,没有使用var声明,该变量就会被当做全局变量,被添加到全局环境中当成全局变量来使用.即使函数以及执行完毕,后面的代码依旧可以访问它.所以我们在初始化变量前,一定要先声明.(就像我们要叫一个孩子的名字的时候,我们首先要知道他叫什么,要知道他叫什么,我们首先要给你取一个名字一样,形象吧,哈哈)
16. 当我们要想知道某一个标识符比如函数的执行结果,那么我们可以alert(函数)来查看结果.
17. 变量声明(声明就是定义的意思)了没有初始化,那么会返回一个undefined值,但是如何变量连声明都没有的话,更谈不上初始化,结果就会是浏览器直接报红错 is not defined
18. 垃圾收集机制原理:找出那些不再继续使用的变量,然后释放其占用的内存,垃圾收集器会按照固定的时间间隔或者执行预定的收集时间周期性地执行垃圾回收操作.
19. 查找标识符,标识符是从局部环境开始查找,搜索过程一直向上追溯到全局环境的变量对象,从局部—–>到全局.先搜索局部,局部没有再搜索全局,一层一层往上,往外搜索.如果要使用全局变量,如var color =”red”;可以用window.color;
搜索例子:

var color =”red”;
function getColor(){
var color =“blue”;
return color;
}

alert(getColor());//最终弹出结果是blue,如果没有定义var color =”blue”,则弹出结果为red

20. 第四章,内存优化垃圾收集,局部变量只在函数执行过程中存在,函数执行完,变量销毁,释放内存,标记消除垃圾方式:进入环境,标记变量,离开环境,再标记为离开环境,例如进入的时候定义一个进入变量.
21. 管理内存,web分配的内存要少于桌面应用的.避免javascript脚本耗尽内存导致系统崩溃.
优化内存的最佳方式就是使用全局变量后,将变量值设置为null.来释放引用,即解除引用,真正作用是让值脱离执行环境,以便垃圾收集器在下次运行时将其回收.
22. 作用域:作用域其实就是代码所需要运行的执行环境,在哪里执行,哪里就是它的作用域.也就是作用的范围,执行的环境而已,就这么简单.而且作用域也就是执行环境决定了变量的生命周期,以及哪一部分代码可以访问哪一个作用域内其中的变量
23. 作用域链:就是当创建一个函数的时候,相应的就创建了一个作用域链,作用域链的目的其实就是一个从内到外搜索的一个过程,一条有序的链条,由局部到全局,由最近到最远,由内到外搜素执行,这样就形成了作用域链.
24. 很重要的一点:函数的局部环境不仅能访问函数作用域中的变量,而且有权访问其包含父环境,乃至全局环境;但是全局环境只能访问全局环境中定义的变量和函数,而不能直接访问局部环境中的任何数据;
25. var person =new Object();object()在这里就是一个构造函数,构造函数,顾名思义就是构建创造一个新的东西,ECMAScript中提供了很多原生引用类型,构造函数就是引用类型中的一种,Object()也是一种引用类型.
26. 三种创建一个新对象的方法,创建Object实例的三种方式
第一种,new操作符后跟Object构造函数

new person = new Object();
        person.name=”yinleyi”;
        person.age = 25;

第二种,对象字面量表示法

new person={
        name:”yinleyi”,//注意此处打逗号,用来分割不同的属性
        age:25//而25是这个对象的最后一个属性,如果打逗号会报错.
}

第三种,也是第一种的简写

new person={};
        person.name=”yinleyi”;
        person.age=25;

1. Object的方法和属性

constructer,hasownproperty,isprototypeof,propertyisenumerable,localstoage,tostring,valueof

constructor,hasOwnProperty,isPrototypeOf,propertyIsEnumerable,toLocaleString,toString,valueOf

1. array类型,创建数组的基本方式
   1.使用 Array构造函数

1.1  var colors = new array();
1.2 var colors = new array(3);
1.3 var colors =new array(“yellow”,”blue”,”red”);

2.1数组字面量表示法

2.2 var color =[];//空数组
2.3 var color =[“red”,”blue”,”yellow”];

1. 在读取和设置数组的值时,要使用方括号[]并提供相应值得基于0开始的数字索引
2. 使用instanceof操作符能够对数据进行检测

    If( value instanceof Array){
    //对数组执行操作
}

1. Array.isArray()方法,确定某个值是不是数组

    If(Array.isArray(value)){
    //对数组执行操作
}

1. 对象都具有toLocaleString().toString().valueOf()方法,数组调用valueOf()返回数组本身,而调用数组的toString()方法会返回由数组中每个值得字符串形式拼接而成的一个以逗号”,”分隔的字符串,其中toString()方法是会自动隐式调用的.
2. 数组使用join()方法,则可以使用不同的分隔符来构建这个字符串,join()方法只接受一个
   参数

例子:var Colors = [“red”,”green”,”blue”]; 
        Alert(colors.join(“,”));
        Alert(colors.join(“||”));
        Alert(colors.join(undifined));
        Alert(colors.join());

1. 栈方法
   push()推入,添加数组到末尾,并返回添加数组的长度length
   pop()移除,从数组末尾移除最后一项,并返回移除那一个值.
   队列方法
   shift()移除,移除第一项,并返回第一个值
   unshift()添加在第一位添加任意个项,并返回长度length
   注意:添加返回长度,移除返回移除的值
2. reverse()和sort()重排序方法.

Var values =[1,2,3,4,5];
    Values.reverse();
    Alert(values);//5,4,3,2,1

1. 操作方法concat()方法可以基于当前数组中的所有项创建一个新数组.

Var colors =[“red”,”blue”,”yellow”];
Var colors2 = colors.concat(“black”,”green”,”brown”);
Alert(colors2);//打印结果为red,blue,yellow,black,green,brown

1. 数组操作方法slice()只有一个参数的时候,返回指定位置开始到当前数组末尾的所有项,
   有两个参数的时候,返回起始和结束位置之间的项,但不包含结束位置的项

    Var colors =[“red0”,”blue1”,”yellow2”,”purple3”,”black4”];
    Var colors2 = colors.slice(1);//打印结果为blue1,yellow2,purple3,black4
    Var colors3 = colors.slice(1,4);//打印结果:blue1,yellow2,purple3

1. 数组操作方法splice()执行删除,插入,替换操作

Var colors = [“red”,”blue”,”yellow”];
Var removed =colors.splice(0,1);//删除第一项,返回结果为blue,yellow,要删除的第一项的位置和要删除的项数
    Var insert = colors.splice(1,0,”yellow”,”orange”)//从位置一开始,插入两项
    Var delete = colors.splice(1,1,”red”,”purple”);//插入两项,删除1项
Splice()的第一个参数书其实位置,第二项是删除的项,后面是要添加或者替换的内容

1. 数组的位置方法indexOf()要查找的项和查找起点位置的索引

    Var numbers=[1,2,3,4,5,4,3,2,1];
    Alert(numbers.indexOf(4));//要查找元素4,返回元素4的索引位置,即第3位.
    Alert(numbers.indexOf(4,4));//要查找元素4,从第4位开始.返回结果为第5位

1. 迭代方法

every()对数组中的每一项运行给定函数,如果该函数对每一项都返回true,则返回true
filter()返回该函数会返回true的项组成的数组;
forEach()
map()返回每次函数调用的结果组成的数组
some()如果该函数对任一项返回true,则返回true

1. 归并方法
   数组归并方法reduce()和reduceright()迭代数组的所有项,并构架一个最终的返回值,接收 两个参数,第一个是每一项上调用的函数,第二项可选,归并基础的初始值
2. Date对象类型
   创建一个时间对象

Var now = new Date();
    ECMAScript提供2个方法    Date.parse()和Date.UTC(),接收一个表示日期

的字符串参数,并返回相应的日期毫秒数;
43. ECMAScript5添加的Date.now()方法

var start = Date.now();//取得开始时间
    add10(100);
    function add10(num){
        return num * 10;
    }
    var stop = Date.now();//取得停止时间
    var result = stop - start;//获得执行函数需要的时间
    alert(result);

1. 日期格式化方法

var now = new Date(Date.now());
    var result = now.toDateString();
    var result2 = now.toTimeString();
    var result3 = now.toLocaleTimeString();
    var result4 = now.toLocaleDateString();
    var result5 = now.toUTCString();
    alert(now);//Tue Jun 27 2017 11:51:00 GMT+0800 (中国标准时间)
    alert(result);//Tue Jun 27 2017显示年月日
    alert(result2);//11:47:52 GMT+0800 (中国标准时间)显示时分秒时区
    alert(result3);//2017-6-27
    alert(result4);//11:47:52
    alert(result5);//Tue, 27 Jun 2017 03:47:52 GMT

1. 正则表达式
   ECMAScript通过RegExp类型来支持正则表达式
   例:var pattern1 =/at/g;//匹配字符串中所有”at”的实例
   g:表示全局模式,查找所有匹配项,
   i:表示不区分大小写模式,忽略大小写
   m:表示多行,本行结束查找下一行
   \反斜杠是用来转义的.
   lastIndex表示开始搜索下一个匹配项的字符位置,从0开始
   sourse正则表达式的字符串表示
2. RegExpd对象实例的方法exec()接受一个参数,返回包含第一个匹配项信息的数组,其中这个方法还有两个属性index表示匹配项的字符串中的位置,input表示应用正则表达式的字符串
   正则表达式的第二个方法:test(),如果匹配就返回true,否则返回false
   正则表达式的构造函数的属性

Input,最近一次要匹配的字符串
lastMatch最近一次的匹配项
lasrParen最近一次匹配的捕获组
leftContext  input字符串中lastMatch之前的文本
multiline 多行模式
rightContext input字符串中lastMatch之后的文本

1. 对象Function类型,每个函数都是Function类型的实例
   函数定义方式:
   1.1 函数通过使用函数声明语法定义

Function sum (num1,num2){
Return num1 + num2;
}

1.2 使用函数表达式定义函数

Var sum =function(num1,num2){
    Return num1+num2;
};

两者的区别:函数声明会被解析器率先读取,并使其在执行任何代码之前可以访问,
          :函数表达式必须等到解析器执行到它所在的代码行,才会真正被解释执行

48. 函数内部特殊的对象
Arguments和this
Arguments是一个类数组对象,包含着传入函数中的所有参数.,对象还有一个属性callee
This属性会引用全局对象
49.

函数包含两个属性length,prototype
    函数包含两个方法apply()和call(),bind()
apply()和call()作用是可以指定作用域如
    Say.call(o);//指定对象o的作用域
    Say.call(this);//当前作用域
Say.call(window);//全局作用域
ECMAScript5定义的bind()方法:其this值会被绑定到传给bind()函数的值

1. Boolean类型是与布尔值对应的引用类型,可以调用Boolean构造函数并传入true或false值

Var booleanObject = new Boolean(true);

1. Number对象

Var numberObject =new Number(10);

1. Number类型提供了将数值格式化为字符串的方法:
   1.

toFixed()方法会按照指定的小数位返回数值的字符串表示
    var num = 10;
alert(num.toFixed(2));//打印结果为10.00,指定了2位小数
var num =10.3231;
alert(num.toFixed(2));//打印结果为10.32,还是同样的指定2位小数

2.

toExponential()方法返回以指数表示法表示的数值的字符串形式
如
Var num = 10;
Alert(num.toExponential(1));//1.0e+1

toPrecision()方法
var num = 99;
toPrecision()会根据要处理的数值决定到底是调用toFixed()还是toExpinential();

1. 53.

String类型是字符串的对象包装类型
    Var stringObject =new String(“hello yinleyi”);
    String类型的每个实例都有一个length属性

访问字符串中特定字符的方法:

1. charAt()方法基于0的字符位置
charAt()方法以单字符串的形式返回给定位置的那个字符
如

Var stringValue =”hello yinleyi”;
        alert(stringValue.charAt(1));//返回字符串中索引为1的字符,结果为”e”
        另外一种写法
        Alert(stringValue.charCodeAt([1]));//方括号的形式,结果一样

1. charCodeAt()返回的是字符的字符编码

var stringValue =”hello yinleyi”;
alert(stringValue.charCodeAt(1)); 

1. 今天我们来说一说闭包

 <div id="divTest">
        <span>0</span> <span>1</span> <span>2</span> <span>3</span>
    </div>
    <div id="divTest2">
        <span>0</span> <span>1</span> <span>2</span> <span>3</span>
    </div>
    $(document).ready(function() {
            var spans = $("#divTest span");
            for (var i = 0; i < spans.length; i++) {
                spans[i].onclick = function() {
                    alert(i);
                }
            }
        });

上面是错误滴.

var spans2 = $("#divTest2 span");
        $(document).ready(function() {
            for (var i = 0; i < spans2.length; i++) {
                (function(num) {
                    spans2[i].onclick = function() {
                        alert(num);
                    }
                })(i);

循环点击span时会用到闭包实现点击获取效果
闭包就是定义一个函数a,在函数a里面有变量I,然后在函数a里面定义一个函数b,然后函数b调用函数a的变量.就这么简单,保证了函数a里面的变量一直存在.

Function a(){
Var I = 0 ;
    Function b(){
    return I;
} 
}

1. 函数表达式:创建一个函数并将它赋值给变量function,这种情况创建的函数叫做匿名函数,也叫拉姆达函数.匿名函数就是函数表达式.函数表达式是在调用的时候才执行的,而不是如函数声明那样会函数声明提升,匿名函数开始不读取.调用才读取.
2. 今天我们来说一说原型,原型链
   这个东西比较抽象,原型鼻祖,祖先就是Object.万物皆对象.Number是原型,String是原型,但都不是最高的原型对象.
   原型链就是:继承链,利用原型让一个引用类型继承另外一个引用类型的属性和方法.比如
   Number继承了Object的所有对象和方法.

Var num = new Number();
    Num = new Object();

那么num就是继承了Number和Obejct的所有属性和方法.
所有引用类型默认都继承了Object.所有函数的默认原型都是Object的实例.
Object就是超级类型最大的类型,其余的都是它的子类型.

57. 形参和实参
形参就是函数定义的时候的参数.
实参就是函数调用的时候