摘要:情況三作為構(gòu)造函數(shù)調(diào)用所謂構(gòu)造函數(shù),就是通過這個函數(shù)生成一個新對象。讓我們用一張圖表示構(gòu)造函數(shù)和實例原型之間的關(guān)系在這張圖中我們用表示實例原型。
瀏覽器的內(nèi)核分別是什么?
IE: trident內(nèi)核 Firefox:gecko內(nèi)核 Safari:webkit內(nèi)核 Opera:以前是presto內(nèi)核,Opera現(xiàn)已改用Google Chrome的Blink內(nèi)核 Chrome:Blink(基于webkit,Google與Opera Software共同開發(fā))null與undefined的區(qū)別?
(1)null表示"沒有對象",即該處不應(yīng)該有值。典型用法是:
①作為函數(shù)的參數(shù),表示該函數(shù)的參數(shù)不是對象。 ②作為對象原型鏈的終點。
(2)undefined表示"缺少值",就是此處應(yīng)該有一個值,但是還沒有定義。典型用法是:
①變量被聲明了,但沒有賦值時,就等于undefined。 ②調(diào)用函數(shù)時,應(yīng)該提供的參數(shù)沒有提供,該參數(shù)等于undefined。 ③對象沒有賦值的屬性,該屬性的值為undefined。 ④函數(shù)沒有返回值時,默認(rèn)返回undefined。簡述一下src與href的區(qū)別
href 時指向網(wǎng)絡(luò)資源所在位置,建立和當(dāng)前元素(錨點)或當(dāng)前文檔(鏈接)之間的鏈接,用于超鏈接。 src 時指向外部的資源位置,指向的內(nèi)容將會嵌入到文檔中當(dāng)前標(biāo)簽所在位置; 在請求 src 資源時會將其指向的資源下載并應(yīng)用到文檔內(nèi),例如 js 腳本,img 圖片和 frame 等元素。當(dāng)瀏 覽器解析到該元素時,會暫停其他資源的下載和處理,直到將該資源加載、編譯、執(zhí)行完畢,圖片和框架等元 素也是如此,類似于將所指向資源嵌入當(dāng)前標(biāo)簽內(nèi)。這也是為什么將 js 腳本放在底部而不是頭部。HTML中引入CSS的方法
行內(nèi)式
?行內(nèi)式是在標(biāo)記的style屬性中設(shè)定CSS樣式。這種方式?jīng)]有體現(xiàn)出CSS的優(yōu)勢,不推薦使用。...此處寫CSS樣式 ???缺點是對于一個包含很多網(wǎng)頁的網(wǎng)站,在每個網(wǎng)頁中使用嵌入式,進(jìn)行修改樣式時非常麻煩。單 ???一網(wǎng)頁可以考慮使用嵌入式。
導(dǎo)入式
將一個獨立的.css文件引入HTML文件中,導(dǎo)入式使用CSS規(guī)則引入外部CSS文件, 導(dǎo)入式會在整個網(wǎng)頁裝載完后再裝載CSS文件,因此這就導(dǎo)致了一個問題,如果網(wǎng)頁比較大則會兒出現(xiàn) 先顯示無樣式的頁面,閃爍一下之后,再出現(xiàn)網(wǎng)頁的樣式。這是導(dǎo)入式固有的一個缺陷。
鏈接式
也是將一個.css文件引入到HTML文件中,但它與導(dǎo)入式不同的是鏈接式使用HTML規(guī)則引入外部CSS文件,它 在網(wǎng)頁的標(biāo)簽對中使用標(biāo)記來引入外部樣式表文件,使用語法如下: 使用鏈接式時與導(dǎo)入式不同的是它會以網(wǎng)頁文件主體裝載前裝載CSS文件,因此顯示出來的網(wǎng)頁從一開始 就是帶樣式的效果的,它不會象導(dǎo)入式那樣先顯示無樣式的網(wǎng)頁,然后再顯示有樣式的網(wǎng)頁,這是鏈接 式的優(yōu)點。如何使得一個DOM元素在瀏覽器可視范圍內(nèi)不顯示?最基本的: 設(shè)置 display:none; 或 visibility:hidden; 技巧性的: 設(shè)置寬高為0,透明度為0,設(shè)置 z-index:-1000px;display:none 與 visibility:hidden的區(qū)別?是否是繼承屬性:display不是繼承屬性,而visibility是繼承屬性,后代元素的visibility屬性若存在則不會繼承,若不存在則繼承父元素visibility的值,意味著:父元素的visibility為hidden但是子元素的visibility為visible則子元素依舊可見,子元素visibility不存在則子元素不可見。而元素的display屬性設(shè)為none其后整棵子樹都不可見。
是否占據(jù)空間:使用display:none,在文檔渲染時,該元素如同不存在(但依然存在文檔對象模型樹中);而使用visibility:hidden,其占的空間會被空白占位。即一個(display:none)不會在渲染樹中出現(xiàn),一個(visibility:hidden)會。
頁面相關(guān)屬性改值后是否重新渲染:visibility :hidden不渲染;display:none渲染
px、em、rem的區(qū)別?px、em都是長度單位。區(qū)別:px的值是固定的,寫多少就是多少,容易計算。em的值不是固定的,em繼承父元素的字體大小。
簡述盒子模型
rem是CSS3新引進(jìn)來的一個度量單位,rem是相對于根元素,這樣就意味著,我們只需要在根元素確定一個參考值,在根元素中設(shè)置多大的字體,這完全可以根據(jù)您自己的需求。盒子模型:內(nèi)容、內(nèi)邊距、外邊距、邊框DOCTYPE的作用?嚴(yán)格模式與混雜模式的區(qū)別?DOCTYPE聲明位于文檔的最前面,處于標(biāo)簽之前。告訴瀏覽器的解析器,用什么文檔類型規(guī)范來解析這個文檔。
Javascript的this用法?
在標(biāo)準(zhǔn)模式中,瀏覽器以其支持的最高標(biāo)準(zhǔn)呈現(xiàn)頁面;在混雜模式中,頁面以一種比較寬松的向后兼容的方式顯示。混雜模式通常模擬老式瀏覽器的行為以防止老站點無法工作。
情況一:純粹的函數(shù)調(diào)用
這是函數(shù)的最通常用法,屬于全局性調(diào)用,因此this就代表全局對象Global。
請看下面這段代碼,它的運行結(jié)果是1。
function test(){ this.x = 1; alert(this.x); } test(); // 1為了證明this就是全局對象,我對代碼做一些改變:
var x = 1; function test(){ alert(this.x); } test(); // 1運行結(jié)果還是1。再變一下:
var x = 1;
function test(){ this.x = 0; } test(); alert(x); //0
情況二:作為對象方法的調(diào)用函數(shù)還可以作為某個對象的方法調(diào)用,這時this就指這個上級對象。
function test(){ alert(this.x); } var o = {}; o.x = 1; o.m = test; o.m(); // 1
情況三 作為構(gòu)造函數(shù)調(diào)用所謂構(gòu)造函數(shù),就是通過這個函數(shù)生成一個新對象(object)。這時,this就指這個新對象。
function test(){ this.x = 1; } var o = new test(); alert(o.x); // 1運行結(jié)果為1。為了表明這時this不是全局對象,我對代碼做一些改變:
var x = 2; function test(){ this.x = 1; } var o = new test(); alert(x); //2運行結(jié)果為2,表明全局變量x的值根本沒變。
情況四 apply調(diào)用
apply()是函數(shù)對象的一個方法,它的作用是改變函數(shù)的調(diào)用對象,它的第一個參數(shù)就表示改變后的調(diào)用這個函數(shù)的對象。因此,this指的就是這第一個參數(shù)。
var x = 0; function test(){ alert(this.x); } var o={}; o.x = 1; o.m = test; o.m.apply(); //0apply()的參數(shù)為空時,默認(rèn)調(diào)用全局對象。因此,這時的運行結(jié)果為0,證明this指的是全局對象。
JavaScript如何實現(xiàn)繼承?
如果把最后一行代碼修改為
o.m.apply(o); //1
運行結(jié)果就變成了1,證明了這時this代表的是對象o。一、構(gòu)造繼承法; 二、原型繼承法; 三、實例繼承法;JavaScript深入之從原型到原型鏈JavaScript深入系列的第一篇,從原型與原型鏈開始講起,如果你想知道構(gòu)造函數(shù)的實例的原型,原型的原型,原型的原型的原型是什么,就來看看這篇文章吧。
構(gòu)造函數(shù)創(chuàng)建對象
我們先使用構(gòu)造函數(shù)創(chuàng)建一個對象: function Person() { } var person = new Person(); person.name = "Kevin"; console.log(person.name) // Kevin在這個例子中,Person 就是一個構(gòu)造函數(shù),我們使用 new 創(chuàng)建了一個實例對象 person。
很簡單吧,接下來進(jìn)入正題:prototype
每個函數(shù)都有一個 prototype 屬性,就是我們經(jīng)常在各種例子中看到的那個 prototype ,比如:
function Person() { } // 雖然寫在注釋里,但是你要注意: // prototype是函數(shù)才會有的屬性 Person.prototype.name = "Kevin"; var person1 = new Person(); var person2 = new Person(); console.log(person1.name) // Kevin console.log(person2.name) // Kevin那這個函數(shù)的 prototype屬性到底指向的是什么呢?是這個函數(shù)的原型嗎?
其實,函數(shù)的 prototype屬性指向了一個對象,這個對象正是調(diào)用該構(gòu)造函數(shù)而創(chuàng)建的實例的原型,也就是這個例子中的 person1 和 person2 的原型。
那什么是原型呢?你可以這樣理解:每一個JavaScript對象(null除外)在創(chuàng)建的時候就會與之關(guān)聯(lián)另一個對象,這個對象就是我們所說的原型,每一個對象都會從原型"繼承"屬性。
讓我們用一張圖表示構(gòu)造函數(shù)和實例原型之間的關(guān)系:
在這張圖中我們用 Object.prototype 表示實例原型。
那么我們該怎么表示實例與實例原型,也就是 person 和 Person.prototype 之間的關(guān)系呢,這時候我們就要講到第二個屬性:
_proto _
這是每一個JavaScript對象(除了 null )都具有的一個屬性,叫__proto__,這個屬性會指向該對象的原型。
為了證明這一點,我們可以在火狐或者谷歌中輸入:
function Person() { } var person = new Person(); console.log(person.__proto__ === Person.prototype); // true于是我們更新下關(guān)系圖:
既然實例對象和構(gòu)造函數(shù)都可以指向原型,那么原型是否有屬性指向構(gòu)造函數(shù)或者實例呢?
constructor
指向?qū)嵗故菦]有,因為一個構(gòu)造函數(shù)可以生成多個實例,但是原型指向構(gòu)造函數(shù)倒是有的,這就要講到第三個屬性:constructor,每個原型都有一個 constructor 屬性指向關(guān)聯(lián)的構(gòu)造函數(shù)。
為了驗證這一點,我們可以嘗試:
function Person(){ } console.log(Person === Person.prototype.constructor); // true所以再更新下關(guān)系圖: 綜上我們已經(jīng)得出:
function Person() { } var person = new Person(); console.log(person.__proto__ == Person.prototype) // true console.log(Person.prototype.constructor == Person) // true //順便學(xué)習(xí)一個ES5的方法,可以獲得對象的原型 console.log(Object.getPrototypeOf(person) === Person.prototype) // true了解了構(gòu)造函數(shù)、實例原型、和實例之間的關(guān)系,接下來我們講講實例和原型的關(guān)系:
實例與原型
當(dāng)讀取實例的屬性時,如果找不到,就會查找與對象關(guān)聯(lián)的原型中的屬性,如果還查不到,就去找原型的原型,一直找到最頂層為止。
舉個例子:
function Person() { } Person.prototype.name = "Kevin"; var person = new Person(); person.name = "Daisy"; console.log(person.name) // Daisy delete person.name; console.log(person.name) // Kevin在這個例子中,我們給實例對象 person 添加了 name 屬性,當(dāng)我們打印 person.name 的時候,結(jié)果自然為 Daisy。
但是當(dāng)我們刪除了 person 的 name 屬性時,讀取person.name,從 person 對象中找不到 name 屬性就會從 person 的原型也就是 person.__proto__,也就是 Person.prototype中查找,幸運的是我們找到了 name 屬性,結(jié)果為 Kevin。
但是萬一還沒有找到呢?原型的原型又是什么呢?
原型的原型
在前面,我們已經(jīng)講了原型也是一個對象,既然是對象,我們就可以用最原始的方式創(chuàng)建它,那就是:
var obj = new Object(); obj.name = "Kevin"; console.log(obj.name) // Kevin所以原型對象是通過 Object構(gòu)造函數(shù)生成的,結(jié)合之前所講,實例的 _proto _ 指向構(gòu)造函數(shù)的 prototype ,所以我們再更新下關(guān)系圖:
原型鏈
那Object.prototype 的原型呢?
null,不信我們可以打印:
console.log(Object.prototype.__proto__ === null) // true所以查到屬性的時候查到Object.prototype 就可以停止查找了。
所以最后一張關(guān)系圖就是
順便還要說一下,圖中由相互關(guān)聯(lián)的原型組成的鏈狀結(jié)構(gòu)就是原型鏈,也就是藍(lán)色的這條線。
補充
最后,補充三點大家可能不會注意的地方:
constructor
首先是 constructor 屬性,我們看個例子:
function Person() { } var person = new Person(); console.log(person.constructor === Person); // true當(dāng)獲取 person.constructor 時,其實 person 中并沒有 constructor屬性,當(dāng)不能讀取到constructor 屬性時,會從 person 的原型也就是 Person.prototype中讀取,正好原型中有該屬性,所以:
person.constructor === Person.prototype.constructor_proto _
其次是 _proto _ ,絕大部分瀏覽器都支持這個非標(biāo)準(zhǔn)的方法訪問原型,然而它并不存在于 Person.prototype 中,實際上,它是來自于 Object.prototype ,與其說是一個屬性,不如說是一個getter/setter,當(dāng)使用 obj._ proto _ 時,可以理解成返回了
Object.getPrototypeOf(obj)。真的是繼承嗎?
最后是關(guān)于繼承,前面我們講到“每一個對象都會從原型‘繼承’屬性”,實際上,繼承是一個十分具有迷惑性的說法,引用《你不知道的JavaScript》中的話,就是:
繼承意味著復(fù)制操作,然而 JavaScript 默認(rèn)并不會復(fù)制對象的屬性,相反,JavaScript
只是在兩個對象之間創(chuàng)建一個關(guān)聯(lián),這樣,一個對象就可以通過委托訪問另一個對象的屬性和函數(shù),所以與其叫繼承,委托的說法反而更準(zhǔn)確些。========================================待更新===========================================
文章版權(quán)歸作者所有,未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址:http://specialneedsforspecialkids.com/yun/52188.html
摘要:情況三作為構(gòu)造函數(shù)調(diào)用所謂構(gòu)造函數(shù),就是通過這個函數(shù)生成一個新對象。讓我們用一張圖表示構(gòu)造函數(shù)和實例原型之間的關(guān)系在這張圖中我們用表示實例原型。 瀏覽器的內(nèi)核分別是什么? IE: trident內(nèi)核 Firefox:gecko內(nèi)核 Safari:webkit內(nèi)核 Opera:以前是presto內(nèi)核,Opera現(xiàn)已改用Google Chrome的Blink內(nèi)核 Chrome:Blink(...
摘要:情況三作為構(gòu)造函數(shù)調(diào)用所謂構(gòu)造函數(shù),就是通過這個函數(shù)生成一個新對象。讓我們用一張圖表示構(gòu)造函數(shù)和實例原型之間的關(guān)系在這張圖中我們用表示實例原型。 瀏覽器的內(nèi)核分別是什么? IE: trident內(nèi)核 Firefox:gecko內(nèi)核 Safari:webkit內(nèi)核 Opera:以前是presto內(nèi)核,Opera現(xiàn)已改用Google Chrome的Blink內(nèi)核 Chrome:Blink(...
摘要:學(xué)堂碼匠面試?yán)镒畛3霈F(xiàn)的問題句式大概就是說說和的區(qū)別談?wù)労偷牟煌税梢徊úǖ谋嫖鲱}正在襲來,快快開啟防御,殺出重圍,來一場絕地反擊僵尸,啊,不對,辨析三連發(fā)掃描了眾多的面試題,發(fā)現(xiàn)額各個技術(shù)之間的辨析真的是如僵尸一般,一波一波的相信不少人 HTML5學(xué)堂-碼匠:面試?yán)镒畛3霈F(xiàn)的問題句式大概就是說說XXX和XXX的區(qū)別談?wù)刋XX和XXX的不同了吧~!一波波的辨析題正在襲來,快快開啟防御,...
摘要:學(xué)堂碼匠面試?yán)镒畛3霈F(xiàn)的問題句式大概就是說說和的區(qū)別談?wù)労偷牟煌税梢徊úǖ谋嫖鲱}正在襲來,快快開啟防御,殺出重圍,來一場絕地反擊僵尸,啊,不對,辨析三連發(fā)掃描了眾多的面試題,發(fā)現(xiàn)額各個技術(shù)之間的辨析真的是如僵尸一般,一波一波的相信不少人 HTML5學(xué)堂-碼匠:面試?yán)镒畛3霈F(xiàn)的問題句式大概就是說說XXX和XXX的區(qū)別談?wù)刋XX和XXX的不同了吧~!一波波的辨析題正在襲來,快快開啟防御,...
閱讀 1344·2023-04-26 00:35
閱讀 2715·2023-04-25 18:32
閱讀 3344·2021-11-24 11:14
閱讀 770·2021-11-22 15:24
閱讀 1417·2021-11-18 10:07
閱讀 6466·2021-09-22 10:57
閱讀 2773·2021-09-07 09:58
閱讀 3565·2019-08-30 15:54