JavaScript面试题2

yuan947022015 / 2023-08-16 / 原文

JavaScript2

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

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

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

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

创建变量，在内存中开辟空间。
初始化变量，将变量初始化为undefined
真正赋值：（1）let 的「创建」过程被提升了，但是初始化没有提升。（2）var 的「创建」和「初始化」都被提升了。（3）function 的「创建」「初始化]和「赋值」都被提升了。

2.下面代码输出什么？

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

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

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

捕获>目标>冒泡

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

每个对象都会在其内部初始化一个属性，就是prototype(原型)，当我们访问一个对象的属性时。
如果这个对象内部不存在这个属性，那么他就会去prototype里找这个属性，这个prototype又会有自己的prototype,于是就这样―直找下去，也就是我们平时所说的原型链的概念。
关系:linstance.constructor.prototype = instance.proto。

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

事件代理(Event Delegation)，又称之为事件委托。是 (JavaScript 中常用绑定事件的常用技巧。顾名思义，“事件代理”即是把原本需要绑定的事件委托给父元素，让父元素担当事件监听的职务。事件代理的原理是DOM元素的事件冒泡。使用事件代理的好处是可以提高性能。
可以大量节省内存占用,减少事件注册，比如在 table 上代理所有td 的click事件就非常棒。
可以实现当新增子对象时无需再次对其绑定。

6.Javascript如何实现继承?

构造继承。
原型继承。
实例继承。
拷贝继承。

原型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的区别?

数据体积方面：JSON相对于XML来讲，数据的体积小，传递的速度更快些。
数据交互方面：JSON 与JavaScript的交互更加方便，更容易解析处理，更好的数据交互。
数据描述方面：JSON对数据的描述性比XML较差。
传输速度方面：JSON的速度要远远快于XML。

11.谈谈你对webpack的看法

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

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

CommonJS是服务器端模块的规范，Node.js采用了这个规范。CommonJS规范加载模块是同步的，也就是说，只有加载完成，才能执行后面的操作。AMD规范则是非同步加载模块，允许指定回调函数。
AMD推荐的风格通过返回一个对象做为模块对象，CommonJS的风格通过对module.exports 或exports 的属性赋值来达到暴露模块对象的目的。

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

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

永远不要使用动态拼装SQL，可以使用参数化的SQL或者直接使用存储过程进行数据查询存取。
永远不要使用管理员权限的数据库连接，为每个应用使用单独的权限有限的数据库连接。
不要把机密信息明文存放，请加密或者hash掉密码和敏感的信息。

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

XSS是获取信息，不需要提前知道其他用户页面的代码和数据包。CSRF 是代替用户完成指定的动作，需要知道其他用户页面的代码和数据包。要完成一次CSRF攻击，受害者必须依次完成两个步骤。
登录爱信任网站A，并在本地生成Cookie。
在不登出A的情况下，访问危险网站B。
CSRF防御：服务端的CSRF方式方法很多样，但总的思想都是一致的，就是在客户端页面增加伪随机数。通过验证码的方法。

15.用过哪些设计模式?

构造函数模式

使用构造函数的方法，即解决了重复实例化的问题，又解决了对象识别的问题，该模式与工厂模式的不同之处在于。
直接将属性和方法赋值给this 对象。

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

同源策略指的是:协议，域名，端口相同，同源策略是一种安全协议。
举例说明:比如一个黑客程序，他利用lframe把真正的银行登录页面嵌到他的页面上，当你使用真实的用户名，密码登录时，他的页面就可以通过Javascript读取到你的表单中input中的内容,这样用户名,密码就轻松到手了。

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

offsetWidth/offsetHeight返回值包含content + padding + border,效果与e.getBoundingClientRect()相同。
clientWidth/clientHeight返回值只包含content + padding，如果有滚动条，也不包含滚动条。
scrollWidth/scrollHeight返回值包含content + padding +溢出内容的尺寸。

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

对象字面量:var obj ={};
构造函数:var obj = new Object();
Object.create(): var obj = Object.create(Object.prototype);

19.常见兼容性问题?

png24位的图片在iE6浏览器上出现背景，解决方案是做成PNG8。
浏览器默认的margin 和padding 不同。解决方案是加一个全局的{margin:o;padding:0;}来统一,，但是全局效率很低，一般是如下这样解决。

20.说说你对promise的了解

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

pending:初始状态，非fulfilfed 或rejected.
fulfilled:成功的操作.
rejected:失败的操作.
settled: Promise 已被fulfilled或 rejected，且不是 pending

Promise的构造函数

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

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

jquery源码封装在一个匿名函数的自执行环境中，有助于防止变量的全局污染，然后通过传入 window对象参数，可以window对象作为局部变量使用，好处是当jquery 中访问window对象的时候，就不用将作用域链退回到顶层作用域了，从而可以更快的访问window对象。同样，传入undefined参数，可以缩短查找undefined时的作用域链。
jquery 将一些原型属性和方法封装在了jquery.prototype中，为了缩短名称，又赋值给了jquery.fn，这是很形象的写法。
有一些数组或对象的方法经常能使用到，jQuery将其保存为局部变量以提高访问速度。
jquery实现的链式调用可以节约代码，所返回的都是同一个对象，可以提高代码效率。

22.Node的应用场景

它是一个Javascript运行环境。
依赖于Chrome v8引擎进行代码解释。
事件驱动。事件驱动是指在持续事务管理过程中，进行决策的一种策略，即跟随当前时间点上出现的事件，调动可用资源，执行相关任务，使不断出现的问题得以解决，防止事务堆积。
非阻塞I/O（1）阻塞和非阻塞 [2] 关注的是程序在等待调用结果（消息，返回值）时的状态.

（2）阻塞调用是指调用结果返回之前，当前线程会被挂起。调用线程只有在得到结果之后才会返回。（3）非阻塞调用指在不能立刻得到结果之前，该调用不会阻塞当前线程。
单进程，单线程。
优点：高并发。缺点：（1）只支持单核CPU,不能充分利用CPU。(2)可靠性低,一旦代码某个环节崩溃，整个系统都崩溃。

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

CommonJS是服务器端模块的规范，Node.js 采用了这个规范。CommonJS规范加载模块是同步的，也就是说，只有加载完成,才能执行后面的操作。AMD规范则是非同步加载模块，允许指定回调函数。
AMD推荐的风格通过返回一个对象做为模块对象，CommonJS的风格通过对module.exports 或exports 的属性赋值来达到暴露模块对象的目的。

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

cookie
session
url重写
隐藏input
ip地址

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

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

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

Object 是 JavaScript中所有对象的父对象。
数据封装类对象:Object、Array.Boolean、Number 和 String。
其他对象:Function、Arguments、Math、Date. RegExp、Error。

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

不要在同一行声明多个变量。
请使用===/!==来比较true/false或者数值。
使用对象字面量替代new Array这种形式。
不要使用全局函数。
Switch 语句必须带有default分支。
lf 语句必须使用大括号。
for-in 循环中的变量应该使用var关键字明确限定作用域，从而避免作用域污。

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

栈:原始数据类型(Undefined，Null，Boolean,Number、String)
堆:引用数据类型(对象、数组和函数)
两种类型的区别是:存储位置不同;
原始数据类型直接存储在栈(stack)中的简单数据段，占据空间小、大小固定，属于被颍繁使用数据，所以放入栈中存储;
引用数据类型存储在堆(heap)中的对象,占据空间大、大小不固定,如果存储在栈中，将会影响程序运行的性能;引用数据类型在栈中存储了指针，该指针指向堆中该实体的起始地址。当解释器寻找引用值时，会首先检索其。
在栈中的地址，取得地址后从堆中获得实体。

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();