Javascript 知识点笔记总结

作者: 图恩分类: 编程开发阅读: 753发布时间： 2020-04-28 09:54:53

1 JS基本概念 1.1 JS简介前端三层 - HTML —— 结构层从语义的角度描述页面的结构 - CSS —— 样式层从装饰的角度描述页面的样式 - JavaScript —— 行为层从交互的角度描述页面的行为 JS的组成：ECMAScript + BOM + DOM JavaScript 作用：数据验证、读写HTML元素、与浏览器窗口及内容交互、网页特效、WEB游戏制作、基于Node.js 技术进行服务器端编程 ECMAScript 版本 ECMAScript 1 (1997年06月:发布首版) ECMAScript 2 (1998年06月:版本变更) ECMAScript 3 (1999年12月:添加正则表达式、try/catch) ECMAScript 4 (放弃发布) ECMAScript 5 (2009年12月:添加严格模式、JSON支持) ECMAScript 5.1 (2011年06月:版本变更) ECMAScript 6 (2015年06月:添加类和模块) ES2015 ECMAScript 7 (2016年06月:增加指数运算符) ES2016 ECMAScript 8 (2017年06月:增新功能) ES2017 ECMAScript 9 (2018年06月:增新特性) ES2018 ECMAScript 10 (2019年06月:增新特性) ES2019 ECMAScript 11 (草案中) ES2020 1.2 JS引用

点我

...... [注] 老版本的 script 标签中会添加 type="text/javascript" 属性，HTML5中已不必添加这一属性。

1);}) //false //some()：若该函数对“任”一项都返回true，则最终结果返回true a.some(function(item) { return (item >1);}) //true //filter()：返回该函数中会返回true的项所组成的数组 a.filter(function(item) { return (item >1);}) //[2] //map()：返回每次函数调用的结果组成的数组 a.map(function(item) { return item;}) //[1,2] //forEach()：此方法没有返回值 a.forEach(item) { console.log(item);} //1 2 归并方法 var b = [1,2,3,4,5]; //reduce()：顺序遍历 var sum1 = b.reduce(function(prev, cur, index, array){ return prev + cur;}); alert(sum1); //15 //reduceRight()：逆序遍历 var sum2 = b.reduceRight(function(prev, cur, index, array){ return prev + cur;}); alert(sum2); //15 3.3 Date 3.3.1 时间格式格里尼治时间（GTM）：英国郊区格林尼治天文台时间，用于世界上某些重大时间世界标准时间（UTC）：世界时间1970年1月1日0时开始（毫秒数） 3.3.2 创建时间 //使用Date()函数创建 var nowDate = Date(); console.log(nowDate); //得到运行此语句时刻的当前时间 console.log(typeof nowDate); //string (时间实际上是字符串类型) //使用构造函数创建（对象类型） var nowDate = new Date(); console.log(typeof nowDate); //object //可指定参数来设置时间格式 var date = new Date("2017/11/3 12:30:12"); console.log(date);//Wed Aug 07 2019 15:43:48 GMT+0800 (中国标准时间) 3.3.3 方法 //Date对象的方法大致分为3类 //get 获取(年、月、日、星期、时、分、秒、毫秒) //set 设置(年、月、日、星期、时、分、秒、毫秒) //to 格式化转换 //[注1]大部分的返回值中,0代表现实意义中的1(如1号、1月份、1秒) //[注2]时间运算:两个时间对象相减，得到的是两个对象间相差的毫秒数 [图片上传失败...(image-2a712e-1587459554178)] 3.4 RegExp 正则表达式：用于匹配规律规则的表达式，一种过滤逻辑公式，通常被用来检索、替换那些符合某个模式(规则)的文本。正则表达式实际上也是一种object类型。 3.4.1 创建 //字面量创建 var 变量名 = /表达式/匹配模式修饰符; //构造函数创建 var 变量名 = new RegExp("表达式","匹配模式修饰符"); 3.4.2 表达式 //常用 [abc] 查找方括号之间的任何字符 [^abc] 查找任何不在方括号之间的字符 [0-9] 查找任何从 0 至 9 的数字 [a-z] 查找任何从小写 a 到小写 z 的字符 [A-Z] 查找任何从大写 A 到大写 Z 的字符 [A-z] 查找任何从大写 A 到小写 z 的字符 a[bcd]e 字符中间匹配 (abe,ace,ade都行) X|y|z 或匹配 (匹配x或y或z,存在其中一个即可) //单字符&数字 . 匹配除换行符之外的任意字符 (匹配点"."需要转义字符/\./) \d 匹配数字 \D 匹配非数字 \w 匹配字母 \W 匹配非字母 //空白字符 \0 匹配 null 字符 \s 匹配空白字符、空格、制表符或换行符 \S 匹配非空白字符 \n 匹配换行符 \r 匹配回车符 \f 匹配进纸符 \t 匹配制表符 \v 匹配垂直制表符 //定位符 ^ 行首匹配 $ 行尾匹配 \A 只匹配字符串的开始处 \b 匹配单词边界，词在[]内无效(\bchild\b ≡ children× child√ ) \B 匹配非单词边界 \z 只匹配字符串结束处 \Z 匹配字符串结束处或行尾 \G 匹配当前搜索的开始位置 //进制数 \xxx 查找以八进制数 xxx 规定的字符 \xdd 查找以十六进制数 dd 规定的字符 \uxxxx 查找以十六进制数 xxxx 规定的 Unicode 字符 //限定符量词 n+ 匹配任何包含至少一个n的字符串 (n+ ≡ a× n√ nnn√) n* 匹配任何包含零个或多个n的字符串 n? 匹配任何包含零个或一个n的字符串 n{X} 匹配包含X个n的序列的字符串 (n{4} ≡ nnnn) n{X,Y} 匹配包含X至Y个n的序列的字符串 (an{1,3} ≡ an√ ann√ annn√) n{X,} 匹配包含至少X个n的序列的字符串 (an{2,} ≡ an× ann√ annnnn√) ^n 匹配任何开头为n的字符串 (^n ≡ an× na√ nan√) n$ 匹配任何结尾为n的字符串 ^n$ 匹配开头为n且结尾为n的字符串(^n$ ≡ an× na× nan√) ?=n 匹配任何其后紧接指定字符串 n 的字符串 ?!n 匹配任何其后没有紧接指定字符串 n 的字符串 //引用 \1..\9 $1...$9 返回九个在模式匹配期间找到的、最近保存的部分匹配模式修饰符 g globle 全局匹配模式(查找所有匹配，而不光在找到第一个匹配后停止) i ignorCase 忽略大小写模式 m mutiple 允许多行匹配模式 3.4.3 属性实例属性 global 检测是否设置g标记 ignoreCase 检测是否设置标记 multiline 检测是否设置了m标记 source 返回正则表达式的字符串表示 lastIndex 返回被查找字符串中下一次成功匹配的开始位置构造函数属性 $_ input 返回最近一次匹配的字符串 $& lastMatch 返回最近一次的匹配项 $+ lastParen 返回最近一次匹配的捕获组 $` leftContext 返回被查找的字符串中从字符串开始位置到最后匹配之前的位置之间的字符 $' rightContext 返回被搜索的字符串中从最后一个匹配位置开始到字符串结尾之间的字符 s* multiline 检测表达式是否采用多行模式匹配m 3.4.4 方法实例方法 //exec() 检索字符串中指定的值。返回找到的值，并确定其位置。特性 - 有全局标记g 持续查找所有匹配项并返回 - 无全局标记g 始终返回第一个匹配项信息执行过程 1.检索字符串参数，获取正则表达式匹配文本 2.找到匹配文本则返回一个数组 - 第0个元素与整个模式匹配的字符串 - 其他元素与捕获组匹配的字符串 3.否则返回null //test() 在字符串中测试模式匹配，返回true或false var reg = /aaa/; console.1og(reg.test("aabc")); //false 字符串方法 //match() 将符合条件的正则表达式的内容提取出来 - 默认情况下,只会找到第一个符合要求的内容，找到后停止检索 - 可以设置全局匹配模式，这样就能匹配到所有符合的内容 - 匹配到的内容会封装到一个数组中返回，即使只查询到一个结果 var str = "1a2b3c4d5e6f7A8B9C"; var result1 = str.match(/[a-z]/); var result2 = str.match(/[a-z]/ig); //可设置多个匹配模式顺序无所谓 console.log(result1); //a console.log(result2); //a,b,c,d,e,f,A,B,C console.log(typeof result1); //object //replace("表达式","替换内容") 将与正则表达式匹配的值替换为新的内容 - 默认只会替换第一个 var str = "1a2b3c4"; var result = str.match(/[a-z]/,"@_@"); var result2 = str.match(/[a-z]/ig,"@_@"); console.log(result1); //1@_@2b3c4 console.log(result2); //1@_@2@_@3@_@4 //search() 检索与指定的正则表达式相匹配的值 - 如果搜索到指定内容，则会返回第一次出现的索引 - 如果没有搜索到返回-1 var str = "hello abc hello aec afc";//搜索字符串中是否含有abc或aec或afc var result = str.search(/a[bef]c/); console.1og(result); //6 (在索引6处首次被搜到) //split() 把字符串分割为字符串数组 var str="1a2b3c4d5e6f7"； var result=str.split(/[A-z]/); //1,2,3,4,5,6,7 3.4.5 实例 //手机号的规则 13567890123 (11位) 1.以1开头 ^1 2.第二位3-9任意数字 [3-9] 3.三位以后任意数字9个 [0-9]{9}$ var phoneStr = "13067890123" var phoneReg = /^1[3-9][0-9]{9}$/; console.log(phoneStr.test(phoneReg)); //ture //去除误输入的字符前后空格 - 使用""来替换空格 var str = " he llo "; str = str.replace(/\s/,""); //去除一个空格 str = str.replace(/\s/g,""); //去除所有的空格,包括中间 str = str.replace(/^\s*/,""); //去除开头的空格 str = str.replace(/\s*$/,""); //去除结尾的空格 str = str.replace(/^\s*$/g,""); //无效 str = str.replace(/^\s*|\s*$/g,"");//匹配开头和结尾的空格 console.log(str); //"hello" //匹配中文字符 [\u4e00-\u9fa5] //匹配双字节字符(包括汉字) [^\x00-\xff] //匹配空白行的正则表达式(用来删除空白行) \n\s*\r //匹配HTML标记(对复杂的嵌套标记无用) <(\S*?)[^>]*>.*?|<.*? /> //匹配首尾空白字符(删除行首行尾的空白字符) ^\s*|\s*$ //匹配Email地址(表单验证) \w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)* //匹配网址URL的正则表达式 [a-zA-z]+://[^\s]* //匹配帐号是否合法(表单验证:字母开头，允许5-16字节，允许字母数字下划线) ^[a-zA-Z][a-zA-Z0-9_]{4,15}$ //匹配国内电话号码(形式如 0511-4405222 或 021-87888822) \d{3}-\d{8}|\d{4}-\d{7} //匹配腾讯QQ号(QQ号从10000开始) [1-9][0-9]{4,} //匹配中国邮政编码(6位数字) [1-9]\d{5}(?!\d) //匹配身份证(一代15位或二代18位) \d{15}|\d{18} //匹配ip地址(用于提取ip地址) \d+\.\d+\.\d+\.\d+ //匹配特定数字(处理大量数据) ^[1-9]\d*$ //正整数 ^-[1-9]\d*$ //负整数 ^-?[1-9]\d*$ //整数 ^[1-9]\d*|0$ //非负整数(正整数与 0) ^-[1-9]\d*|0$ //非正整数(负整数与 0) ^[1-9]\d*\.\d*|0\.\d*[1-9]\d*$ //正浮点数 ^-([1-9]\d*\.\d*|0\.\d*[1-9]\d*)$ //负浮点数 ^-?([1-9]\d*\.\d*|0\.\d*[1-9]\d*|0?\.0+|0)$ //浮点数 ^[1-9]\d*\.\d*|0\.\d*[1-9]\d*|0?\.0+|0$　　 //非负浮点数 ^(-([1-9]\d*\.\d*|0\.\d*[1-9]\d*))|0?\.0+|0$ //非正浮点数 //匹配特定字符串 ^[A-Za-z]+$ //由26个英文字母组成的字符串 ^[A-Z]+$ //由26个英文字母的大写组成的字符串 ^[a-z]+$ //由26个英文字母的小写组成的字符串 ^[A-Za-z0-9]+$ //由数字和26个英文字母组成的字符串 ^\w+$ //由数字、26个英文字母或者下划线组成的字符串 3.5 Function 函数实际上是 Function 类型的实例，因此函数也是对象；而这一点正是 JavaScript有特色的地方。由于函数是对象，所以函数也拥有方法，可以用来增强其行为。属性与方法 arguments arguments和this类似，都是函数中的隐含的参数 arguments是一个类数组元素，它用来封装函数执行过程中的实参所以即使不定义形参，也可以通过arguments来使用实参 arguments中有一个属性callee表示当前执行的函数对象 this 函数的上下文对象，根据函数的调用方式不同会执向不同的对象以函数的形式调用时，this是window 以方法的形式调用时，this是调用方法的对象以构造函数的形式调用时，this是新建的那个对象使用call和apply调用时，this是指定的那个对象在全局作用域中this代表window call( ) 直接调用函数1，直接传递函数的实参 apply( ) 直接调用函数2，将实参封装到一个数组中传递 3.6 Boolean Boolean 对象在 ECMAScript 中的用处不大，因为它经常会造成人们的误解 var falseValue = false; //创建布尔值 result = falseValue && true; alert(result); //false var falseObject = new Boolean(false); //创建布尔对象 var result = falseObject && true; alert(result); //true //所以进行逻辑运算时，有这样一个规律 Boolean() && boolean //结果是boolean boolean && Boolean() //结果是Boolean( ) //基本类型与引用类型的布尔值在进行typeof()instanceof()测试时，返回的结果都不同 alert(typeof falseObject); //object alert(typeof falseValue); //boolean alert(falseObject instanceof Boolean); //true alert(falseValue instanceof Boolean); //false //所以，建议是永远不要使用 Boolean 对象!!! 3.7 Number Number对象提供了 valueOf() toLocaleString() toString() toFixed() toExponential() toPrecision() 等方法，但是对不同的浏览器兼容性不同，并且在进行typeof()instanceof()测试时出现的情况与 Boolean 对象相似。因此，仍然不建议直接使用实例化 Number 对象！！！ 3.8 String 字符串有两种形式：基本类型、对象类型字符串在底层中是以字符数组的形式保存的对象类型字符串封装了一些属性及方法，而基本类型则没有可直接用基本类型字符串调用字符串对象封装的属性及方法，无须手动转换 //基本类型字符串 String var str1 = "Hello World"; console.log（typeof str1）; //string //对象类型字符串 Object var str2 = new String("Hello World"); console.log(typeof str2); //object 3.8.1 方法字符方法 var str ="what color do you like"; //charAt(index) 获取对应下标处的字符 console.log(str.charAt(9)); //r console.log(str.charAt(30)); //""(未找到返回空字符串) console.log(typeof str.charAt(30)); //string //charCodeAt(index) 获取对应下标处的字符编码(0~65535) console.log(str.charCodeAt(3)); //116 (ASCII码) console.log(str.charCodeAt(30)); //NaN console.log(typeof str.charCodeAt(30)); //number //下标索引直接获取法 (IE7即以下不支持) console.log(str[11]); //d //String.fromCharCode(ASCII) 获取ASCII码对应的字符 var str1ASCII = String.fromCharCode(117); console.log(str1ASCII); //u var str2ASCII = String.fromCharCode(104, 101, 108, 108, 111); console.log(str2ASCII); //"hello" 操作方法 var str = "hello world"; //concat() 将字符串拼接起来，返回拼接后的新字符串 var strConcat1 = str.concat(" wow"); var strConcat2 = str.concat(" wow", "!"); //多拼接 console.log(strConcat1); //"hello world wow" console.log(strConcat2); //"hello world wow!" console.log(str); //"hello world" //slice() 截取介于两个指定下标之间的字符(开始索引,结束索引) //substring() 截取介于两个指定下标之间的字符(开始索引,结束索引) //substr() 截取从头索引开始的指定个数的字符(开始索引,截取位数) //单参数时，默认截取到尾部 console.log(str.slice(3)); //"lo world" console.log(str.substring(3)); //"lo world" console.log(str.substr(3)); //"lo world" console.log(str.slice(3, 7)); //"lo w" console.log(str.substring(3,7)); //"lo w" console.log(str.substr(3, 7)); //"lo worl" //参数为负值时,则从后往前截取 (substring所有负值参数都转换为0) console.log(stringValue.slice(-3)); //"rld" console.log(stringValue.substring(-3)); //"hello world" console.log(stringValue.substr(-3)); //"rld" console.log(stringValue.slice(3, -4)); //"lo w" console.log(stringValue.substring(3, -4)); //"hel" console.log(stringValue.substr(3, -4)); //""(空字符串) console.log(str); //"hello world"(原字符串不改变) 分割方法 //split() 把一个字符串分割成字符串数组 var str= "Tom is a good man!"; //未指定长度 console.log(str.split(" ")); //["Tom","is",a","good","man!"] //指定返回数组的最大长度3 console.log(str.split(" ",3)); //["Tom","is","a"] console.log(str.split("",6)); //["T","o","m","","i","s"] 位置方法 var str = "hello world"; //indexOf() 顺序查找指定字符，并返回索引值 //lastIndexOf() 逆序序查找指定字符，并返回索引值 console.log(str.indexOf("o")); //4 console.log(str.lastIndexOf("o")); //7 //双参数时，第二个参数表示从哪个索引值位置开始搜索 console.log(str.indexOf("o", 6)); //7 console.log(str.lastIndexOf("o", 6)); //4 //若找不到指定字符，会返回-1 console.log(str.indexOf("y")); //-1 修整方法 //trim() 删除前置及后缀的所有空格创建其副本，返回结果 var str = " hello world "; var strTrim = str.trim(); console.log(strTrim); //"hello world" console.log(str); //" hello world "(原字符串不改变) //trimLeft() 删除头部所有空格创建其副本，返回结果 //trimRight() 删除尾部所有空格创建其副本，返回结果大小写转换方法 var str = "hello world"; console.log(str.toUpperCase()); //"HELLO WORLD" (转大写) console.log(str.toLowerCase()); //"hello world" (转小写) //针对特定地区的少数语言,使用以下方法 console.log(str.toLocaleUpperCase()); //"HELLO WORLD" console.log(str.toLocaleLowerCase()); //"hello world" console.log(str); //"hello world"(原字符串不改变) 模式匹配方法 //match() //search() //replace() 字符串替换 var str = "A good man!A nice man";//只能替换第一次出现的字符串 var strRep = str.replace("man","woman"); console.log(strRep); //"A good woman!A nice man" strRep = str.replace(/man/g,"woman");//通过正则表达式实现全部替换 console.log(strRep); //"A good woman!A nice woman" console.log(str); //"A good man!A nice man" (原字符串不变) 比较大小方法 //localeCompare() 从左往右单字符比较其ASCII码值,值大者大 var str = "yellow"; console.log(str.localeCompare("brick")); //1 (yellow更大) console.log(str.localeCompare("yellow")); //0 (相等) console.log(str.localeCompare("zoo")); //-1 (zoo更大) HTML方法早期时为了方便而扩展这种动态格式化HTML标准，但无语义化，==请避免使用！== [图片上传失败...(image-a69306-1587459554178)] 3.9 Global 3.9.1 方法 URI 编码方法 //encodeURI() 对本身不属于URI的特殊字符进行编码 //encodeURIComponent() 对任何非标准字符进行编码 (开发中更常用) var uri = "http://www.wrox.com/illegal value.htm#start"; alert(encodeURI(uri)); //"http://www.wrox.com/illegal%20value.htm#start" alert(encodeURIComponent(uri)); //"http%3A%2F%2Fwww.wrox.com%2Fillegal%20value.htm%23start" URI 解码方法 //decodeURI() 只能对使用encodeURI()替换的字符进行解码 //decodeURIComponent() 可解码任何特殊字符的编码 var uri="http%3A%2F%2Fwww.wrox.com%2Fillegal%20value.htm%23start"; alert(decodeURI(uri)); //http%3A%2F%2Fwww.wrox.com%2Fillegal value.htm%23start alert(decodeURIComponent(uri)); //http://www.wrox.com/illegal value.htm#start 在以前会使用escape()和unescape()方法，但在ECMA-262第3版已经被废弃，请不要使用！！！ ECMAScript 解析器 //eval() 获取返回值，可将字符串转换为代码执行，并返回一或多个值，在执行时遇错，则抛出异常给调用者 eval("alert('hi')"); //等价于 alert("hi"); var msg = "hello world"; eval("alert(msg)"); //"hello world" eval()方法解释代码字符串的能力非常强大，但也非常危险，所以谨慎使用！！！ 3.9.2 属性 [图片上传失败...(image-ec8db-1587459554178)] 浏览器都会将全局对象作为window对象的一部分来实现。因此在全局作用域中声明的所有变量和函数，都是window 对象的属性 3.X Math 3.X.1 属性 Math.E //自然对数的底数，即常量 e 的值 Math.LN10 //10的自然对数 Math.LN2 //2的自然对数 Math.LOG2E //以2为底 e 的对数 Math.LOG10E //以10为底 e 的对数 Math.PI //π的值 Math.SQRT1_2 //1/2的平方根（即2的平方根的倒数） Math.SQRT2 //2的平方根 3.X.2 方法 Math.round(4.5) //5 四舍五入 Math.ceil(3.1) //4 向上取整 Math.floor(3.9) //3 向下取整 Math.max(3,6,76,8,89,32) //89 取最大值 Math.min(3,6,76,8,89,32) //3 取最小值 Math.abs(-10) //10 取绝对值 Math.pow(2,3) //8 x的y次方 Math.sqrt(25) //5 开平方 Math.random() //0.6334986525422 生成一个0-1之间的随机数 4 DOM/BOM 定时器 function fn1(){ console.log('test1'); } function fn2(){ console.log('test2'); } function fn3(){ console.log('test3'); } function fn4(a){ console.log(a); } setTimeout(fn1, 2000); // 无括号定时执行 setTimeout(fn2(), 2000); // 空参数立即执行 setTimeout('fn3()', 2000); // 空参数作为字符串定时执行 setTimeout(fn4('test4'), 2000); // 带参数立即执行 setTimeout("fn4('test5')", 2000); // 带参数作为字符串定时执行 /* --------最后执行结果------ (立即) test2 test4 (2s后) test1 test3 test5 --------------------------*/ 5 函数返回值：函数执行的结果使用return来设置函数的返回值，它可以被一个变量所接收 return 后的代码不会执行，一旦执行到return语句时，函数将会立刻退出 return 后可跟任意类型的值，基本数据类型或对象如果return后不跟值，或者是不写return，则函数默认返回undefined 参数：形参：function(1, 2) 实参：function(a, b) 作用域：一个变量的作用范围全局作用域全局作用域在打开页面时创建，在页面关闭时销毁全局作用域中有一个全局对象window，window对象由浏览器提供在全局作用域中创建的变量和函数可以在页面的任意位置访问 - 尽量不要在全局中创建变量函数作用域每次调用函数都会创建一个新的函数作用域函数作用域在函数执行时创建，在函数执行结束时销毁在函数作用域中创建的变量，不能在全局中访问当在函数作用域中使用一个变量时，它会先在自身作用域中寻找，如果找到了则直接使用，如果没有找到则到上一级作用域中寻找函数的声明提前：和变量的声明提前一样，在全局作用域中，使用函数声明function创建的函数，会被浏览器预先把声明调到前面去，即预解析。 6 JS深入 6.1 重新认识JS JS是一种JIT编译语言，也叫“即时编译”，是”动态编译“的一种，当某段代码即将第一次被执行时进行编译。解释一行执行一行，相较于其他语言较慢。 java、c#等语言是“编译执行”，一次性把代码编译成可执行代码，再一行一行执行，速度较快。具有灵活性，动态特性，可以随时随意给对象增加属性和方法函数是JS中的一等公民一般在宿主环境下运行，如浏览器（除node.js） JS运行前会进行“预解析”，先全局再函数内部 6.2 面对对象编程 6.2.1 编程思想面向过程：所有的事情都亲力亲为，注重过程面向对象：提出需求 - 找对象 - 对象解决，注重结果 JS不是一门面向对象的语言，而是基于对象，将执行者转变成指挥者，用JS来模拟面向对象的语言，它不是面向过程的替代，而是面向过程的封装面向对象の特性封装：即包装，把一些重用的内容进行打包，在需要时直接使用继承：类与类之间的关系，JS中没有类的概念，但有构造函数的概念，基于原型，是可以有继承的多态（抽象性）：同一个行为，针对不同的对象，产生不同的效果面向对象编程（OOP），是一种编程开发思想，是过程式代码的一种高度封装，目的在于提高代码的开发效率和可维护性，比起传统过程式编程，更适合多人合作大型软件项目面向对象的抽象程度比函数要高，因为一个类/模板(Class)既包含数据，又包含操作数据的方法 6.2.2 体会面向对象 //面向过程的方式 // 1 记录学生的成绩 var stu1 = {name: 'zs', subject: '语文', score: 90}; var stu2 = {name: 'ls', subject: '语文', score: 80}; // 2 打印学生的成绩 console.log(stu1.name, stu1.subject, stu1.score); console.log(stu2.name, stu2.subject, stu2.score); // 面向对象的方式 /*----------------------------------------- 首选思考的不是程序执行流程，而是把`Student`视为对象，并拥有`name`和`score`两个属性; 而打印成绩，首先必须创建出这个`Student`对应的对象，再给对象发一个`printScore`消息，让对象把自己的数据打印出来 -----------------------------------------*/ // 1 抽象数据行为变成模板 (Class) function Student(name, subject, score) { this.name = name; this.subject = subject; this.score = score; this.printScore = function () { console.log(this.name, this.subject, this.score); } } // 2 根据模板创建具体实例对象 (Instance) var stuA = new Student('zs', '语文', 90); var stuB = new Student('ls', '语文', 80); // 3 实例对象具有自己的具体行为 (指挥Instance得到结果) stuA.printScore(); stuB.printScore(); /*----------------------------------------- 在此例中，我们处理的多个对象都具有一个共同点，即他们都是学生，所以把他们抽象归成类/模板(Class)，再根据每一个具体的学生去创建具体的实例对象（Instance），最后再单独赋予给他们各自的具体行为 -----------------------------------------*/ 在JS中创建对象的模板是构造函数，而在其他语言中创建对象的模板是类创建实例对象（Instance）时，需要使用new操作符 6.2.3 创建对象的方法 // 1 new Object()创建 // var person = {}; 也可以省略new Object() 缩写成{} var person = new Object(); person.name = "Nico"; person.age = 21; person.sayHi = function(){ console.log("hello, I am" + this.name); } // 2 对象字面量创建 var person = { name: "Nico", age: 21; sayHi: function(){ console.log("hello, I am" + this.name); } } // 3 工厂函数 /*--------------------------------------- 当要创建多个实例对象时就要重复写很多份对象代码太冗余不方便使用我们使用工厂函数它用于批量创建多个对象解决代码重复问题 ----------------------------------------*/ function createPerson (name, age) { return { name: name, age: age, sayHi: function () { console.log("hello, I am" + this.name); }}} // 再生成实例对象 var p1 = createPerson("Nico", 21); var p2 = createPerson("Mike", 18); /*------------------------------------- 工厂函数虽解决了批量创建对象的问题但存在缺点：它无法确定真实的对象类型 -------------------------------------*/ console.log(typeof p1); // Object console.log(p1 instanceof createPerson); // false 构造函数构造函数是专门用来创建对象的函数一个构造函数我们也可以称为一个类通过一个构造函数创建的对象，我们称该对象时这个构造函数的实例通过同一个构造函数创建的对象，我们称为一类对象构造函数就是一个普通的函数，只是他的调用方式不同如果直接调用，它就是一个普通函数如果使用new来调用，则它就是一个构造函数 // 4 构造函数 /*------------------------------------ 1 这里引入更优解即更优雅的工厂函数即构造对象的函数 2 构造函数比工厂函数创建更方便 2.1 会在内存中创建一个空对象 (无需内部创建新对象) 2.2 直接将属性和方法赋给了this 让this指向刚刚创建好的对象 2.3 执行构造函数中的代码 2.4 没有return语句无需返回对象(会自动返回) 3 构造函数一般用首字母大写普通函数用小写便于区分 4 同时解决了工厂函数不能识别对象具体类型的缺陷 ------------------------------------*/ function Person (name, age) { this.name = name, this.age = age, this.sayHi = function () { console.log("hello, I am" + this.name); }} // 生成实例对象必须使用new操作符 var p1 = new Person("Nico", 21); var p2 = new Person("Mike", 18); console.log(p1 instanceof Person); // true /*--------------------------------------- 每一个实例对象中的 __proto__ 中有一个constructor属性，该属性指向创建该实例的构造函数，它最初是用来标识对象类型的，它虽然可以用于检测对象的类型，但是生产中还是使用instanceof操作符更可靠。 console.log(p1.constructo); // 返回它的对象构造器 console.log(p1.constructor === Person); // true --------------------------------------*/ /*----------------------------------------- 用上面的方法去构造函数虽然方便，但当多个对象去调用这个构造函数时，会产生存储多个方法的内存区域，会造成极大的内存浪费。 p1.sayHi(); p2.sayhi(); console.log(p1.sayHi === p2.sayHi); // false // 说明两者不是指向同一方法而是创建了两块内存区来存储所以我们把需要共享的函数定义到构造函数的外部，但若有多个需要共享的函数，可能会造成全局命名空间冲突的问题，因此有可以把多个函数放到一个对象中来保存来避免问题。 ----------------------------------------*/ function sayHi() { console.log("hello, I am" + this.name); } //或 var fns = { sayHi: function () { console.log("hello, I am" + this.name); }, sayAge: function () { console.log("I am" + this.age); } } // 这样基本上解决了构造函数的内存浪费问题但代码看起来会有些怪所以引入原型原型通过构造函数创建的对象，解析器都会默认在函数中添加一个prototype属性对象，即每一个构造函数都有一个prototype属性，称为原型/原型对象。原型中的成员，都会被构造函数的实例间接继承，故可以把所有对象实例需要共享的属性和方法直接定义在prototype对象上。 // 5 原型 /*----------------------------------------- -------------------------------------------*/ function Person (name, age) { this.name = name; this.age = age; } Person.prototype.type = "student"; Person.prototype.sayHi = function () { console.log("hello, I am" + this.name); } var p1 = new Person("Nico", 21); var p2 = new Person("Mike", 18); console.log(p1.sayHi === p2.sayHi); //true 构造函数、实例、原型三者之间的关系（图略） console.log(p1.__proto__ === Person.prototype); //true console.log(p1.constructor === Person); //true prototype 属性是一个对象，所有实例属性和方法都指向它，它们共用同一个内存地址，标准属性，给程序员使用 __proto__属性是非标准的属性，指向构造函数的原型，供浏览器使用 constructor是构建器，指向构建函数实例对象访问原型对象中的成员的搜索原则：原型链搜索首先从对象实例本身开始若在实例中找到了指定属性，则返回该属性的值若未找到，则继续搜索指针指向的原型对象，在原型对象中查找指定属性若在原型对象中找到了指定属性，则返回该属性的值若一直到原型链末端还未找到，则返回 undefined Object的原型的原型为null // 6 最优的原型 /*----------------------------------- 为减少不必要的每次都输入一遍Person.prototype，常见做法是用一个包含所有属性和方法的对象字面量来重写整个原型对象 ----------------------------------*/ function Person (name, age) { this.name = name; this.age = age; } Person.prototype = { constructor: Person, //避免原型对象丢失了constructor成员 type: "student", sayHi: function () { console.log("hello, I am" + this.name); } } 什么数据需要写在原型中数据共享是原型的作用之一，故需要共享的数据就可以写在原型中不需要共享的数据写在构造函数中说明任何函数都有prototype属性对象，包括原生对象的原型，如Date.prototype，因此可以利用此特性来扩展原生对象最好不要让实例之间互相共享数组或对象成员，因为一旦修改会导致数据的走向很不明确，而且难以维护原型对象的使用建议私有成员（如非函数成员）放到构造函数中共享成员（一般为函数）放到原型对象中如果重置了 prototype 记得修正 constructor 的指向原型的作用数据共享（为了节省内存空间）继承 6.3 继承继承是指一个对象直接使用另一对象的属性和方法一般会创建子类和父类，子类可使用父类的所有功能，且对这些功能进行扩展继承有两种方式：接口继承和实现继承，ECMAScript只支持实现继承，主要是依靠原型链来实现 6.3.1 对象拷贝对象拷贝：将对象的成员复制一份给需要继承的对象，但并非真正的继承，真正的继承是类与类的关系 // 案例1 一般的对象拷贝 var obj1 = { name: 'zs', age: 18, sex: '男' } var obj2 = {}; // 封装函数 - 把o1的成员复制给o2 function copy(o1, o2) { for (var key in o1) { o2[key] = o1[key]; } } copy(obj1, obj2); console.dir(obj2); // obj2 拥有了obj1的name age sex属性 obj1.name = 'xx'; // 修改obj1的成员 console.dir(obj2); // 不会影响obj2 那么要如何实现完全的拷贝呢？这里涉及到递归的知识去查看 ----> 递归 (按住Ctrl点击) // 案例2 // 创建父对象 var father = { name: '王健林', money: 10000000, cars: ['BMW', 'Tesla'], hobby: function () { console.log('Play golf'); } } // 创建需要继承的子对象 var son = { name: '王思聪' } // 对象拷贝函数 (使用for...in...循环并封装到函数中) function extend(parent, child) { for (var key in parent) { if (child[key]) { // 若有相同属性则跳过 continue; } child[key] = parent[key]; } } extend(father, son); // 此时son就也有了father的cars money hobby 但name依然自己保留 /*-------------------------------------- 对象拷贝存在问题：如果继承过来的成员是引用类型的话(即对象属性对象里包含另一个对象)，那么这个引用类型的成员在父对象和子对象之间是共享的，也就是说修改了之后，父子对象都会受到影响。这个问题可以通过函数"递归"来解决。 ---------------------------------------*/ 6.3.2 原型式继承 // 借用构造函数的原型对象实现继承 // 创建父构造函数 function Parent(name){ this.name = name; this.showName = function(){ console.log(this.name); } } // 设置父构造器的原型对象 Parent.prototype.showAge = function(){ console.log(this.age); } // 创建子构造函数 function Child(){ } // 设置子构造函数的原型对象实现继承 Child.prototype = Parent.prototype; var child = new Child(); console.dir(child); //child只在原型上继承了showAge方法 /*-------------------------------------- 问题：父构造函数的原型对象和子构造函数的原型对象上的成员有共享问题，包含引用类型的属性值会共享，且只能继承父构造函数的原型对象上的成员, 不能继承父构造函数的实例对象的成员 --------------------------------------*/ 6.3.3 原型链继承原型链：每个对象都有原型对象，原型对象也有原型对象。由此，我们的对象，和对象的原型，以及原型的原型，就构成了一个原型链。 // 核心：子构造函数.prototype = new 父构造函数() // 创建父构造函数 function Parent(){ this.name = 'baba'; this.age = 35; this.showName = function(){ console.log(this.name); } } // 设置父构造函数的原型 Parent.prototype.friends = ['小名', '小强']; Parent.prototype.showAge = function(){ console.log(this.age); } // 创建子构造函数 function Child(){ } // 实现继承 // 同时修改子构造函数的原型的构造器属性防止执行错误 Child.prototype = new Parent(); Child.prototype.constructor = Child; // 实例对象 var child = new Child(); console.log(child.name); // baba console.log(child.age); // 35 child.showName(); // baba child.showAge(); // 35 console.log(child.friends); // ['小名','小强'] // 当我们改变friends时, 父构造函数的原型对象的也会跟着变化 child.friends.push('小王'); console.log(child.friends); // ["小名", "小强", "小王"] var father = new Parent(); console.log(father.friends); // ["小名", "小强", "小王"] /*-------------------------------------------- 特点： - 非常纯粹的继承关系，实例是子类的实例，也是父类的实例 - 父类新增原型方法/原型属性，子类都能访问到问题： - 创建子类实例时，不能给父构造函数传递参数 - 要想为子类新增属性和方法，必须创建实例对象后才行，不能放到构造器中 - 无法实现多继承 - 来自原型对象的引用属性是所有实例共享的，子对象修改时父对象也会被动修改 ---------------------------------------------*/ 6.3.4 借用构造函数 // 使用call借用其他构造函数的成员, 用父类的构造函数来增强子类实例，等于是复制父类的实例属性给子类 // 创建父构造函数 function Parent(name, age) { this.name = name; this.age = age; } Parent.prototype.sayName = function () { console.log(this.name); } // 创建子构造函数 function Child(name, age, sex) { Parent.call(this, name, age, sex); this.sex = sex; } // 创建实例对象 var son = new Child('zs', 18, '男'); console.dir(son); // son访问到了Child的sex 还访问到了Parent的name和age 但未访问到Parent原型中的sayName方法 /*----------------------------------------------- 特点： - 解决了传递参数、子类实例共享父类引用属性的问题 - 可以实现多继承（call多个父类对象）但不完美，没有父类方法缺点： - 实例并不是父类的实例，只是子类的实例 - 只能继承父类的实例属性和方法，不能继承原型属性/方法 - 无法实现函数复用，每个子类都有父类实例函数的副本，影响性能 ----------------------------------------------*/ 6.3.5 组合继承 // 借用构造函数 + 原型式继承 // 创建父构造函数 function Parent(name, age) { this.name = name; this.age = age; } Parent.prototype.sayName = function () { console.log(this.name); } // 创建子构造函数 function Child(name, age, sex) { Parent.call(this, name, age, sex); this.sex = sex; } // 通过原型，让子类型，继承父类型中的方法 Child.prototype = new Parent(); Child.prototype.constructor = Child; // 可以赋予子类型特有的方法 Child.prototype.sayHi = function () { console.log('你好'); } /*------------------------------------------------- 特点： - 弥补了借用构造函数的缺陷，可继承实例属性/方法和原型属性/方法 - 既是子类的实例，也是父类的实例 - 不存在引用属性共享问题 - 可传参 - 函数可复用 - 可以实现多继承缺点： - 调用了两次父类构造函数，生成了两份实例（子类实例将子类原型上的那份屏蔽了，仅仅多消耗了一点内存） ---------------------------------------------------*/ 6.3.6 寄生式继承寄生式继承是与原型式继承紧密相关的一种思路，寄生式继承的思路与寄生构造函数和工厂模式类似，即创建一个仅用于封装继承过程的函数，该函数在内部以某种方式来增强对象，最后再像真地是它做了所有工作一样返回对象。 6.3.7 寄生组合式继承寄生组合式继承，集寄生式继承和组合继承的优点与一身，是实现基于类型继承的最有效方式。 6.4 函数进阶定义函数的方式有两种：函数声明、函数表达式 // 1 函数声明 function fn() { console.log('这是函数声明！'); } // 2 函数表达式 var fn = function () { console.log('这是函数表达式'); } fn(); 区别：在执行函数时， fn( ); 的代码顺序对1函数声明没有任何影响，但若把fn( );写于2函数表达式之前，程序会报错。原因：JS代码是按从上往下顺序链执行的，但在执行前会进行预解析，预先把代码中的函数声明(function)和变量声明(var)提前，内部运行原理如下： fn1(); function fn1(){}; fn2(); var fn2 = function (){}; ===> function fn1(){}; // 被提前 var fn2; // 被提前 fn1(); // 运行无问题 fn2(); // 运行发现首个空变量运行出错！ fn2 = function (){}; // fn2最后才被赋值已无效注意：不要在if else while for等语句中去定义一个函数声明，因为在现代浏览器中，这些语句中函数声明不会被提前，若这样做，运行时容易出错！ 6.4.1 函数中this this 指上下文对象，每次调用函数时，解析器都会将一个this作为隐含参数传递进函数。根据函数调用形式的不同，this的值也不同，函数的调用方式决定了this的指向调用方式 this指向备注普通函数调用 window 严格模式下是 undefined 构造函数调用实例对象原型方法中 this 也是实例对象对象方法调用该方法所属对象紧挨着的对象事件绑定方法绑定/触发事件对象定时器函数 window 总结：函数内部的this，是由函数被调用时来确定其指向的，即谁调用指向谁 6.4.2 函数对象函数其实也是一种特殊的对象，即Function()，它拥有原型，拥有一些属性和方法，且所有函数都是 Function 构造函数的实例 [图片上传失败...(image-4d38b9-1587459554178)] 方法 call() bind() apply() 是函数常用的方法，用于改变函数中的this指向 function fn(x, y) { console.log(this); // this原本指向 window console.log(x + y); // 求两数之和 } fn(5, 6); // 11 var another = { value: "这是另一个对象的值" } fn.call(anotherFn, 3, 4); //返回 "anotherFn对象" 和 "7" fn.apply(anotherFn, [3, 4]);//返回 "anotherFn对象" 和 "7" fn.bind(anotherFn, 3, 4); //运行无反应无效语句 var other = fn.bind(anotherFn, 3, 4); //只能先绑定函数 other(); // 再去运行变量 //返回 "anotherFn对象" 和 "7" /*-------------------------------------------- call()：调用一个函数，其具有一个指定的this值和传入提供的参数 apply()：调用一个函数，其具有一个指定的this值和作为数组传入提供的参数 bind()：创建一个新函数（称为绑定函数），新函数与被调函数（绑定函数的目标函数）具有相同的函数体，目标函数会重新指定this指向，并传入参数参数：第一个参数设置函数内部this的指向其它参数，对应函数的参数 call函数的返回值：即指定函数传参后的返回值 call()和apply()的区别：call()可接受若干个参数的列表，而apply()接受的是一个包含多个参数的数组 call()和bind()的区别：call()改过this的指向后，会再执行函数，bind()改过this后，不会执行调用函数，而是把函数复制一份，返回给一个绑定新this的函数共同点：一般都用于改变this的指向 // call()的应用 // 对于真正的数组，我们可以用push()和splice()方法对数组元素进行增加或删除，但对于伪数组，这些方法是不可行的，但可以调用call()方法来实现 var fakeArr = { // 这是一个伪数组 0: 100, 1: 10, 2: 11, 3: 20, length: 4 }; //一般解决方法 fakeArr['4'] = 30; fakeArr.length ++; //调用call()方法 (length会自动增减无需操作) Array.prototype.push.call(fakeArr, 30); //增加元素 Array.prototype.splice.call(fakeArr, 0, 3); //删减元素 // apply()的应用 //Math.max()方法可以求传入数值参数的最大值或者打印出来，但若传入的是数组，它是不可行的，但可以调用apply()方法来实现 console.log(Math.max(3, 5, 6)); // 6 (可以求最大值) var arr = [5, 10, 1, 3]; console.log(Math.max(arr));// NaN (说明不能求数组中的最大值) // 调用apply()方法 console.log(Math.max.apply(null, arr)); // 10 console.log(Math.max.apply(Math, arr)); // 10 (指向Math) console.log(1, 2, 3); // 1 2 3 console.log(arr); //(5) [5, 10, 1, 3] (不是我们想要的形式) // 调用apply()方法打印 console.log.apply(console, arr);//5 10 1 3 (指向console) // bind()的应用常用于改变this的指向 //实现1秒打印对象中的指定属性的值 var obj = { value: '1234', fn: function() { setInterval(function() { console.log(this.value); }.bind(this), 1000); } } obj.fn(); // (输出的是空字符串并未实现打印) btn.onclick = function () { // 事件处理函数中的this 是触发该事件的对象 // 通过bind 改变事件处理函数中this的指向 }.bind(obj); // 1234...1234... (调用bind()实现) 属性 arguments 伪数组获取函数的实参返回变成数组形式 caller 返回函数的调用者，但在全局范围调用时返回 null length 返回形参的个数 name 返回函数的名称 6.4.3 高阶函数函数可以作为参数函数可以作为返回值 // 作为参数 function eat(fn) { setTimeout(function () { console.log('吃完了'); fn(); }, 1000) } eat(function () {console.log('去唱歌');});//吃完了去唱歌 // 作为返回值 (实际上利用到了"闭包"现象) // 案例一返回随机数 function getRandom() { var random = parseInt(Math.random() * 10) + 1; return function () { return random; } } var fn = getRandom(); console.log(fn()); // 7 console.log(fn()); // 7 (两次返回的随机数都不会改变) // 案例二求两个数的和 function getFun(n) { return function (m) { return n + m; } } var fn100 = getFun(100); // 求 100 + m var fn1000 = getFun(1000); // 求 1000 + m console.log(fn100(1)); // 101 console.log(fn1000(1)); // 1001 6.5 闭包闭包：即在一个作用域中可以访问另一个作用域的变量，它延展了函数的作用域范围，可简单理解成 “定义在一个函数内部的函数”，本质上就是将函数内部和函数外部连接起来的一座桥梁闭包的用途：解决变量私有化问题可以在函数外部读取函数内部成员让函数内成员始终存活在内存中缓存数据延长作用域链 // 未发生闭包 function fn() { var n = 10; return n; } fn(); // 发生闭包 (函数嵌套在return中作为返回值返回) function fn() { var n = 10; return function () { return n; } } var f = fn(); console.log(f()); // 10 /*---------------------------------------- 函数在Global作用域上访问到了Local作用域中的n值，并出现Closure(fn())，这就是闭包，它会作为一个函数来返回 ----------------------------------------*/ 闭包案例1

华为
小米
vivo
oppo

闭包案例2 console.log('start'); setTimeout(function () { console.log('timeout'); }, 0); console.log('over'); // 输出顺序 start over timeout /*————————————————————————————————————————————————————— 为什么timeout会最后输出？原因是setTimeout()本身就是一个函数，它被放到"执行栈"中，运行到它时，它会把内部存在的函数先暂存到"任务列表"中，待"执行栈"中的命令执行完，再去执行"任务列表"中的命令。 ————————————————————————————————————————————————————*/ [图略] console.log('start'); for (var i = 0; i < 3; i++) { setTimeout(function () { console.log(i); }, 0); } console.log('end'); // 输出顺序 start over 3 3 3 console.log('start'); for (var i = 0; i < 3; i++) { (function (i) { setTimeout(function () { console.log(i); }, 0); })(i); } console.log('end'); // 输出顺序 start over 0 1 2 (因为这里调用了自调用函数产生了闭包访问到了其他作用域) 闭包案例3 *** 改变这行文字的字体大小 ***

闭包思考 // 案例1 var name = "The Window"; var object = { name: "My Object", getNameFn: function () { return function () { return this.name; //指向全局 } } } console.log(object.getNameFn()()); // The Window // 案例2 var name = "The Window";　　 var object = {　　　　 name: "My Object", getNameFn: function () { var that = this; // 改变this指向 return function () { return that.name; //指向object内部 } } } console.log(object.getNameFn()()); // My Object // getNameFn()() 首个括号仅返回函数第二个括号返回内部的return值 6.6 递归递归：函数自己调用自己注意：递归一般都要写一个结束的条件，防止过程中出错，造成内存溢出（超过了最大的堆栈大小，类似出现死循环）递归案例1 // 用递归来实现 1 + 2 + 3 + 4 + .... + n function getSum(n) { if (n === 1) { // 设定递归结束条件 return 1; } return n + getSum(n - 1); } console.log(getSum(3)); // 6 /*-------------------------------------------- ***递归内部过程*** getSum(3) n = 3, 3 + getSum(3 - 1) getSum(3 - 1) n = 2, 2 + getSum(2 - 1) getSum(2 - 1) n = 1, 1 getSum(3) + getSum(3 - 1) + getSum(2 - 1) // 3+2+1 return 6 ----------------------------------------------*/ 递归案例2 // 用递归实现 n的阶乘 1 * 2 * 3....* n function fn(n) { if (n === 1) { return 1; } return n * fn(n - 1); } console.log(fn(3)); // n = 3, 3 * fn(3 - 1) // n = 2, 2 * fn(2 - 1) // n = 1, 1 递归案例3 // 用递归实现斐波那契数列 1、1、2、3、5、8、13、21、34、..... function fn(n) { if (n === 1 || n === 2) { return 1; } return fn(n - 1) + fn(n - 2); } console.log(fn(3)); // 2 console.log(fn(5)); // 5 递归案例4 /*----------- 浅拷贝 --------------*/ // 若obj1中拥有引用类型属性 var obj1 = { name: 'zs', age: 18, sex: '男', dog: { // 为obj1对象里又添加一层对象 name: '金毛', age: 2, yellow: '黄色' } } var obj2 = {}; copy(obj1, obj2); //调用拷贝函数 // 再去修改obj1的成员 obj1.name = 'xx'; // 修改obj1的成员 obj1.dog.name = '大黄'; console.dir(obj2); // obj2的name属性没被改变但是dog.name变了 /*------------------------------------------------------ 原因：因为obj2拷贝过去的dog对象与 obj1自己的dog对象都是指向同一个对象，拷贝后，再做修改操作，等于是对深层中的同一个对象进行修改，由于两者共用共享这一对象，所以出现属性改变而这里的拷贝，只复制了一层，即只是把第一层(浅层)的属性拷贝过去去生成一个副本，而下一层(深层)的对象，只做指向，并未被拷贝到另一个对象的副本中 **** 这被称为"浅拷贝" **** -----------------------------------------------*/ /*----------- 深拷贝 --------------*/ var obj1 = { name: 'zs', age: 18, sex: '男', dog: { name: '金毛', age: 2 }, friends: ['ls', 'ww'] } var obj2 = {}; // 封装"深拷贝"函数把o1的成员拷贝给o2 function deepCopy(o1, o2) { for (var key in o1) { var item = o1[key]; if (item instanceof Object) { // 若item是对象{} o2[key] = {}; deepCopy(item, o2[key]); } else if (item instanceof Array) { // 若item是数组[] o2[key] = []; deepCopy(item, o2[key]); } else { // (否则)若是简单类型 o2[key] = o1[key]; } } } deepCopy(obj1, obj2); // 执行深拷贝函数 console.dir(obj2); // 此时修改obj1中的成员是否会影响obj2？ obj1.dog.name = 'xxx'; obj1.friends[0] = 'xxx'; console.dir(obj2); // 发现 obj2的全部属性都没有被改变 /*------------------------------------------------ 这就是"深拷贝"，复制对象成员时，把普通属性和对象属性(底层与深层)一起都复制过来，实现完全的拷贝。 --------------------------------------------------*/ （返回 [对象拷贝](#6.3.1 对象拷贝)）递归案例5 // 利用递归实现遍历DOM树即遍历某元素下的所有(包括更深层的)子元素 function loadTree(parent) { for (var i = 0; i < parent.children.length; i++) { var child = parent.children[i]; // console.log(child); 调试检查 loadTree(child); // 递归调用自身 } } loadTree(document.body); // 遍历body标签下的所有子元素 // 实际上对于上例仅实现遍历的意义并不大这里赋予它更多的功能 // 传入一个新的功能去操作遍历完后获取的元素对象实现定制目的 function loadTree(parent, callback) { for (var i = 0; i < parent.children.length; i++) { var child = parent.children[i]; if (callback) { callback(child); } loadTree(child); // 递归调用 } } // 遍历完ul列表并实现点击某项列表项显示它的内容 var ul = document.getElementById('list'); loadTree(ul, function (element) { element.onclick = function () { console.log(this.innerText); } });

本文章由javascript技术分享原创和收集

Javascript 知识点 笔记总结

Javascript 知识点笔记总结