JavaScript面试题2

标签：function 面试题 name 对象 JavaScript 模块 var prototype

JavaScript2

1.下面代码的输出是什么?

function sayHi0 {
                 console.log(name);
                 console.log(age);
                 var name = "Lydia";
                 let age = 21;
                }
// 打印出来：undefined和ReferenceError

var存在变量提升；let没有提升有一个“暂死时区”。

变量的赋值可以分为三个阶段:

1. 创建变量，在内存中开辟空间。

2. 初始化变量，将变量初始化为undefined

3. 真正赋值：（1）let 的「创建」过程被提升了，但是初始化没有提升。（2）var 的「创建」和「初始化」都被提升了。（3）function 的「创建」「初始化]和「赋值」都被提升了。

2.下面代码输出什么？

function bark(){
    console.log("Woof!");
}
bark.animal = "dog";
// 发生Nothing, this is totally fine!

函数是—种特殊类型的对象。您自己编写的代码并不是实际的函数。该函数是具有属性的对象，此属性是可调用的。

3.事件传播的三个阶段是什么??

捕获>目标>冒泡

4.JavaScript原型，原型链?有什么特点?

1. 每个对象都会在其内部初始化一个属性，就是prototype(原型)，当我们访问一个对象的属性时。

2. 如果这个对象内部不存在这个属性，那么他就会去prototype里找这个属性，这个prototype又会有自己的prototype,于是就这样―直找下去，也就是我们平时所说的原型链的概念。

3. 关系:linstance.constructor.prototype = instance.proto。

5.请解释什么是事件代理？

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

2. 可以大量节省内存占用,减少事件注册，比如在 table 上代理所有td 的click事件就非常棒。

3. 可以实现当新增子对象时无需再次对其绑定。

6.Javascript如何实现继承?

1. 构造继承。

2. 原型继承。

3. 实例继承。

4. 拷贝继承。

   原型prototype 机制或 apply和call方法去实现较简单，建议使用构造函数与原型混合方式

   function Parent(){
       this.name='wang';
   }
   function Child(){
       this.age = 28;
   }
   Child.prototype = new Parent);//继承了Parent，通过原型
   var demo = new Child();
   alert(demo.age);
   alert(demo.name);//得到被继承的属性

   7.事件模型

   1. 冒泡型事件:当你使用事件冒泡时，子级元素先触发，父级元素后触发.

   2. 捕获型事件;当你使用事件捕获时，父级元素先触发，子级元素后触发

   3. DOM事件流:同时支持两种事件模型:捕获型事件和冒泡型事件

   4. 阻止冒泡:在W3c 中，使用stopPropagation() 方法;在IE下设置cancelBubble = true

   5. 阻止捕获:阻止事件的默认行为,例如click - <a>后的跳转。在W3c 中，使用preventDefault ()方法，在E下设置 window.event.returnValue =false

   8.new操作符具体干了什么呢?

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

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

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

   9.那些操作会造成内存泄漏?

   内存泄漏指任何对象在您不再拥有或需要它之后仍然存在。setTimeout 的第一个参数使用字符串而非函数的话，会引发内存泄漏闭包使用不当。

10.XML和JSON的区别?

1. 数据体积方面：JSON相对于XML来讲，数据的体积小，传递的速度更快些。

2. 数据交互方面：JSON 与JavaScript的交互更加方便，更容易解析处理，更好的数据交互。

3. 数据描述方面：JSON对数据的描述性比XML较差。

4. 传输速度方面：JSON的速度要远远快于XML。

11.谈谈你对webpack的看法

1. WebPack 是一个模块打包工具，你可以使用WebPack 管理你的模块依赖，并编绎输出模块们所需的静态文件。它能够很好地管理、打包 Web开发中所用到的HTML、Javascript、CSS以及各种静态文件(图片、字体等），让开发过程更加高效。对于不同类型的资源,webpack有对应的模块加载器。 webpack模块打包器会分析模块间的依赖关系，最后生成了优化且合并后的静态资源

12.说说你对AMD和Commonjs的理解

1. CommonJS是服务器端模块的规范，Node.js采用了这个规范。CommonJS规范加载模块是同步的，也就是说，只有加载完成，才能执行后面的操作。AMD规范则是非同步加载模块，允许指定回调函数。

2. AMD推荐的风格通过返回一个对象做为模块对象，CommonJS的风格通过对module.exports 或exports 的属性赋值来达到暴露模块对象的目的。

13.常见web安全及防护原理

sql注入原理：就是通过把SQL命令插入到Web表单递交或输入域名或页面请求的查询字符串，最终达到欺骗服务器执行恶意的SQL命令。

1. 永远不要使用动态拼装SQL，可以使用参数化的SQL或者直接使用存储过程进行数据查询存取。

2. 永远不要使用管理员权限的数据库连接，为每个应用使用单独的权限有限的数据库连接。

3. 不要把机密信息明文存放，请加密或者hash掉密码和敏感的信息。

14.xSS 与 CSRF有什么区别吗?

1. XSS是获取信息，不需要提前知道其他用户页面的代码和数据包。CSRF 是代替用户完成指定的动作，需要知道其他用户页面的代码和数据包。要完成一次CSRF攻击，受害者必须依次完成两个步骤。

2. 登录爱信任网站A，并在本地生成Cookie。

3. 在不登出A的情况下，访问危险网站B。

4. CSRF防御：服务端的CSRF方式方法很多样，但总的思想都是一致的，就是在客户端页面增加伪随机数。通过验证码的方法。

15.用过哪些设计模式?

构造函数模式

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

2. 直接将属性和方法赋值给this 对象。

16.为什么要有同源限制?

1. 同源策略指的是:协议，域名，端口相同，同源策略是一种安全协议。

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

17.offsetWidth/offsetHeight,clientWidth/clientHeight与scrollWidth/scrollHeight的区别

1. offsetWidth/offsetHeight返回值包含content + padding + border,效果与e.getBoundingClientRect()相同。

2. clientWidth/clientHeight返回值只包含content + padding，如果有滚动条，也不包含滚动条。

3. scrollWidth/scrollHeight返回值包含content + padding +溢出内容的尺寸。

18.javascript有哪些方法定义对象

1. 对象字面量:var obj ={};

2. 构造函数:var obj = new Object();

3. Object.create(): var obj = Object.create(Object.prototype);

19.常见兼容性问题?

1. png24位的图片在iE6浏览器上出现背景，解决方案是做成PNG8。

2. 浏览器默认的margin 和padding 不同。解决方案是加一个全局的{margin:o;padding:0;}来统一,，但是全局效率很低，一般是如下这样解决。

20.说说你对promise的了解

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

1. pending:初始状态，非fulfilfed 或rejected.

2. fulfilled:成功的操作.

3. rejected:失败的操作.

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

Promise的构造函数

Promise 实例拥有then方法（具有then 方法的对象，通常被称为thenable)。

21.你觉得jQuery源码有哪些写的好的地方

1. jquery源码封装在一个匿名函数的自执行环境中，有助于防止变量的全局污染，然后通过传入 window对象参数，可以window对象作为局部变量使用，好处是当jquery 中访问window对象的时候，就不用将作用域链退回到顶层作用域了，从而可以更快的访问window对象。同样，传入undefined参数，可以缩短查找undefined时的作用域链。

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

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

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

22.Node的应用场景

1. 它是一个Javascript运行环境。

2. 依赖于Chrome v8引擎进行代码解释。

3. 事件驱动。事件驱动是指在持续事务管理过程中，进行决策的一种策略，即跟随当前时间点上出现的事件，调动可用资源，执行相关任务，使不断出现的问题得以解决，防止事务堆积。

4. 非阻塞I/O（1）阻塞和非阻塞 [2] 关注的是程序在等待调用结果（消息，返回值）时的状态.

   （2）阻塞调用是指调用结果返回之前，当前线程会被挂起。调用线程只有在得到结果之后才会返回。（3）非阻塞调用指在不能立刻得到结果之前，该调用不会阻塞当前线程。

5. 单进程，单线程。

6. 优点：高并发。缺点：（1）只支持单核CPU,不能充分利用CPU。(2)可靠性低,一旦代码某个环节崩溃，整个系统都崩溃。

23.谈谈你对AMD、CMD的理解

1. CommonJS是服务器端模块的规范，Node.js 采用了这个规范。CommonJS规范加载模块是同步的，也就是说，只有加载完成,才能执行后面的操作。AMD规范则是非同步加载模块，允许指定回调函数。

2. AMD推荐的风格通过返回一个对象做为模块对象，CommonJS的风格通过对module.exports 或exports 的属性赋值来达到暴露模块对象的目的。

24.web开发中会话跟踪的方法有哪些

1. cookie

2. session

3. url重写

4. 隐藏input

5. ip地址

24.介绍js的基本数据类型

Undefined、Null、Boolean、Number、String、Symbol、Object

25.介绍js有哪些内置对象?

1. Object 是 JavaScript中所有对象的父对象。

2. 数据封装类对象:Object、Array.Boolean、Number 和 String。

3. 其他对象:Function、Arguments、Math、Date. RegExp、Error。

26.说几条写JavaScript 的基本规范?

1. 不要在同一行声明多个变量。

2. 请使用===/!==来比较true/false或者数值。

3. 使用对象字面量替代new Array这种形式。

4. 不要使用全局函数。

5. Switch 语句必须带有default分支。

6. lf 语句必须使用大括号。

7. for-in 循环中的变量应该使用var关键字明确限定作用域，从而避免作用域污。

27.JavaScript有几种类型的值?，你能画一下他们的内存图吗?

1. 栈:原始数据类型(Undefined，Null，Boolean,Number、String)

2. 堆:引用数据类型(对象、数组和函数)

3. 两种类型的区别是:存储位置不同;

4. 原始数据类型直接存储在栈(stack)中的简单数据段，占据空间小、大小固定，属于被颍繁使用数据，所以放入栈中存储;

5. 引用数据类型存储在堆(heap)中的对象,占据空间大、大小不固定,如果存储在栈中，将会影响程序运行的性能;引用数据类型在栈中存储了指针，该指针指向堆中该实体的起始地址。当解释器寻找引用值时，会首先检索其。

6. 在栈中的地址，取得地址后从堆中获得实体。

28.javascript 创建对象的几种方式?

jayascript创建对象简单的说,无非就是使用内置对象或各种自定义对象，当然还可以用JSON;但写法有很多种，也能混合使用

对象字面量的方式

person={firstname:" Mark" ,lastname:"Yun",age:25,eyecolor:" black"};

用function来模拟无参的构造函数

function Person(){
    var person=new Person();//定义一个function，如果使用new"实例化",该function可以看作是一个Class
    person.name="Mark";
    person.age="25";
    person.work=functionO{alert(person.name+" hello...");
}
    Person.work()

用function来模拟参构造函数来实现 (用this 关键字定义构造的上下文属性)

function Pet(name,age,hobby){
    this.name=name;
    this.age=age;
    this.hobby=hobby;
    this.eat=function (){
        alert("我叫")
    }
}
var maidou =new Pet("麦兜",25,"coding");//实例化、创建对象
maidou.eat();//调用eat方法

用工厂方式来创建(内置对象)

var wcDog =new Object();
wcDog.name="旺财";
wcDog.age=3;
wcDog.work=function(){
    alert("我是"+wcDog.name+",汪汪汪..…");
}
wcDog.work();

用原型方式来创建

function Dog(){
    Dog.prototype.name="旺财";
    Dog.prototype.eat=function(){
        alert(this.name+"是个吃货");
    }
}
var wangcai =new Dog;
wangcai.eat();

用混合方式来创建

function Car(name,price){
    this.name=name;this.price=price;}
}
Car.prototype.sell=function(){
    alert("我是"+this.name+"，我现在卖"+this.price+"万元");)
}
var camry =new Car("凯美瑞",27);
camry.sell();

29.eval是做什么的

1. 它的功能是把对应的字符串解析成JS代码并运行。

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

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

30.null , undefined的区别?

1. undefined表示不存在这个值。

2. undefined :是一个表示"无"的原始值或者说表示"缺少值"，就是此处应该有一个值，但是还没有定义。当尝试读取时会返回undefined。

3. 例如变量被声明了，但没有赋值时，就等于undefined

4. null 表示一个对象被定义了，值为“空值”

5. null:是一个对象(空对象，没有任何属性和方法)

6. 例如作为函数的参数，表示该函数的参数不是对象;

7. 在验证null时，一定要使用=== ，因为=无法分别null和undefined。

31.["1","2"."3"].map(parselnt)答案是多少?

1. [1，NaN,NaN]因为 parselnt需要两个参数(val,radix)，其中 radix表示解析时用的基数。

2. map传了 3个(element, index, array)，对应的 radix不合法导致解析失败。

32.javascript代码中的"use strict";是什么意思﹖使用它区别是什么?

use strict是一种ECMAscript 5添加的（严格)运行模式,这种模式使得Javascript在更严格的条件下运行,使JS编码更加规范化的模式，消除Javascript语法的一些不合理、不严谨之处,减少—些怪异行为。

33.js 延迟加载的方式有哪些?

defer 和async、动态创建DOM方式（用得最多)、按需异步载入js。

34.渐进增强和优雅降级

1. 渐进增强：针对低版本浏览器进行构建页面，保证最基本的功能，然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验。

2. 优雅降级∶一开始就构建完整的功能，然后再针对低版本浏览器进行兼容。

35.说说严格模式的限制

1. 变量必须声明后再使用。

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

3. 不能使用with语句。

4. 禁止this指向全局导向。

36.attribute和property的区别是什么?

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

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

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

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

37.谈谈你对ES6的理解

1. 新增模板字符串(为JavaScript提供了简单的字符串插值功能)。

2. 箭头函数

3. for of遍历数组

4. arguments 对象可被不定参数和默认参数完美代替。

5. ES6将promise对象纳入规范，提供了原生的Promise 对象。

6. 增加了let和const命令，用来声明变量。

7. 增加块级作用域。

8. let命令实际上就增加了块级作用域。

9. 还有就是引入module模块的概念

10.  

标签：function,面试题,name,对象,JavaScript,模块,var,prototype
From： https://www.cnblogs.com/yuan947022015/p/17635752.html