1. 程式人生 > >2018.3.21前端常見面試題

2018.3.21前端常見面試題

1.

(function(){
    var a=b=1;
    console.log(a);
})()
console.log(a,b);
VM187:3 1
VM187:5 Uncaught ReferenceError: a is not defined
    at <anonymous>:5:13

註釋:console.log(a);輸出1,
a區域性作用域,b沒有宣告(為全域性作用域)
2

var car=null;
var bar;
console.log(car==bar)
VM528:3 true

3.在本地儲存陣列

var arra=[1
,2,3,4]; localStorage.setItem('key',JSON.stringify(arra)); var read=JSON.parse(localStorage.getItem('key')); console.log(read,read.length);

4判斷一個物件是否是陣列
第一種方法:
語法: A instanceof B,意思是物件A的原型是否是B.prototype。如果是,返回true,如果不是,返回false。

 var a={};
  var b=[];
  console.log(a instanceof Object);//true
  console.log(b instanceof
Array);//true

使用instanceof操作符有一個問題就是,它假定只有一個全域性作用域。如果一個網頁中有多個框架(iframe元素),那實際上就存在兩個以上不同的全域性執行環境,從而存在兩個以上不同版本的Array建構函式。如果你從一個框架向另一個框架傳入一個數組,那麼傳入的陣列與在第二個框架中原生建立的陣列分別具有各自不同的建構函式。傳入的陣列在該框架中用instanceof操作符判斷就會返回false。程式碼如下:

var a={};
  var b=[];
  console.log(a instanceof Object);//true
  console.log(b instanceof
Array);//true var frame=document.createElement("iframe");//建立一個框架 document.body.appendChild(frame); var c=window.frames[0].Array;//取得框架全域性執行環境中的Array建構函式 var d=new c();//在框架全域性執行環境中建立一個數組d console.log(d instanceof Array);//在當前頁面的執行環境中用instanceof操作符判斷d是否為陣列,返回false console.log(Array.isArray(d));//true

第二種方法:

使用ECMAScript 5新增的Array.isArray()方法。這個方法的作用就是確定某個值到底是不是陣列,而不管它到底是在哪個全域性執行環境中建立的。

第三種方法:

使用使用Object.prototype上的原生toString()方法判斷。

使用方法如下:

Object.prototype.toString.call(value)
該方法返回一個[object NativeConstructorName]格式的字串。每個類在內部都有一個[[Class]]屬性,這個屬性中就指定了上述字串中的建構函式名。
該方法不能檢測非原生建構函式的函式名,因此開發人員定義的任何建構函式都將返回[object Object]。

var a={};
  var b=[];
  var frame=document.createElement("iframe");//建立一個框架
  document.body.appendChild(frame);
  var c=window.frames[0].Array;//取得框架全域性執行環境中的Array建構函式
  var d=new c();//在框架全域性執行環境中建立一個數組d
  console.log(Object.prototype.toString.call(a));//[object Object]
  console.log(Object.prototype.toString.call(b));//[object Array]
  console.log(Object.prototype.toString.call(d));//[object Array]

  function Person() {
     this.name=name;
  }
  var n=new Person();
  console.log(Object.prototype.toString.call(n));//[object Object]

5.什麼是閉包,為什麼要使用它
閉包(closure)是javascript的一大難點,也是它的特色。很多高階應用都要依靠閉包來實現。閉包是個橋樑。
我們在函式外是訪問不了函式內的區域性變數!正常的情況下我們是辦不到的


<script>
   function num(){
    //用var宣告一個變數num1
     var num1 = 15;
     return function(){
         return num1;
    }
  }
 var num2 = num();
 var num3 = num2();
 console.log(num3);//15

  }
</script>

6.常見的跨域方式,優缺點是什麼
1:影象ping

影象ping是與伺服器進行簡單,單項的跨域通訊的一種方式
var img=new Image();
img.onload=img.onerror=function(){
alert(“done”)
}
img.src=”http://www.example.com/test?name=sl”;

2:jsonp(最實用) jsonp是通過動態

function callbackFunction(){
   alert("回滾");
}
var script=document.createElement("script");
script.src="http://frergeoip.net.json/?callback=callbackFunction";
document.body.insertBefore(script,document.body.firstChild);

3:使用jquery實現跨域(最簡單的)

<script> $.getJSON("http://example.com/data.php?callback=?",function(jsondata){ //回撥事件 }); </script> 

只不過我們不需要手動的插入script標籤以及定義回掉函式。
jquery會自動生成一個全域性函式來替換callback=?中的問號,之後獲取到資料後又會自動銷燬,實際上就是起一個臨時代理函式的作用。
$.getJSON方法會自動判斷是否跨域,不跨域的話,就呼叫普通的ajax方法;跨域的話,則會以非同步載入js檔案的形式來呼叫jsonp的回撥函式。

4:通過修改document.domain來跨子域

在頁面 http://www.example.com/a.html 中設定document.domain:
<iframe src="http://example.com/b.html"  id="iframe"  onload="test()"></iframe>
<script>
   document.domain="example.com";   //設定成他們的父域
   function test(){ 
      document.getElementById("iframe").contentWindow;
   }
</script>

所以修改document.domain的方法只適用於不同子域的框架間的互動。
如果你想通過ajax的方法去與不同子域的頁面互動,除了使用jsonp的方法外,還可以用一個隱藏的iframe來做一個代理。原理就是讓這個iframe載入一個與你想要通過ajax獲取資料的目標頁面處在相同的域的頁面,所以這個iframe中的頁面是可以正常使用ajax去獲取你要的資料的,然後就是通過我們剛剛講得修改document.domain的方法,讓我們能通過js完全控制這個iframe,這樣我們就可以讓iframe去傳送ajax請求,然後收到的資料我們也可以獲得了。

5:使用window.name來進行跨域

window物件有個name屬性,該屬性有個特徵:即在一個視窗(window)的生命週期內,視窗載入的所有的頁面都是共享一個window.name的,個頁面對window.name都有讀寫的許可權,window.name是持久存在一個視窗載入過的所有頁面中的,並不會因新頁面的載入而進行重置。
在a.html頁面

在a.html頁面

在b.html頁面

使用window.name來獲取b頁面想要的值

相關推薦

2018.3.21前端見面試題

1. (function(){ var a=b=1; console.log(a); })() console.log(a,b); VM187:3 1 VM187:5 Uncaught ReferenceError: a is not de

web前端見面試題匯總

col 加粗 內邊距 geo utf-8 row 長度 幻燈片 跨域 一、理論知識 1.1、講講輸入完網址按下回車,到看到網頁這個過程中發生了什麽 a. 域名解析 b. 發起TCP的3次握手 c. 建立TCP連接後發起http請求 d. 服務器端響應http請求,瀏覽器得到

web前端見面試題

return mat 自己的 應用 查找 基於web 網站設計 絕對定位 ada 1、什麽是盒子模型? CSS 盒模型(Box Model),又稱框模型。它包括:content、padding、border、margin,所有HTML元素都可以看作盒子。 註: 當通過CSS

前端見面試題--概念題

1.new的作用? 1建立物件2返回物件3呼叫建構函式4將建構函式內的this指向修改為建立的例項物件 2.原型 原型鏈 原型物件 建構函式 例項物件? 瞭解prototype嗎? 原型鏈的特點? 建構函式: 作用:建立物件 使用方式: 1命名首字母大寫2呼叫前加new 3在建構函式內給建立

ZooKeeper學習總結(3)——ZooKeeper見面試題

Zookeeper是什麼框架 分散式的、開源的分散式應用程式協調服務,原本是Hadoop、HBase的一個重要元件。它為分散式應用提供一致性服務的軟體,包括:配置維護、域名服務、分散式同步、組服務等。應用場景 Zookeeper的功能很強大,應用場景很多,結合我實際工作中使用Dubbo框架的情況,Zookee

2-面試題-HTML5+CSS3(前端見面試題帶答案 )

HTML5+CSS3常見面試題目 1.    (超文字標記語言),XML(可擴充套件標記語言)和HTML的之間有什麼關係?                SGML(標準通用標記語言)是一個標準,告訴我們怎麼去指定文件標記。他是隻描述文件標記應該是怎麼樣的元語言,HTML是

1-面試題-html+css(前端見面試題帶答案 )

HTML+CSS常見面試題目 1.    對WEB標準以及W3C的理解與認識? 標籤閉合、標籤小寫、不亂巢狀、提高搜尋機器人搜尋機率、使用外鏈css和js指令碼、結構行為表現的分離、檔案下載與頁面速度更快、內容能被更多的使用者所訪問、內容能被更廣泛的裝置所訪問、更少的程式碼

前端見面試題總結---第二篇

1. HTML與XHTML——二者有什麼區別 所有的標記都必須要有一個相應的結束標記 所有標籤的元素和屬性的名字都必須使用小寫 所有的 XML 標記都必須合理巢狀 所有的屬性必須用引號 “” 括起來 把所有 < 和 & 特殊符號用編碼表示 給所

前端見面試題html/css,js,ES6,Vue,前端工程化等等

最近找工作階段,總結了不少前人的面經,總想整理的特別特別好再發出來,但是發現如果一直等等等的話,就不知道等到猴年馬月了,先發一些吧,持續更新!!! 答案自己去整理吧,整理的過程也是學習的過程~~~

前端見面試題總結---第三篇

1 http狀態碼有那些?分別代表是什麼意思? 100-199 用於指定客戶端應相應的某些動作 200-299 用於表示請求成功 300-399 用於已經移動的檔案並且常被包含在定位頭資訊中指定新的地址資訊 400-499 用於指出客戶端的錯誤 400:語

前端見面試題(二)————前端

前端常見面試題(二)————前端 小小的提一下,面試時,面試官很喜歡看你的專案實踐,就看你做過什麼專案,如果一個都不寫,可能會跪,然後圍著你的專案去問細節。(自己做些專案很重要) 正文部分: 1.var,let,const的區別: (1).var可以變數提升:啥是變數提升? var a=10 //全域性變

php 見面試題3

earch tla 遍歷目錄 phpstudy ech key -c clas handle 1、數組$a = array(‘a‘=>‘a‘,‘b‘=>‘b‘,‘c‘=>‘c‘),如何將array(‘d’=>‘d‘)快速插入 a 和 b 之間? f

獻給 2018 還在艱苦奮鬥的 Java 程序員,Java 見面試題及答案!

逆向 說明 引用 實現接口 oat 註釋 架構 問題 自己 1.什麽是Java虛擬機?為什麽Java被稱作是“平臺無關的編程語言”? Java 虛擬機是一個可以執行 Java 字節碼的虛擬機進程。Java 源文件被編譯成能被 Java 虛擬機執行的字節碼文件。 Java

見面試題整理---前端(不論出處)

都在 需要 優先級調度 正則 很難 定時 http http請求 連接 1.瀏覽器渲染頁面的過程 用戶輸入URL地址 瀏覽器解析URL解析出主機名 瀏覽器將主機名轉換成服務器ip地址(瀏覽器先查找本地DNS緩存列表 沒有的話 再向瀏覽器默認的DNS服務器發送查詢請

shell 見面試題及答案(3

本文接 《shell 常見面試題及答案(2)》 四、 1.如何取得檔案/etiantian的許可權對應的數字,如-rw-r--r-- 為644,取得644這樣的數字。 解答: Loong:/home/yee/shell# stat -c %a calculate_birth

Java面試----2018年Nginx見面試題

1、請解釋一下什麼是Nginx?答:Nginx是一個web伺服器和反向代理伺服器,用於HTTP、HTTPS、SMTP、POP3和IMAP協議。2、請列舉Nginx的一些特性?答:Nginx伺服器的特性包括:  1)反向代理/L7負載均衡器  2)嵌入式Perl直譯器  3)動

Java見面試題及答案 21-30(集合類)

21.HashMap的工作原理是什麼? HashMap內部是通過一個數組實現的,只是這個陣列比較特殊,數組裡儲存的元素是一個Entry實體(jdk 8為Node),這個Entry實體主要包含key、value以及一個指向自身的next指標。HashMap

好程式設計師web前端分享見面試題

1、什麼是盒子模型?     在網頁中,一個元素佔有空間的大小由幾個部分構成,其中包括元素的內容(content),

見面試題之數組

-- 子數組 一次 寶典 和為s的兩個數字 n) class 時間 整數 參考文獻: 1.《編程之美》 2.《劍指offer》 3.《王道程序猿求職寶典》 常見題例如以下: 1.二維數組中查找某個數。該數組滿足:左->右:遞增,上->下:遞增。-------

第十二章 Shell腳本編寫及見面試題(二)

shell腳本 shell面試題 shell本章目錄:12.11 屏蔽網站訪問頻繁的IP1)屏蔽每分鐘訪問超過200的IP方法1:以Nginx日誌作為測試DATE=$(date +%d/%b/%Y:%H:%M) ABNORMAL_IP=$(tail -n5000 access.log |grep $DATE