JS基本理论知识

1、说说你对盒子模型的理解?？

当对一个文档进行布局（layout）的时候，浏览器的渲染引擎会根据标准之一的 CSS 基础框盒模型（CSS basic box model），将所有元素表示为一个个矩形的盒子（box）

一个盒子由四个部分组成：content、padding、border、margin

在CSS中，盒子模型可以分成：

• W3C 标准盒子模型
• IE 怪异盒子模型

2、相邻的两个inline-block节点为什么会出现间隔，该如何解决?

元素被当成行内元素排版的时候，原来HTML代码中的回车换行被转成一个空白符，在字体不为0的情况下，空白符占据一定宽度，所以inline-block的元素之间就出现了空隙。这些元素之间的间距会随着字体的大小而变化，当行内元素font-size:16px时，间距为8px。

解决方法一：给父级元素设置font-size： 0；子元素设置相应的font-size

解决方法二：改变书写方式，元素间留白间距出现的原因就是标签段之间的空格，因此，去掉HTML中的空格，自然间距就消失了

3、为什么会出现浮动和什么时候需要清除浮动？清除浮动的方式？

如果一个父盒子中有一个子盒子，并且父盒子没有设置高，子盒子在父盒子中进行了浮动，那么将来父盒子的高度为0.由于父盒子的高度为0，下面的元素会自动补位，子盒子设置宽度父盒子撑不开，所以这个时候要进行浮动的清除。

方法如下

1. 给父元素添加overflow: hidden;
2. 给父元素底下添加一个新标签，给这个新标签设置clear:both;
3. 利用伪元素:after 给父元素添加以下属性 父元素:after{ content:""; /设置内容为空/ display:block; /将文本转为块级元素/ clear:both; /清除浮动/ } 父元素{ zoom:1; }
4. 利用双伪元素清除浮动 父元素:before,父元素:after { content: “”; display: block; clear: both; } 父元素 { zoom: 1; }

推荐使用方法3，比较严谨

4、href与src的区别?

我们在开发页面的时候，有时候需要需要引用一些外部的资源，经常分不清href与src，下面我们就来谈谈它们之间到底分别是什么，这样使用的时候就做到心中有数。

1.href：Hypertext Reference的缩写，超文本引用，它指向一些网络资源，建立和当前元素或者说是本文档的链接关系。在加载它的时候，不会停止对当前文档的处理，浏览器会继续往下走。常用在a、link等标签。

<a href="http://www.baidu.com"></a>
<link type="text/css" rel="stylesheet" href="common.css">

如上面所显示的那样，当浏览器加载到link标签时，会识别这是CSS文档，并行下载该CSS文档，但并不会停止对当前页面后续内容的加载。这也是不建议使用@import加载CSS的原因。

2.src：source的缩写，表示的是对资源的引用，它指向的内容会嵌入到当前标签所在的位置。由于src的内容是页面必不可少的一部分，因此浏览器在解析src时会停下来对后续文档的处理，直到src的内容加载完毕。常用在script、img、iframe标签中，我们建议js文件放在HTML文档的最后面。如果js文件放在了head标签中，可以使用window.onload实现js的最后加载。

<img src="img/girl.jpg">
<frame src="top.html">
<iframe src="top.html">
<script src="show.js">

总结：href用于建立当前页面与引用资源之间的关系（链接），而src则会替换当前标签。遇到href，页面会并行加载后续内容；而src则不同，浏览器需要加载完毕src的内容才会继续往下走。

5、javascript中的六种继承方式

继承的操作需要有一个父类，这里使用构造函数外加原型来创建一个：

// super
function Person(name){
	this.name = name;
}
Person.prototype.job = 'frontend';
Person.prototype.sayHello = function() {
	console.log('Hello '+this.name);
}
var person = new Person('jia ming');
person.sayHello(); // Hello jia ming

原型链继承

// 原型链继承
function Child() {
	this.name = 'child';
}
Child.prototype = new Person();
var child = new Child();
console.log(child.job); // frontend
// instanceof 判断元素是否在另一个元素的原型链上
// child是Person类的实例
console.log(child instanceof Person); // true

关键点：子类原型等于父类的实例Child.prototype = new Person()

原型链的详细讲解自己之前有一篇文章说到深入理解原型对象和原型链

特点：

1. 实例可继承的属性有：实例的构造函数的属性，父类构造函数的属性，父类原型上的属性。（新实例不会继承父类实例的属性）

注意事项：

1. 新实例无法向父类构造函数传参
2. 继承单一
3. 所有新实例都会共享父类实例的属性。（原型上的属性是共享的，一个实例修改了原型属性，另一个实例的原型属性也会被修改）

借用构造函数

// 借用构造函继承
function Child() {
	Person.call(this, 'reng');
}
var child = new Child();
console.log(child.name); // reng
console.log(child instanceof Person); // false
child.sayHello(); // 报错，继承不了父类原型上的东西

关键点：用call或apply将父类构造函数引入子类函数（在子类函数中做了父类函数的自执行（复制））Person.call(this, 'reng')

针对call, apply, bind的使用，之前有篇文章谈谈JavaScript中的call、apply和bind提到。

特点：

1. 只继承了父类构造函数的属性，没有继承父类原型的属性
2. 解决了原型链继承的注意事项（缺点）1，2，3
3. 可以继承多个构造函数的属性（call可以多个）
4. 在子实例中可以向父实例传参

注意事项：

1. 只能继承父类构造函数的属性
2. 无法实现构造函数的复用。（每次用每次都要重新调用）
3. 每个新实例都有构造函数的副本，臃肿

组合继承

组合继承是原型链继承和借用构造函数继承的组合。

// 组合继承
function Child(name) {
	Person.call(this, name);
}
Child.prototype = new Person();
var child = new Child('jia');
child.sayHello(); // Hello jia
console.log(child instanceof Person); // true

关键点：结合了两种模式的优点–向父类传参（call）和复用（prototype）

特点：

1. 可以继承父类原型上的属性，可以传参，可复用
2. 每个新实例引入的构造函数属性是私有的

注意事项：

1. 调用了两次父类的构造函数（耗内存）
2. 子类的构造函数会代替原型上的那个父类构造函数（call相当于拿到了父类构造函数的副本）

原型式继承

// 先封装一个函数容器，用来承载继承的原型和输出对象
function object(obj) {
	function F() {}
	F.prototype = obj;
	return new F();
}
var super0 = new Person();
var super1 = object(super0);
console.log(super1 instanceof Person); // true
console.log(super1.job); // frontend

关键点：用一个函数包装一个对象，然后返回这个函数的调用，这个函数就变成了可以随意增添属性的实例或对象。Object.create()就是这个原理。

特点：

1. 类似于复制一个对象，用函数来包装

注意事项：

1. 所有的实例都会继承原型上的属性
2. 无法实现复用。（新实例属性都是后面添加的）

**Object.create()方法规范了原型式继承。**这个方法接收两个参数，一个用作新对象原型的对象和（可选的）一个为新对象定义额外属性的对象。

// 传一个参数的时候
var anotherPerson = Object.create(new Person());
console.log(anotherPerson.job); // frontend
console.log(anotherPerson instanceof Person); // true
// 传两个参数的时候
var anotherPerson = Object.create(new Person(), {
	name: {
		value: 'come on'
	}
});
anotherPerson.sayHello(); // Hello come on

寄生式继承

function object(obj) {
	function F(){}
	F.prototype = obj;
	return new F();
}
var sup = new Person();
// 以上是原型式继承，给原型式继承再套个壳子传递参数
function subobject(obj) {
	var sub = object(obj);
	sub.name = 'ming';
	return sub;
}
var sup2 = subobject(sup);
// 这个函数经过声明后就成了可增添属性的对象
console.log(sup2.name); // 'ming'
console.log(sup2 instanceof Person); // true

关键点：就是给原型式继承外面套个壳子。

特点：

1. 没有创建自定义类型，因为只是套了个壳子，返回对象，这个函数顺理成章就成了创建的新对象。

注意事项：

1. 没用到原型，无法复用

寄生组合继承

它跟组合继承一样，都比较常用。

寄生：在函数内返回对象然后调用

组合：

1. 函数的原型等于另一个实例
2. 在函数中用apply或call引入另一个构造函数，可传参

// 寄生
function object(obj) {
	function F(){}
	F.prototype = obj;
	return new F();
}
// object是F实例的另一种表示方法
var obj = object(Person.prototype);
// obj实例（F实例）的原型继承了父类函数的原型
// 上述更像是原型链继承，只不过只继承了原型属性

// 组合
function Sub() {
	this.age = 100;
	Person.call(this); // 这个继承了父类构造函数的属性
} // 解决了组合式两次调用构造函数属性的特点

// 重点
Sub.prototype = obj;
console.log(Sub.prototype.constructor); // Person
obj.constructor = Sub; // 一定要修复实例
console.log(Sub.prototype.constructor); // Sub
var sub1 = new Sub();
// Sub实例就继承了构造函数属性，父类实例，object的函数属性
console.log(sub1.job); // frontend
console.log(sub1 instanceof Person); // true

重点：修复了组合继承的问题

在上面的问题中，你可能发现了这么一个注释obj.constructor = Sub; // 一定要修复实例。为什么要修正子类的构造函数的指向呢？

因为在不修正这个指向的时候，在获取构造函数返回的时候，在调用同名属性或方法取值上可能造成混乱。比如下面：

function Car() { }
Car.prototype.orderOneLikeThis = function() {  // Clone producing function
    return new this.constructor();
}
Car.prototype.advertise = function () {
    console.log("I am a generic car.");
}

function BMW() { }
BMW.prototype = Object.create(Car.prototype);
BMW.prototype.constructor = BMW;              // Resetting the constructor property
BMW.prototype.advertise = function () {
    console.log("I am BMW with lots of uber features.");
}

var x5 = new BMW();

var myNewToy = x5.orderOneLikeThis();

myNewToy.advertise(); // => "I am BMW ..." if `BMW.prototype.constructor = BMW;` is not 
                      // commented; "I am a generic car." otherwise.

6、js有哪些基本类型

Undefined, Null, Boolean, Number, String

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

cookie:

o cookie是网站为了标示用户身份而储存在用户本地终端（Client Side）上的数据（通常经过加密）。

o cookie数据始终在同源的http请求中携带（即使不需要），记会在浏览器和服务器间来回传递。

sessionStorage****和localStorage不会自动把数据发给服务器，仅在本地保存。

存储大小：

o cookie数据大小不能超过4k。

o sessionStorage和localStorage 虽然也有存储大小的限制，但比cookie大得多，可以达到5M或更大。

有期时间：

o localStorage 存储持久数据，浏览器关闭后数据不丢失除非主动删除数据；

o sessionStorage 数据在当前浏览器窗口关闭后自动删除。

o cookie 设置的cookie过期时间之前一直有效，即使窗口或浏览器关闭

作用域不同:

o sessionStorage不在不同的浏览器窗口中共享，即使是同一个页面；

o localStorage 在所有同源窗口中都是共享的；cookie也是在所有同源窗口中都是共享的。

8、看下列代码输出结果是什么？解释原因。

var a; 
alert(typeof a); 
alert(b); 
b=10;
alert(typeof b);

var a;

alert(typeof a); // “undefined”

//alert(b); // 报错

b=10;

alert(typeof b);//”number”

解释：Undefined 是一个只有一个值的数据类型，这个值就是“undefined”，在使用 var

声明变量但并未对其赋值进行初始化时，这个变量的值就是 undefined。而 b 由于未声明将

报错。注意未申明的变量和声明了未赋值的是不一样的。

undefined 会在以下三种情况下产生：

1、 一个变量定义了却没有被赋值

2、 想要获取一个对象上不存在的属性或者方法:

3、 一个数组中没有被赋值的元素

注意区分 undefined 跟 not defnied(语法错误)是不一样的

9、输出今天的日期，以 YYYY-MM-DD 的方式，

比如今天是 2021年 4 月 8 日， 则输出 2021-04-08

<script>
    var d = new Date(); // 获取年，getFullYear()返回 4 位的数字 
    var year = d.getFullYear();
    // 获取月，月份比较特殊，0 是 1 月，11 是 12 月 
    var month = d.getMonth() + 1;
    // 变成两位 
    month = month < 10 ? '0' + month : month;
    // 获取日 
    var day = d.getDate(); day = day < 10 ? '0' + day : day;
    alert(year + '-' + month + '-' + day);
</script>

10、看下列代码，将会输出什么?为什么？

<script>
    var foo = 1;
    function f(){
        console.log(foo);
        var foo = 2;
        console.log(foo);
    }

    f();
</script>

答案：输出 undefined 和 2。上面代码相当于：

var foo = 1;

function(){

var foo;

console.log(foo);

//undefined

foo = 2;

console.log(foo);

// 2;

}

函数声明与变量声明会被 JavaScript 引擎隐式地提升到当前作用域的顶部，但是只提升名

称不会提升赋值部分

11、Javscript数组的常用方法有哪些(至少写八个)

• push()
• unshift()
• splice()
• concat()
• pop()
• shift()
• splice()
• slice()
• indexOf()
• includes()
• find()
• reverse()
• sort()
• join()
• some()
• every()
• forEach()
• filter()
• map()

12、在提交git的时候提示设置邮箱该怎么处理

设置方法是在项目所在目录右键选择 git bash命令工具，输入：

git config user.name 你的目标用户名；

git config user.email 你的目标邮箱名;

13、apply,call,bind的异同?

• 相同点：可以改变 this 指向，第一次参数都是 this 要指向的对象，都可以利用后续参数进行传参。
• 不同点：apply,call 是对函数的直接调用，bind 是返回一个函数，不直接调用，需要再次调用。

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

答案：

1. 创建新节点

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

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

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

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

appendChild()

removeChild()

replaceChild()

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

3. 查找

getElementsByTagName()

// 通过标签名称

getElementsByName() //

通过元素的 Name 属性的值(IE 容错能力较强，会得到一个数组，

其中包括 id 等于 name 值的)

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

15、判断一个字符串中出现次数最多的字符，统计这个次数

如：var str = ‘asdfssaaasasasasaa’;

打印结果：出现次数最多的是:a出现9次；

<script>
    var str = 'asdfssaaasasasasaa';
    var json = {};
    for (var i = 0; i < str.length; i++) {
        if (!json[str.charAt(i)]) {
            json[str.charAt(i)] = 1;
        } else {
            json[str.charAt(i)]++;
        }
    };
    var iMax = 0;
    var iIndex = '';
    for (var i in json) {
        if (json[i] > iMax) {
            iMax = json[i];
            iIndex = i;
        }
    } 
    alert('出现次数最多的是:' + iIndex + '出现' + iMax + '次');
</script>

16、什么是闭包？ 写一个简单的闭包

闭包就是能够读取其他函数内部变量的函数。(函数套函数，内部函数使用外部函数的变量)

<script>
    function outer() {
        var num = 1;
        function inner() {
            var n = 2;
            alert(n + num);
        }
        return inner;
    }
    outer()();
</script>

17、BOM 对象有哪些，列举 window 对象？

答：

1、window 对象 ，是 JS 的最顶层对象，其他的 BOM 对象都是 window 对象的

属性；

2、document 对象，文档对象；

3、location 对象，浏览器当前 URL 信息；

4、navigator 对象，浏览器本身信息；

5、screen 对象，客户端屏幕信息；

6、history 对象，浏览器访问历史信息；

18、HTTP 协议中，GET 和 POST 有什么区别？分别适用什么场景

答：

	GET	POST
缓存	能被缓存	不能缓存
历史	参数保留在浏览器历史中	参数不会保存在浏览器历史中
对数据长度的限制	当发送数据时，GET 方法向 URL 添加数据；URL 的长度是受限制的（URL 的最大长度IE是 2048 个字符,chrome 最大长度8182个字符）	无限制
对数据类型的限制	只允许 ASCII 字符	没有限制，也允许二进制数据
安全性	与 POST 相比，GET 的安全性较差，因为所发送的数据是 URL 的一部分	POST 比 GET 更安全，因为参数不会被保存在浏览器历史或 web 服务器日志中
可见性	数据在 URL 中对所有人都是可见的	数据不会显示在 URL 中

适用场景：

post 一般用于表单提交

get 一般用于简单的数据查询，严格要求不是那么高的场景

19、用正则表达式，写出由字母开头，其余由数字、字母、下 划线组成的 6~30 的字符串

答：var reg=/¹[\da-zA-Z_]{5,29}/;

20、ajax原理是什么？如何实现

AJAX全称(Async Javascript and XML)

即异步的JavaScript 和XML，是一种创建交互式网页应用的网页开发技术，可以在不重新加载整个网页的情况下，与服务器交换数据，并且更新部分网页

Ajax的原理简单来说通过XmlHttpRequest对象来向服务器发异步请求，从服务器获得数据，然后用JavaScript来操作DOM而更新页面

实现 Ajax异步交互需要服务器逻辑进行配合，需要完成以下步骤：

• 创建 Ajax的核心对象 XMLHttpRequest对象
• 通过 XMLHttpRequest 对象的 open() 方法与服务端建立连接
• 构建请求所需的数据内容，并通过XMLHttpRequest 对象的 send() 方法发送给服务器端
• 通过 XMLHttpRequest 对象提供的 onreadystatechange 事件监听服务器端你的通信状态
• 接受并处理服务端向客户端响应的数据结果
• 将处理结果更新到 HTML页面中

1、自己创建一个json文件，文件名newsData.json，为下列表新闻，使用ajax请求，获取json文件内的数据并渲染（20分）

• 复兴号开进西藏拉萨至林芝铁路25日开通运营

• 中国代表观点相近国家在联合国人权理事会批评有关国家军事干涉行为损害人权

• 我们党的百年奋斗史就是为人民谋幸福的历史

• 江南等地新一轮降雨周末开启河南河北等地高温持续

• 青藏铁路全线通车15年：穿越“生命禁区”的天路

• 耿爽：中方坚定支持阿根廷对马尔维纳斯群岛主权的正当要求

---

1. a-ZA-Z ↩︎