<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no"/> <meta name="format-detection" content="telphone=no, email=no"/> <meta name="apple-touch-fullscreen" content="yes"/> <meta name="apple-mobile-web-app-capable" content="yes"/> <meta name="apple-mobile-web-app-status-bar-style" content="black"/> <title>js严格模式</title> </head> <body> <a href="javascript:void (0);" class="clicka">点我</a> <a href="javascript:void (0);" class="clicka-btn">点我22</a> </body> <script type="text/javascript"> 'use strict'; var arr=[1,3,4,5,9,12,6]; function fun1(argument) { console.log("严格模式"); // body... } fun1(); /* function fun2(){ var arguments = []; console.log("arguments 严格模式下不能再定义"); } function arguments (){ console.log("arguments 严格模式下不能再定义,非严格模式可以"); }*/ //隐式转换 //字符串+其他 得到的仍是字符串 console.log('8' | '1'); //使用原始类型替代对象包裹（谨记：对象包装的原始类型和原始类型在比较相等的时候,它们具有不同的表现行为。） var s = new String('hello'); var s2= new String('hello'); var str=s+'world'; console.log(typeof 'hello'); // string console.log(typeof s); // object console.log(s===s2); //false console.log(s==s2); //false //str.someProperty = 'some'; //console.log(str.someProperty); // 输出undefined，但是如果 obeject.属性，则正确输出值 //== 在比较两边的值时，会隐性的把它们转换成同一类型的值，然后才会进行比较 //=== 直接比较，不涉及隐性类型转换。 //尽量少用全局变量,尽量使用局部变量 //若不加var则是隐性的定义了全局变量，所以定义变量时一定要加var // 闭包：熟练掌握闭包 function Container(){ var arr=[]; return { getItem:function(index){ return arr[index]; }, addItem:function(obj){ var index=arr.push(obj); return index-1; //返回添加元素的第一个元素 }, length:function(){ return arr.length; } } } var c = Container(); console.log("con的长度"+c.length()); // 0 var index1 = c.addItem({name: 'dreamapple'}); console.log(index1); // 0 console.log(c.length()); // 1 console.log(c.getItem(index1)); // Object {name: "dreamapple"} //变量声明提升（代码块中的变量声明会被隐式地提升到封闭函数的顶部） console.log(test_bl); // ***相当于把 var test提升到顶部 赋值部分 test = 1 还是在原来的位置; var test_bl=9; //若此行注释，则会报错，若不注释，则输出 undefined //2.6 使用立即调用的函数表达式创建局部作用域 // 新的函数才会产生新的作用域,JavaScript的循环没有新的作用域产生。 var testArr=[4,5,6]; function generateFun(arr){ var result = []; var len=arr.length; for (var i=0; i <len; i++) { ( function(j){ result[j]=function(){ return arr[j]; } } )(i); } return result; //返回，外面才会访问到result } // @2 产生新的函数 var g2 = generateFun(testArr); console.log(g2[0]()); //4 console.log(g2[1]()); //5 console.log(g2[2]()); //6 //2.6-2 闭包方式2 function genetateFun2(arr){ var result=[]; var len=arr.length; for (var i = 0; i < len.length; i++) { ( function(i){ var j=i; //注意此处 result[i]=function(){ return arr[j]; } } )() } return result; } var g3 = generateFun(testArr); console.log(g3[0]()); //4 console.log(g3[1]()); //5 console.log(g3[2]()); //6 //2.7 命名的表达式函数 function fun_right_mm(){ console.log('fun_right_mm'); } var fun_mm = function fun_mm_name(){ console.log('fun本身'); return fun_right_mm(); } console.log(fun_mm()); //undefined //console.log(fun_mm_name());// fun_mm_name is not defined //尽量用所以尽量使用匿名的函数表达式 //2.8 局部函数调用 //3.1理解函数调用,方法调用及构造函数调用之间的不同 /*方法调用将被查找方法属性的对象作为调用接受者。 构造函数需要通过new运算符调用,并产生一个新的对象作为其接受者。*/ function heelo(){ console.log('hello函数调用'); } heelo(); var heeloObj={ welcome:function(){ console.log('方法调用'+this.name); }, name:"小红" } heeloObj.welcome(); function HeeloContruct(name,age){ this.name=name; this.age=age; console.log('构造函数的名字是'+this.name+', and my age is ' + this.age); } var heeloCon=new HeeloContruct('小明',26); //3.2熟练掌握高阶函数(高阶函数是那些将函数作为参数或返回值的函数。)[1,3,4,5,9,12,6] var arr_gj=arr.sort(function(x,y){ if(x>y){ return 1; }else{ return -1; } }) console.log(arr_gj);//排序 var arr_gj2=arr.map(function(x) { return x*2+1; }); console.log(arr_gj2); var arr_gj_aIndex='a'.charCodeAt(0);//于指定位置的字符的编码 //使用高阶函数 function creatStr(n,cb){ var str=''; for (var i = 0; i < n; i++) { str+=cb(i); } return str; } //创建一个随机字符串 var str_sj_str=creatStr(10,function(){ return String.fromCharCode(Math.floor(Math.random()*26)+arr_gj_aIndex); /*fromCharCode() 可接受一个指定的 Unicode 值，然后返回一个字符串*/ }) console.log(str_sj_str); //创建一个随机数 var str_sj_num=creatStr(10,function(){ return Math.floor(Math.random()*26); }) console.log(str_sj_num); //3.3 使用call方法自定义接受者来调用方法 var objCall={ callWay:function(msg){ console.log('callWay:'+this.name+'函数参数：'+msg); }, name:"objCall-1-name" } var objCall2={ name:"objCall2-name" } objCall.callWay.call(objCall2,'haha');// 第一个参数是方法的调用者,剩余的参数就是原函数的参数 // 高阶函数使用call function compute(arg) { var sum = 0; for(var i = 0; i < arg.length; i++) { sum += arg[i]; } return sum; } function highFunc() { //console.log(arguments.length); //5 return compute.call(null, arguments); } console.log(highFunc(1, 2, 3, 4, 5)); // 15 /* 使用call方法自定义接受者来调用函数。 使用call方法可以调用在给定的对象中不存在的方法。 使用call方法定义高阶函数允许使用者给回掉函数指定接收者。*/ //3.3 使用apply方法通过不同数量的参数调用函数 /*使用apply方法指定一个可计算的参数数组来调用可变参数的函数。 使用apply方法的第一个参数给可变参数的方法提供一个接收者。*/ function compute2() { //**使用arguments创建可变参数的函数 var sum = 0; for(var i = 0; i < arguments.length; i++) { sum += arguments[i]; } return sum; } function wrapper(arr) { return compute2.apply(null, arr); // 给compute函数传递多个参数 } var apply_arr=[1, 2, 3, 4, 5]; console.log(wrapper(apply_arr)); /*call与apply的区别 apply：最多只能有两个参数——新this对象和一个数组argArray。如果给该方法传递多个参数，则把参数都写进这个数组里面，当然，即使只有一个参数，也要写进数组里。如果argArray不是一个有效的数组或arguments对象，那么将导致一个TypeError。如果没有提供argArray和thisObj任何一个参数，那么Global对象将被用作thisObj，并且无法被传递任何参数。 call：它可以接受多个参数，第一个参数与apply一样，后面则是一串参数列表。这个方法主要用在js对象各方法相互调用的时候，使当前this实例指针保持一致，或者在特殊情况下需要改变this指针。如果没有提供thisObj参数，那么 Global 对象被用作thisObj。 实际上，apply和call的功能是一样的，只是传入的参数列表形式不同。 */ //3.8 3.9 待研究 //3.11 不要信赖函数的对象的toString方法。因为不同的引擎下调用toString方法的结果可能不同 var str_tostring=45955444; console.log(typeof(str_tostring)); //number console.log(typeof(str_tostring.toString())); //string var str_tostring_hs=function(x) { return x + 1; } console.log(str_tostring_hs.toString());/*输出：function (x) { return x + 1; }*/ console.log(typeof (str_tostring_hs)); //function console.log(typeof (str_tostring_hs.toString()));//string //4.1 prototype,getPrototypeOf和__proto__之间的不同 /*C.prototype属性是new C()`创建的对象的原型。 Object.getPrototypeOf(obj)是ES5中检索对象原型的标准函数。 obj.__proto__是检索对象原型的非标准方法。 类是由一个构造函数和一个关联的原型组成的一种设计模式。 */ function protoStudent(name,age){ this.name=name; this.age=age; } protoStudent.prototype.sayHello=function(){ console.log('hello prototype student'+this.name); } var s = new protoStudent('dreamapple', 22); //声明函数 s.sayHello(); //调用方法 console.log(protoStudent.prototype === s.__proto__); // true console.log(protoStudent.prototype === Object.getPrototypeOf(s)); // true 要常用getPrototypeOf() //4.7 只将实例状态存储在实例对象中 /* 共享可变数据可能会出现问题,因为原型是被所有的实例共享的。 将可变的实例状态存储在实例对象中。*/ function TreePro(value){ this.value=value; //this.children=[]; } TreePro.prototype={ children:[], addChild:function(value){ this.children.push(value); } }; var left=new TreePro(1); left.addChild(2); left.addChild(3); console.log(left.children);//[2, 3] var right= new TreePro(2); right.addChild(4); right.addChild(5); console.log(right.children);//[2, 3, 4, 5] var top22= new TreePro(7); top22.addChild(left); top22.addChild(right); console.log(left.children);//[2, 3, 4, 5, {value:1}, {value:2}] console.log(top22.children);//同上 // 可以发现，left right top22改变，则属性都跟着变化，所以,原型为所有实例共享，应该将可变的实例状态存储在实例对象中 function TreePro1(value){ this.value=value; this.children=[]; } TreePro1.prototype={ addChild:function(value){ this.children.push(value); } }; var left1 = new TreePro1(1); left1.addChild(2); left1.addChild(3); console.log(left1.children); // [ 2, 3 ] var right1 = new TreePro1(4); right1.addChild(5); right1.addChild(6); var top1 = new TreePro1(7); top1.addChild(left1); top1.addChild(right1); console.log(left1.children); // [ 2, 3 ] console.log(top1.children); // [ { value: 1, children: [ 2, 3 ] },{ value: 4, children: [ 5, 6 ] } ] //4.9 在子类的构造函数中调用父类的构造函数 //定义一个父类 function parentPro(name,age){ this.name=name; this.age=age; } parentPro.prototype.sayHello=function(){ console.log('my name is'+this.name); } //定义我们的子类 function ChildPro(name,age,school){ parentPro.call(this,name,age); this.school=school; } //**将子类与父类的原型关联 // Object.create() 一种新的对象创建方式，第一个参数是要继承的原型，如果不是一个子函数，可以传一个null，第二个参数是对象的属性描述符，这个参数是可选的 ChildPro.prototype=Object.create(parentPro.prototype);//使用Object.create()函数来构造子类的原型对象以避免调用父类的构造函数。 ChildPro.prototype.getSchool = function(){ console.log('my school is'+ this.school); } var Childppro=new ChildPro('namehong',12,'guangming') Childppro.getSchool();//my school isguangming Childppro.sayHello();//my name isnamehong //4.12 将原形视为实现的细节 对象是接口,原型是实现。 //提供参数默认值应当采用测试undefined的方式, // 6.5 使用结构类型(也称为鸭子类型)来设计灵活的对象接口。 // 我们可以使用结构类型 function rectangle1_jiegou(width, length) { var _width = width, _length = length; return { getArea: function() { return _width * _length; } } } var r2 = rectangle1_jiegou(100, 200); console.log(r2.getArea()); // 20000 // 6.6 使用ES5提供的Array.isArray方法测试真数组。 // 6.7避免过度的强制转换 function square(x) { // 这里会进行强制的类型转换 return x * x; } console.log(square('3')); // // 一种比较好的方式,我们在函数内部判断参数是否是一个数字 function square1(x){ if (typeof (x)==='number') { return x*x; } throw new Error('请传递正确的参数类型!'); } console.log(square1(3)); // 6.3 ***使用extend函数抽象出从选项对象中提取值的逻辑。 //定义一个接受参数的选项对象的函数 function AlertSelect(obj){ this.level=obj.level; this.msg=obj.msg; } var ale = new AlertSelect({ level:0, msg:"hello alertselect" }); console.log(ale);//AlertSelect {level: 0, msg: "hello alertselect"} // 当然如果一些参数是必选的话,我们把他们单独拿出来,而且参数的选项对象上的属性不是必选的 function AlertSelect1(level,msg,options){ this.level=level; this.msg=msg; for (var p in options) { this[p]=options[p];//遍历属性并赋值给this } } var ale1=new AlertSelect1(1,'find error',{ count:9, theme:'default' }) console.log(ale1);//AlertSelect1 {level: 1, msg: "find error", count: 9, theme: "default"} //6.3的重点来啦 // 使用extend函数扩展我们的参数对象 function extend(target, source) { if(source) { for(var p in source) { var val = source[p]; if('undefined' !== typeof val) { target[p] = val; } } } return target; } // 升级原来的构造函数 function Alert2(level, msg, options) { var opt = extend({ level: level, msg: msg }); opt = extend(opt, options); extend(this, opt); } var ale2 = new Alert2(2, 'bug', { count: 1, theme: 'highlight' }); console.log(ale2);//Alert2 {level: 2, msg: "bug", count: 1, theme: "highlight"} //5.1 使用Object的直接实例构造轻量级的字典 // 使用一个对象作为字典来使用 var dict1 = { key1: 'value1', key2: 'value2', key3: 'value3' }; // 使用Object.getPrototypeOf() 避免使用 __proto__ var dict1P = Object.getPrototypeOf(dict1); dict1P.say2 = function(){}; var props3 = []; for(var p in dict1) { props3.push(p); } console.log(props3); // [ 'key1', 'key2', 'key3', 'say' ] // 按照顺序的输出要使用数组,不能使用对象 var info1 = [ {name: 'dream'}, {'1': '10'}, {'A': function() {}} ]; for(var i = 0; i < info1.length; i++) { for(var kk in info1[i]) { if(Object.hasOwnProperty.call(info1[i], kk)) { console.log(kk + ' : ' + info1[i][kk]); } } } //并其第5部分 //5.9 在类数组对象上复用通用的数组方法 function fn() { console.log(arguments); console.log([].slice.call(arguments, 0)); //[1, 2, 3] console.log(['array'].concat([].slice.call(arguments)));//[ 'array', 1, 2, 3 ] } fn(1, 2, 3); </script> </html>