new操作符干了什么？
我們可以一起通過代碼實現(xiàn)來看看new關(guān)鍵字到底做了一些什么事情
function Book(name) {
this.name = name;
}
Book.prototype.say = function() {
console.log(this.name);
};
let book = new Book('javascript高級程序設(shè)計');
console.log(book);
book.say();
輸出結(jié)果如下圖：
上例中挺据，new關(guān)鍵字調(diào)用的構(gòu)造函數(shù)并沒有任何返回值绘盟，最終我們實例創(chuàng)建了一個對象，那如果構(gòu)造函數(shù)擁有返回值呢谦去？new關(guān)鍵字會如何處理
function Test(name) {
this.conname = name;
return 1
}
Test.prototype.say = function() {
console.log(this.conname);
};
let test = new Test('測試');
console.log(test);
test.say();
上例中憎蛤，構(gòu)造函數(shù)返回了一個基本數(shù)據(jù)類型的值外傅，而最終我們依舊拿到了想要的實例對象。那如果構(gòu)造函數(shù)返回一個引用類型的值呢蹂午？
function Test(name) {
this.conname = name;
return {
name
}
}
Test.prototype.say = function() {
console.log(this.conname);
};
let test = new Test('測試');
console.log(test);
test.say();
上例中栏豺，構(gòu)造函數(shù)最終返回了一個對象，這個對象上有name屬性豆胸，然后在構(gòu)造函數(shù)的prototype上奥洼，還擁有say方法，我們看看這次new得到的值是什么晚胡，是否擁有構(gòu)造函數(shù)prototype上的方法
可以看到的是灵奖，我們拿到的對象是最終構(gòu)造函數(shù)return出來的那個對象，而這個對象頁沒有構(gòu)造函數(shù)prototype上的say方法
經(jīng)過測試估盘，我們發(fā)現(xiàn)
- new關(guān)鍵字 通過構(gòu)造函數(shù)創(chuàng)建出來的實例可以訪問到構(gòu)造函數(shù)中的屬性
- new關(guān)鍵字 通過構(gòu)造函數(shù)創(chuàng)建出來的實例可以訪問到構(gòu)造函數(shù)原型鏈中的屬性瓷患，也就是說通過 new 操作符，實例與構(gòu)造函數(shù)通過原型鏈連接了起來
- new關(guān)鍵字 操作的構(gòu)造函數(shù)如果返回基本類型遣妥，那么這個返回值毫無意義
- new關(guān)鍵字 操作的構(gòu)造函數(shù)如果返回引用類型擅编，那么這個返回值會被正常使用
通過上述的一些測試，我們可以自己試著實現(xiàn)一下new關(guān)鍵字；
自己實現(xiàn)new關(guān)鍵字
function Book(name) {
this.name = name;
}
Book.prototype.say = function() {
console.log(this.name);
};
function myNew(Constructor, ...args) {
let obj = {};
obj.__proto__ = Constructor.prototype;
let result = Constructor.call(obj, ...args);
return result instanceof Object ? result : obj;
}
let book = myNew(Book, 'javascript高級程序設(shè)計');
console.log(book);
book.say();
// 本文由郝晨光整理并總結(jié)爱态，未經(jīng)授權(quán)禁止轉(zhuǎn)載
總結(jié) new關(guān)鍵字到底做了些什么
- 先創(chuàng)建了一個新的空對象
- 然后讓這個空對象的proto指向函數(shù)的原型prototype
- 將對象作為函數(shù)的this傳進去谭贪，如果return 出來東西是對象的話就直接返回 return 的內(nèi)容，沒有的話就返回創(chuàng)建的這個對象
null和undefined的區(qū)別锦担？
在javascript中俭识，null和undefined都用來表示一個空的值，
null
null類型洞渔，代表“空值”套媚，代表一個空對象指針，使用typeof運算得到 “object”磁椒，所以你可以認為它是一個特殊的對象值堤瘤。
使用場景：
- 作為函數(shù)的參數(shù)，表示該函數(shù)的參數(shù)不是對象浆熔；
- 作為對象原型鏈的終點宙橱。
undefined
undefined類型，代表“未定義”蘸拔，代表一個變量已經(jīng)聲明但是還未賦值，就是此處應(yīng)該有一個值环葵，但是還沒有定義调窍。
使用場景：
- 變量被聲明了，但沒有賦值時张遭，就等于undefined邓萨。
- 調(diào)用函數(shù)時，應(yīng)該提供的參數(shù)沒有提供菊卷，該參數(shù)等于undefined缔恳。
- 對象沒有賦值的屬性，該屬性的值為undefined洁闰。
- 函數(shù)沒有返回值時歉甚，默認返回undefined。
eval是做什么的扑眉？
eval用來將字符串解析為javascript代碼并執(zhí)行
// 聲明變量
const str = "var a = 5,b = 10;"
eval(str);
console.log(a); // 5
console.log(b); // 10
// 返回運算值
const str2 = "5+10";
console.log(eval(str2)); // 15
// 本文由郝晨光整理并總結(jié)纸泄，未經(jīng)授權(quán)禁止轉(zhuǎn)載
eval還可以將JSON字符串轉(zhuǎn)換為JSON對象，例如：
const JSONStr = '[{name: "張三",age: 25},{name: "李四", age: 30}]';
let JSONObj = eval(JSONStr);
console.log(JSONObj); // [{name: "張三",age: 25},{name: "李四", age: 30}]
需要注意的是：我們應(yīng)該避免使用eval腰素，它并不安全聘裁，而且非常耗性能（需要先將字符串轉(zhuǎn)換為javascript代碼，然后再執(zhí)行）弓千。
iframe的優(yōu)缺點
什么是iframe衡便？
iframe就是框架網(wǎng)頁就是在同一個頁面里有多個網(wǎng)頁,使用框架的好處就是你在請求一個網(wǎng)頁的下一個頁面的時候,還有 一個網(wǎng)頁是一直顯示著的,這樣瀏覽者就不會就的等待的存在了;
iframe也稱作嵌入式框架，嵌入式框架和框架網(wǎng)頁類似，它可以把一個網(wǎng)頁的框架和內(nèi)容嵌入在現(xiàn)有的網(wǎng)頁中镣陕。
iframe的使用方法
iframe使用很簡單谴餐，使用src屬性指向另一個你需要包含的另一個文件即可，也可以設(shè)置元素的寬茁彭，高等总寒。比如：
<iframe
name="list-frame" // 規(guī)定 iframe 的名稱。
marginwidth="0" // 定義 iframe 的左側(cè)和右側(cè)的邊距理肺。
marginheight="0" // 定義 iframe 的頂部和底部的邊距摄闸。
width="100%" // 定義 iframe 的寬度。
height="300px" // 規(guī)定 iframe 的高度妹萨。
src="list.html" // 規(guī)定在 iframe 中顯示的文檔的 URL年枕。
frameborder="0" // 規(guī)定是否顯示框架周圍的邊框。取值：0/1
scrolling="auto" // 規(guī)定是否在 iframe 中顯示滾動條乎完。取值：yes/no/auto
></iframe>
iframe的優(yōu)缺點
優(yōu)點
- iframe能夠原封不動的把嵌入的網(wǎng)頁展現(xiàn)出來熏兄。
- 如果有多個網(wǎng)頁引用iframe，那么你只需要修改iframe的內(nèi)容树姨，就可以實現(xiàn)調(diào)用的每一個頁面內(nèi)容的更改摩桶，方便快捷。
- 網(wǎng)頁如果為了統(tǒng)一風(fēng)格帽揪，頭部和版本都是一樣的硝清，就可以寫成一個頁面，用iframe來嵌套转晰，可以增加代碼的可重用芦拿。
- 如果遇到加載緩慢的第三方內(nèi)容如圖標和廣告，這些問題可以由iframe來解決查邢。
缺點
- 頁面樣式調(diào)試麻煩蔗崎，出現(xiàn)多個滾動條；
- 瀏覽器的后退按鈕失效扰藕；
- 過多會增加服務(wù)器的HTTP請求缓苛；
- 小型的移動設(shè)備無法完全顯示框架；
- 產(chǎn)生多個頁面实胸，不易管理他嫡；
- 不容易打印庐完；
- iframe會阻塞主頁面的Onload事件
- 占用資源钢属。每增加一個 iframe，相當于多增加一個獨立的窗口门躯，每個 iframe 中都需要占用獨立的資源淆党。
- 代碼復(fù)雜，無法被一些搜索引擎解讀。
如果本文對您有幫助染乌，可以看看本人的其他文章:
前端常見面試題（九）@郝晨光
前端常見面試題（八）@郝晨光
前端常見面試題（七）@郝晨光
友情鏈接：純原生實現(xiàn)彈出層 @程程程
