# web前端javascript综合水平测试 178 ## 填空 1. javascript 由 ECMAscript ， DOM ， BOM ，三部分组成，简单介绍一下这三部分 5 ECMAscript: javascript的语言规范， 包括：语法，类型，语句等等 DOM：文档对象模型，指的是html页面上的标签 BOM ：即浏览器对象模型，是浏览器提供的接口 2. 检测数据类型的方式有 typeof ， instanceof ， Object.prototype.toString.call() ， 三种方式什么区别 4 typeof: 原始值数据类型直接返回（null返回Object） , 引用值除了function 返回的是function 其他的引用值返回的是 object instanceof :能检测引用值，原始值不行 Object.prototype.toString.call() 都可以检测 3. 检测NaN的数据类型结果为 [object Number] 5 4. js中 对象转json的方法为 JSON.stringify() ， json格式转对象的方法为 JSON.parse() 5 5. js 浏览器对象模型包括 window ， location ， screen ， navigator ， history ，五部份 分别介绍一下这5部分 5 window: 浏览器的窗口 location:浏览器当前url信息 screen:客户端屏幕信息 navigator:浏览器本身信息 history:记录历史信息 6. var a=1;console.log(a++) 运行的结果为： 1 5 js运算符的优先级 优先级从高到低依次是：（）; 一元加减 ;求幂 ; *，/ ; +,- ; = ; 4 7. js设置属性和属性值的方法为： object.setAttribute(attribute,value) 5 8. 五大主流浏览器及内核 Chrome:Webkit/blink; Safari:Webkit; IE:trident; FireFox:gecko; Opera: presto 5 9. jq ajax基本结构及解释 5 $.ajax({ url: "address", // 网络地址 data:obj, //传输数据 type:"GET", //传输方法 dataType:"json", //数据类型 success: function (res) { //成功返回的函数方法 console.log(res) } }); 10. 本地缓存的增删改查 5 增：localStorage.setItem(key, obj)； 删：localStorage.removeItem(key); 改：localStorage.setItem(key, obj)； 查：localStorage.getItem(key); 11. jq选择器列举 4 $(".class") $("p") $("#id") $("ul li:first") $("p[target = "xxx"]") ## 指出下面代码运行结果并分析其执行过程 1 . 10 ``` function a(n) { if (n <= 1) { return 1 } else { return n * a(n - 1) } } console.log(a(5)) //120 调用a函数递归5*4*3*2*1=120 var cheng=a //把函数a赋给cheng a=null //a的值改为null console.log(cheng(5)) //执行cheng时return的a找不到，故错误Error: a is not a function ``` 2 10 ``` function C1(name) { if (name) { this.name = name; } } function C2(name) { this.name = name; } function C3(name) { this.name = name || 'join'; } //c1/2/3的原型的name为tom C1.prototype.name = 'Tom';//调用时没有name传值，if里的语句不调用，故找原型的name为tom C2.prototype.name = 'Tom';//调用时没有name传值，故this.name为undefined C3.prototype.name = 'Tom';//调用时没有name传值，故name为false||'join'这个true，||返回第一个真值，故this.name为join alert((new C1().name) + (new C2().name) + (new C3().name)); //Tomundefinedjoin ``` 3 10 ``` function fn() { this.user = '追梦子'; var obj={user:"momo"} return {}; } var a = new fn; console.log(a.user); //undefined //构造函数中的this与被创建的新对象a绑定，当函数return的值为对象时，this就指向这个被return的对象，对象里为空故.user为undefined ``` 4 10 ``` window.color = 'red'; document.color = 'yellow'; var s1 = {color: 'blue' }; function changeColor(){ console.log(this.color); } changeColor.call(); //red 默认window借用changeColor方法输出this.color及window的颜色red changeColor.call(window); //red 同上 changeColor.call(document); //yellow document借用changeColor方法输出document.color及document的颜色yellow changeColor.call(this); //red this默认是window的故同window changeColor.call(s1); //blue s1借用changeColor方法输出s1.color及s1的颜色blue ``` ## 简答题 1. 说明call,apply,bind 的区别几个 10 call参数一个个传参； apply 参数放到一个数组传参； bind是返回对应函数，便于稍后调用，apply、call是立即调用； 2. js的typeof的返回值有哪些 10 ​ number, boolean, string, undefined, object, function, 3. 说出数组相关的几个方法并说明作用 6 push() 在末端添加项 pop() 从末端移除并返回该元素 shift() 从首端移除并返回该元素 unshift() 从首端添加项 splice(p, d, items) —— 从p开始删除d个元素，并插入 items 4. ajax请求时的get、post的区别 5 ​ 使用Get请求时,参数在URL中显示, 发送数据量小 ,不安全 ​ 使用Get请求时,参数不会在URL中显示, 发送数据量大 ,安全 5. 如何阻止浏览器的默认事件 5 event.preventDefault(); 6. 如何阻止事件冒泡 5 event.stopPropagation(); 7. == 和===的区别 5 ===比较类型和值，==只比较值 8. 局部变量和全局变量的区别 10 1. 作用域不同：全局作用域为整个程序，而局部为当前函数或循环等 2. 内存存储方式不同：全局存储在全局数据区中，局部存储在栈区 3. 生命期不同：全局的生命期随主程序的销毁而销毁，局部随函数或循环退出就销毁 4. 使用方式不同：全局声明后程序的各个部分都可以用到，局部只能在局部使用。 ## 通过代码实现下面要求 1. 通过原型链实现对象继承 10 **function** Parent(p) { ​ ​ this.p = p; ​ this.psay = **function** () { ​ console.log("Parent:"+p); ​ } ​ } **function** Child(c) { ​ **var** c = c; ​ this.csay = **function** () { ​ console.log("childName: "+c) ​ } ​ } ​ **function** GrandChild(g) { ​ this.g = g; ​ this.gsay = **function** () { ​ console.log("grandChildName :"+ this.g); ​ } ​ } ​ **let** parent = new Parent(); ​ Child.prototype = parent; ​ **let** child = new Child(); ​ GrandChild.prototype = child; ​ **let** grandchild = new GrandChild(); 2. js手动实现 jq的链式操作 10 function Person(){}; Person.prototype ={ ​ setName:function(name){ ​ this.name = name; ​ return this; ​ }, ​ setAge:function(age){ ​ this.age = age; ​ return this; ​ }, ​ setSex:function(sex){ ​ this.sex = sex; ​ return this; ​ } } var Person= new Person(); Person.setName("Tom").setAge(24).setSex("male"); 3. 做一个网页计算器 实现输入两个数 完成加减乘除四则运算 10 =      4. 实现一个打点计时器，要求 1、从 start 到 end（包含 start 和 end），每隔 100 毫秒 console.log 一个数字，每次数字增幅为 1（start 和end为用户输入） 2、返回的对象中需要包含一个 cancel 方法，用于停止定时操作 start = prompt('输入一个数从它开始到逐渐加一'); end = prompt('一直加到几为止'); count(start,end); **function** count(start, end) { console.log(start); **var** temp=setInterval(**function**(){ ​ if(start                      文章标题             作者             简介             日期               ​ $(document).ready(**function**() { ​ **var** s = ""; ​ for(**var** i = 0; i < stu.length; i++) { ​ s = "" + stu[i].title + "" + stu[i].auth + "" + ​ stu[i].content + "" + stu[i].date + ""; ​ $("#tab").append(s); ​ } ​ }); 6. 实现 fizzBuzz 函数，参数 num 与返回值的关系如下： 1、如果 num 能同时被 3 和 5 整除，返回字符串 fizzbuzz 2、如果 num 能被 3 整除，返回字符串 fizz 3、如果 num 能被 5 整除，返回字符串 buzz 4、如果参数为空或者不是 Number 类型，返回 false 5、其余情况，返回参数 num **function** fizzBuzz(num) { if(num%3==0&&num%5==0){ ​ return "fizzbuzz"; }else if(num%3==0){ ​ return "fizz"; }else if(num%5==0){ ​ return "buzz"; }else if(typeof(num)!="number"){ ​ return false; }else{ ​ return num; } }