Net学习日记_Js高级
一.Js高级
1.基本数据类型(值类型) 和 复杂数据类型(引用类型)
怎么判断?
凡是 instanceof Object 返回为true的,都是复杂数据类型。
2. 对象 和 Json
//2.Object 动态设置属性 var o = new Object(); o.id = 1; o["name"] = "james"; //2.1对象字面量表示法 var o1 = { id: 1, name:"哈哈" };
Json 是数据在程序间传输的一种 数据格式(轻量级数据传输格式)
//2.2Json格式字符串 注意:字符串里的属性名和属性值必须有【双引号】扩起来 var strJson = '{"id":"1","name":"哈哈"}'; //2.2.1 使用eval将json字符串转成 obj,注意:加 () var jsonObj = eval("(" + strJson + ")"); alert(jsonObj.name); //2.2.2使用JSON.parse将字符串转成 obj 注意:推荐使用此种方式,可以过滤掉不安全的js代码字符串 var jsonObj = JSON.parse(strJson); alert(jsonObj.id + ":" + jsonObj.name); //2.2.3将对象 转成 json格式字符串 var strJsonNew = JSON.stringify(jsonObj); alert(strJsonNew);
Json传输容量小,简便。
3.数据类型
3.1Function
3.1.1声明式函数 特点:浏览器优先于其它执行js加载此声明式函数 //A(1);//可以在声明式函数 之前 调用此函数! function A(a1) { alert("123"+a1); } //alert(A instanceof Function);//true 3.1.2匿名方法 var Ano = function (a,b) { alert(a);}; //alert(Ano instanceof Function);//true 3.1.3对象方式 注意:最后一个参数永远是方法体代码字符串,前面的参数就是 改方法对象的 形参 var funC = new Function("a","b","alert('123,'+a+','+b);"); funC("hhaa ","吼吼"); //alert(funC instanceof Function);//true 3.2 Undefined 代表未定义,只有一个值:undefined 3.2.1声明但未赋值,默认就是undefined var undef; alert(undef == undefined);//true 3.2.2方法没有return,默认 返回 undefined function testUn() { } var tes = testUn(); alert(tes == undefined);//true 3.3Null 代表空引用 var objN = new Object(); objN = null; //null 和 undefined 都代表"没有",所以js把他们看成相等 alert(null == undefined); //可以用 全等号 区别 alert(null === undefined); 3.4Boolean var boolV = true; alert(boolV == true); alert(boolV == 1);//js中 true==1 false==0 3.5Number 3.5.1包含 整数和浮点数 var numb = 1; //alert(typeof numb); var numF = 1.11; //alert(typeof numF); 3.5.2判断变量是否是 数值 //isNaN 判断不是数值!:如果不是数值返回true,如果是数值返回false alert(isNaN("asdf")); 3.5.3转换 var intN = parseInt("111"); var floatF = parseFloat("111.11"); 3.6string字符串 length:得到长度 split:根据指定分隔符拆分字符串 substr:从下标为第一个参数的地方截取到第二个长度的内容 substring:从下标为第一个参数的地方截取到下标为第二个参数的内容 trim:去除字符串两头的空格 indexOf:找到指定字符或字符串在这个字符串里第一次出现的位置 lastIndexOf:找到指定字符或字符串在这个字符串里最后一次出现的位置 charAt:找到指定下标位置的字符
4.检测数据类型
4.1 typeof:用来检测基本数据类型变量的数据类型,返回值 【变量类型字符串】
语法: typeof num1 / typeof(num1)
另外:是js里的关键字,不是一个方法!但也可以使用 typeof() 语法。
4.1.2检测【基本数据类型】 var s ="hahaha"; //var不是说变量没有类型,而是确定类型的时间推迟到运行这句代码时 alert(typeof s); //string alert(typeof(s));//string alert(typeof 110);//number 4.1.2如果用来判断【引用类型】对象,那么永远都返回Object alert(typeof null);//Object
5.方法的内部属性 arguments
//4.1arguments //方法的实参数组 function testArgument() { //模拟函数重载! if (arguments.length == 1) { alert("哈哈~1"+arguments[0]); } else if (arguments.length == 2) { alert("哈哈~2" + arguments[0] + "," + arguments[1]); } else { alert("哈哈~3"); } } testArgument(); testArgument(1); testArgument(1, 2);
注意:js中方法本身是没有重载的,因为:
1.方法的本质就是一个Function类型的变量,如果出现同名的变量,会覆盖!
但是依靠函数内部属性argument来模拟重载!
补充:动态删除对象属性 var oDel = new Object(); oDel.id = 1; alert(oDel.id);//1 //删除对象的 属性 delete oDel.id; alert(oDel.id);//undefined
6.js没有块级作用域
function testBlock() { if (1 == 1) { var ablock = 1; } alert(ablock);//1 for (var i = 0; i < 10; i++) { } alert(i);//10 try{ var tr="try"; }catch(e){ } alert(tr);//try }
补充:关于自动垃圾回收
1.主要针对 引用类型 对象(针对 堆空间),垃圾回收期会定时检查堆空间里的对象,一旦发现对象没有被任何地方引用的话,就把它删除销毁。
2.引用类型:
如果是局部变量,则方法执行完毕后变量被销毁,但对象要等待垃圾回收期来销毁。
如果是全局变量,也是跟随全局对象存放,它的销毁依赖于 全局对象。
3.值类型:
如果是局部变量,则方法执行完毕后立即被销毁。
如果是全局变量,直接跟随全局对象存放在堆中。它的销毁要看这个全局对象的销毁状态。
补充:全局和局部变量
全局变量:直接跟着全局对象存放在堆中;
局部变量:在执行方法的时候,会在执行当前方法的线程栈和堆中 创建 值类型和引用类型变量。
总结:只有值类型的 局部变量才会存在栈中,全局变量不管是什么类型都存在堆里。
function test() { //局部变量 var num = 1;//方法执行完 即销毁 var objNum = new Object();//方法执行完,变量被销毁,但堆空间里的对象 要等垃圾回收器销毁 } test();//注意:方法里的代码要被调用的时候才会执行,才会生成局部变量 //而全局变量,则直接属于window,只有当窗体被关闭或刷新的时候 才跟随window一起销毁 var temp = 1; var tempObj = new Object();
7.数组
7.1js数组不限制元素类型 var arr = [1, 2, "asdf", new Object()]; alert(arr.length);//4 //7.2数组长度可变 arr.length = 10; alert(arr.length);//10
7.2数组当 栈和队列使用
7.3数组当栈使用 栈(LIFO-LastInFirstOut-后进先出)方法 //第一种:unshift(),shift() //第二种:push(),pop() var arrStack = []; arrStack.unshift("尾巴进来的第1个"); arrStack.unshift("尾巴进来的第2个"); arrStack.unshift("尾巴进来的第3个"); arrStack.unshift("尾巴进来的第4个"); alert(arrStack.length); for (var i = 0; i < 4; i++) { alert(arrStack.shift()); }
7.4数组当队列使用 队列(FIFO-FirstInFirstOut)方法 //第一种:push(),shift() //第一种:unshift(), pop() var arrQue = []; arrQue.unshift("尾巴进来的第1个"); arrQue.unshift("尾巴进来的第2个"); arrQue.unshift("尾巴进来的第3个"); arrQue.unshift("尾巴进来的第4个"); alert(arrQue.length); for (var i = 0; i < 4; i++) { alert(arrQue.pop()); }
7.5反转数组 var arrReverse = [4, 3, 1, 6, 8]; alert(arrReverse); arrReverse.reverse(); alert(arrReverse);
7.5 排序
var arrSortObj = [ { age: 18, name: "I笑傲呗" }, { age: 118, name: "乌龟" }, { age: 218, name: "王八" }, { age: 108, name: "蛤蟆" } ]; for (var i = 0; i < arrSortObj.length; i++) { document.body.innerHTML += arrSortObj[i].name + "," + arrSortObj[i].age + "<br/>"; } arrSortObj.sort(function (x, y) {//方法的参数,有sort方法内部传入(升序),方法的返回值约定:x > y 返回 正数,x=y 返回0,x<y 返回 负数 return x.age - y.age; }); document.body.innerHTML += "排序后:<br/><br/>"; for (var i = 0; i < arrSortObj.length; i++) { document.body.innerHTML += arrSortObj[i].name + "," + arrSortObj[i].age + "<br/>"; }
8.arguments
实参数组对象: 是一个 类(似)数组 对象
内部属性arguments的callee
8.1让我们来看一个函数递归的问题 var facorial = function (num) { if (num <= 1) return 1; else return num * facorial(num - 1);//facorial是一个函数变量,其内部保存了函数的地址,但也可以在外部被修改指向其它的函数地址。从而破坏了递归应用。(很危险) } alert(facorial(5)); //5*4*3*2*1=120 var another = facorial; alert(another(5));//5*4*3*2*1=120 facorial = function () { return 1; } alert(another(5));//5*1=5 alert(facorial(5));//1
【解决方案】: var facorial = function (num) { if (num <= 1) return 1; else return num * arguments.callee(num - 1);//calle保存当前函数的引用,一般递归使用 } alert(facorial(5)); //5*4*3*2*1=120 var another = facorial; alert(another(5));//5*4*3*2*1=120 facorial = function () { return 1; } alert(another(5));//5*4*3*2*1=120 alert(facorial(5));//1
9.函数内部属性this
this引用的是函数据以执行操作的对象,也就是 函数在执行时所处的作用域
通俗:就是哪个对象.出了这个函数,那么函数里的this就代表哪个对象
window.color = "blue"; var o = { color: "red" }; function sayColor() { alert(this.color);//谁.出这个方法,这个this就是谁 } sayColor();//blue o.sayColor = sayColor; o.sayColor();//red
function each(arr,func) { if (arr instanceof Array) { for (var i = 0; i < arr.length; i++) { var item = arr[i]; //通过 函数对象的 call/apply方法 改变函数的作用域(为被调用的函数 里的 this 赋值) //func.call(item, i, item); func.apply(item, [i, item]); } } } var arr = [1, 2, 3, 4, 5]; each(arr, function (index,item) { //alert(index + ":" + item); alert(this); });
这样扩充的最大好处就是对象不需要与方法有任何耦合关系。
10.方法的属性(区别方法内部属性)
10.1length 代表方法的形参个数 //9.1 length 函数的形参 function testLength(name,id,cc) { //arguments.length //alert(arguments.callee.length); } //获取函数testLength形参的个数 //testLength.length //将方法对象传入此方法,会根据 传入方法的形参个数决定传什么值! function invokeFun(func) { //当传进来的方法的形参是2个的时候 if (func.length == 2) { func("哈哈","哇哈哈哈哈~~~"); } else if (func.length == 3) { func(1, 2, 3); } }
10.2方法属性:prototype,让那个所有方法实例共享数据的地方 //9.2方法原型 function Person(name, age) { //相当于 C#里的 类和 构造函数 的"综合体" ,Person : Object this.name = name; this.age = age; //this.sayHi = function () { alert("123123"); }; } //Person.prototype是Person 实例共享数据的地方 Person.prototype.sayHi = function () { alert("123123"); }; /* new 关键字: 0.开辟堆空间 1.创建一个 Person 实例,内部没有任何成员,除了 "继承" 自 Object的成员;就相当于是一个Object实例! 2.调用 同名构造函数,将 实例 设置给了 函数中的 this,从而 可以通过 这个函数 为每个new出来的Person实例 添加相同的属性!!!!! 3.返回 实例 的地址 */ var p1 = new Person("james2", 28); var p2 = new Person("james3", 21); alert(p1.sayHi === p2.sayHi);//true
10.3方法对象的call:动态修改方法里的this var sayColor= function (name,age){ alert(this.color + ":" + name + ":" + age); } var oC = new Object(); //将 方法引用 设置给了 oCol的sayColor属性 oC.sayColor = sayColor; oC.color = "red"; //oC.sayColor("james",18);//red var cNew = new Object(); cNew.color = "yellow"; oC.sayColor(); //方法的call方法,用来动态修改 方法执行时的 this //执行 sayColor的同时,将sayColor方法里的this 修改成 colorNew oC.sayColor.call(colorNew, "james",18);//yellow var color = "green"; //执行 sayColor的同时,将sayColor方法里的this 修改成 window oC.sayColor.call(window, "james", 18); 方法对象的apply:动态修改方法里的this //9.4 apply 改变方法的this,但 实参必须作为一个数组传入 var sayColor = function (name, age) { alert(this.color + ":" + name + ":" + age); } var oC = new Object(); //将 方法引用 设置给了 oCol的sayColor属性 oC.sayColor = sayColor; oC.color = "red"; var cNew = new Object(); cNew.color = "yellow"; //方法的call方法,用来动态修改 方法执行时的 this //执行 sayColor的同时,将sayColor方法里的this 修改成 colorNew oC.sayColor.apply(cNew, ["james", 18]);//第二个参数必须是数组
10.eval执行代码字符串
function aa() { var strCode = "var aeval =1;"; //eval方法里的代码就相当于在eval方法当前所在的作用域中执行 eval(strCode);//相当于在此处 执行代码 var aeval =1; }
window.onload = function () { document.getElementById("btnOk").onclick = function () { var strCode = document.getElementById("txt").value; //eval方法 可以直接调用 浏览器的js引擎,直接执行 传入的 js代码字符串 eval(strCode); }; }; //2.eval 中创建的变量 就是添加到 了 当前 eval所在的执行环境 //2.1全局执行环境下 调用 eval 创建变量,那么这个变量就 添加到了 window下 var str1 = "var i=0;"; eval(str1); //alert(i);//? 0 //2.2在方法中 调用 eval 创建变量,那么这个变量 就添加到了 函数的作用域中(局部变量) function testEval() { eval("var a =123;"); alert(a); } testEval(); var res = eval("1+2+3"); alert(res);//? 6
11.new创建对象
<script type="text/javascript"> //alert(Object instanceof Function); //var res = Object(123); //alert(res); function Person(age,name) { //this是 new关键字 创建的对象 this.age = age; this.name = name; this.sayHi = function () { alert("age=" + this.age + ",name=" + this.name); }; //alert("Person的构造函数!" + this);//此时,this是 new关键字 创建的对象 } var p1 = new Person(12, "刘德华"); //p1.sayHi(); var p2 = new Person(21, "习"); //p2.sayHi(); //通过 call 方法 模拟 new 关键字创建对象 //var p3 = new Object();//1.创建一个对象 //Person.call(p3, 99, "神州");//2.将对象 传给 Person 方法的 this,Person方法为 对象添加 属性 //p3.sayHi(); alert(p1 == p2);//false </script>
<script type="text/javascript"> function Person(age,name) { //this是 new关键字 创建的对象 this.age = age; this.name = name; } //prototype(原型) 相当于是 某个 ”类“ 的 共享成员表(共享变量,共享方法) Person.prototype.sayHi = function () { alert("age=" + this.age + ",name=" + this.name); }; var p1 = new Person(12,"刘德华"); //p1.sayHi(); var p2 = new Person(21, "习"); //p2.sayHi(); alert(p1.sayHi === p2.sayHi);//true 证明:每个Person对象 都使用一个 共同的 sayHi 方法对象 </script>
11.模拟继承
<script type="text/javascript"> function Mother() { } //1.定义"父类" function Father(name, age) { this.name = name; this.age = age; } Father.prototype.sayHi = function () { alert(this.name + "," + this.age); }; //2.定义子类 function Son(name, age,gender) { this.gender = gender; Father.call(this, name, age);//3."继承" "父类" 的成员 } Son.prototype = new Father();//4.继承父类 的 方法 Son.prototype.fungame = function () { };//5.为子类原型添加一个子类特有的方法 //创建父类对象 var f1 = new Father("JamesZou", 29); f1.sayHi(); //创建子类对象 var s1 = new Son("jameszou's son", 1, true); s1.fungame(); </script>
12.闭包
闭包:指有权 访问另一个函数作用域中的变量的 函数 function biBaoCreater() { var date = "2013-01-26"; return function () { alert("今天:" + date); }; } var biBao = biBaoCreater();//变量 biBao 就是一个 闭包 biBao();//闭包 会延长 内部引用到的外部作用域的生命周期