面試總結一

1、說說三列布局實現方案(左、右邊固定,中間自適應)?
2、說說xml與xhtml、html的區別?
3、說說xcc?
4、說說變量?js的基本內型?
5、說說函數?(函數的概念、作用、創建、調用)
6、說說閉包?
7、說說你是怎麼理解this的?
8、說說你是怎麼理解對象的?
9、說說ajax原理、你是如何使用ajax的?
10、說說跨域解決?
11、說說typeof與instanceof的區別?
12、說說事件代理(事件委託)?
13、說說異步編程?
14、說說es6常用的函數?
15、說說json、jsonp?
16、說說h5的新特性?
17、說說瀏覽器緩存機制與h5緩存機制的不同?
18、說說vue框架,你知道的東西?vue原理?
19、react框架了解哪些?
20、math()函數?
21、打包工具接觸了哪些?
22、說說你在項目中遇到的最大內容?
23 css hack?


1、說說三列布局實現方案(左、右邊固定,中間自適應)?


2、說說xml與xhtml、html的區別?


3、說說xcc?


4、說說變量?js的基本內型?

變量有局部變量和全局變量之分;

js的基本內型:Undefined、Null、Blooean、Number、String(還有一種複雜的Object)


5、說說函數?(函數的概念、作用、創建、調用,最好提及匿名函數、閉包問題,在穿插着說說this)

5.1 函數的作用:函數是用來幫助我們封裝、調用代碼的最方便的工具!

5.2 函數的3種創建方式:

這裏寫圖片描述

5.3 函數的4種調用方式:
(1)作爲一個函數去調用 函數名() 【 fun()】 (函數作爲全局對象調用,會使this的值成爲全局對象,使用window對象作爲一個變量,容易造成程序崩潰!)

(2)函數作爲方法調用:(函數作爲對象的方法調用,會使this的值成爲對象的本身!)

這裏寫圖片描述

(3)使用構造函數調用函數:(構造函數中的this沒有任何值,指向構造函數的實例)

這裏寫圖片描述

(4)作爲函數方法調用函數:( 這種可以設置this的值,我可以返回不同this!)
在js中函數是對象,是對象就有屬性個方法,而call()和apply()是預定義的函數方法!
這兩個方法都可以調用函數,兩個方法的第一個參數必須是對象的本身!

這裏寫圖片描述

ps: 要對函數有更深層次的理解就必須要知道js的運行機制(預解析)問
題,有例文 http://blog.csdn.net/zyy88886666/article/details/72584665

還有匿名函數、閉包一定要說說。


6、說說閉包?(可以提一下匿名函數)

閉包: 是指有權訪問另一個函數作用域中的變量的函數。 常見創建閉包的方式:在一個函數內部創建另外一個函數。

匿名函數(拉達母函數):創建一個函數並將它賦值給變量,因爲function關鍵字後面沒有標識符
深入理解 http://www.cnblogs.com/pssp/p/5216668.html


7、說說你是怎麼理解this的?

this的指向在函數定義的時候是確定不了的,只有函數執行的時候才能確定this到底指向誰,實際上this的最終指向的是那個調用它的對象

例子一:

function a(){
            var me = "zyy";
            console.log(this.me);  //undefined
            console.log(this);  //window
}
a();

說明:按照上面我們說的那樣,this的最終指向的是調用它的對象,這裏的函數a實際上是最終指向的window,而window裏面是沒有me的,所以第一個是undefined,第二個則是window。

例子二:

var b ={
            'me' : "zyy",
            fn:function(){
                console.log(this.me)   //zyy
            }
    }
    b.fn();

說明:這裏的this指向的是對象b,因爲你調用這個fn是通過b.fn()執行的。所以我們可以說明一點,this的指向在函數創建的時候是決定不了的,在調用的時候才能夠決定,誰調用就指向誰。

例子三:

var b ={
            'me' : "zyy",
            fn:function(){
                console.log(this.me)  //zyy
            }
    }
window.b.fn();

說明: window是js中的全局對象,我們創建的變量實際上是給window添加屬性,而一般情況我們經常省略window,所以這裏可以用window.bb
例子3和例子2的代碼執行結果是一樣的,但是這裏this爲什麼不指向window呢?

我們再來看個列子:

var c = {
            a:99,
            b:{
                a:100,
                fn:function(){
                    console.log(this.a);//100
                }
            }
    }
    c.b.fn();

說明:這裏的函數是由最外層的c點出來的,但是this和上面一樣並沒有執行它,而是最終指向的b;所以我們可以推翻一開始說的那句話,並且總結如下

情況1:如果一個函數中有this,但是它沒有被上一級的對象所調用,那麼this指向的就是window(但是這裏需要說明的是js的嚴格版中this指向的不再是window,這個問題在這裏不談)
情況2:如果一個函數中有this,這個函數有被上一級的對象所調用,this指向的是就是它上一級的對象。
情況3:如果一個函數中有this,這個函數包含多個對象,儘管這個函數是被最外層的對象所調用,this也只是指向的它上一級的元素
總之:this指向的只能是它上一級的對象

8、說說你是怎麼理解對象的?(創建對象,對象屬性,繼承)

8.1 創建對象

//創建一個對象並添加屬性和方法
var  person = new Object();
person.name = 'zyy';
person.age=21;
person.job= 'web';
person.sayName=function(){
    alert(this.name);
}
//創建一個字面量的對象
var person = {
person.name = 'zyy';
person.age=21;
person.job= 'web';
person.sayName=function(){
    alert(this.name);
}
};

8.2 對象屬性


9、說說ajax原理、你是如何使用ajax的?
10、說說跨域解決?
11、說說typeof與instanceof的區別?


12、說說事件代理(事件委託)?

事件委託就是利用事件冒泡,只指定一個事件處理程序,就可以管理某一類型的所有事件。那這是什麼意思呢?寢室所有人,午飯點的外賣,需要下樓去取,因此他們讓室長一個人去取所有外賣,室長取來後,依次分發給每個人。

爲什麼要用事件委託:
一般來說,dom需要有事件處理程序,我們都會直接給它設事件處理程序就好了,那如果是很多的dom需要添加事件處理呢?比如我們有100個li,每個li都有相同的click點擊事件,可能我們會用for循環的方法,來遍歷所有的li,然後給它們添加事件,那這麼做會存在什麼影響呢?
在JavaScript中,添加到頁面上的事件處理程序數量將直接關係到頁面的整體運行性能,因爲需要不斷的與dom節點進行交互,訪問dom的次數越多,引起瀏覽器重繪與重排的次數也就越多,就會延長整個頁面的交互就緒時間,這就是爲什麼性能優化的主要思想之一就是減少DOM操作的原因;如果要用事件委託,就會將所有的操作放到js程序裏面,與dom的操作就只需要交互一次,這樣就能大大的減少與dom的交互次數,提高性能;
每個函數都是一個對象,是對象就會佔用內存,對象越多,內存佔用率就越大,自然性能就越差了(內存不夠用,是硬傷,哈哈),比如上面的100個li,就要佔用100個內存空間,如果是1000個,10000個呢,那隻能說呵呵了,如果用事件委託,那麼我們就可以只對它的父級(如果只有一個父級)這一個對象進行操作,這樣我們就需要一個內存空間就夠了,是不是省了很多,自然性能就會更好。

事件委託的原理:
事件委託是利用事件的冒泡原理來實現的,何爲事件冒泡呢?就是事件從最深的節點開始,然後逐步向上傳播事件,舉個例子:頁面上有這麼一個節點樹,div>ul>li>a;比如給最裏面的a加一個click點擊事件,那麼這個事件就會一層一層的往外執行,執行順序a>li>ul>div,有這樣一個機制,那麼我們給最外面的div加點擊事件,那麼裏面的ul,li,a做點擊事件的時候,都會冒泡到最外層的div上,所以都會觸發,這就是事件委託,委託它們父級代爲執行事件。
https://www.cnblogs.com/liugang-vip/p/5616484.html


13、說說異步編程?

14、說說es6常用的函數?
15、說說json、jsonp?
16、說說h5的新特性?
17、說說瀏覽器緩存機制與h5緩存機制的不同?
18、說說vue框架,你知道的東西?vue原理?
19、react框架了解哪些?
20、math()函數?
21、promise 理解?


21、打包工具接觸了哪些?

最流行的四種構建工具——grunt、gulp、browserify、webpack
所有的構建工具都是基於NodeJs和Npm

grunt 是js任務管理工具(自動化構建工具)
優勢:出來早 社區成熟 插件全
缺點:配置複雜 效率低 (cpu佔用率高)

gulp 基於流的自動化構建工具
優點:配置簡單 效率高 流式工作(一個任務 的輸出作爲另一個任務的輸入) 優點正好是grunt缺點
缺點:出現晚 插件少

webpack 模塊打包機
優點:模塊化 預編譯 代碼拆分來做資源異步加載。消除對未引用資源的依賴。穩定的生產部署。一系列開發輔助工具。
缺點:配置複雜

Gulp / Grunt 是一種工具,能夠優化前端工作流程。比如自動刷新頁面、combo、壓縮css、js、編譯less等等。簡單來說,就是使用Gulp/Grunt,然後配置你需要的插件,就可以把以前需要手工做的事情讓它幫你做了。但gulp快於grunt。


22、說說你在項目中遇到的最大內容?


23.css hack?

由於不同的瀏覽器對CSS的支持及解析結果不一樣,還由於CSS中的優先級的關係。我們就可以根據這個來針對不同的瀏覽器來寫不同的CSS。

CSS Hack大致有3種表現形式,CSS類內部Hack、選擇器Hack以及HTML頭部引用(if IE)Hack,CSS Hack主要針對類內部Hack:比如 IE6能識別下劃線”“和星號” * “,IE7能識別星號” * “,但不能識別下劃線”“,而firefox兩個都不能認識。等等
選擇器Hack:比如 IE6能識別html .class{},IE7能識別+html .class{}或者*:first-child+html .class{}。等等
HTML頭部引用(if IE)Hack:針對所有IE:

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章