模擬面試老師問到的面試題

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