JS面试题-记录

1. 禁止鼠标右键
   contextmenu 是当浏览者按下鼠标右键出现菜单时或者通过键盘的按键触发页面菜单时触发的事件 [ 试试在页面中的 中加入 onContentMenu="return false" 就可禁止使用鼠标右键了

2. ajax事件
   $.post(url)是ajax请求；
   ajax的事件是：
   ajaxComplete(callback)
   ajaxError(callback)
   ajaxSend(callback)
   ajaxStart(callback)
   ajaxStop(callback)
   ajaxSuccess(callback)

3. 类
   类的构造函数，不使用new是没法调用的，会报错。这是它跟普通构造函数的一个主要区别，后者不用new也可以执行。

4. export & import 用法

export {name1,name2, …,nameN};
export {variable1asname1,variable2asname2, …,nameN};
export letname1,name2, …,nameN; // also var
export letname1= …,name2= …, …,nameN; // also var, const

export expression;
export default expression;
export default function (…) { … } // also class, function*
export default function name1(…) { … } // also class, function*
export {name1as default, … };

export * from …;
export {name1,name2, …,nameN} from …;
export {import1asname1,import2asname2, …,nameN} from …;

import defaultMember from "module-name";
import * as name from "module-name";
import { member } from "module-name";
import { member as alias } from "module-name";
import { member1 , member2 } from "module-name";
import { member1 , member2 as alias2 , [...] } from "module-name";
import defaultMember, { member [ , [...] ] } from "module-name";
import defaultMember, * as name from "module-name";
import "module-name";

5. Angular
   Angular 没有$send.

• $emit只能向parent controller传递event与data
• $broadcast只能向child controller传递event与data
• $on用于接收event与data

发送消息： emit(name, data) 或者 broadcast(name, data);

接收消息： $scope.on(name,function(event,data){ });

区别：broadcast 广播给子controller

broadcast 是从发送者向他的子scope广播一个事件。

$emit 广播给父controller，父controller 是可以收到消息

$on 有两个参数function(event,msg) 第一个参数是事件对象，第二个参数是接收到消息信息

6. 全局函数
   JavaScript中只有global全局对象，并没有window全局对象，window对象是浏览器厂商实现的，所以window对象下的setTimeOut方法不能算作JavaScript的全局函数。

JavaScript全局函数.png

7. 数组长度
   ECMAScript数组的大小是可以动态调整的，既可以随着数据的添加自动增长以容纳新增数据。当把一个值放在超出当前数组大小的位置上时，数组就会重新计算长度值，即长度值等于最后一项的索引加一，前面的值都自动被赋值为了undefined了。

8. JS对象分类
   JS中，可以将对象分为“内部对象”、“宿主对象”和“自定义对象”三种。

• 内部对象
  js中的内部对象包括Array、Boolean、Date、Function、Global、Math、Number、Object、RegExp、String以及各种错误类对象，包括Error、EvalError、RangeError、ReferenceError、SyntaxError和TypeError。
  其中Global和Math这两个对象又被称为“内置对象”，这两个对象在脚本程序初始化时被创建，不必实例化这两个对象。

• 宿主对象

宿主对象就是执行JS脚本的环境提供的对象。对于嵌入到网页中的JS来说，其宿主对象就是浏览器提供的对象，所以又称为浏览器对象，如IE、Firefox等浏览器提供的对象。不同的浏览器提供的宿主对象可能不同，即使提供的对象相同，其实现方式也大相径庭！这会带来浏览器兼容问题，增加开发难度。
浏览器对象有很多，如Window和Documen，Element，form，image，等等。

• 自定义对象

顾名思义，就是开发人员自己定义的对象。JS允许使用自定义对象，使JS应用及功能得到扩充

9. Angular 服务与指令
   angular 指令的link函数中进行dom操作和事件绑定，服务主要是封装与后台交互的数据接口提供复用性。

10. new 操作符创建的对象
    f instanceof Object // true ;
    f instanceof Function //false ;
    由此可见用new操作符创建的f只是对象,所以只能继承于Object.prototype.
    但是F是多继承，可以通过F.a , F.b拿到a,b的值, 具体原因得用原型链解释。

所有普通对象都源于这个Object.prototype对象，只要是对象，都能访问到a ，而f通过new 关键词进行函数调用，之后无论如何都会返回一个与F关联的普通对象（因为不是通过函数构造创建的对象，所以不是函数对象，也就 取不到b了 ）

11. DNS
    A：DNS就是将域名翻译成IP地址。
    B：主要用UDP，但是当请求字节过长超过512字节时用TCP协议，将其分割成多个片段传输。
    C：DNS协议默认端口号是53。
    D：操作系统的DNS缓存：windows DNS缓存的默认值是 MaxCacheTTL，它的默认值是86400s，也就是一天。macOS 严格遵循DNS协议中的TTL。
    游览器的DNS缓存：chrome对每个域名会默认缓存60s；IE将DNS缓存30min；Firefox默认缓存时间只有1分钟；Safari约为10S。

12. 判断数组
    Object.prototype.toString.call(arr) === '[object Array]';

13. JS类型转换
    if(x) 这里期望 x 是一个布尔类型的原始值，而 x 是一个对象，任何对象转为布尔值，都为得到 true（切记！在 JS 中，只有 0，-0，NaN，""，null，undefined 这六个值转布尔值时，结果为 false）。
    题目的第二部分，一定要注意 y = Boolean(0)，而不是 y = new Boolean(0)。这两个有很大区别，用 new 调用构造函数会新建一个布尔对象，此处没有加 new，进行的是显示类型转换，正如上述第一条所说，0 转换布尔，结果为 false，所以此时 y 的值就是 false。如果加了 new，那么 y 就是一个 Boolean 类型的对象，执行 if(y) 时，对象转布尔，始终是 true，所以结果会与不加 new 的时候相反

14. AMD & CMD
    AMD是"Asynchronous Module Definition"的缩写，意思就是"异步模块定义"。它采用异步方式加载模块，模块的加载不影响它后面语句的运行。所有依赖这个模块的语句，都定义在一个回调函数中，等到加载完成之后，这个回调函数才会运行。
    AMD也采用require()语句加载模块，但是不同于CommonJS。
    主要有两个Javascript库实现了AMD规范：require.js和curl.js。
    参考链接：http://www.ruanyifeng.com/blog/2012/10/asynchronous_module_definition.html

AMD 是 RequireJS 在推广过程中对模块定义的规范化产出。
CMD 是 SeaJS 在推广过程中对模块定义的规范化产出。
区别：
1. 对于依赖的模块，AMD 是提前执行，CMD 是延迟执行。
2. CMD 推崇依赖就近，AMD 推崇依赖前置。

// CMD
define(function(require, exports, module) {
var a = require('./a')
a.doSomething()
// 此处略去 100 行
var b = require('./b') // 依赖可以就近书写
b.doSomething()
// ...
})

// AMD 默认推荐的是
define(['./a', './b'], function(a, b) { // 依赖必须一开始就写好
a.doSomething()
// 此处略去 100 行
b.doSomething()
...
})
前端模块化-CommonJS, AMD, CMD, ES6

15. Angular 绑定
    给元素绑定样式 ng-style
    给元素绑定类名 ng-class
    eg:用法①：

    
    用法②：
    
    给元素绑定监听 ng-click等
    显示隐藏 ng-show ng-hide

16. jQuery text() 与 contains()
    text()是jQuery中的方法，可是设置或返回被选元素的文本内容
    ：contains选择器，选取包含指定字符串的元素，字符串也可以是文本
    :input()选择器，选取表单元素
    attr(name,value)属性操作，设置或返回被选元素的属性和属性值

17. 变量申明

(function() {
      var a = b = 5;
  })();   
console.log(b);
console.log(a);

第一个考点在于var a=b=5相当于拆解成var a=b; b=5; 然后，b=5前面没有var，相当于声明为全局变量（这种方式在严格模式下会报错，此题不考虑)。所以就相当于： var b; (fun…{ var a=b; b=5; })(); console.log(b); //5 console.log(a); //报错 此处报错也就是另一个考点，a声明的是函数的局部变量，在函数结束是就销毁了，所以在全局下找不到a，于是报错。

18. null & undefined
    undefined和null与任何有意义的值比较返回的都是false，但是null与undefined之间互相比较返回的是true。

19. JavaScript数字总结

• Javascript中，由于其变量内容不同，变量被分为基本数据类型变量和引用数据类型变量。基本类型变量用八字节内存，存储基本数据类型(数值、布尔值、null和未定义)的值，引用类型变量则只保存对对象、数组和函数等引用类型的值的引用(即内存地址)。
• JS中的数字是不分类型的，也就是没有byte/int/float/double等的差异。
  "JavaScript内部，所有数字都是以64位浮点数形式储存，即使整数也是如此。"

20. Angular 编译
    angularJS肯定是在DOM节点树生成后开始管理节点的，生成后寻找ng-app标记，然后其下属所有节点均由ng来管理。使用compile可以改变原始的dom,在ng创建原始dom实例以及创建scope实例之前. ng-repeat就是一个最好的例子,它就在是compile函数阶段改变原始的dom生成多个原始dom节点,然后每个又生成element实例.

为了解决AngularJS性能问题，编译阶段应分为两个阶段

• compile (绑定DOM)
• link（数据绑定）。

所以绑定dom应该在dom生成以后绑定的。不过也可能是动态生成的哦。

21. 页面性能指标
    白屏时间（first Paint Time）——用户从打开页面开始到页面开始有东西呈现为止

首屏时间——用户浏览器首屏内所有内容都呈现出来所花费的时间

用户可操作时间(dom Interactive)——用户可以进行正常的点击、输入等操作，默认可以统计domready时间，因为通常会在这时候绑定事件操作

总下载时间——页面所有资源都加载完成并呈现出来所花的时间，即页面 onload 的时间

22. 依赖注入
    依赖注入（Dependency Injection），是这样一个过程：由于某客户类只依赖于服务类的一个接口，而不依赖于具体服务类，所以客户类只定义一个注入点。在程序 运行过程中，客户类不直接实例化具体服务类实例，而是客户类的运行上下文环境或专门组件负责实例化服务类，然后将其注入到客户类中，保证客户类的正常运行。

23. 符号优先级
    加号优先级高于 三目运算，低于括号。

24. JavaScript 继承方式
    共6种方式：
    原型链继承、借用构造函数继承、组合继承、原型式继承、寄生式继承、寄生组合式继承。

25. 请求头和响应头
    1)请求(客户端->服务端[request])

    GET(请求的方式) /newcoder/hello.html(请求的目标资源) HTTP/1.1(请求采用的协议和版本号) 
    Accept: */*(客户端能接收的资源类型) 
    Accept-Language: en-us(客户端接收的语言类型) 
    Connection: Keep-Alive(维护客户端和服务端的连接关系) 
    Host: localhost:8080(连接的目标主机和端口号) 
    Referer: http://localhost/links.asp(告诉服务器我来自于哪里) 
    User-Agent: Mozilla/4.0(客户端版本号的名字) 
    Accept-Encoding: gzip, deflate(客户端能接收的压缩数据的类型) 
    If-Modified-Since: Tue, 11 Jul 2000 18:23:51 GMT(缓存时间)  
    Cookie(客户端暂存服务端的信息) 
    Date: Tue, 11 Jul 2000 18:23:51 GMT(客户端请求服务端的时间)

2)响应(服务端->客户端[response])

HTTP/1.1(响应采用的协议和版本号) 200(状态码) OK(描述信息)
  Location: http://www.baidu.com(服务端需要客户端访问的页面路径) 
  Server:apache tomcat(服务端的Web服务端名)
  Content-Encoding: gzip(服务端能够发送压缩编码类型) 
  Content-Length: 80(服务端发送的压缩数据的长度) 
  Content-Language: zh-cn(服务端发送的语言类型) 
  Content-Type: text/html; charset=GB2312(服务端发送的类型及采用的编码方式)
  Last-Modified: Tue, 11 Jul 2000 18:23:51 GMT(服务端对该资源最后修改的时间)
  Refresh: 1;url=http://www.it315.org(服务端要求客户端1秒钟后，刷新，然后访问指定的页面路径)
  Content-Disposition: attachment; filename=aaa.zip(服务端要求客户端以下载文件的方式打开该文件)
  Transfer-Encoding: chunked(分块传递数据到客户端）  
  Set-Cookie:SS=Q0=5Lb_nQ; path=/search(服务端发送到客户端的暂存数据)
  Expires: -1//3种(服务端禁止客户端缓存页面数据)
  Cache-Control: no-cache(服务端禁止客户端缓存页面数据)  
  Pragma: no-cache(服务端禁止客户端缓存页面数据)   
  Connection: close(1.0)/(1.1)Keep-Alive(维护客户端和服务端的连接关系)  
  Date: Tue, 11 Jul 2000 18:23:51 GMT(服务端响应客户端的时间)

在服务器响应客户端的时候，带上Access-Control-Allow-Origin头信息，解决跨域的一种方法。

26. 关于IE, FF浏览器区别
    innerText IE支持，FIREFOX不支持
    document.createElement FIREFOX支持，IE不支持
    用setAttribute设置事件 FIREFOX不支持，IE支持

27. 获取各种宽高

alert($(window).height()); //浏览器当前窗口可视区域高度 
alert($(document).height()); //浏览器当前窗口文档的高度 
alert($(document.body).height());//浏览器当前窗口文档body的高度 
alert($(document.body).outerHeight(true));//浏览器当前窗口文档body的总高度 包括border padding margin 
alert($(window).width()); //浏览器当前窗口可视区域宽度 
alert($(document).width());//浏览器当前窗口文档对象宽度 
alert($(document.body).width());//浏览器当前窗口文档body的高度 
alert($(document.body).outerWidth(true));//浏览器当前窗口文档body的总宽度 包括border padding margin 

jQuery width() 和 height() 方法
width() 方法设置或返回元素的宽度（不包括内边距、边框或外边距）。
height() 方法设置或返回元素的高度（不包括内边距、边框或外边距）。

• height() - 设置或返回元素的高度
• innerWidth() - 返回元素的宽度（包含 padding）
• innerHeight() - 返回元素的高度（包含 padding）
• outerWidth() - 返回元素的宽度（包含 padding 和 border）
• outerHeight() - 返回元素的高度（包含 padding 和 border）

28. typeof

typeof Symbol()    //"symbol"
typeof Number()    //"number"
typeof String()    //"string"
typeof Function()    //"function"
typeof Object()    //"object"
typeof Boolean()    //"boolean"
typeof null    //"object"
typeof undefined    //"undefined"

29. 代码回收

• 全局变量不会被回收。
• 局部变量会被回收，也就是函数一旦运行完以后，函数内部的东西都会被销毁。
• 只要被另外一个作用域所引用就不会被回收

30. float 与 absolute
    float会把浮动元素变成块级元素；绝对定位脱离了文档流

  
           hello
  

首先span不是块级元素，是不支持宽高的，但是style中有了个float：left；就使得span变成了块级元素支持宽高，height:100%;即为，200，宽度由内容撑开。
但是内容中的 i 是绝对定位，脱离了文档流，所以不占父级空间，所以span的width=0

31. Angular 服务
    angularjs的服务是一个单例对象或函数，对外提供特定的功能。
    单例模式是一种常用的软件设计模式。在它的核心结构中只包含一个被称为单例的特殊类。通过单例模式可以保证系统中一个类只有一个实例而且该实例易于外界访问，从而方便对实例个数的控制并节约系统资源。如果希望在系统中某个类的对象只能存在一个，单例模式是最好的解决方案。

单例模式的要点有三个；一是某个类只能有一个实例；二是它必须自行创建这个实例；三是它必须自行向整个系统提供这个实例。