哪吒人生信條：如果你所學的東西 處于喜歡 才會有強大的動力支撐。

把你的前端拿捏得死死的，每天學習得爽爽的，關注這個不一樣的程序員，如果你所學的東西 處于喜歡 才會有強大的動力支撐。

感謝不負每一份熱愛前端的程序員，不論前端技能有多奇葩，歡迎關注加我入群vx:xiaoda0423

前言

希望可以通過這篇文章，能夠給你得到幫助。(感謝一鍵三連)

1.css3有哪些新特性

圓角border-radius，陰影box-shadow，對文字加特效text-shadow，線性漸變gradient，變化transform，偽元素::selection，媒體查詢，多欄布局，圖片邊框border-image。

p:first-of-type，選擇屬于其父元素的首個<p>元素的每個<p>元素

p:last-of-type，選擇屬于其父元素的最后一個<p>元素的每個<p>元素

p:only-of-type，選擇屬于其父元素的唯一<p>元素的每個<p>元素

p:only-child，選擇屬于其父元素的唯一子元素的每個<p>元素

p:nth-child(2)，選擇屬于其父元素的第二個子元素的每個<p>元素

:enabled:disabled，控制表單控件的禁用狀態

:checked，單選框或復選框被選中

2.first-child與first-of-type的區別是

first-child匹配的是父元素的第一個子元素，可以說是結構上的第一個子元素

first-of-type匹配的是該類型的第一個元素，類型就是指冒號前面匹配到的元素。（只要是該類型的元素第一個即可，不限制是第一子元素）

<div><p></p><span></span> </div>

• p:first-child匹配到p元素，因為p元素是div的第一個子元素
• span:first-child匹配不到span元素，因為span是div的第二個子元素
• p:first-of-type匹配到p元素，因為p是div所有為p的子元素中的第一個
• span:first-of-type匹配到span元素，因為span是div所有未span的子元素中的第一個。

3.解決使用transform:translate屬性時會出現閃爍現象

-webkit-backface-visibility: hidden; // 隱藏轉換的元素的背面 -webkit-transform-style: preserve-3d; // 使被轉換的元素的子元素保留其3d轉換 -webkit-transform: translated3d(0,0,0); // 開啟gpu硬件加速模式，使用gpu代替cpu渲染動畫

4.如何使用@keyframes使div元素移動200像素

div {widht:100px;height:100px;background: red;animation: move 3s; } @keyframes move{from{margin-left: 0px;}to{margin-left: 100px;} }

5.如何實現文本換行

使用word-wrap屬性：normal只在允許的斷字點換行；break-word在長單詞或url地址內部進行換行。

6.超出文本省略

使用text-overflow:ellopsis：文本溢出時，為了不顯示省略標記...，通過clip直接將溢出的部分裁剪掉。

7.css3動畫如何在動作結束時保持狀態不變

使用animation-fill-mode，值為none，表示不改變默認行為；值為forwards，當動畫完成后，保持最后一個屬性值；backwards，在animation-delay所指定的一段時間內，在動畫顯示之前，應用開始屬性值；both，向前和向后填充模式都可以應用。

css3動畫的優點：在性能上會稍微好一些，瀏覽器會對css3的動畫做一些優化，代碼相對簡單；css3動畫的缺點：在動畫控制上不夠靈活，兼容性不好，部分動畫功能無法實現。

8.實現某div元素以每秒50px的速度左移100px

$('div'),animate({'left': 100}, 2000); div {transition: all 2s linear; } div.style.left = {div.offsetLeft+100)+'px';

9.說說box-sizing屬性

box-sizing屬性用來控制元素盒模型的解析模式，默認是content-box

content-box讓元素維持w3c的標準盒模型，元素的寬度/高度由border+padding+content的寬度/高度決定，設置width/height屬性指的是指定content部分的寬度/高度。

border-box讓元素維持ie傳統盒模型，設置width/height屬性指的是指定border+padding+content的寬度/高度。標準瀏覽器下，按照w3c規范解析盒模型，一旦修改了元素的邊框或內距，就會影響元素的盒子尺寸，就不得不重新計算元素的盒子尺寸，從而影響整個頁面的布局。

content-box盒模型：

布局所占寬度：

width=width + padding-left + paddiing-right + border-left + border-right

布局所占高度：

Height = height + padding-top + padding-bottom + border-top + border-bottom

padding-box盒模型：

布局所占寬度：

width = widht（包含padding-left + padding-right） + border-top + border-bottom

布局所占高度：

Height = height(包含padding-top + padding-bottom) + border-top + border-bottom

border-box盒模型：

布局所占寬度：

width = widht（包含padding-left + padding-right + border-left + border-right）

布局所占高度：

height = height(包含padding-top + padding-bottom + border-top + border-bottom)

10.如何實現把文本分隔為4列并使兩列之間間隔30像素

div {-moz-column-count: 3;-webkit-column-count: 3;column-count: 3;-moz-column-gap: 40px;-webkit-column-gap: 40px;column-gap: 40px;width: 600px; }

11.background-clip和background-orgin的區別

• background-clip規定背景，背景顏色和背景圖片的繪制區域。

它有三個屬性：

1. border-box表示背景從邊框開始繪制 2. padding-box表示背景在邊框內部繪制 3. content-box表示背景從內容部分繪制

• background-origin規定背景圖片的定位區域

它有三個屬性：border-box，padding-box，content-box（它只能對背景做樣式上的操作）

12.css3中transition屬性值以及含義是

transition屬性是一個簡寫屬性：

transition-property哪個屬性需要實現過渡

transition-duration完成過渡效果需要多少秒/毫秒

transition-timing-function速度效果的運動曲線，如linear,ease-in,ease,ease-out,ease-in-out,cube-bezier

transition-delay規定過渡開始前的延遲時間

13.當元素不面向屏幕時其可見性如何定義

backface-visibility: visible | hidden

14.如何實現css3倒影

-webkit-box-reflect設置方向，距離。方向可以設置為below,above,left,right。

.demo { height: 100px;widht: 100px;background: url(logo.png);-webkit-box-reflect: below 10px; }

15.css3實現背景顏色線性漸變

div{background: -webkit-linear-gradient(left,red,green 50%, blue) }

16.為盒子添加蒙版

.demo {height: 100px;width: 100px;-webkit-mask-image: url(shadow.png);-webkit-mask-position: 50% 50%;-webkit-mask-repeat: no-repeat; }

17.animation屬性值有哪些

animation-name就是動畫名稱；animation-duration就是動畫持續時間；animation-play-state是播放狀態(running表示播放，paused表示暫停)，可以用來控制動畫暫停;animation-delay就是動畫延遲時間;animation-timing-function就是動畫運動形式，animation-iteration-count就是重復次數；animation-direction就是播放前重置。

18.rem的原理是什么

在做響應式布局時，通過調整html的字體大小，頁面上所有使用rem單位的元素都會做相應的調整。

19.如何設置css3文本陰影

h1 {text-shadow: 水平陰影，垂直陰影，模糊距離，陰影顏色}

20.如何把元素從左側移動50像素，從頂端移動100像素

div{transform: translate(50px,100px);-ms-transform: translate(50px,100px);-webkit-transform: translate(50px,100px);-o-transform: translate(50px,100px);-moz-transform: translate(50px,100px); }

21.如何把一個元素旋轉30°

div{transform:rotate(30deg);-ms-transform: rotate(30deg); //ie9-webkit-transform: rotate(30deg); //safari,chrome-o-transform: rotate(30deg); // opera-moz-transform: rotate(30deg); // firebox }

22.利用css3制作淡入淡出的動畫效果

@-webkit-keyframes daIn{from {opacity: 0;}to {opacity: 1;} }@-webkit-keyframes daOut {from{opacity: 1;}to{opacity: 0;} }div {-webkit-animation-name: daIn; // 動畫名稱-webkit-animation-duration: 3s; // 動畫持續時間-webkit-animation-iteration-count: 1; // 動畫次數-webkit-animation-delay: 0s; // 延遲時間 }

23.在使用Bootstrap的同時使用地圖api，可能會造成Bootstrap與地圖沖突，地圖顯示不出來，如何解決

主要是在使用Bootstrap的變體zui.css的時候出現的，首先，打開瀏覽器的開發者工具，查看控制臺有無錯誤，如沒有，查看網絡中的資源，并確認與地圖相關的圖片資源有無加載，若加載了，將地圖調用的代碼從項目中獨立出來，看能否正常顯示，若能顯示，在項目中，使用二分法一半一半地刪除引用的JavaScript,css代碼，看這些JavaScript或css代碼是否對地圖api造成了影響，把問題鎖定在zui.css中，然后，在elements里核對地圖div下面的一些css。

24.jquery中的deferred的功能

實現鏈式操作

指定同一操作的多個回調函數

為多個操作指定回調函數

提供普通操作的回調函數接口

25.什么是deferred對象

開發網站過程中，會遇到某些耗時很長的javascript操作，有異步操作，如ajax讀取服務器數據，有同步操作，如遍歷一個大型數組，它們都不能立即得到結果。

可以為它們指定回調函數callback，就是事先規定，一旦運行結束，調用那些函數，但是，在回調函數方面，jquery的功能非常弱，為了改變這一點，jquery開發設計了deferred對象。

26.jquery和jquery ui的區別

jquery是一個javascript庫，主要提供選擇器，屬性修改和事件綁定等功能。jquery ui則是在jquery的基礎上對jquery的擴展，是jquery的插件。jquery ui提供了一些常用的界面元素，如對話框，拖動行為，改變大小行為等。

27.如何用原生JavaScript實現jquery的ready方法

$(document).ready()在dom繪制完畢后就執行，而不必等到頁面加載完畢。

// 實現ready方法 var DOMReady = (function() {// 回調函數隊列var fnList = [];// 頁面是否已經繪制完成var ready = false;var fnEvent = null;// 事件回調函數function handler(e) {// 確保事件回調函數只執行一次if(ready){return;}// 如果發生了`onreadystatechange事件，但是狀態不是complete,說明dom沒有繪制完成if(e.type==='onreadystatechange' && document.readyState !== 'complete') {return;}// 運行所有回調函數，為了防止運動時候注冊更多的事件回調函數，每次都要重新判斷fnList的長度for(var i = 0; i<fnList.length; i++){// 在document作用域下執行回調函數，并傳遞事件對象fnList[i].call(document,e)}// 執行完畢，切換ready狀態ready = true;// 移除所有回調函數fnList = null;fnEvent = e; } // 注冊事件 // 能力檢查 if(document.addEventListener){document.addEventListener('DOMContentLoaded',handler,false)document.addEventListener('readystatechange',handler,false)window.addEventListener('load',handler,false); }else if(document.attachEvent){document.attachEvent('onreadystatechange', handler);window.attachEvent('onload', handler) } // 返回真正的DOMReady方法 return function(fn) {if(ready) {fn.call(document,fnEvent)}else {fnList.push(fn)} } })() // 測試 // 訂閱load事件 window.onload = function() {console.log('load') } // 訂閱ready事件 DOMReady(function(){ console.log('ready') })

28.jquery中的attr和prop區別

對于html元素本身就帶有的固定屬性，在處理時，使用prop方法；對于html元素自定義的dom屬性時，在處理時，使用attr方法。

29.$.map()和$.each()區別

$.map()方法用來遍歷操作數組和對象，返回的是一個新的數組； $.map()方法適用于將數組或對象的每個項目映射到一個新數組中。

$.each()用于遍歷jquery對象，返回的是原來的數組，并不會返回一個新數組。

30. jquery中如何將一個jquery對象轉化為dom對象

jquery對象是一個數據對象， 可以用[index]的方法來得到相應的dom對象

var $v = $('#v'); // jquery對象 console.log($v[0]); // dom對象

使用get(index)方法：

var $v = $("#v"); console.log($v.get(0)); // dom對象

31.jquery中監聽事件有幾種方式

4中事件監聽方式：bind(),live(),delegate(),on()；解除事件對應的4種：unbind(),die(),undelegate(),off()。

32.jquery中個get和eq區別

• get()取得其中一個匹配的元素，num表示取得第幾個匹配的元素,get()多針對集合元素，返回的是dom對象組成的數組
• eq()獲取第n個元素，下標都從0開始，返回的是一個jquery對象。

33.jquery中的事件冒泡，怎么執行，如何停止冒泡事件

事件冒泡從里面往外面開始傳遞。在jquery中stopPropagation()方法用于停止冒泡，兼容所有瀏覽器

34.jquery中的hover和toggle區別

hover()和toggle()都是jquery中的兩個合成事件。

• hover()方法用于模擬光標懸停事件
• toggle()方法用于連續交替單擊事件

35. 你使用過哪些數據格式

html格式，json格式，xml格式：html片段提供外部數據，一般來說是最簡單的；如果數據需要復用，那么在性能和文件大小方面具有優勢的是json；當遠程應用程序未知時，xml能為數據的操作性提供最可靠的保證。

36.選擇器中id，class有什么區別

• id，在網頁中每個id名稱只能有一次，class可以重復使用

37.為了將單選按鈕組的第二個選框設置為選中狀態，如何設置

$('input[name=items]').get(1).checked = true

38.$.getScript()方法和$.getJson()方法有什么區別

• $.getScript()方法可以直接加載javascript文件，并且不需要對javascript文件進行處理，javascript文件會自動執行。
• $.getJson()是用于加載json文件的，用法和$.getScript()一樣。

39.jquery或zepto源碼有哪些地方覺得不錯

jquery源碼封裝在一個匿名函數的自執行環境中，有助于防止變量的全局污染。

通過傳入window對象參數，可以使window對象作為局部變量使用。

好處是當jquery訪問window對象的時候，就不用將作用域鏈退回到頂層作用域了，從而可以更快地訪問window對象，同樣，傳入undefined參數，可以降低undefined被重定義的風險。

(function (window, undefined) {window.jQuery = window.$ = jQuery })(window);

jquery將一些原型屬性和方法封裝在了jQuery.prototype中，為了方便對jQuery.prototype的訪問，將jQuery.prototype賦值給jQuery.fn。一些數組或對象的方法經常能使用到，jQuery將其保存為局部變量以提高訪問速度。jQuery實現的鏈式調用可以節約代碼，所返回的都是同一個對象，可以提高開發效率。

40.jQuery中的美元符號

$(document).ready(function(){//... }); jQuery(document).ready(function(){//... });

41.onload()函數和ready()函數的區別

• 可以在頁面中使用多個ready(),但只能使用一次onload()
• ready()函數在頁面dom元素加載完以后就會調用，而onload()函數則要在所有的關聯資源加載完畢后才會調用，要晚于ready()函數。

42.jQuery中有哪幾種常見的選擇器

基本選擇器；層次選擇器；過濾選擇器；屬性選擇器；子元素選擇器；表單選擇器；內容選擇器；可見選擇器

43.使用jQuery將頁面上所有元素邊框設置為2px寬的虛線

<script language="javascript" type="text/javascript">$("*").css("border", "2px dotted red"); </script>

44.使用jQuery實現單擊按鈕時彈出一個對話框

<button class="btn">打開彈框</button> jQuery: <script type="text/javascript">$(function(){$('.btn').click(function(){alert('success')})}) </script>

45.如何使用jquery編碼和解碼url

編碼時使用encodeURIComponent(url)，解碼時使用decodeURIComponent(url)

46.jquery中的delegate()函數有什么作用

delegate()是jquery中事件委托的語義化方法，會在以下兩種情況中使用到。

如果有一個父元素，需要給其下的子元素添加事件，這時可以使用delegate()了。

$("ul").delegate("li", "click", function(){$(this).hide(); });

當元素在當前頁面中不可用時，使用delegate()

47.如何禁用瀏覽器的前進和后退按鈕

<script type="text/javascript" language="javascript">$(document).ready(function() {//前進window.history.forward();//后退window.history.back();}); </script>

48.網頁上有5個<div>元素，如何使用jquery來選擇它們

可以使用標簽選擇器來選擇所有的div元素，$("div")會返回一個包含5個div標簽的jQuery對象。

49.如何在單擊一個按鈕時使用jQuery隱藏一副圖片

$('.demo-img').click(function() {$('.img').hide(); });

50. $(document).ready()是什么函數

ready()函數用于在文檔進入ready狀態時執行代碼。當dom完全加載時，jquery允許你執行代碼，使用$(document).ready()最大的好處在于它適用于所有瀏覽器，jQuery有助于解決跨瀏覽器兼容性問題。

51.如何找到所有多選下拉框內的選中項

可以用jquery選擇器獲取所有滿足multiple=true的<select>標簽的選中項。

$('[multiple] :selected')

52.如何獲取頁面中所有多（復）選框內選中選項的內容

$('[multiple] :selected').each(function(index, dom){alert($(dom).text()) // text()方法返回選項的文本 })

53.$(this)和this關鍵字在jquery中的不同

$(this)返回一個jQuery對象，可以對它調用多個jQuery方法，比如用text()獲取文本，用on()綁定事件等。而this代表當前元素，表示上下文中的當前dom元素。

54.提取鏈接的href

$('a').each(function(){alert($(this).attr('href')); });

55.能用jquery代碼選擇所有在段落內部的超鏈接嗎

來選擇所有嵌套在段落p標簽內部的超鏈接a:

$('p a')

56.jquery中的detach()和remove()方法的區別

detach()和remove()方法都可以移除一個dom元素：

• remove()將元素自身移除的同時，也會移除元素內部的一切，包括綁定的事件以及與該元素相關的jquery數據
• detach()雖然可以將元素自身移除，但是它不會刪除數據和綁定事件

57.如何利用jquery，來向一個元素添加或移除css類

用addClass()和removeClass()方法動態地改變元素的class

58.使用cdn加載jquery庫的主要優勢是什么

• 可以節省服務器帶寬
• 可以更快地下載jquery文件
• 如果瀏覽器已經從同一個cdn上下載了jquery文件，再次打開頁面時，不會再次下載

59.jQuery.ajax()和jQuery.get()方法之間的區別

• ajax()方法更強大，可配置性更強，可以指定等待多久，以及如何處理錯誤
• get()方法只是ajax()方法中get請求的簡化方法

60.要是在一個jQuery事件處理程序里返回了false會怎么樣

這將會阻止事件向上冒泡以及默認行為。

61.document.getElementbyId("myId")和$("#myId")哪個更高效

第一個，因為它使用原生方法；而二是jQuery封裝的方法，要處理其外部的判斷邏輯

62.jQuery中的方法鏈是，使用的好處

方法鏈就是執行完的方法返回的結果是當前jQuery的實例化對象，可以繼續調用另一個方法。

63.如何用jquery將一個html元素添加到dom樹中

appendTo()方法，將一個html元素添加到dom樹中，使用它可以在指定的dom元素末尾添加一個現存的元素或者一個新的html元素。

append,appendTo,prepend,prependTo,after,insertAfter,before,insertBefore

64.你是如何使用jquery中的ajax的

使用load(),$.get(),$.post()，如果需要設定beforeSend提交前回調函數，error失敗后處理，success成功后處理以及complete請求完成后處理回調函數等，要使用$.ajax()

65.頁面導入樣式時，使用link和@import有什么區別？

區別：

link是HTML標簽，@import是css提供的。

link引入的樣式頁面加載時同時加載，@import引入的樣式需等頁面加載完成后再加載。

link沒有兼容性問題，@import不兼容ie5以下。

link可以通過js操作DOM動態引入樣式表改變樣式，而@import不可以。

66.HTML全局屬性(global attribute)有哪些（包含H5）？

全局屬性：用于任何HTML5元素的屬性

accesskey:設置快捷鍵 class:為元素設置類標識 contenteditable:指定元素內容是否可編輯 contextmenu:自定義鼠標右鍵彈出上下文菜單內容（僅firefox支持） data-*:為元素增加自定義屬性 dir：設置元素文本方向（默認ltr；rtl） draggable:設置元素是否可拖拽 dropzone:設置元素拖放類型（copy|move|link,H5新屬性，主流均不支持） hidden:規定元素仍未或不在相關 id:元素id，文檔內唯一 lang:元素內容的語言 spellcheck:是否啟動拼寫和語法檢查 style:行內css樣式 tabindex:設置元素可以獲得焦點，通過tab導航 title:規定元素有關的額外信息 translate:元素和子孫節點內容是否需要本地化（均不支持）

67.寫一個方法去掉字符串中的空格

var str = ' abc d e f g '; function trim(str) {var reg = /\s+/g;if (typeof str === 'string') {var trimStr = str.replace(reg,'');}console.log(trimStr) } trim(str)

68.CSS3有哪些新增的特性？

邊框(borders):border-radius 圓角 box-shadow 盒陰影 border-image 邊框圖像背景:background-size 背景圖片的尺寸 background_origin 背景圖片的定位區域 background-clip 背景圖片的繪制區域漸變：linear-gradient 線性漸變 radial-gradient 徑向漸變文本效果;word-break word-wrap text-overflow text-shadow text-wrap text-outline text-justify轉換：2D轉換屬性transform transform-origin2D轉換方法translate(x,y) translateX(n) translateY(n) rotate(angle) scale(n) scaleX(n) scaleY(n) rotate(angle) matrix(n,n,n,n,n,n)3D轉換：3D轉換屬性transform transform-origin transform-style3D轉換方法translate3d(x,y,z) translateX(x) translateY(y) translateZ(z)scale3d(x,y,z) scaleX(x) scaleY(y) scaleZ(z)rotate3d(x,y,z,angle) rotateX(x) rotateY(y) rotateZ(z)perspective(n)過渡transition動畫@Keyframes規則 animation彈性盒子(flexbox)多媒體查詢@media

69.用遞歸算法實現，數組長度為5且元素的隨機數在2-32間不重復的值

var arr = new Array(5); var num = randomNumber(); var i = 0; randomArr(arr,num); function randomArr(arr,num) {if (arr.indexOf(num)< 0){arr[i] = num;i++;} else {num = randomNumber();}if (i>=arr.length){console.log(arr);return;}else{randomArr(arr,num)} } function randomNumber() {return Math.floor(Math.random()*31 + 2) }

70.寫一個加密字符串的方法

僅支持瀏覽器端：function encode (str) {return btoa(encodeURIComponent(str)); }function decode (str) {return decodeURIComponent(atob(str)); }

71.瀏覽器內多個標簽頁之間的通信方式有哪些？

1.WebSocket （可跨域） 2.postMessage（可跨域） 3.SharedWorker 4.Server-Sent Events 5.localStorage 6.BroadcastChannel IE不支持 7.Cookies

72.簡述下你理解的優雅降級和漸進增強

優雅降級，先做好一個完善的具備完整體驗的版本，再向下做兼容。

漸進增強，先做好一個可以基本正常使用的版本，再慢慢豐富體驗和內容。

73.viewport常見設置都有哪些？

width 設置 layout viewport 的寬度，為一個正整數，或字符串"width-device" initial-scale 設置頁面的初始縮放值，為一個數字，可以帶小數 minimum-scale 允許用戶的最小縮放值，為一個數字，可以帶小數 maximum-scale 允許用戶的最大縮放值，為一個數字，可以帶小數 height 設置 layout viewport 的高度，這個屬性對我們并不重要，很少使用 user-scalable 是否允許用戶進行縮放，值為"no"或"yes", no 代表不允許，yes 代表允許

viewport 是在 meta 標簽內進行控制。

// width=device-width, initial-scale=1.0 是為了兼容不同瀏覽器 <metaname="viewport"content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />

74.對比下px、em、rem有什么不同？

默認情況下: 1em = 10px; 1rem = 16px

px是css中的邏輯像素，和移動端的物理像素之間會有一個比值dpr
em是指相對于父元素的大小
rem中的r就是root，也就是相對于root元素的大小（html標簽）

75.簡要描述下什么是回調函數并寫一個例子出來

dom.addEventerlisten('click',function(){// do something })

76.你對標簽語義化的理解是什么？

見名知意，方便多人認識，且命名統一，簡潔，易于重構代碼

77.在頁面上隱藏元素的方法有哪些？

display: none opacity: 0 visibility: hidden z-index: -9999999999999 transform: scale(0) margin-left: -100% position: relative; left: -100% width: 0; height: 0;

78.去除字符串中最后一個指定的字符

function trim(str) { if(typeof str === 'string'){ var trimStr = str.substring(0,str.length-1) } return trimStr; }

79.HTML5的文件離線儲存怎么使用，工作原理是什么？

localstorge 利用瀏覽器的本地存儲可以緩存信息 ，在創建數據的時候引入創建好的數據

//增加 localStorage.setItem('myCat', 'Tom'); //獲取 let cat = localStorage.getItem('myCat'); //刪除所有 localStorage.clear();

80.CSS選擇器有哪些？哪些屬性可以繼承？

選擇器 通配符 id class 標簽 后代選擇器 子選擇器 兄弟選擇器 屬性選擇器 偽類選擇器 偽元素選擇器可以繼承的屬性font-size font-weight font-style font-family color

81.簡述超鏈接target屬性的取值和作用

<a> 標簽的 target 屬性規定在何處打開鏈接文檔。

語法：<a target="value">

屬性值：

_blank 在新窗口中打開被鏈接文檔。 _self 默認。在相同的框架中打開被鏈接文檔。 _parent 在父框架集中打開被鏈接文檔。 _top 在整個窗口中打開被鏈接文檔。 framename 在指定的框架中打開被鏈接文檔。

82.CSS3新增偽類有哪些并簡要描述

83.label都有哪些作用

<label for="hobby">愛好</label> <input id="hobby" type="checkbox" value="0">

<label>的作用

表示用戶界面中某個元素的說明

增加命中區域，屏幕閱讀器可以讀出標簽。使用輔助技術的用戶更容易理解輸入 哪些數據

利用label"模擬"button來解決不同瀏覽器原生button樣式不同的問題

結合checkbox、radio表單元素實現純CSS狀態切換，這樣的實例就太多了。比如控制CSS動畫播放和停止

input的focus事件會觸發錨點定位，我們可以利用label當觸發器實現選項卡切換效果

84.用css創建一個三角形，并簡述原理

width: 0; height: 0; margin: 100px auto; border-top: 50px solid transparent; border-left: 50px solid transparent; border-right: 50px solid transparent; border-bottom: 50px solid red;

原理是寬高是兩邊固定，border不一樣，有顏色，且有top、right、bottom、left的選項進行修改。在使用的時候需要寬高為零。三角形就需要數學知識（勾股定理），去考慮為等邊、全等。

<div class='rect'></div> <style>.rect {width: 0;height: 0;background-color: #fff;border-right: 100px solid rgb(34, 230, 220);border-left: 100px solid rgb(202, 146, 25);border-top: 100px solid rgb(29, 156, 194);border-bottom: 100px solid rgb(16, 204, 101);} </style>

創建一個div，寬高都為0，實現效果如下，發現border的四個邊都是一個三角形，要實現三角形只需將其中幾個邊background設置為transparent，即可得到三角形

<style>.rect {width: 0;height: 0;background-color: #fff;border-right: 100px solid transparent;border-left: 100px solid transparent;border-top: 100px solid rgb(29, 156, 194);border-bottom: 100px solid transparent;} </style>

85.Iframe 有什么好處，有什么壞處？國內還有哪些知名網站仍用Iframe，為什么？有哪些原來用的現在拋棄了？又是為什么？

iframe原本的用法在現在看來是不合時宜的，問題太多了，但是它的其他功能卻是不錯的黑魔法。

• 用來實現長連接
• 跨域通信
• 歷史記錄管理，解決ajax化網站響應瀏覽器前進后退按鈕的方案，在html5的history api不可用時作為一種替代。
• 純前端的utf8和gbk編碼互轉

現在，應該使用 iframe 的例子如：

沙箱隔離。

引用第三方內容。

獨立的帶有交互的內容，比如幻燈片。

需要保持獨立焦點和歷史管理的子窗口，如復雜的Web應用。

注：登錄彈窗用 iframe 未必合適。HTML標準新增了dialog元素，可能更適合。

86.簡述你對BFC規范的理解

BFC 全稱“塊級格式化上下文”(Block Formatting Context)，對應的還有 IFC。BFC 類似一個“結界”，如果一個 DOM 元素具有 BFC，那么它內部的子元素不會影響外面的元素；外面的元素也不會影響到其內部元素。

最常見的例子就是清除 float 的 overflow: hidden; 屬性。overflow: hidden;會觸發元素的 BFC，因此其內部的 float 元素不會影響到外部元素的布局。

觸發 BFC 的條件：

<html> 根元素 float 不為 none overflow 為 auto,scroll,hidden display 的值為 table-cell, table-caption,inline-block 中任何一個 position 的值不為 static 和 relativeBFC 可以實現更加健壯的自適應布局。

參考文章：《CSS 世界》

87.統計某一字符或字符串在另一個字符串中出現的次數

var childInNums = parent.split(child).length - 1 function strCount(str, target) {let count = 0if (!target) return countwhile(str.match(target)) {str = str.replace(target, '')count++}return count }console.log(strCount('abcdef abcdef a', 'abc'))

88.清除浮動的方式有哪些及優缺點？

通過設置父標簽overflow: auto

通過after偽類: {display: block; content: ''; clear: both;}

觸發BFC 或 clear: both

CSS盒子塌陷問題解決方案解決方案

89.簡要描述下JS有哪些內置的對象

時間對象Date 字符串對象String 數學對象Math 數值對象Number 數組對象Array 函數對象Function 函數參數集合arguments 布爾對象Boolean 錯誤對象Error 基礎對象Object

90.常見的瀏覽器內核都有哪些？

內核按功能可以分為渲染引擎和JS引擎。

我們常說的瀏覽器內核指代的是瀏覽器的渲染引擎。

IE : Trident safari（蘋果公司自帶瀏覽器）: webkit FireFox : Gecko Chrome : Blink ，JS引擎為V8引擎 Opera : Blink

91.盒模型的理解

盒模型主要有以下幾部分組成：

內容（content） 內邊距（padding） 邊框（border） 外邊框（margin）

盒模型分為兩種：

標準盒模型(w3c 盒模型) 標準盒模型的 width = content

IE 盒模型 IE 盒模型的 width = padding + border + content

默認的情況下，盒子都是基于標準盒模型的盒子。

在 css3 中出現了 box-sizing 屬性，該屬性會改變默認盒子的盒模型。該屬性的兩個屬性值分別表示為：content-box（標準盒模型）和 border-box（IE 盒模型）。

盒模型的理解

92.html5中的form怎么關閉自動完成？

設置form的autocomplete屬性為off

93.::before和:after中單冒號和雙冒號的區別是什么

區別：偽元素在css1中已經存在當時用單冒號，css3時做了修訂用雙冒號 ::before ::after表示偽元素用來區別偽類。作用：在元素前面（::before）和后面（::after）加內容

【CSS】屬性content有什么作用呢？有哪些場景可以用到？

94.說說你對javascript的作用域的理解

1：全局作用域
2：局部作用域

在 ES5 之前，javascript 只有函數作用域而沒有塊級作用域的。在 if 或者 for 花括號中的變量實際在外層是可以被訪問的。

for(var i = 0; i < 10; i++){var j=123} console.log(j) // 123;

不過使用 ES6 的 let 和 const 之后，就可以實現塊級作用域了。

var a = 1; function b(){var b = 2;console.log(a);function c(){// 內部可以訪問外部，而外層訪問不到內部var a = 4;var c = 3;console.log(a); // 4 不會污染console.log(b); // 2}c(); }console.log(b()); console.log(a);

95.http都有哪些狀態碼？

200 成功 301 重定向 304 (未修改) 自從上次請求后，請求的網頁未修改過。 服務器返回此響應時，不會返回網頁內容。 400 (錯誤請求) 服務器不理解請求的語法。 403 (禁止) 服務器拒絕請求。 404 (未找到) 服務器找不到請求的網頁。 500 (服務器內部錯誤) 服務器遇到錯誤，無法完成請求。 501 (尚未實施) 服務器不具備完成請求的功能。 例如，服務器無法識別請求方法時可能會返回此代碼。 502 (錯誤網關) 服務器作為網關或代理，從上游服務器收到無效響應。 503 (服務不可用) 服務器目前無法使用(由于超載或停機維護)。 通常，這只是暫時狀態。 504 (網關超時) 服務器作為網關或代理，但是沒有及時從上游服務器收到請求。 505 (HTTP 版本不受支持) 服務器不支持請求中所用的 HTTP 協議版本。

96.為什么HTML5只需要寫<!DOCTYPE HTML>就可以

因為 HTML5 與 HTML4 基于的基準不同。

HTML4 基于 SGML 因此需要除了 DOCTYPE 外還需要引入 DTD 來告訴瀏覽器用什么標準進行渲染。DTD 還分為標準模式、嚴格模式。如果什么都不寫，就完全讓瀏覽器自我發揮，會變成怪異模式。

HTML5 不基于 SGML，因此后面就不要跟 DTD，但是需要 DOCTYPE 來規范瀏覽器的渲染行為。

注：SGML 是通用標記語言的集合。其中有 HTML、XML，因此需要用 DTD 來指定使用那種規范。

97.什么是閉包？優缺點分別是什么？

• 閉包：在局部作用域引用上層作用域（非全局）的變量
• 優點：防止變量污染作用域
• 缺點：不釋放則會導致內存泄漏

98.寫一個數組去重的方法

一維

new set(...arr)

二維

arr.reduce((a,b)=>{return new set(...a.concat(b)) },[])

99.元素的alt和title有什么區別？

title屬性是一個標記，它向每個元素添加補充信息。當鼠標指針放在元素上時，主要作用是顯示工具提示。

alt是為圖片指定替代文字的屬性

alt是在<img>中指定的屬性標簽，表示圖像。

正如我寫為替代文本一樣，它用于需要文本而不是圖像的情況。

• 如果盲人使用語音閱讀功能，則會大聲朗讀圖像的alt屬性中的文本。
• 當由于鏈接斷開而無法顯示圖像時，將顯示它。
• Google和Yahoo!等機器人抓取圖片的提示。

100.table的作用和優缺點是什么呢？

table 用于表格數據的展示，并且很符合人們的直觀認知。

在 div+css 布局流行之前，普遍使用 table 進行布局。

table 布局的好處在于樣式好控制，特別是居中、對齊。缺點在于會多處非常多的 DOM 節點，會導致頁面加載變慢、不利于 SEO。也因此，在 CSS 成熟之后，table 布局馬上就變成歷史了。

101. typeof('abc')和typeof 'abc'都是string, 那么typeof是操作符還是函數？

假設typeof是函數,則調用typeof(typeof)應該返回一個字符串'function',但是實際操作會報錯,所以typeof不是函數

typeof 是操作符，明確定義在MDN當中,作用是對后方表達式的返回做類型定義。

102.說說你對SVN和GIT的理解和區別

SVN是集中式，GIT是分布式

103.什么是FOUC？你是如何避免FOUC的？

FOUC：加載時樣式突然變化

原因：由于在渲染HTML時，遇到CSS樣式表會重新渲染HTML

樣式表沒有放到head里面,使用了@import導入樣式

解決：盡量把樣式表放到body標簽上面

104.css的屬性content有什么作用呢？

content屬性與 ::before 及 ::after 偽元素配合使用生成文本內容

105."attribute"和"property"有什么不同？

• property是DOM中的屬性，是JavaScript里的對象
• attribute是HTML標簽上的特性，它的值只能夠是字符串

106.寫一個驗證身份證號的方法

地址碼6位+年份碼4位+月份碼2位+日期碼2位+順序碼3位+校驗碼1位

107.對于HTML表單輸入字段，disabled =“ disabled”和readonly =“ readonly”有什么區別？

相同點：都會使文本框變成只讀，不可編輯

disabled屬性在將input文本框變成只讀不可編輯的同時，還會使文本框變灰，但是readonly不會。

設置了readonly屬性的input元素依然可以獲取焦點，但是設置了disabled屬性的input元素沒有辦法獲取焦點

readonly只針對input和textarea有效，而disabled對于所有的表單元素都有效。

readonly：不可編輯、可復制、可選擇、可以接收焦點但不能被修改，后臺會接收到傳值

disabled：不可編輯、不可復制、不可選擇、不能接收焦點，后臺也不會接收到傳值

108.說說你對line-height是如何理解的？

line-height，又稱行高，指的是兩行文字基線之間的距離，又可以稱為這行文字所占的高度。

如圖紅色線即為基線

基線（baseline），指的是一行字橫排時下沿的基礎線，基線并不是漢字的下端沿，而是英文字母x的下端沿。

109.說說你對重繪和重排的理解，以及如何優化？

瀏覽器加載網頁時會生成DOM樹和CSSOM樹

重繪：

當盒子的位置、大小以及其他屬性，例如顏色、字體大小等都確定下來之后，瀏覽器便把這些原色都按照各自的特性繪制一遍，將內容呈現在頁面上。重繪是指一個元素外觀的改變所觸發的瀏覽器行為，瀏覽器會根據元素的新屬性重新繪制，使元素呈現新的外觀。

觸發重繪的條件：改變元素外觀屬性。如：color，background-color，font-size等。

重排(回流)：

當渲染樹中的一部分(或全部)因為元素的規模尺寸，布局，隱藏等改變而需要重新構建, 這就稱為回流(reflow)。每個頁面至少需要一次回流，就是在頁面第一次加載的時候。

重繪和重排的關系：在回流的時候，瀏覽器會使渲染樹中受到影響的部分失效，并重新構造這部分渲染樹，完成回流后，瀏覽器會重新繪制受影響的部分到屏幕中，該過程稱為重繪。

所以，重排必定會引發重繪，但重繪不一定會引發重排。

觸發重排的條件：任何頁面布局和幾何屬性的改變都會觸發重排

比如：

1、頁面渲染初始化(無法避免)

2、添加或刪除可見的DOM元素；

3、元素位置的改變，或者使用動畫；

4、元素尺寸的改變——大小，外邊距，邊框；

5、瀏覽器窗口尺寸的變化（resize事件發生時）；

6、填充內容的改變，觸發重排的條件：改變元素的大小 位置 等如：width、height、pading、margin、position等，　添加刪除DOM操作等

重繪重排的代價：耗時，導致瀏覽器卡慢。

110.0.1 + 0.2、0.1 + 0.3和0.1 * 0.2分別等于多少？并解釋下為什么？

111.new操作符的理解是什么？手動實現一個new方法

new 運算符創建一個用戶定義的對象類型的實例或具有構造函數的內置對象類型之一

new Object()舉例:

• 創建一個新對象
• 把新對象的原型指向構造函數的prototype
• 把構造函數里的this指向新對象
• 返回這個新對象

112.jquery中是如何操作類的

用addClass()來追加類，用removeClass()來刪除類，用toggle()來切換類。

如何給jQuery動態添加新的元素，如何給新生產的元素綁定事件

jQuery的html()可以給當前元素添加新的元素。直接在元素還未生成前就綁定事件肯定是無效的，因為所綁定的元素目前根本不存在。所以可以用live方法來動態綁定事件。

113.使用jQuery中的動畫

• hide()和show()可以同時修改多個樣式屬性，如高度，寬度，不透明度。
• fadeIn()和fadeOut()，fadeTo()只能改變不透明度。
• slideUp()和slideDown()，slideToggle()只能改變高度。
• animate()屬于自定義動畫的方法，可以自定義屬性。

114.單擊超鏈接后自動跳轉，單擊“提交”按鈕后表單會提交等，有時候，為了阻止默認行為，怎么辦

使用event.preventDefault()或在事件處理函數中返回false，即是return false

115.你使用什么方法提交數據

一般使用$.post()方法，如果需要設定beforeSend提交前回調函數，error失敗后處理，success成功后處理complete請求完成后處理回調函數等，就會使用$.ajax()。

116.在ajax中獲取數據的主要有幾種方式

三種：html拼接的query數據，json數組對象數據，serialize()方法序列化后的表單數據。

117.jquery中使用過哪些插入節點的方法

內部插入方法：append(), appendTo(), prepend(), prependTo()

外部插入方法：after(), insertAfter()，before(), insertBefore()

118.在jquery中，如何獲取或者設置屬性？如何刪除屬性

jquery中可以用attr()方法來獲取和設置元素屬性，可以用removeAttr()方法來刪除元素屬性。

119.如何設置和獲取html以及文本的值

使用html()方法，類似于innerHTML屬性，可以用它讀取或設置某個元素中的HTML內容。

html()方法可以用于XHTML文檔，不能用于XML文檔。

text()方法可以用來讀取或設置某個元素中的文本內容

val()方法可以用來設置或獲取元素的值

120.說說<script>、<script async>和<script defer>的區別

<script>標簽，它具有兩個屬性的，async異步加載和defer延遲加載

<script>

當script標簽放在head中，并且這個script標簽只有scr屬性引入外部js文件的情況下，HTML文件開始渲染，直到命中script標簽，此時解析將停止，并發現一個請求獲取該文件并執行。執行結束之前繼承渲染HTML標簽。

<script async>

async表示的意思是異步加載JavaScript文件。

使用async會在HTML解析期間下載文件，并在下載完成后暫停HTML的解析，執行下載的外部js文件，執行后繼續解析HTML。

<script defer>

defer表示的意思是在HTML文檔解析之后在執行加載完成的JavaScript文件。

它和async的區別是，同樣在HTML解析期間下載外部的js文件，但是下載完成后不會立即執行js腳本文件，而是等到HTML解析完成后才執行它。即在DOMContentLoaded之間執行已下載的外部js文件

121.說說你對z-index的理解

z-index 屬性設定了一個定位元素及其后代元素或 flex 項目的 z-order。 當元素之間重疊的時候， z-index 較大的元素會覆蓋較小的元素在上層進行顯示。

122.包裹節點的方法有哪些？用包裹節點方法的好處？

包裹節點的方法：wrapAll()，wrap(), wrapInner()，在文檔中插入額外的結構化標記時可以使用這些包裹的方法，因為它不會破壞原始文檔的語義。

123.如何實現自適應布局

• 可以使用媒體查詢做響應式頁面
• 用Bootstrap的柵格系統
• 使用彈性盒模型

124.在移動端如何做好用戶體驗

• 清晰的視覺縱線
• 信息的分組
• 極致的減法
• 利用選擇代替輸入
• 標簽以及文字的排布方式
• 依靠明文確認密碼
• 合理地利用鍵盤

125.如何解決長時間按住頁面出現閃退的問題

element {-webkit-touch-callout: none; }

126.解決iPhone以及iPad輸入框的默認內陰影的問題

element {-webkit-appearance: none; }

127.如何解決安卓手機圓角失效問題

通過background-clip:padding-box為失效的元素設置樣式

128.如何解決ios設置中input按鈕樣式會被默認樣式覆蓋的問題

input, textarea {border: 0;-webkit-appearance: none; }

129.如何解決移動端click事件有300ms延遲問題

300ms延遲導致用戶體驗不好，為了解決這個問題，一般在移動端用touchstart, touchend, touchmove, tap模擬的事件來取代click事件。

130.如何解決移動端html5中的date類型的input標簽不支持placeholder屬性的問題

<input placeholder="請輸入日期" type="text" onfocus="(this.type='date')" name="date">

131.如何禁止復制或選中文本

Element {-webkit-user-select: none;-moz-user-select: none;-khtml-user-select: none;user-select: none; }

132.解決上下拖動滾動條時的卡頓問題

body {-webkit-overflow-scrolling: touch;overflow-scrolling: touch; }

133.說說XHTML

• 所有的 XHTML 元素必須被嵌套于 根元素中。
• XHTML 標簽必須關閉
• XHTML 所有標簽必須小寫
• XHTML 標簽必須正確嵌套

134.為什么10.toFixed(10)會報錯？

原因是js解釋器對.的解釋發生了歧義導致。它既可以理解為小數點，也可以理解為對方法的調用。按照規范，解釋器就把它判斷為一個小數點。

135.DOM和BOM有什么區別？

BOM指 瀏覽器對象模型

DOM指 文檔對象模型

注意: 只有 JS 的宿主環境是瀏覽器的時候才有 DOM 和 BOM ，在 Node 中是沒有這兩個對象的。

關系說明如圖：

136.驗證碼是為了解決什么問題？

• 防止機器行為，確定是人為操作，比如登陸、發帖等。
• 保護服務器，比如12306買票的時候，各種搶購的時候。

驗證碼的類型：

圖形驗證碼;手機驗證碼

137.寫一個獲取數組的最大值、最小值的方法

Math.max.apply(Array,[25,62,91,78,34,62]) // 91Math.min.apply(Array,[27,64,90,78,34,62]) // 27Array.prototype.max = function() {return Math.max.apply(null, this) }let arr = [1,2,3,4] Math.max(...arr) Math.min(...arr)

138.css的權重計算規則

139.輸入 URL 到頁面展示

可以帶出 緩存、DNS 解析、TCP 連接、HTTP 請求、重排重繪 等等非常多的子問題.

140.rgba()和opacity

• opacity 是屬性，rgba()是函數，計算之后是個屬性值
• opacity 作用于元素和元素的內容，內容會繼承元素的透明度，取值0-1
• rgba() 一般作為背景色 background-color 或者顏色 color 的屬性值，透明度由其中的 alpha 值生效，取值0-1

141.對arguments的理解，它是數組嗎？

arguments是一個類數組對象，只能在非箭頭函數內部訪問，可以通過Array.from(arguments)將arguments轉化為數組，它和數組的區別是除了length和索引訪問跟數組一樣之外沒有push和pop等方法。

142.說說bind、call、apply的區別？并手寫實現一個bind的方法

call和apply都是為了解決改變this的指向; 作用都是相同的，只是傳參的方式不同。call可以接收一個參數列表，apply只接受一個參數數組

bind綁定完之后返回一個新的函數，不執行。

Function.prototype.myCall = function (context = window) {context.fn = this;var args = [...arguments].slice(1);var result = context.fn(...args);delete context.fn;return result; }Function.prototype.myApply = function (context = window) {context.fn = this;var result// 判斷 arguments[1] 是不是 undefinedif (arguments[1]) {result = context.fn(...arguments[1])} else {result = context.fn()}delete context.fnreturn result; }Function.prototype.myBind = function (context) {if (typeof this !== 'function') {throw new TypeError('Error')}var _this = thisvar args = [...arguments].slice(1)return function F() {if (this instanceof F) {return new _this(...args, ...arguments)}return _this.apply(context, args.concat(...arguments))} }

143.說說你對this的理解

全局this 是window;函數this 是調用者;構造函數的this 是new 之后的新對象,call 和 apply bind的this第一個參數

144.如何解決塊屬性標簽浮動后，在設置水平margin的情況下，在ie6中顯示的margin比設置的大的問題。

在float的標簽樣式控制中加入display:inline，將其轉化為行內屬性。

145.頁面中的圖片元素為什么默認具有間距。

因為img標簽是行內屬性標簽，所以只要不超出容器的寬度，img標簽都會排在一行里，但是部分瀏覽器的img標簽之間會有個間距。

出現間距時的解決方法：

• 可以使用float屬性讓img浮動布局
• 可以通過font-size屬性將空白字符大小設置成0
• 可以將圖片的display屬性設置成block

146.怎么實現盒模型

Element {// 標準盒模型 margin>border>padding>width(content)box-sizing: border-box;// ie盒模型 margin>width(border>padding>content)box-sizing: content-box; }

147.如何解決li元素內出現浮動元素時產生間隙的問題

通過設置vertical-align：top/middle/bottom來解決

148.如何讓長單詞以及較長的url轉換

用word-break:break-all在詞內換行。

149.如何解決display:inine-block在ie6，ie7下不兼容的問題

設置float:left屬性

150.如何解決ie6不支持position:fixed屬性的問題

ie6下用position:absolute和javascript來模擬，或者完全不用fixed屬性。

151.如何獲取自定義屬性數據

在ie下，可以使用獲取常規屬性的方法來獲取自定義屬性數據，也可以使用getAttribute()獲取自定義屬性數據。

在Firefox下，只能使用getAttribute()獲取自定義屬性數據。

所以要統一用getAttribute()獲取自定義屬性數據。

152.說說event.srcElement兼容問題

在ie下，even對象有srcElement屬性，但是沒有target屬性。

在Firefox下，even對象有target屬性，但是沒有srcElement屬性。

通過使用srcObj = event.srcElement ? event.srcElement:event.target 這種方式兼容所有瀏覽器。

153.說說body載入問題

• Firefox的body對象在body標簽沒有被字體完全讀入之前就存在。

• ie的body對象則必須在body標簽被瀏覽器完全讀入之后才存在。

154.如何實現元素水平居中

塊元素：

margin: 0 auto;

行內元素：使用父元素選擇器{text-align:center;}

155.如何讓p元素垂直居中

用vertical-align:middle將行距增加到和整個p一樣高，然后插入文字，就垂直居中了。

156.margin的加倍問題

設置為float的p在id下設置的margin會加倍，這是ie6中都存在的一個bug。解決：在p里面加上：display:inline

.demo {float: left;margin: 5px;display: inline; }

157.如何解決ie6下圖片有空隙的問題

可以改變html的排版，設置img為display:block，或者設置vertical-align屬性為vertical-align:top/bottom/middle/text-bottom

158.如何讓文本與文本輸入框對齊

可以為輸入框添加vertical-algin: middle屬性。

159.解決ie無法設置滾動條顏色的問題

將body換成html

160.解決form標簽邊距兼容性問題

ul, form {margin: 0;padding: 0; }

161.構造函數的特點

構造函數的函數名首字母大寫，構造函數類似于一個模板，可以使用new關鍵字執行構造函數，創建實例化對象。

162.javascript中繼承的實現方法

子類的實例可以共享父類的方法，子類可以覆蓋從父類擴展來的方法。

163.如何通過new構造對象。

創建一個新的對象，這個對象的類型是object,將this變量指向該對象；將對象的原型指向該構造函數的原型；執行構造函數，通過this對象，為實例化對象添加自身屬性方法；將this引用的新創建的對象返回。

function demo(dada) {var obj = {};// this = obj;obj.__proto__ = dada.prototype;Work.call(obj);return obj }

164.面向對象的特性

抽象；封裝；繼承；多態

165.面向對象編程三大特點概述

封裝：將描述同一個對象的屬性和方法定義在一個對象中。

繼承：父對象中的屬性和方法被子對象使用。

多態，同一個對象在不同情況下呈現不同的形態：重載（同一方法名，根據傳入的參數不同，而執行不同操作）；重寫（子對象在繼承父對象的 屬性或方法后，重新定義一個新的屬性或方法，來覆蓋從父對象中繼承的屬性或方法）

166.this通常的指向

在運行時，this關鍵字指向正在調用該方法的對象

167.實現對象的繼承

Object.setPrototypeOf(子對象，父對象) 構造函數.prototype = 對象 var demo = Object.create(obj)

168.JSONP實現跨域

在html中，動態插入script標簽，通過script標簽引入一個javascript文件，這個javascript文載入成功后會執行在url參數中指定的函數，并且會把需要的json數據作為參數傳入。

169.ajax請求

function ajax(url,fn){var xhr = new XMLHttpRequest();xhr.onreadystatechange = function() {if(xhr.readyState === 4){if(xhr.status === 200){fn && fn(JSON.parse(xhr.responseText));}}}xhr.open('GET',url, true);xhr.send(null); }

170.異步加載的方式

• 設置defer屬性，延遲腳本執行，只支持ie。
• 設置async屬性，異步加載腳本。
• 創建script標簽，并插入DOM中，頁面渲染完成后，執行回調函數。

點贊、收藏和評論

我是Jeskson(達達前端)，感謝各位人才的：點贊、收藏和評論，我們下期見！(如本文內容有地方講解有誤，歡迎指出?謝謝，一起學習了)

我們下期見！

文章持續更新，可以微信搜一搜「 程序員哆啦A夢 」第一時間閱讀，回復【資料】有我準備的一線大廠資料，本文 http://www.dadaqianduan.cn/#/ 已經收錄

github收錄，歡迎Star：https://github.com/webVueBlog/WebFamily

總結

以上是生活随笔為你收集整理的看不完的那种！前端170面试题+答案学习整理（良心制作）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。