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();//闭包 会延长 内部引用到的外部作用域的生命周期
