模拟面试老师问到的面试题

1.冒泡和捕获的差别

冒泡：从里到外

捕获：从外到里

举例：

div，body，html，doc

doc，html，body，div

2.继承 extends

1.原型链继承

function Parent1(){
  this.name='parent1'
  this.play=[1,2,3]
}

function Child1(){
  this.type='child2'
}

Child1.prototype=new Parent1()//重要
console.log(new Child1())

缺点：child和parent两个实例使用的是同一个原型对象，他们的内存空间是共享的，一个发生改变，另一个也会改变，

2.构造函数继承（借助call）

function Patrnt1(){
   this.name='parent1'
}
Patrnt1.prototype.getname=function(){
return this.name
}
function Child1(){
Parent1.call(this)//重要
this.type='child1'
}

let child=new Child1()
log(child)
log(child.getname())//报错

缺点：父类原型对象中一旦存在父类之前自己定义的方法，那么子类将无法继承这些方法。

只能继承父类的实例属性和方法，不能继承原型属性或者方法。

3.组合继承

4.原型式继承 Object.create 类似于浅拷贝

let parent4={
name:"amy"
friends["p1","p2"]
getname:function(){
return this.name}
}
let person4=object.creat(parent4)//重要
person4.name="tom"
person4.friends.push("jessy")

缺点:多个实例的引用类型属性指向相同的内存，存在篡改的可能，

5.寄生式继承

6.寄生组合式继承

3.src与href

href：1用在link和a 2是为当前文档和引用建立练习 3浏览器解析：识别为css，并行下载资源并且不会停止对当前文档资源的加载

src;1用在sc，img上 2是替换当前的元素 3 停止其他资源的加载，直接将该资源下载完毕，编译，执行

4.css位移

                transform:translate(水平位移,垂直位移);
				transform:translate(水平位移);
				
				transform:translateX(水平位移);
				transform:translateY(垂直位移);
				
				默认情况: 正值 从上往下,从左往右

5.12px改成1px

使用transform: scale();属性缩放字体所在元素即可实现小字体显示

6.引用数据类型和基本数据类型的区别

基本数据：bool int float double byte short long char

引用数据：数组 字符串

基本数据保存在栈中，而引用数据类型只是地址保存在栈中，具体内容保存在堆中

7.表单事件

input select change invalid reset submit

8.！important

!important>行内样式>id>class|属性>标签>通配符；

9.语义化标签

h标签 strong标签 nav标签 p标签 ins del

具有可读性，使得文档结构清晰

浏览器便于读取，有利于优化，

利于团队开发和维护，

用户体验好

10.h5新增特性

语义化标签，增强型表单，新增表单元素，新增表单属性，音频、视频，canvas，地理定位，拖拽，本地存储，

11.css3新增语法

transtion animation transform 阴影 边框 text-shadow

12.es6新增语法

1.新的变量声明

let const

2箭头函数

3解构赋值

可以将属性/值从对象/数组中取出,赋值给其他变量。

4...运算符

剩余运算符 展开运算符

5模板字符串

反引号 ￥{}

6模块

导入import 导出export

13.事件代理

事件代理又叫事件委托，利用的是事件冒泡，事件要绑定很多事件，可以绑定给他的祖先

14.js

15.渲染过程

1先解析html文件，生成dom树

2在解析css文件，生成css规则树

3将dom树和css规则数结合，创建渲染树

4根据渲染树去布局和绘制

16.异步

异步（Asynchronous, async）是与同步（Synchronous, sync）相对的概念。

代码不按照代码顺序执行

17为什么说js是单线程的

1进程：cpu分配资源的最小单位

2线程：cpu调度的最小单位

3浏览器是多进程的

没打开一个页面，就是一个进程，所以浏览器是多进程的

4js是单线程的

js作为浏览器的脚本语言，主要实现用户和浏览器的交互以及操作dom，所以他只能是单线程的，举个例子，假如js是多线程的，当一个线程要修改一个dom元素，一个线程要删除这个dom元素，浏览器就会不知所措

18.新建dom节点

document.creatElement("div")
父元素.appendChild（）

父元素.insertBefore（新节点，谁的前面）

父元素.removeChild（）

19.防抖和节流

多次触发只响应最后一次

多次触发只响应其中几次

20.重绘和回流

影响元素的简单样式的改变，如颜色，字体等

影响元素的布局的属性，比如宽高

重绘不一定会引起回流，回流一定引起重绘

21.sass

SASS是一种CSS的开发工具

1 变量 以$开头

$blue:#111

div{

color: $blue

}

2 选择器嵌套 属性也可以嵌套

div h1{
color:red
}

可以写成

div{
   h1{
      color:red

}
}

border-color属性可以写成(冒号别漏掉)

p{
  border:{
  color:red
  }
}

3注释 有三种

/**/ 保留在编译后的文件中

// 编译后被省略

/*! 重要注释 即使压缩编译 也会保留，通常用于版权信息

4 继承 允许一个选择器继承另一个选择器 @extend

.class2{
@extends .classs1
}

5 定义一个代码块 @mixin

使用@include命令 调用这个mixin

@mixin left{
float:left
margine-left:10px
}

div{
    @include left
}

6 插入文件

@import命令，用来插入外部文件。

7 @if

p{
    @if 1+1==2{color:red}
    @if5<3{color:blue}
}

@if lightness($color)>30%{
bgc:#000

}@else{
bgc:#fff

}

8 for循环 while循环 each

@for $i from 1to10{
   .border-#{$i}{
      border:#{$i}px solid blue
   }
}

$i 6;
@while $i>0{
.item-#{$i}{width:2em*$i;
$i:$i-2
}
}

9 自定义函数

@function double($n){
@return $n*2
}

22.this

1.方法调用，谁调用指向谁

2.函数调用 没有明确指向 指向window

3.构造函数 指向被构造的对象

4.apply call bind 指向第一个参数

5.箭头函数 指向上一层

6.严格模式下，没有定义，指向undefined

23.作用域链

每一个函数执行的时候，会先在自己创建的ao上找对应的属性值，找不到就往自己的父级的ao上面找，再找不到就再上一层的ao，知道找到最大的boss window

25.隔行变色

用 for循环，if判断，偶数是一个色，奇数是一个色

26.transform

1translate(x,y)

transform：translate(5px,5px)

2scale(x,y)

transform:scale(0.8,1)

3rotate(deg)

transform:rotate(45deg)

4skew(deg,deg)

transform:skew(30deg,30deg)

5rotateX() rotateY() rotateZ()

transform:rotateX(180deg)

6 perspective

27.link与script区别

引入css样式

引入js