前端学习---js.1

版权声明：yx全栈学习 https://blog.csdn.net/qq_43671996/article/details/84229250

1、介绍js的基本数据类型　　

答： Undefined、Null、Boolean、Number、String

　　

2、js有哪些内置对象？　

答：数据封装类对象：Object、Array、Boolean、Number 和 String

　　其他对象：Function、Arguments、Math、Date、RegExp、Error

　　

3、this对象的理解　

答：this总是指向函数的直接调用者（而非间接调用者）；

　　如果有new关键字，this指向new出来的那个对象；

　　在事件中，this指向触发这个事件的对象，特殊的是，IE中的attachEvent中的this总是指向全局对象Window。

　　

4、eval是做什么的？　

答：它的功能是把对应的字符串解析成JS代码并运行；

　　应该避免使用eval，不安全，非常耗性能（2次，一次解析成js语句，一次执行）。

　　由JSON字符串转换为JSON对象的时候可以用eval，var obj =eval('('+ str +')')。

　　

5、DOM怎样添加、移除、移动、复制、创建和查找节点

答：

// 创建新节点

　　createDocumentFragment() //创建一个DOM片段

　　createElement() //创建一个具体的元素

　　createTextNode() //创建一个文本节点

　　// 添加、移除、替换、插入

　　appendChild()

　　removeChild()

　　replaceChild()

　　insertBefore() //在已有的子节点前插入一个新的子节点

　　// 查找

　　getElementsByTagName() //通过标签名称

　　getElementsByName() //通过元素的Name属性的值(IE容错能力较强，会得到一个数组，其中包括id等于name值的)

　　getElementById() //通过元素Id，唯一性

　　

 

6、null和undefined的区别？

答：

　　null是一个表示"无"的对象，转为数值时为0；undefined是一个表示"无"的原始值，转为数值时为NaN。

　　undefined：

　　（1）变量被声明了，但没有赋值时，就等于undefined。

　　（2) 调用函数时，应该提供的参数没有提供，该参数等于undefined。

　　（3）对象没有赋值的属性，该属性的值为undefined。

　　（4）函数没有返回值时，默认返回undefined。

　　null：

　　（1） 作为函数的参数，表示该函数的参数不是对象。

　　（2） 作为对象原型链的终点。

 

7、new操作符具体干了什么呢?

答：

　　（1）创建一个空对象，并且 this 变量引用该对象，同时还继承了该函数的原型。

　　（2）属性和方法被加入到 this 引用的对象中。

　　（3）新创建的对象由 this 所引用，并且最后隐式的返回 this 。

 

8、JSON 的了解？

答：

　　JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式。它是基于JavaScript的一个子集。数据格式简单, 易于读写, 占用带宽小。

　　格式：采用键值对，例如：{'age':'12', 'name':'back'}

 

9、call() 和 apply() 的区别和作用？

答：

　　apply()函数有两个参数：第一个参数是上下文，第二个参数是参数组成的数组。如果上下文是null，则使用全局对象代替。

　　如：function.apply(this,[1,2,3]);

　　call()的第一个参数是上下文，后续是实例传入的参数序列。

　　如：function.call(this,1,2,3);

　　

10、如何获取UA？

  答：

　　function whatBrowser() {

　　document.Browser.Name.value=navigator.appName;

　　document.Browser.Version.value=navigator.appVersion;

　　document.Browser.Code.value=navigator.appCodeName;

　　document.Browser.Agent.value=navigator.userAgent;

　　}

　　其他

　　

 

11、哪些常见操作会造成内存泄漏？

答：

　　内存泄漏指任何对象在您不再拥有或需要它之后仍然存在。

　　垃圾回收器定期扫描对象，并计算引用了每个对象的其他对象的数量。如果一个对象的引用数量为 0（没有其他对象引用过该对象），或对该对象的惟一引用是循环的，那么该对象的内存即可回收。

　　setTimeout 的第一个参数使用字符串而非函数的话，会引发内存泄漏。

　　闭包、控制台日志、循环（在两个对象彼此引用且彼此保留时，就会产生一个循环）。

 

12、线程与进程的区别

答：

　　一个程序至少有一个进程,一个进程至少有一个线程。

　　线程的划分尺度小于进程，使得多线程程序的并发性高。

　　另外，进程在执行过程中拥有独立的内存单元，而多个线程共享内存，从而极大地提高了程序的运行效率。

　　线程在执行过程中与进程还是有区别的。每个独立的线程有一个程序运行的入口、顺序执行序列和程序的出口。但是线程不能够独立执行，必须依存在应用程序中，由应用程序提供多个线程执行控制。

　　从逻辑角度来看，多线程的意义在于一个应用程序中，有多个执行部分可以同时执行。但操作系统并没有将多个线程看做多个独立的应用，来实现进程的调度和管理以及资源分配。这就是进程和线程的重要区别。

 

 

 

13、如何解决跨域问题

JSONP：

原理是：动态插入script标签，通过script标签引入一个js文件，这个js文件载入成功后会执行我们在url参数中指定的函数，并且会把我们需要的json数据作为参数传入。

由于同源策略的限制，XmlHttpRequest只允许请求当前源（域名、协议、端口）的资源，为了实现跨域请求，可以通过script标签实现跨域请求，然后在服务端输出JSON数据并执行回调函数，从而解决了跨域的数据请求。

优点是兼容性好，简单易用，支持浏览器与服务器双向通信。缺点是只支持GET请求。

JSONP：json+padding（内填充），顾名思义，就是把JSON填充到一个盒子里

<script>

    function createJs(sUrl){

        var oScript = document.createElement('script');

        oScript.type = 'text/javascript';

        oScript.src = sUrl;

        document.getElementsByTagName('head')[0].appendChild(oScript);

    }

    createJs('jsonp.js');

    box({

       'name': 'test'

    });

    function box(json){

        alert(json.name);

    }

</script>

 

 

 

14、javascript垃圾回收方法

标记清除（mark and sweep）

这是JavaScript最常见的垃圾回收方式，当变量进入执行环境的时候，比如函数中声明一个变量，垃圾回收器将其标记为“进入环境”，当变量离开环境的时候（函数执行结束）将其标记为“离开环境”。

垃圾回收器会在运行的时候给存储在内存中的所有变量加上标记，然后去掉环境中的变量以及被环境中变量所引用的变量（闭包），在这些完成之后仍存在标记的就是要删除的变量了

引用计数(reference counting)

在低版本IE中经常会出现内存泄露，很多时候就是因为其采用引用计数方式进行垃圾回收。引用计数的策略是跟踪记录每个值被使用的次数，当声明了一个 变量并将一个引用类型赋值给该变量的时候这个值的引用次数就加1，如果该变量的值变成了另外一个，则这个值得引用次数减1，当这个值的引用次数变为0的时 候，说明没有变量在使用，这个值没法被访问了，因此可以将其占用的空间回收，这样垃圾回收器会在运行的时候清理掉引用次数为0的值占用的空间。

在IE中虽然JavaScript对象通过标记清除的方式进行垃圾回收，但BOM与DOM对象却是通过引用计数回收垃圾的， 
也就是说只要涉及BOM及DOM就会出现循环引用问题。

 

 

 

 

 

15、快速 排序的思想并实现一个快排？

“快速排序”的思想很简单，整个排序过程只需要三步：

　　（1）在数据集之中，找一个基准点

　　（2）建立两个数组，分别存储左边和右边的数组

　　（3）利用递归进行下次比较

    <script type="text/javascript">

        function quickSort(arr){

            if(arr.length<=1){

                return arr;//如果数组只有一个数，就直接返回；

            }

            var num = Math.floor(arr.length/2);//找到中间数的索引值，如果是浮点数，则向下取整

            var numValue = arr.splice(num,1);//找到中间数的值

            var left = [];

            var right = [];

            for(var i=0;i<arr.length;i++){

                if(arr[i]<numValue){

                    left.push(arr[i]);//基准点的左边的数传到左边数组

                }

                else{

                   right.push(arr[i]);//基准点的右边的数传到右边数组

                }

            }

            return quickSort(left).concat([numValue],quickSort(right));//递归不断重复比较

        }

        alert(quickSort([32,45,37,16,2,87]));//弹出“2,16,32,37,45,87”

    </script>

 

jquery将一些原型属性和方法封装在了jquery.prototype中，为了缩短名称，又赋值给了jquery.fn，这是很形象的写法。

有一些数组或对象的方法经常能使用到，jQuery将其保存为局部变量以提高访问速度。

jquery实现的链式调用可以节约代码，所返回的都是同一个对象，可以提高代码效率。

ES6的了解

新增模板字符串（为JavaScript提供了简单的字符串插值功能）、箭头函数（操作符左边为输入的参数，而右边则是进行的操作以及返回的值Inputs=>outputs。）、for-of（用来遍历数据—例如数组中的值。）arguments对象可被不定参数和默认参数完美代替。ES6将promise对象纳入规范，提供了原生的Promise对象。增加了let和const命令，用来声明变量。增加了块级作用域。let命令实际上就增加了块级作用域。ES6规定，var命令和function命令声明的全局变量，属于全局对象的属性；let命令、const命令、class命令声明的全局变量，不属于全局对象的属性。。还有就是引入module模块的概念

js继承方式及其优缺点

原型链继承的缺点

一是字面量重写原型会中断关系，使用引用类型的原型，并且子类型还无法给超类型传递参数。

借用构造函数（类式继承）

借用构造函数虽然解决了刚才两种问题，但没有原型，则复用无从谈起。所以我们需要原型链+借用构造函数的模式，这种模式称为组合继承

组合式继承

组合式继承是比较常用的一种继承方法，其背后的思路是 使用原型链实现对原型属性和方法的继承，而通过借用构造函数来实现对实例属性的继承。这样，既通过在原型上定义方法实现了函数复用，又保证每个实例都有它自己的属性。

 

 

 

 

 

16、defer和async

defer并行加载js文件，会按照页面上script标签的顺序执行 
async并行加载js文件，下载完成立即执行，不会按照页面上script标签的顺序执行

 

 

 

17、用过哪些设计模式？

（1）工厂模式：

主要好处就是可以消除对象间的耦合，通过使用工程方法而不是new关键字。将所有实例化的代码集中在一个位置防止代码重复。

    （2）工厂模式解决了重复实例化的问题 ，但还有一个问题,那就是识别问题，因为根本无法 搞清楚他们到底是哪个对象的实例。

function createObject(name,age,profession){//集中实例化的函数var obj = new Object();

    obj.name = name;

    obj.age = age;

    obj.profession = profession;

    obj.move = function () {

        return this.name + ' at ' + this.age + ' engaged in ' + this.profession;

    };

    return obj;

}

var test1 = createObject('trigkit4',22,'programmer');//第一个实例var test2 = createObject('mike',25,'engineer');//第二个实例

 

（3）构造函数模式

使用构造函数的方法 ，即解决了重复实例化的问题 ，又解决了对象识别的问题，该模式与工厂模式的不同之处在于：

构造函数方法没有显示的创建对象 (new Object());

直接将属性和方法赋值给 this 对象;

没有 renturn 语句。

18、说说你对闭包的理解

使用闭包主要是为了设计私有的方法和变量。闭包的优点是可以避免全局变量的污染，缺点是闭包会常驻内存，会增大内存使用量，使用不当很容易造成内存泄露。在js中，函数即闭包，只有函数才会产生作用域的概念

闭包有三个特性：

（1）函数嵌套函数

（2）函数内部可以引用外部的参数和变量

（3）参数和变量不会被垃圾回收机制回收

 

 

 

 

 

19、请你谈谈Cookie的弊端

cookie虽然在持久保存客户端数据提供了方便，分担了服务器存储的负担，但还是有很多局限性的。

第一：每个特定的域名下最多生成20个cookie

（1）IE6或更低版本最多20个cookie

（2）IE7和之后的版本最后可以有50个cookie。

（3）Firefox最多50个cookie

（4）chrome和Safari没有做硬性限制

IE和Opera 会清理近期最少使用的cookie，Firefox会随机清理cookie。

cookie的最大大约为4096字节，为了兼容性，一般不能超过4095字节。

IE 提供了一种存储可以持久化用户数据，叫做userdata，从IE5.0就开始支持。每个数据最多128K，每个域名下最多1M。这个持久化数据放在缓存中，如果缓存没有清理，那么会一直存在。

优点：极高的扩展性和可用性

通过良好的编程，控制保存在cookie中的session对象的大小。

通过加密和安全传输技术（SSL），减少cookie被破解的可能性。

只在cookie中存放不敏感数据，即使被盗也不会有重大损失。

控制cookie的生命期，使之不会永远有效。偷盗者很可能拿到一个过期的cookie。

缺点：

`Cookie`数量和长度的限制。每个domain最多只能有20条cookie，每个cookie长度不能超过4KB，否则会被截掉.

安全性问题。如果cookie被人拦截了，那人就可以取得所有的session信息。即使加密也与事无补，因为拦截者并不需要知道cookie的意义，他只要原样转发cookie就可以达到目的了。

有些状态不可能保存在客户端。例如，为了防止重复提交表单，我们需要在服务器端保存一个计数器。如果我们把这个计数器保存在客户端，那么它起不到任何作用。

 

 

 

 

20、浏览器本地存储

在较高版本的浏览器中，js提供了sessionStorage和globalStorage。在HTML5中提供了localStorage来取代globalStorage。

html5中的Web Storage包括了两种存储方式：sessionStorage和localStorage。

sessionStorage用于本地存储一个会话（session）中的数据，这些数据只有在同一个会话中的页面才能访问并且当会话结束后数据也随之销毁。因此sessionStorage不是一种持久化的本地存储，仅仅是会话级别的存储。

而localStorage用于持久化的本地存储，除非主动删除数据，否则数据是永远不会过期的。

web storage和cookie的区别

Web Storage的概念和cookie相似，区别是它是为了更大容量存储设计的。Cookie的大小是受限的，并且每次你请求一个新的页面的时候Cookie都会被发送过去，这样无形中浪费了带宽，另外cookie还需要指定作用域，不可以跨域调用。

除此之外，Web Storage拥有setItem,getItem,removeItem,clear等方法，不像cookie需要前端开发者自己封装setCookie，getCookie。

但是cookie也是不可以或缺的：cookie的作用是与服务器进行交互，作为HTTP规范的一部分而存在 ，而Web Storage仅仅是为了在本地“存储”数据而生

浏览器的支持除了IE７及以下不支持外，其他标准浏览器都完全支持(ie及FF需在web服务器里运行)，值得一提的是IE总是办好事，例如IE7、IE6中的userData其实就是javascript本地存储的解决方案。通过简单的代码封装可以统一到所有的浏览器都支持web storage。

localStorage和sessionStorage都具有相同的操作方法，例如setItem、getItem和removeItem等

 

 

21、cookie 和session 的区别：

 （1）cookie数据存放在客户的浏览器上，session数据放在服务器上。

（2）cookie不是很安全，别人可以分析存放在本地的COOKIE并进行COOKIE欺骗

    考虑到安全应当使用session。

（3）session会在一定时间内保存在服务器上。当访问增多，会比较占用你服务器的性能

     考虑到减轻服务器性能方面，应当使用COOKIE。

 （4）单个cookie保存的数据不能超过4K，很多浏览器都限制一个站点最多保存20个cookie。

 （5）所以个人建议：

    将登陆信息等重要信息存放为SESSION

    其他信息如果需要保留，可以放在COOKIE中

 

 

 

 

 

 

 

 

 

 

 

 

 

22、DOM操作——怎样添加、移除、移动、复制、创建和查找节点。

1）创建新节点

      createDocumentFragment()    //创建一个DOM片段

      createElement()   //创建一个具体的元素

      createTextNode()   //创建一个文本节点

2）添加、移除、替换、插入

      appendChild()

      removeChild()

      replaceChild()

      insertBefore() //并没有insertAfter()

3）查找

      getElementsByTagName()    //通过标签名称

      getElementsByName()    //通过元素的Name属性的值(IE容错能力较强，

      会得到一个数组，其中包括id等于name值的)

      getElementById()    //通过元素Id，唯一性

 

 

 

 

 

23、如何实现浏览器内多个标签页之间的通信?

    调用localstorge、cookies等本地存储方式

 

 

 

 

 

 

 

null和undefined的区别？

null是一个表示”无”的对象，转为数值时为0；undefined是一个表示”无”的原始值，转为数值时为NaN。

当声明的变量还未被初始化时，变量的默认值为undefined。

null用来表示尚未存在的对象，常用来表示函数企图返回一个不存在的对象。

undefined表示”缺少值”，就是此处应该有一个值，但是还没有定义。典型用法是：

（1）变量被声明了，但没有赋值时，就等于undefined。

（2) 调用函数时，应该提供的参数没有提供，该参数等于undefined。

（3）对象没有赋值的属性，该属性的值为undefined。

（4）函数没有返回值时，默认返回undefined。

null表示”没有对象”，即该处不应该有值。典型用法是：

（1） 作为函数的参数，表示该函数的参数不是对象。

1. 作为对象原型链的终点。

24、new操作符具体干了什么呢?

   （1）创建一个空对象，并且 this 变量引用该对象，同时还继承了该函数的原型。

  （2）属性和方法被加入到 this 引用的对象中。

   （3）新创建的对象由 this 所引用，并且最后隐式的返回 this 。

var obj  = {};

obj.__proto__ = Base.prototype;

Base.call(obj);

js延迟加载的方式有哪些？

defer和async、动态创建DOM方式（创建script，插入到DOM中，加载完毕后callBack）、按需异步载入js

call() 和 apply() 的区别和作用？

作用：动态改变某个类的某个方法的运行环境（执行上下文）。

区别参见：[JavaScript学习总结（四）function函数部分][3]

哪些操作会造成内存泄漏？

内存泄漏指任何对象在您不再拥有或需要它之后仍然存在。

垃圾回收器定期扫描对象，并计算引用了每个对象的其他对象的数量。如果一个对象的引用数量为 0（没有其他对象引用过该对象），或对该对象的惟一引用是循环的，那么该对象的内存即可回收。

setTimeout 的第一个参数使用字符串而非函数的话，会引发内存泄漏。

闭包、控制台日志、循环（在两个对象彼此引用且彼此保留时，就会产生一个循环）

详见：[详解js变量、作用域及内存][4]

 

 

 

25、列举IE 与其他浏览器不一样的特性？

（1）IE支持currentStyle，FIrefox使用getComputStyle

（2）IE 使用innerText，Firefox使用textContent

（3）滤镜方面：IE:filter:alpha(opacity= num)；Firefox：-moz-opacity:num

（4）事件方面：IE：attachEvent：火狐是addEventListener

（5）鼠标位置：IE是event.clientX；火狐是event.pageX

（6）IE使用event.srcElement；Firefox使用event.target

（7）IE中消除list的原点仅需margin:0即可达到最终效果；FIrefox需要设置margin:0;padding:0以及list-style:none

（8）CSS圆角：ie7以下不支持圆角

 

 

 

 

 

 

 

 

 

 

26、javascript对象的几种创建方式

（1）工厂模式

（2）构造函数模式

（3）原型模式

（4）混合构造函数和原型模式

（5）动态原型模式

（6）寄生构造函数模式

（7）稳妥构造函数模式

27、javascript继承的6种方法

（1）原型链继承

（2）借用构造函数继承

（3）组合继承(原型+借用构造)

（4）原型式继承

（5）寄生式继承

（6）寄生组合式继承

28、创建ajax的过程

    (1)创建`XMLHttpRequest`对象,也就是创建一个异步调用对象.

    (2)创建一个新的`HTTP`请求,并指定该`HTTP`请求的方法、`URL`及验证信息.

    (3)设置响应`HTTP`请求状态变化的函数.

    (4)发送`HTTP`请求.

    (5)获取异步调用返回的数据.

    (6)使用JavaScript和DOM实现局部刷新.

    var xmlHttp = new XMLHttpRequest();

    xmlHttp.open('GET','demo.php','true');

    xmlHttp.send()

    xmlHttp.onreadystatechange = function(){

        if(xmlHttp.readyState === 4 & xmlHttp.status === 200){

        }

    }

 

 

 

 

 

 

 

 

 

 

 

 

29、异步加载和延迟加载

（1）异步加载的方案： 动态插入script标签

（2）通过ajax去获取js代码，然后通过eval执行

（3）script标签上添加defer或者async属性

（4）创建并插入iframe，让它异步执行js

（5）延迟加载：有些 js 代码并不是页面初始化的时候就立刻需要的，而稍后的某些情况才需要的。

 

 

 

 

30、Flash、Ajax各自的优缺点，在使用中如何取舍？

• Flash适合处理多媒体、矢量图形、访问机器；对CSS、处理文本上不足，不容易被搜索。

-Ajax对CSS、文本支持很好，支持搜索；多媒体、矢量图形、机器访问不足。

• 共同点：与服务器的无刷新传递消息、用户离线和在线状态、操作DOM

请解释一下 JavaScript 的同源策略。

概念:同源策略是客户端脚本（尤其是Javascript）的重要的安全度量标准。它最早出自Netscape Navigator2.0，其目的是防止某个文档或脚本从多个不同源装载。

这里的同源策略指的是：协议，域名，端口相同，同源策略是一种安全协议。

指一段脚本只能读取来自同一来源的窗口和文档的属性。

为什么要有同源限制？

我们举例说明：比如一个黑客程序，他利用Iframe把真正的银行登录页面嵌到他的页面上，当你使用真实的用户名，密码登录时，他的页面就可以通过Javascript读取到你的表单中input中的内容，这样用户名，密码就轻松到手了。

缺点：

现在网站的JS 都会进行压缩，一些文件用了严格模式，而另一些没有。这时这些本来是严格模式的文件，被 merge 后，这个串就到了文件的中间，不仅没有指示严格模式，反而在压缩后浪费了字节。

 

31、事件、IE与火狐的事件机制有什么区别？ 如何阻止冒泡？

（1）我们在网页中的某个操作（有的操作对应多个事件）。例如：当我们点击一个按钮就会产生一个事件。是可以被 JavaScript 侦测到的行为。

（2）事件处理机制：IE是事件冒泡、firefox同时支持两种事件模型，也就是：捕获型事件和冒泡型事件。；

（3） `ev.stopPropagation()`;注意旧ie的方法 `ev.cancelBubble = true`;

ajax的缺点和在I  E下的问题？

详情请见：[JavaScript学习总结（七）Ajax和Http状态字][14]

 

 

32、ajax的缺点

  （1）ajax不支持浏览器back按钮。

  （2）安全问题 AJAX暴露了与服务器交互的细节。

  （3）对搜索引擎的支持比较弱。

  （4）破坏了程序的异常机制。

（5）不容易调试。

 

 

 

 

 

33、IE缓存问题

在IE浏览器下，如果请求的方法是GET，并且请求的URL不变，那么这个请求的结果就会被缓存。解决这个问题的办法可以通过实时改变请求的URL，只要URL改变，就不会被缓存，可以通过在URL末尾添加上随机的时间戳参数('t'= + new Date().getTime())

或者：

open('GET','demo.php?rand=+Math.random()',true);//

 

Ajax请求的页面历史记录状态问题

可以通过锚点来记录状态，location.hash。让浏览器记录Ajax请求时页面状态的变化。

还可以通过HTML5的history.pushState，来实现浏览器地址栏的无刷新改变

 

 

 

 

34、说说你对Promise的理解

依照 Promise/A+ 的定义，Promise 有四种状态：

pending: 初始状态, 非 fulfilled 或 rejected.

fulfilled: 成功的操作.

rejected: 失败的操作.

settled: Promise已被fulfilled或rejected，且不是pending

另外， fulfilled 与 rejected 一起合称 settled。

Promise 对象用来进行延迟(deferred) 和异步(asynchronous ) 计算。

Promise 的构造函数

构造一个 Promise，最基本的用法如下：

    var promise = new Promise(function(resolve, reject) {

        if (...) {  // succeed

            resolve(result);

        } else {   // fails

            reject(Error(errMessage));

        }

    });

 

 

 

Promise 实例拥有 then 方法（具有 then 方法的对象，通常被称为 thenable）。它的使用方法如下：

promise.then(onFulfilled, onRejected)

接收两个函数作为参数，一个在 fulfilled 的时候被调用，一个在 rejected 的时候被调用，接收参数就是 future，onFulfilled对应 resolve, onRejected 对应 reject。

 

 

 

 

35、实现一个函数clone，可以对JavaScript中的5种主要的数据类型（包括Number、String、Object、Array、Boolean）进行值复制

    Object.prototype.clone = function(){

            var o = this.constructor === Array ? [] : {};

            for(var e in this){

                    o[e] = typeof this[e] === "object" ? this[e].clone() : this[e];

            }

            return o;

    }

 

 

 

 

 

 

 

 

 

36、说说严格模式的限制

严格模式主要有以下限制：

变量必须声明后再使用

函数的参数不能有同名属性，否则报错

不能使用with语句

不能对只读属性赋值，否则报错

不能使用前缀0表示八进制数，否则报错

不能删除不可删除的属性，否则报错

不能删除变量delete prop，会报错，只能删除属性delete global[prop]

eval不会在它的外层作用域引入变量

eval和arguments不能被重新赋值

arguments不会自动反映函数参数的变化

不能使用arguments.callee

不能使用arguments.caller

禁止this指向全局对象

不能使用fn.caller和fn.arguments获取函数调用的堆栈

增加了保留字（比如protected、static和interface）

设立”严格模式”的目的，主要有以下几个：

消除Javascript语法的一些不合理、不严谨之处，减少一些怪异行为;

消除代码运行的一些不安全之处，保证代码运行的安全；

提高编译器效率，增加运行速度；

为未来新版本的Javascript做好铺垫。

注：经过测试IE6,7,8,9均不支持严格模式。

 

 

 

 

 

 

 

 

 

 

 

 

37、如何删除一个cookie

（1）将时间设为当前时间往前一点。

var date = new Date();

date.setDate(date.getDate() - 1);//真正的删除

 

setDate()方法用于设置一个月的某一天。

（2）expires的设置

    document.cookie = 'user='+ encodeURIComponent('name')  + ';expires = ' + new Date(0)

 

<strong>，<em>和<b>，<i>标签

<strong> 标签和 <em> 标签一样，用于强调文本，但它强调的程度更强一些。

em 是 斜体强调标签，更强烈强调，表示内容的强调点。相当于html元素中的 <i>...</i>;

< b > < i >是视觉要素，分别表示无意义的加粗，无意义的斜体。

em 和 strong 是表达要素(phrase elements)。

 

 

 

 

 

 

 

 

 

 

 

 

 

38、编写一个方法 求一个字符串的字节长度

假设：一个英文字符占用一个字节，一个中文字符占用两个字节

 function GetBytes(str){

        var len = str.length;

        var bytes = len;

        for(var i=0; i<len; i++){

            if (str.charCodeAt(i) > 255) bytes++;

        }

        return bytes;

    }

alert(GetBytes("你好,as"));

 

 

 

 

 

39、说说你对MVC和MVVM的理解

MVC

View 传送指令到 Controller

Controller 完成业务逻辑后，要求 Model 改变状态

Model 将新的数据发送到 View，用户得到反馈

所有通信都是单向的。

Angular它采用双向绑定（data-binding）：View的变动，自动反映在 ViewModel，反之亦然。

组成部分Model、View、ViewModel

View：UI界面

ViewModel：它是View的抽象，负责View与Model之间信息转换，将View的Command传送到Model；

Model：数据访问层

请解释什么是事件代理

事件代理（Event Delegation），又称之为事件委托。是 JavaScript 中常用绑定事件的常用技巧。顾名思义，“事件代理”即是把原本需要绑定的事件委托给父元素，让父元素担当事件监听的职务。事件代理的原理是DOM元素的事件冒泡。使用事件代理的好处是可以提高性能。

attribute和property的区别是什么？

attribute是dom元素在文档中作为html标签拥有的属性；

property就是dom元素在js中作为对象拥有的属性。

所以：

对于html的标准属性来说，attribute和property是同步的，是会自动更新的，

但是对于自定义的属性来说，他们是不同步的，

 

40、请描述一下 cookies，sessionStorage 和 localStorage 的区别？

（1）cookie:存储在用户本地终端上的数据。有时也用cookies，指某些网站为了辨别用户身份，进行session跟踪而存储在本地终端上的数据，通常经过加密。一般应用最典型的案列就是判断注册用户是否已经登过该网站。

（2）HTML5 提供了两种在客户端存储数据的新方法：(http://www.w3school.com.cn/html5/html_5_webstorage.asp)...两者都是仅在客户端（即浏览器）中保存，不参与和服务器的通信；

localStorage - 没有时间限制的数据存储,第二天、第二周或下一年之后，数据依然可用。

如何创建和访问 localStorage：

 

<script type="text/javascript">

localStorage.lastname="Smith";

document.write(localStorage.lastname);</script>

 

下面的例子对用户访问页面的次数进行计数：

<script type="text/javascript">

if (localStorage.pagecount){

  localStorage.pagecount=Number(localStorage.pagecount) +1;

  }else{

  localStorage.pagecount=1;

  }

document.write("Visits "+ localStorage.pagecount + " time(s).");</script>

 

sessionStorage - 针对一个 session 的数据存储,当用户关闭浏览器窗口后，数据会被删除。

创建并访问一个 sessionStorage：

<script type="text/javascript">

  sessionStorage.lastname="Smith";

  document.write(sessionStorage.lastname);</script>

下面的例子对用户在当前 session 中访问页面的次数进行计数：

<script type="text/javascript">

if (sessionStorage.pagecount){

  sessionStorage.pagecount=Number(sessionStorage.pagecount) +1;

  }else{

  sessionStorage.pagecount=1;

  }

document.write("Visits "+sessionStorage.pagecount+" time(s) this session.");</script>

 

sessionStorage 、localStorage 和 cookie 之间的区别
共同点：都是保存在浏览器端，且同源的。

区别：cookie数据始终在同源的http请求中携带（即使不需要），即cookie在浏览器和服务器间来回传递；cookie数据还有路径（path）的概念，可以限制cookie只属于某个路径下。存储大小限制也不同，cookie数据不能超过4k，同时因为每次http请求都会携带cookie，所以cookie只适合保存很小的数据，如会话标识。

 

而sessionStorage和localStorage不会自动把数据发给服务器，仅在本地保存。sessionStorage和localStorage 虽然也有存储大小的限制，但比cookie大得多，可以达到5M或更大。

 

数据有效期不同，sessionStorage：仅在当前浏览器窗口关闭前有效，自然也就不可能持久保持；localStorage：始终有效，窗口或浏览器关闭也一直保存，因此用作持久数据；cookie只在设置的cookie过期时间之前一直有效，即使窗口或浏览器关闭。

 

作用域不同，sessionStorage不在不同的浏览器窗口中共享，即使是同一个页面；localStorage 在所有同源窗口中都是共享的；cookie也是在所有同源窗口中都是共享的。Web Storage 支持事件通知机制，可以将数据更新的通知发送给监听者。Web Storage 的 api 接口使用更方便。

 

 

1. 例举3种强制类型转换和2种隐式类型转换?
       强制（parseInt,parseFloat,number）
       隐式（== – ===）
    
2. split() join() 的区别
       前者是切割成数组的形式，后者是将数组转换成字符串。
3. 数组方法pop() push() unshift() shift()
       Push()尾部添加，pop()尾部删除；Unshift()头部添加，shift()头部删除。
4. 事件绑定和普通事件有什么区别

普通添加事件的方法：

var btn = document.getElementById("hello");

btn.onclick = function(){

         alert(1);

}

btn.onclick = function(){

         alert(2);

}

执行上面的代码只会alert 2 

事件绑定方式添加事件：

var btn = document.getElementById("hello");

btn.addEventListener("click",function(){

         alert(1);

},false);

btn.addEventListener("click",function(){

         alert(2);

},false);

执行上面的代码会先alert 1 再 alert 2

普通添加事件的方法不支持添加多个事件，最下面的事件会覆盖上面的，而事件绑定（addEventListener）方式添加事件可以添加多个。

.IE和DOM事件流的区别
    ①执行顺序不一样；②参数不一样；③事件加不加on；④this指向问题。

45、IE和标准下有哪些兼容性的写法
    Var ev = ev || window.event
    document.documentElement.clientWidth || document.body.clientWidth
    Var target = ev.srcElement||ev.target。

46、ajax请求的时候get 和post方式的区别
    ①一个在url后面，一个放在虚拟载体里面；
    ②有大小限制；
    ③安全问题；
    ④应用不同：一个是论坛等只需要请求的，一个是类似修改密码的。

1. ajax请求时，如何解释json数据
       使用eval parse，鉴于安全性考虑，使用parse更靠谱。
2. 写一个获取非行间样式的函数
   
   function getStyle(obj,attr,value)
   {
   if(!value)
   {
   if(obj.currentStyle)
   {
   return obj.currentStyle(attr)
   }
   else
   {
   obj.getComputedStyle(attr,false)
   }
   }
   else
   {
   obj.style[attr]=value
   }
   }
   
    
3. 事件委托是什么
       让利用事件冒泡的原理，让自己的所触发的事件，让他的父元素代替执行！
4. 如何阻止事件冒泡和默认事件
       canceBubble return false

51、谈性能优化问题

代码层面：避免使用css表达式，避免使用高级选择器，通配选择器。

缓存利用：缓存Ajax，使用CDN，使用外部js和css文件以便缓存，添加Expires头，服务端配置Etag，减少DNS查找等

请求数量：合并样式和脚本，使用css图片精灵，初始首屏之外的图片资源按需加载，静态资源延迟加载。

请求带宽：压缩文件，开启GZIP，

    代码层面的优化

用hash-table来优化查找

少用全局变量

用innerHTML代替DOM操作，减少DOM操作次数，优化javascript性能

用setTimeout来避免页面失去响应

缓存DOM节点查找的结果

避免使用CSS Expression

避免全局查询

避免使用with(with会创建自己的作用域，会增加作用域链长度)

多个变量声明合并

避免图片和iFrame等的空Src。空Src会重新加载当前页面，影响速度和效率

尽量避免写在HTML标签中写Style属性

 

1. 解释jsonp的原理，以及为什么不是真正的ajax
       动态创建script标签，回调函数；Ajax是页面无刷新请求数据操作
2. javascript的本地对象，内置对象和宿主对象
   本地对象为array obj regexp等可以new实例化
   内置对象为gload Math 等不可以实例化的
   宿主为浏览器自带的document,window 等
    
3. document load 和document ready的区别
   Document.onload 是在结构和样式加载完才执行js
   Document.ready原生种没有这个方法，jquery中有 $().ready(function)
    
4. ”==”和“===”的不同
   前者会自动转换类型
   后者不会
    
5. javascript的同源策略
   一段脚本只能读取来自于同一来源的窗口和文档的属性，这里的同一来源指的是主机名、协议和端口号的组合
    

编写一个数组去重的方法
function oSort(arr)
{
var result ={};
var newArr=[];
for(var i=0;i<arr.length;i++)
{
if(!result[arr])
{
newArr.push(arr)
result[arr]=1
}
}
return newArr
}

 

 

 

56、Ajax你以前用过么?简单介绍一下

AJAX = 异步 JavaScript 和 XML。

AJAX 是一种用于创建快速动态网页的技术。通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。传统的网页（不使用AJAX）如果需要更新内容，必需重载整个网页面。有很多使用 AJAX 的应用程序案例：新浪微博、Google 地图、开心网等等。

 

57、 Ajax可以做异步请求么?

可以。Ajax请求默认是异步的.如果想同步把async设置为false就可以了默认是true。如果是jquery $.ajax({ url: some.php, async: false, success : function(){ } }); 如果是原生的js xmlHttp.open("POST",url,false)。

58、一网站如果有大量的人登陆访问。那么会产生很多的session，如果你是程序员你该怎么办。

session默认保存在内存中，内存资源宝贵，session数据量大导致内存利用率高，以下方案解决session内存存储问题：

（1）可以设置session超时时间，达到超时时间session自动清空

 <session-config>

<session-timeout>20</session-timeout>

</session-config>

（2）将session中的数据序列化到硬盘中；

不使用session，使用cookie（此方法存在安全性问题）

 

 

59、Ajax如何实现异步定时5秒刷新？

setInterval(function() {

$("#content").load(location.href+" #content>*","");

}, 5000);

 

1. 如何实现浏览器内多个标签页之间的通信?

调用localstorge、cookies等本地存储方式。

方法一：

localstorge在一个标签页里被添加、修改或删除时，都会触发一个storage事件，通过在另一个标签页里监听storage事件，即可得到localstorge存储的值，实现不同标签页之间的通信。

标签页1：

[html] view plain copy

1. <input id="name">  
2. <input type="button" id="btn" value="提交">  
3. <script type="text/javascript">  
4.     $(function(){    
5.         $("#btn").click(function(){    
6.             var name=$("#name").val();    
7.             localStorage.setItem("name", name);   
8.         });    
9.     });    
10. </script>  

标签页2：

[html] view plain copy

1. <script type="text/javascript">  
2.     $(function(){   
3.         window.addEventListener("storage", function(event){    
4.             console.log(event.key + "=" + event.newValue);    
5.         });     
6.     });  
7. </script>  

 

方法二：

使用cookie+setInterval，将要传递的信息存储在cookie中，每隔一定时间读取cookie信息，即可随时获取要传递的信息。

标签页1：

[html] view plain copy

1. <input id="name">  
2. <input type="button" id="btn" value="提交">  
3. <script type="text/javascript">  
4.     $(function(){    
5.         $("#btn").click(function(){    
6.             var name=$("#name").val();    
7.             document.cookie="name="+name;    
8.         });    
9.     });    
10. </script>  

标签页2：

[html] view plain copy

1. <script type="text/javascript">  
2.     $(function(){   
3.         function getCookie(key) {    
4.             return JSON.parse("{\"" + document.cookie.replace(/;\s+/gim,"\",\"").replace(/=/gim, "\":\"") + "\"}")[key];    
5.         }     
6.         setInterval(function(){    
7.             console.log("name=" + getCookie("name"));    
8.         }, 10000);    
9.     });  
10. </script>  

 

 

 

61、页面可见性（Page Visibility）API 可以有哪些用途？

页面可见性： 就是对于用户来说，页面是显示还是隐藏, 所谓显示的页面，就是我们正在看的页面；隐藏的页面，就是我们没有看的页面。 因为，我们一次可以打开好多标签页面来回切换着，始终只有一个页面在我们眼前，其他页面就是隐藏的，还有一种就是.........，(把浏览器最小化，所有的页面就都不可见了)。

API 很简单，document.hidden 就返回一个布尔值，如果是true, 表示页面可见，false 则表示，页面隐藏。  不同页面之间来回切换，触发visibilitychange事件。 还有一个document.visibilityState, 表示页面所处的状态，取值：visible, hidden 等四个。

document.addEventListener("visibilitychange", function(){

    if(document.hidden){

        document.title ="hidden";

    }else {

        document.title = "visibile";

    }

})

 

我们打开这个页面，然后再打开另一个页面，来回点击这两个页面，当我们看到这个页面时，标题显示visiable ,当我们看另一个页面时，标题显示hidden;

动画，视频，音频都可以在页面显示时打开，在页面隐藏时关闭。

 

62、JavaScript原型，原型链 ？

js原型？

js每声明一个function，都有prototype原型，prototype原型是函数的一个默认属性，在函数的创建过程中由js编译器自动添加。

也就是说：当生产一个function对象的时候，就有一个原型prototype。

举个栗子：

是不是还看到了一个_proto_的属性？！骚年，你的眼睛不错~待会在解释prototype和_proto_的基友关系！

prototype的属性值是一个对象，是属性的集合，是属性的集合，是属性的集合，

 

Js原型链是实现继承的主要方法。其基本思想是：利用原型让一个引用类型继承另一个应用类型的属性和方法。

简单回顾一下构造函数、原型和实例的关系：每个构造函数都有一个原型对象，原型对象都包含一个指向构造函数的指针，而实例都包含一个指向原型对象的内部指针。

 

 

首先，我觉得有必要先解释一下prototype 和_proto_之间的关系。

每一个基本对象都有自己的_proto_属性，而每一个函数对象都有自己的prototype原型（函数对象也属于基本对象，所以也有_proto_）,每当去定义一个prototype的时候，就相当于把该实例的__proto__指向一个结构体，那么这个被指向结构体就称为该实例的原型。 我们还是来看图吧~比较清晰：

var foo = {
       x: 10,
       y: 20
};

　　

解析：当你定义一个函数对象的时候，其内部就有这样一个链表关系。声明foo对象，自带了_proto_的属性，而这个属性指向了prototype，从而实现对象的扩展（例如继承等操作）。

63、Javascript创建对象的几种方式？

javascript是一种“基于prototype的面向对象语言“，与java有非常大的区别，无法通过类来创建对象。那么，既然是面象对象的，如何来创建对象呢？

一、通过”字面量“方式创建。

方法：将成员信息写到{}中，并赋值给一个变量，此时这个变量就是一个对象。

例如：



 var person = (name:'dongjc', work:function() {console.log('write coding')});  

如果{}中为空，则将创建一个空对象：



 var person = {} //创建空对象 



演示代码：

1 <script type="text/javascript">2 var person = {3     name: "dongjc",4     age: 32,5     Introduce: function () { alert("My name is " + this.name + ".I'm " + this.age); }6 };7 person.Introduce();  8 </script>

 我们还可以给对象丰富成员信息。

　　对象.成员名称 = 值;

　　对象[成员名称] = 值;

也可以获取对象的成员信息。

　　对象.成员名称;

　　对象[成员名称];

1 <script type="text/javascript">2     var person = {3     name: "dongjc",4     age: 32,5     Introduce: function () { alert("My name is " + this.name + ".I'm " + this.age); }6 };7 person.worker = 'coding'; //丰富成员信息8 </script>

二、通过”构造函数“方式创建。

　方法：

 var obj = new 函数名(); 

　这与通过类创建对象有本质的区别。通过该方法创建对象时，会自动执行该函数。这点类似于php通过创建对像时，会自动调用构造函数，因此该方法称为通过"构造函数“方式创建对象。

 1 <script type="text/javascript"> 2 function Person() { 3     this.name = "dongjc";    //通过this关键字设置默认成员 4     var worker = 'coding';    //没有this关键字，对象创建后，该变量为非成员 5     this.age = 32; 6     this.Introduce = function () { 7         alert("My name is " + this.name + ".I'm " + this.age); 8     }; 9     alert("My name is " + this.name + ".I'm " + this.age);10 };11 var person = new Person();12 person.Introduce();13 </script>

 

此代码一共会两次跳出对话框，原因在于创建对象是自动执行了该函数。

注意：this关键字的使用。这里的this与php中话法意思类似，指调用该函数的对象，这里指的是person。

 

三、通过object方式创建。

方法：先通过object构造器new一个对象，再往里丰富成员信息。

 var obj = new Object(); 

实例代码：

1 <script type="text/javascript">2 var person = new Object();3 person.name = "dongjc";4 person.age = 32;5 person.Introduce = function () {6         alert("My name is " + this.name + ".I'm " + this.age);7     };8 person.Introduce();9 </script>

64、Javascript作用链域?

JavaScript中所有的量都是存在于某一个作用域中的

除了全局作用域, 每一个作用域都是存在於某个作用域中的

在试图访问一个变量时JS引擎会从当前作用域开始向上查找直到Global全局作用域停止

例如

var A;//全局作用域
function B()
{
    var C;//C位于B函数的作用域
    function D()
    {
        var E;//E位于D函数的作用域
        alert(A)
    }
}

当alert(A)时, JS引擎沿着D的作用域, B的作用域, 全局作用域的顺序进行查找.

这三个作用域组成的有序集合就成为作用域链

至于为什么叫链, 你可以理解和链表有相似之处, 深层的作用域会能够访问到上层作用域, 就如同链表中两个连续节点能够单向访问一样

65、什么是window对象? 什么是document对象?

简单来说，document是window的一个对象属性。

Window 对象表示浏览器中打开的窗口。

如果文档包含框架（frame 或 iframe 标签），浏览器会为 HTML 文档创建一个 window 对象，并为每个框架创建一个额外的 window 对象。

所有的全局函数和对象都属于Window 对象的属性和方法。

document   对 Document 对象的只读引用。

[window对象]

　　它是一个顶层对象,而不是另一个对象的属性，即浏览器的窗口。

　　属性

　　defaultStatus 缺省的状态条消息

　　document 当前显示的文档(该属性本身也是一个对象)

　　frame 窗口里的一个框架((FRAME>)(该属性本身也是一个对象)

　　frames array 列举窗口的框架对象的数组,按照这些对象在文档中出现的顺序列出(该属性本身也是一个

对象)

　　history 窗口的历史列表(该属性本身也是一个对象)

　　length 窗口内的框架数

　　 location 窗口所显示文档的完整(绝对)URL(该属性本身也是一个对象)不要把它与如document.location

混淆,后者是当前显示文档的URL。用户可以改变window.location(用另一个文档取代当前文档),但却不能改变

document.location (因为这是当前显示文档的位置)

　　name 窗口打开时,赋予该窗口的名字

　　opener 代表使用window.open打开当前窗口的脚本所在的窗口(这是Netscape Navigator 3.0beta 3所引

入的一个新属性)

　　parent 包含当前框架的窗口的同义词。frame和window对象的一个属性

　　self 当前窗口或框架的同义词

　　status 状态条中的消息

　　top 包含当前框架的最顶层浏览器窗口的同义词

　　window 当前窗口或框架的同义词,与self相同

　　方法

　　alert() 打开一个Alert消息框

　　clearTimeout() 用来终止setTimeout方法的工作

　　close() 关闭窗口

　　 confirm() 打开一个Confirm消息框,用户可以选择OK或Cancel,如果用户单击OK,该方法返回true,单击

Cancel返回false

　　 blur() 把焦点从指定窗口移开(这是Netscape Navigator 3.0 beta 3引入的新方法)

　　focus() 把指定的窗口带到前台(另一个新方法)

　　open() 打开一个新窗口

　　 prompt() 打开一个Prompt对话框,用户可向该框键入文本,并把键入的文本返回到脚本

　　setTimeout() 等待一段指定的毫秒数时间,然后运行指令事件处理程序事件处理程序

　　Onload() 页面载入时触发

　　Onunload() 页面关闭时触发

[document 对象]

　　该对象是window和frames对象的一个属性,是显示于窗口或框架内的一个文档。

　　属性

　　alinkColor 活动链接的颜色(ALINK)

　　anchor 一个HTMI锚点,使用<A NAME=>标记创建(该属性本身也是一个对象)

　　anchors array 列出文档锚点对象的数组(<A NAME=>)(该属性本身也是一个对象)

　　bgColor 文档的背景颜色(BGCOLOR)

　　cookie 存储于cookie.txt文件内的一段信息,它是该文档对象的一个属性

　　fgColor 文档的文本颜色(<BODY>标记里的TEXT特性)

　　form 文档中的一个窗体(<FORM>)(该属性本身也是一个对象)

　　forms anay 按照其出现在文档中的顺序列出窗体对象的一个数组(该属性本身也是一个对象)

　　lastModified 文档最后的修改日期

　　linkColor 文档的链接的颜色,即<BODY>标记中的LINK特性(链接到用户没有观察到的文档)

　　link 文档中的一个<A HREF=>标记(该属性本身也是一个对象)

　　links array 文档中link对象的一个数组,按照它们出现在文档中的顺序排列(该属性本身也是一个对象)

　　location 当前显示文档的URL。用户不能改变document.location(因为这是当前显示文档的位置)。但是,

可以改变 window.location (用其它文档取代当前文档)window.location本身也是一个对象,而

document.location不是对象

　　referrer 包含链接的文档的URL,用户单击该链接可到达当前文档

　　title 文档的标题((TITLE>)

　　vlinkColor 指向用户已观察过的文档的链接文本颜色,即<BODY>标记的VLINK特性

　　方法

　　clear 清除指定文档的内容

　　close 关闭文档流

　　open 打开文档流

　　 write 把文本写入文档

　　writeln 把文本写入文档,并以换行符结尾

区别:1、window 指窗体。document指页面。document是window的一个子对象。

        2、用户不能改变 document.location(因为这是当前显示文档的位置)。但是,可以改变window.location (用其它文档取代当前文档)window.location本身也是一个对象,而document.location不是对象