前端（html、css、js）综合笔记（2）

19.轮播图的逻辑

20.JavaScript 有几种类型

• 基本数据类型（6种）：undefined、null、boolean、number、string、symbol(es6的新数据类型)
• 引用数据类型（3种）：object、array、function(统称为object)
• 数据类型转换优先级：String>number>else
• 基本在栈上，引用在堆上，这是因为栈的分配大小是固定的，适合简单的数据存放；而引用数据则放在大小可扩展的堆内存中。
• 新生代是存放新产生对象的区域，老生代是存放经过垃圾回收之后仍存在的对象的区域。新生代开辟from、to两块区域，当from快满时，将引用计数不为0的内容放到to中。然后清空，from的内容，再置换from、to的内容，当变量的age达到15时，就放在老生代区域中。

21.数据类型检测

typeof 对于基本数据类型来说，除了 null 都可以显示正确的类型，typeof 对于对象来说，除了函数都会显示 object。
缺点，检测不出null和Array，并且只能检测基本数据类型和基本引用类型

typeof 5 // 'number'
typeof '5' // 'string'
typeof undefined // 'undefined'
typeof false// 'boolean'
typeof Symbol() // 'symbol'
console.log(typeof null)  //object
console.log(typeof NaN)   //number

typeof [] // 'object'
typeof {} // 'object'
typeof console.log // 'function'

instanceof通过原型链来判断数据类型的
缺点，需要靠猜，无法直接获知其类型

p1 = new Person()
p1 instanceof Person // true

Object.prototype.toString.call()可以检测所有的数据类型，算是一个比较完美的方法了。

var obj={}
var arr=[]
console.log(Object.prototype.toString.call(obj))    //[object Object]
console.log(Object.prototype.toString.call(arr))    //[object Array]

22.原形与原型链

https://www.cnblogs.com/loveyaxin/p/11151586.html
一、prototype

在JavaScript中，每个函数都有一个prototype属性，这个属性指向函数的原型对象。而函数的proto指向他的原型对象的构造函数。
原型的概念：每一个javascript对象(除null外)创建的时候，就会与之关联另一个对象，这个对象就是我们所说的原型，每一个对象都会从原型中“继承”属性。

二、proto

这是每个对象(除null外)都会有的属性，叫做__proto__，这个属性会指向该对象的原型。
prototype是函数指向原型的方法，__proto__是实例对象指向原型的方法。
__proto__基本和prototype一样，区别是他们一个是充当get（__proto__），一个充当set。

person.__proto__ == Person.prototype==Object.getPrototypeOf(person)

三、 constructor
每个原型都有一个constructor属性，指向该关联的构造函数。

Person===Person.prototype.constructor===person.constructor

四、实例与原型
当读取实例的属性时，如果找不到，就会查找与对象关联的原型中的属性，如果还查不到，就去找原型的原型，一直找到最顶层为止。

五、原型链
原型对象等于另一个类型的实例，原型对象将包含一个指向另一个原型的指针。

23.===

==：运算符称作相等，用来检测两个操作数是否相等，这里的相等定义的非常宽松，可以允许进行类型转换
===：用来检测两个操作数是否严格相等

24.深浅拷贝

• 基本数据类型的特点：直接存储在栈(stack)中的数据
• 引用数据类型的特点：存储的是该对象在栈中引用，真实的数据存放在堆内存里
• 赋值，赋值就是对对象的简单引用，指向的是同一块对象。
• 浅拷贝，拷贝了对象的第一层，不是拷贝引用，也不指向同一块内存。但是子对象的内容是对原对象的子对象的引用。
• 深拷贝，创建了一个与原对象无关的新对象。
• 那么可知，如果原对象只有一层，那么深浅拷贝的效果是一样的。
  

浅拷贝
Object.assign会合并对象生成一个新对象。如果对象的属性是普通类型改变之后新对象不会改变，如果是引用类型改变后新对象也会改变，所以Object.assign实际上还是浅拷贝。
深拷贝

JSON.parse(JSON.stringify(obj))

利用JSON.stringify(obj)将对象先转为json字符串，再JSON.parse(）转回为对象可以实现深拷贝，这也是比较常用的一种方法。

26.变量声明提升

• 在 JavaScript 中，函数声明（function aa(){}）与变量声明（var）经常被 JavaScript
  引擎隐式地提升到当前作用域的顶部。
• 函数声明的优先级高于变量，如果变量名跟函数名相同且未赋值，则函数声明会覆盖变量声明
• 声明语句中的赋值部分并不会被提升，只有变量的名称被提升

27.js 创建对象的几种方式

var obj={};
var p=new Pel();//new 一个构造函数
var obj=new Object();//new一个内置对象

28.Js如何实现继承

1.借助构造函数继承

function Child1{
	Parent1.call(this);
	this.a="a";
}
//缺点，原型链上的东西没法得到继承

2.借助原型链实现继承

Child2.prototype=new Parent2();
//缺点，改变一个对象，另外一个对象也跟着改变。

3.组合

29.浏览器页面渲染过程

浏览器渲染页面的一般过程：1.浏览器解析html源码，然后创建一个 DOM树。并行请求 css/image/js在DOM树中，每一个HTML标签都有一个对应的节点，并且每一个文本也都会有一个对应的文本节点。DOM树的根节点就是 documentElement，对应的是html标签。

2.浏览器解析CSS代码，计算出最终的样式数据。构建CSSOM树(其实没有这个概念，浏览器中叫styleSheets)。对CSS代码中非法的语法它会直接忽略掉。解析CSS的时候会按照如下顺序来定义优先级：浏览器**默认设置 < 外链样式 < 内联样式 **。

3.DOM Tree + CSSOM --> 渲染树（rendering tree）。渲染树和DOM树有点像，但是是有区别的。display:none的元素不会出现在渲染树中。

DOM树完全和html标签一一对应，但是渲染树会忽略掉不需要渲染的元素，比如head、display:none的元素等。而且一大段文本中的每一个行在渲染树中都是独立的一个节点。渲染树中的每一个节点都存储有对应的css属性。

4.renderTree->layoutTree->paintTree->compositeTree。分别做的工作：1.将渲染树上的节点，根据它的高度，宽度，位置，为节点生成盒子（layout） 2.确定渲染树上的节点的大小和位置后，便可以对节点进行涂鸦（paint） 3.当渲染树上的节点涂鸦完毕后，便生成位图（bitmap），浏览器把此位图从CPU传输到GPU。

以上四个步骤并不是一次性顺序完成的。如果DOM或者CSSOM被修改，以上过程会被重复执行。实际上，CSS和JavaScript往往会多次修改DOM或者CSSOM。