成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

前端面試經(jīng)典題目匯總(持續(xù)更新中)

BigNerdCoding / 2076人閱讀

摘要:只要沒有被覆蓋的話對(duì)象原型的屬性就能在所有的實(shí)例中找到,若整個(gè)原型鏈未找到則返回如何實(shí)現(xiàn)繼承構(gòu)造繼承原型繼承實(shí)例繼承拷貝繼承原型機(jī)制或和方法去實(shí)現(xiàn)較簡(jiǎn)單,建議使用構(gòu)造函數(shù)與原型混合方式。

HTML相關(guān)問題

1.XHTML和HTML有什么區(qū)別

HTML是一種基本的WEB網(wǎng)頁設(shè)計(jì)語言,XHTML是一個(gè)基于XML的標(biāo)記語言
最主要的不同:
XHTML 元素必須被正確地嵌套。
XHTML 元素必須被關(guān)閉。
標(biāo)簽名必須用小寫字母。
XHTML 文檔必須擁有根元素。

2.什么是語義化的HTML?

直觀的認(rèn)識(shí)標(biāo)簽 對(duì)于搜索引擎的抓取有好處,用正確的標(biāo)簽做正確的事情!
html語義化就是讓頁面的內(nèi)容結(jié)構(gòu)化,便于對(duì)瀏覽器、搜索引擎解析;
在沒有樣式CCS情況下也以一種文檔格式顯示,并且是容易閱讀的。搜索引擎的爬蟲依賴于標(biāo)記來確定上下文和各個(gè)關(guān)鍵字的權(quán)重,利于 SEO。
使閱讀源代碼的人對(duì)網(wǎng)站更容易將網(wǎng)站分塊,便于閱讀維護(hù)理解。

3.常見的瀏覽器內(nèi)核有哪些?

Trident內(nèi)核:IE,MaxThon,TT,The World,360,搜狗瀏覽器等。[又稱MSHTML]
Gecko內(nèi)核:Netscape6及以上版本,F(xiàn)F,MozillaSuite/SeaMonkey等
Presto內(nèi)核:Opera7及以上。 [Opera內(nèi)核原為:Presto,現(xiàn)為:Blink;]
Webkit內(nèi)核:Safari,Chrome等。 [ Chrome的:Blink(WebKit的分支)]

4.HTML5有哪些新特性、移除了那些元素?如何處理HTML5新標(biāo)簽的瀏覽器兼容問題?如何區(qū)分 HTML 和HTML5?

HTML5 現(xiàn)在已經(jīng)不是 SGML 的子集,主要是關(guān)于圖像,位置,存儲(chǔ),多任務(wù)等功能的增加。
支持HTML5新標(biāo)簽:
繪畫 canvas;
用于媒介回放的 video 和 audio 元素;
本地離線存儲(chǔ) localStorage 長(zhǎng)期存儲(chǔ)數(shù)據(jù),瀏覽器關(guān)閉后數(shù)據(jù)不丟失;
sessionStorage 的數(shù)據(jù)在瀏覽器關(guān)閉后自動(dòng)刪除;
語意化更好的內(nèi)容元素,比如 article、footer、header、nav、section;
表單控件,calendar、date、time、email、url、search;
新的技術(shù)webworker, websockt, Geolocation;
移除的元素:
純表現(xiàn)的元素:basefont,big,center,font, s,strike,tt,u;
對(duì)可用性產(chǎn)生負(fù)面影響的元素:frame,frameset,noframes;
IE8/IE7/IE6支持通過document.createElement方法產(chǎn)生的標(biāo)簽,可以利用這一特性讓這些瀏覽器支持HTML5新標(biāo)簽;瀏覽器支持新標(biāo)簽后,還需要添加標(biāo)簽?zāi)J(rèn)的樣式。

5.請(qǐng)描述一下 cookies,sessionStorage 和 localStorage 的區(qū)別?

cookie在瀏覽器和服務(wù)器間來回傳遞,sessionStorage和localStorage不會(huì);
sessionStorage和localStorage的存儲(chǔ)空間更大;
sessionStorage和localStorage有更多豐富易用的接口;
sessionStorage和localStorage有各自獨(dú)立的存儲(chǔ)空間。

6.如何實(shí)現(xiàn)瀏覽器內(nèi)多個(gè)標(biāo)簽頁之間的通信?

調(diào)用localstorge、cookies等本地存儲(chǔ)方式

7.HTML5 為什么只需要寫 !DOCTYPE HTML?

HTML5 不基于 SGML,因此不需要對(duì)DTD進(jìn)行引用,但是需要doctype來規(guī)范瀏覽器的行為(讓瀏覽器按照它們應(yīng)該的方式來運(yùn)行);而HTML4.01基于SGML,所以需要對(duì)DTD進(jìn)行引用,才能告知瀏覽器文檔所使用的文檔類型。

8.Doctype作用?標(biāo)準(zhǔn)模式與兼容模式各有什么區(qū)別?

!DOCTYPE聲明位于HTML文檔中的第一行,處于html 標(biāo)簽之前。告知瀏覽器的解析器用什么文檔標(biāo)準(zhǔn)解析這個(gè)文檔。DOCTYPE不存在或格式不正確會(huì)導(dǎo)致文檔以兼容模式呈現(xiàn)。
標(biāo)準(zhǔn)模式的排版 和JS運(yùn)作模式都是以該瀏覽器支持的最高標(biāo)準(zhǔn)運(yùn)行。在兼容模式中,頁面以寬松的向后兼容的方式顯示,模擬老式瀏覽器的行為以防止站點(diǎn)無法工作。

9.Doctype? 嚴(yán)格模式與混雜模式-如何觸發(fā)這兩種模式,區(qū)分它們有何意義?

用于聲明文檔使用哪種規(guī)范(html/Xhtml)一般為嚴(yán)格過度基于框架的html文檔。
加入XMl聲明可觸發(fā),解析方式更改為IE5.5 擁有IE5.5的Bug。

10.Canvas 與 SVG 的比較
Canvas
依賴分辨率
不支持事件處理器
弱的文本渲染能力
能夠以 .png 或 .jpg 格式保存結(jié)果圖像
最適合圖像密集型的游戲,其中的許多對(duì)象會(huì)被頻繁重繪
SVG
不依賴分辨率
支持事件處理器
最適合帶有大型渲染區(qū)域的應(yīng)用程序(比如谷歌地圖)
復(fù)雜度高會(huì)減慢渲染速度(任何過度使用 DOM 的應(yīng)用都不快)
不適合游戲應(yīng)用

CSS相關(guān)問題

1.CSS實(shí)現(xiàn)垂直水平居中

一道經(jīng)典的問題,實(shí)現(xiàn)方法有很多種,以下是其中一種實(shí)現(xiàn):

HTML結(jié)構(gòu):

CSS:

.wrapper{position:relative;}
.content{
    background-color:#6699FF;
    width:200px;
    height:200px;
    position: absolute;        //父元素需要相對(duì)定位
    top: 50%;
    left: 50%;
    margin-top:-100px ;        //二分之一的height,width
    margin-left: -100px;
}

2.display有哪些值?說明他們的作用。

block         塊類型。默認(rèn)寬度為父元素寬度,可設(shè)置寬高,換行顯示。
none          缺省值。像行內(nèi)元素類型一樣顯示。
inline        行內(nèi)元素類型。默認(rèn)寬度為內(nèi)容寬度,不可設(shè)置寬高,同行顯示。
inline-block  默認(rèn)寬度為內(nèi)容寬度,可以設(shè)置寬高,同行顯示。
list-item     像塊類型元素一樣顯示,并添加樣式列表標(biāo)記。
table         此元素會(huì)作為塊級(jí)表格來顯示。
inherit       規(guī)定應(yīng)該從父元素繼承 display 屬性的值。

3.行內(nèi)元素有哪些?塊級(jí)元素有哪些?CSS的盒模型?

塊級(jí)元素:div,p,h1,form,ul,li;
行內(nèi)元素 : span,a,label,input,img,strong,em;
CSS盒模型:內(nèi)容,border ,margin,padding,有兩種類型:
IE 盒子模型、標(biāo)準(zhǔn) W3C 盒子模型;
IE的content部分包含了 border 和 pading;

2)盒模型: 內(nèi)容(content)、填充(padding)、邊界(margin)、 邊框(border).

4.CSS引入的方式有哪些? link和@import的區(qū)別是?

內(nèi)聯(lián) 內(nèi)嵌 外鏈 導(dǎo)入
區(qū)別 :
(1).link屬于HTML標(biāo)簽,而@import是CSS提供的;
(2).頁面被加載的時(shí),link會(huì)同時(shí)被加載,而@import引用的CSS會(huì)等到頁面被加載完再加載;
(3).import只在IE5以上才能識(shí)別,而link是HTML標(biāo)簽,無兼容問題;
(4).link方式的樣式的權(quán)重高于@import的權(quán)重.
(5).link支持使用javascript改變樣式,后者不可

5.CSS選擇符有哪些?哪些屬性可以繼承?優(yōu)先級(jí)算法如何計(jì)算?內(nèi)聯(lián)和important哪個(gè)優(yōu)先級(jí)高?

標(biāo)簽選擇符 類選擇符 id選擇符
繼承不如指定 Id>class>標(biāo)簽選擇
!important的優(yōu)先級(jí)高

6.CSS清除浮動(dòng)的幾種方法(至少兩種)

使用帶clear屬性的空元素;
使用CSS的overflow屬性;
使用CSS的:after偽元素;
使用鄰接元素處理;

7.CSS居中(包括水平居中和垂直居中)

內(nèi)聯(lián)元素居中方案

水平居中設(shè)置:
1.行內(nèi)元素
設(shè)置 text-align:center;
2.Flex布局
設(shè)置display:flex;justify-content:center;(靈活運(yùn)用,支持Chroime,F(xiàn)irefox,IE9+)

垂直居中設(shè)置:
1.父元素高度確定的單行文本(內(nèi)聯(lián)元素)
設(shè)置 height = line-height;
2.父元素高度確定的多行文本(內(nèi)聯(lián)元素)
a:插入 table (插入方法和水平居中一樣),然后設(shè)置 vertical-align:middle;
b:先設(shè)置 display:table-cell 再設(shè)置 vertical-align:middle;

塊級(jí)元素居中方案

水平居中設(shè)置:
1.定寬塊狀元素
設(shè)置左右的margin值為 auto;
2.不定寬塊狀元素
a:在元素外加入table標(biāo)簽(完整的,包括 table、tbody、tr、td),該元素寫在 td 內(nèi),然后設(shè)置margin的值為 auto;
b:給該元素設(shè)置 displa:inine 方法;
c:父元素設(shè)置 position:relative 和 left:50%,子元素設(shè)置 position:relative 和 left:50%;

垂直居中設(shè)置:

使用position:absolute(fixed),設(shè)置left、top、margin-left、margin-top的屬性;
利用position:fixed(absolute)屬性,margin:auto這個(gè)必須不要忘記了;
利用display:table-cell屬性使內(nèi)容垂直居中;
使用css3的新屬性transform:translate(x,y)屬性;
使用:before元素;

8.在書寫高效 CSS 時(shí)會(huì)有哪些問題需要考慮?

reset。
規(guī)范命名。尤其對(duì)于沒有語義化的html標(biāo)簽,例如div,所賦予的class值要特別注意。
抽取可重用的部件,注意層疊樣式表的“優(yōu)先級(jí)”。

9.display:none和visibility:hidden的區(qū)別?
display:none 隱藏對(duì)應(yīng)的元素,在文檔布局中不再給它分配空間,它各邊的元素會(huì)合攏,就當(dāng)他從來不存在。
visibility:hidden 隱藏對(duì)應(yīng)的元素,但是在文檔布局中仍保留原來的空間。

10.position的absolute與fixed共同點(diǎn)與不同點(diǎn)
A.共同點(diǎn):
1.改變行內(nèi)元素的呈現(xiàn)方式,display被置為block;
2.讓元素脫離普通流,不占據(jù)空間;
3.默認(rèn)會(huì)覆蓋到非定位元素上
B.不同點(diǎn):
absolute的"根元素"是可以設(shè)置的,而fixed的"根元素"固定為瀏覽器窗口。當(dāng)你滾動(dòng)網(wǎng)頁時(shí),fixed元素與瀏覽器窗口之間的距離是不變的。

JS相關(guān)問題

1.談一談JavaScript作用域鏈

當(dāng)執(zhí)行一段JavaScript代碼(全局代碼或函數(shù))時(shí),JavaScript引擎會(huì)為其創(chuàng)建一個(gè)作用域又稱為執(zhí)行上下文(Execution Context),在頁面加載后會(huì)首先創(chuàng)建一個(gè)全局的作用域,然后每執(zhí)行一個(gè)函數(shù),會(huì)建立一個(gè)對(duì)應(yīng)的作用域,從而形成了一條作用域鏈。每個(gè)作用域都有一條對(duì)應(yīng)的作用域鏈,鏈頭是全局作用域,鏈尾是當(dāng)前函數(shù)作用域。
作用域鏈的作用是用于解析標(biāo)識(shí)符,當(dāng)函數(shù)被創(chuàng)建時(shí)(不是執(zhí)行),會(huì)將this、arguments、命名參數(shù)和該函數(shù)中的所有局部變量添加到該當(dāng)前作用域中,當(dāng)JavaScript需要查找變量X的時(shí)候(這個(gè)過程稱為變量解析),它首先會(huì)從作用域鏈中的鏈尾也就是當(dāng)前作用域進(jìn)行查找是否有X屬性,如果沒有找到就順著作用域鏈繼續(xù)查找,直到查找到鏈頭,也就是全局作用域鏈,仍未找到該變量的話,就認(rèn)為這段代碼的作用域鏈上不存在x變量,并拋出一個(gè)引用錯(cuò)誤(ReferenceError)的異常。

2.如何理解JavaScript原型鏈

JavaScript中的每個(gè)對(duì)象都有一個(gè)prototype屬性,我們稱之為原型,而原型的值也是一個(gè)對(duì)象,因此它也有自己的原型,這樣就串聯(lián)起來了一條原型鏈,原型鏈的鏈頭是object,它的prototype比較特殊,值為null。
原型鏈的作用是用于對(duì)象繼承,函數(shù)A的原型屬性(prototype property)是一個(gè)對(duì)象,當(dāng)這個(gè)函數(shù)被用作構(gòu)造函數(shù)來創(chuàng)建實(shí)例時(shí),該函數(shù)的原型屬性將被作為原型賦值給所有對(duì)象實(shí)例,比如我們新建一個(gè)數(shù)組,數(shù)組的方法便從數(shù)組的原型上繼承而來。
當(dāng)訪問對(duì)象的一個(gè)屬性時(shí), 首先查找對(duì)象本身, 找到則返回; 若未找到, 則繼續(xù)查找其原型對(duì)象的屬性(如果還找不到實(shí)際上還會(huì)沿著原型鏈向上查找, 直至到根)。只要沒有被覆蓋的話, 對(duì)象原型的屬性就能在所有的實(shí)例中找到,若整個(gè)原型鏈未找到則返回undefined

3.JavaScript如何實(shí)現(xiàn)繼承?

構(gòu)造繼承
原型繼承
實(shí)例繼承
拷貝繼承

原型prototype機(jī)制或apply和call方法去實(shí)現(xiàn)較簡(jiǎn)單,建議使用構(gòu)造函數(shù)與原型混合方式。

    function Parent(){
        this.name = "wang";
    }

    function Child(){
        this.age = 28;
    }
    Child.prototype = new Parent();//繼承了Parent,通過原型
    var demo = new Child();
    alert(demo.age);
    alert(demo.name);//得到被繼承的屬性

4.JavaScript的typeof返回哪些數(shù)據(jù)類型

object
number
function
boolean
underfind

5.例舉3種強(qiáng)制類型轉(zhuǎn)換和2種隱式類型轉(zhuǎn)換?

強(qiáng)制:parseInt、parseFloat、number
隱式:==、===

6.split()和join()的區(qū)別

前者是切割成數(shù)組的形式,后者是將數(shù)組轉(zhuǎn)換成字符串

7.數(shù)組方法pop() push() unshift() shift()的理解

pop()尾部刪除
push()尾部添加
unshift()頭部添加
shift()頭部刪除

8.IE和DOM事件流的區(qū)別

執(zhí)行順序不一樣
參數(shù)不一樣
事件加不加on
this指向問題

9.ajax請(qǐng)求的時(shí)候get和post方式的區(qū)別

一個(gè)在url后面,一個(gè)放在虛擬載體里面
有大小限制
安全問題
應(yīng)用不同 一個(gè)是論壇等只需要請(qǐng)求的,一個(gè)是類似修改密碼的

10.IE和標(biāo)準(zhǔn)下有哪些兼容性的寫法

var ev = ev || window.event
document.documentElement.clientWidth || document.body.clientWidth
var target = ev.srcElement||ev.target

11.ajax請(qǐng)求時(shí),如何解釋json數(shù)據(jù)

使用eval parse,鑒于安全性考慮 使用parse更靠譜。

12.事件委托是什么?

利用事件冒泡的原理,自己所觸發(fā)的事件,讓他的父元素代替執(zhí)行!

13.閉包是什么,有什么特性,對(duì)頁面有什么影響?簡(jiǎn)要介紹你理解的閉包

閉包就是能夠讀取其他函數(shù)內(nèi)部變量的函數(shù)。變量得不到銷毀,一直儲(chǔ)存在內(nèi)存中,可能造成內(nèi)存泄漏。

14.添加 刪除 替換 插入到某個(gè)接點(diǎn)的方法

obj.appendChidl()
obj.innersetBefore
obj.replaceChild
obj.removeChild

15..”==”和“===”的不同

前者會(huì)自動(dòng)轉(zhuǎn)換類型,后者不會(huì)

16.編寫一個(gè)b繼承a的方法

function A(name){
    this.name = name;
    this.sayHello = function(){alert(this.name+” say Hello!”);};
}
function B(name,id){
    this.temp = A;
    this.temp(name);        //相當(dāng)于new A();
    delete this.temp;       
    this.id = id;   
    this.checkId = function(ID){alert(this.id==ID)};
}

17.如何阻止事件冒泡和默認(rèn)事件

function stopBubble(e){
    if (e && e.stopPropagation)
        e.stopPropagation()
    else
        window.event.cancelBubble=true
}
return false

18.下面程序執(zhí)行后彈出什么樣的結(jié)果?

function fn() {
    this.a = 0;
    this.b = function() {
        alert(this.a)
    }
}
fn.prototype = {
    b: function() {
        this.a = 20;
        alert(this.a);
    },
    c: function() {
        this.a = 30;
        alert(this.a);
    }
}
var myfn = new fn();
myfn.b();
myfn.c();

19.談?wù)剬?duì)this對(duì)象的理解。

this是js的一個(gè)關(guān)鍵字,隨著函數(shù)使用場(chǎng)合不同,this的值會(huì)發(fā)生變化。
但是有一個(gè)總原則,那就是this指的是調(diào)用函數(shù)的那個(gè)對(duì)象。
this一般情況下:是全局對(duì)象Global。 作為方法調(diào)用,那么this就是指這個(gè)對(duì)象

20.下面程序的結(jié)果

function fun(n,o) {
  console.log(o);
  return {
      fun:function(m){
          return fun(m,n);
      }
  };
}
var a = fun(0);  
a.fun(1);  
a.fun(2);  
a.fun(3);
var b = fun(0).fun(1).fun(2).fun(3);
var c = fun(0).fun(1);  
c.fun(2);  
c.fun(3);

答案:
a: undefined,0,0,0
b: undefined,0,1,2
c: undefined,0,1,1

21.下面程序的輸出結(jié)果

var name = "World!";
(function () {
    if (typeof name === "undefined") {
        var name = "Jack";
        console.log("Goodbye " + name);
    } else {
        console.log("Hello " + name);
    }
})();

22.了解Node么?Node的使用場(chǎng)景都有哪些?

高并發(fā)、聊天、實(shí)時(shí)消息推送

23.介紹下你最常用的一款框架

jquery,rn,angular等;

24.對(duì)于前端自動(dòng)化構(gòu)建工具有了解嗎?簡(jiǎn)單介紹一下

Gulp,Grunt等;

25.說一下什么是JavaScript的同源策略?

一段腳本只能讀取來自于同一來源的窗口和文檔的屬性,這里的同一來源指的是主機(jī)名、協(xié)議和端口號(hào)的組合。

其他問題

1.說說最近最流行的一些東西吧?常去哪些網(wǎng)站?

Node.js、MVVM、React-native,Angular,Weex等
CSDN,Segmentfault,博客園,掘金,Stackoverflow,伯樂在線等

2.如果今年你打算熟練掌握一項(xiàng)新技術(shù),那會(huì)是什么?

via開發(fā)單頁webapp的技術(shù)。
SAP能夠是頁面與頁面之間無縫連接,避免出現(xiàn)白頁,且?guī)в袆?dòng)態(tài)效果,提高用戶體驗(yàn)。同時(shí)SAP,有JavaScript渲染頁面,然后在從服務(wù)器獲取小量的數(shù)據(jù)顯示,如此反復(fù),請(qǐng)求的數(shù)據(jù)無需要服務(wù)器處理,減少服務(wù)器負(fù)荷。
SAP對(duì)技術(shù)要求高。要考慮首屏加載事件過長(zhǎng);動(dòng)畫效果要考慮低端手機(jī);垃圾收集,需要自己釋放資源,避免頁面變卡。

PS:五個(gè)典型的JavaScript試題:

問題1: 范圍(Scope)
思考以下代碼:

(function(){
    var a=b=5;
})();
console.log(b);

控制臺(tái)(console)會(huì)打印出什么?

答案:上述代碼會(huì)打印出5。

這個(gè)問題的陷阱就是,在立即執(zhí)行函數(shù)表達(dá)式(IIFE)中,有兩個(gè)命名,但是其中變量是通過關(guān)鍵詞var來聲明的。這就意味著a是這個(gè)函數(shù)的局部變量。與此相反,b是在全局作用域下的。
這個(gè)問題另一個(gè)陷阱就是,在函數(shù)中他沒有使用"嚴(yán)格模式" ("use strict";)。如果 嚴(yán)格模式 開啟,那么代碼就會(huì)報(bào)出未捕獲引用錯(cuò)誤(Uncaught ReferenceError):b沒有定義。記住,嚴(yán)格模式要求你在需要使用全局變量時(shí),明確地引用該變量。因此,你需要像下面這么寫:

(function(){
    "use strict"
    var a=window.b=5;
})();
console.log(b);

問題2: 創(chuàng)建 “原生(native)” 方法

在String對(duì)象上定義一個(gè)repeatify函數(shù)。這個(gè)函數(shù)接受一個(gè)整數(shù)參數(shù),來明確字符串需要重復(fù)幾次。這個(gè)函數(shù)要求字符串重復(fù)指定的次數(shù)。舉個(gè)例子:

console.log("hello".repeatift(3));

應(yīng)該打印出hellohellohello.

答案:一種可能的實(shí)現(xiàn)如下所示:

String.prototype.repeatify=String.prototype.repeatify||function(times){
    var str="";
    for(int i=0;i

這個(gè)問題測(cè)試了開發(fā)人員對(duì)于JavaScript中繼承的掌握,以及prototype這個(gè)屬性。這也驗(yàn)證了開發(fā)人員是否有能力擴(kuò)展原生數(shù)據(jù)類型的功能(雖然不應(yīng)該這么做)。
這個(gè)問題的另一個(gè)重點(diǎn)是驗(yàn)證你是否意識(shí)到并知道如何避免覆蓋已經(jīng)存在的函數(shù)。這可以通過在自定義函數(shù)之前判斷該函數(shù)是否存在來做到。

String.prototype.repeatify=String.prototype.repeatify||function(times){
    /*code here*/        
};

當(dāng)你需要為舊瀏覽器實(shí)現(xiàn)向后兼容的函數(shù)時(shí),這一技巧十分有用。

問題3: 變量提升(Hoisting)

執(zhí)行以下代碼會(huì)有什么結(jié)果?為什么?

function test(){
    console.log();
    console.log(foo());
    var a=1;
    function foo(){
        return 2;
    }
}
test();

答案:這段代碼的執(zhí)行結(jié)果是undefined和2。

這個(gè)結(jié)果的原因是,變量和函數(shù)都被提升了(hoisted)。因此,在a被打印的時(shí)候,它已經(jīng)在函數(shù)作用域中存在(即它已經(jīng)被聲明了),但是它的值依然是 undefined。換言之,上述代碼和以下代碼是等價(jià)的。
function test(){

var a=1;
function foo(){
    return 2;
}
console.log();
console.log(foo());
a=1;  
}
test();

問題4: this 在 JavaScript 中是如何工作的

以下代碼的結(jié)果是什么?請(qǐng)解釋你的答案。

var fullname="AAA";
var obj={
    fullname:"BBB";
    prop:{
        fullname:"CCC",
        getFUllname:fullname(){
            return this.fullname;
        }
    }
};
console.log(obj.prop.getFullname());
var test=obj.prop.getFullname;
console.log(test());

答案:上面的代碼打印出CCC和AAA。原因是在JavaScript中,一個(gè)函數(shù)的上下文環(huán)境,也就是this關(guān)鍵詞所引用對(duì)象,是依賴于函數(shù)是如何被調(diào)用的,而不是依賴于函數(shù)如何被定義的。

在第一個(gè) console.log() 調(diào)用中,getFullname() 是作為obj.prop的函數(shù)被調(diào)用的。因此,這里的上下文環(huán)境指向后者并且函數(shù)返回this對(duì)象的fullname屬性。相反,當(dāng) getFullname() 被賦為test變量的值時(shí),那個(gè)語境指向全局對(duì)象(window)。這是因?yàn)?,test 被隱式設(shè)置為全局對(duì)象的屬性。因此,函數(shù)調(diào)用返回window的fullname屬性值,在此段代碼中,這個(gè)值是通過第一行賦值語句設(shè)置的。

問題5: call() 和 apply()

修復(fù)上一個(gè)問題,讓最后一個(gè)console.log()打印出CCC。

答案:要解決這個(gè)問題,可以通過為函數(shù)call()或者apply()強(qiáng)制函數(shù)調(diào)用的上下文環(huán)境。

console.log(test.call(obj.prop));

本文章持續(xù)更新中,個(gè)人能力有限,錯(cuò)誤之處希望小伙伴們踴躍指出。

文章版權(quán)歸作者所有,未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址:http://systransis.cn/yun/111711.html

相關(guān)文章

  • 你不能錯(cuò)過的前端面試題合集

    摘要:收集的一些前端面試題從面試題發(fā)現(xiàn)不足,進(jìn)而查漏補(bǔ)缺,比通過面試更難得及各大互聯(lián)網(wǎng)公司前端筆試面試題篇及各大互聯(lián)網(wǎng)公司前端筆試面試題篇面試題個(gè)和個(gè)經(jīng)典面試題前端開發(fā)面試題如何面試前端工程師很重要個(gè)變態(tài)題解析如何通過餓了么面試輕 收集的一些前端面試題 從面試題發(fā)現(xiàn)不足,進(jìn)而查漏補(bǔ)缺,比通過面試更難得 1 BAT及各大互聯(lián)網(wǎng)公司2014前端筆試面試題--Html,Css篇 2 BAT...

    ninefive 評(píng)論0 收藏0
  • 你不能錯(cuò)過的前端面試題合集

    摘要:收集的一些前端面試題從面試題發(fā)現(xiàn)不足,進(jìn)而查漏補(bǔ)缺,比通過面試更難得及各大互聯(lián)網(wǎng)公司前端筆試面試題篇及各大互聯(lián)網(wǎng)公司前端筆試面試題篇面試題個(gè)和個(gè)經(jīng)典面試題前端開發(fā)面試題如何面試前端工程師很重要個(gè)變態(tài)題解析如何通過餓了么面試輕 收集的一些前端面試題 從面試題發(fā)現(xiàn)不足,進(jìn)而查漏補(bǔ)缺,比通過面試更難得 1 BAT及各大互聯(lián)網(wǎng)公司2014前端筆試面試題--Html,Css篇 2 BAT...

    darkbaby123 評(píng)論0 收藏0
  • 前端最強(qiáng)面經(jīng)匯總

    摘要:獲取的對(duì)象范圍方法獲取的是最終應(yīng)用在元素上的所有屬性對(duì)象即使沒有代碼,也會(huì)把默認(rèn)的祖宗八代都顯示出來而只能獲取元素屬性中的樣式。因此對(duì)于一個(gè)光禿禿的元素,方法返回對(duì)象中屬性值如果有就是據(jù)我測(cè)試不同環(huán)境結(jié)果可能有差異而就是。 花了很長(zhǎng)時(shí)間整理的前端面試資源,喜歡請(qǐng)大家不要吝嗇star~ 別只收藏,點(diǎn)個(gè)贊,點(diǎn)個(gè)star再走哈~ 持續(xù)更新中……,可以關(guān)注下github 項(xiàng)目地址 https:...

    wangjuntytl 評(píng)論0 收藏0
  • 前端面試經(jīng)典題目匯總持續(xù)更新

    摘要:只要沒有被覆蓋的話對(duì)象原型的屬性就能在所有的實(shí)例中找到,若整個(gè)原型鏈未找到則返回如何實(shí)現(xiàn)繼承構(gòu)造繼承原型繼承實(shí)例繼承拷貝繼承原型機(jī)制或和方法去實(shí)現(xiàn)較簡(jiǎn)單,建議使用構(gòu)造函數(shù)與原型混合方式。 HTML相關(guān)問題 1.XHTML和HTML有什么區(qū)別 HTML是一種基本的WEB網(wǎng)頁設(shè)計(jì)語言,XHTML是一個(gè)基于XML的標(biāo)記語言最主要的不同:XHTML 元素必須被正確地嵌套。XHTML 元素必須被...

    Warren 評(píng)論0 收藏0
  • 前端面試經(jīng)典題目匯總持續(xù)更新

    摘要:只要沒有被覆蓋的話對(duì)象原型的屬性就能在所有的實(shí)例中找到,若整個(gè)原型鏈未找到則返回如何實(shí)現(xiàn)繼承構(gòu)造繼承原型繼承實(shí)例繼承拷貝繼承原型機(jī)制或和方法去實(shí)現(xiàn)較簡(jiǎn)單,建議使用構(gòu)造函數(shù)與原型混合方式。 HTML相關(guān)問題 1.XHTML和HTML有什么區(qū)別 HTML是一種基本的WEB網(wǎng)頁設(shè)計(jì)語言,XHTML是一個(gè)基于XML的標(biāo)記語言最主要的不同:XHTML 元素必須被正確地嵌套。XHTML 元素必須被...

    Tony_Zby 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

閱讀需要支付1元查看
<