Web一階段面試題 1.簡述 <!doctype> 的作用？ <!DOCTYPE> 聲明叫做文檔類型定義（DTD），聲明的作用是為了告訴瀏覽器該文件的類型。讓瀏覽器解析器知道應該用哪個規範來解析文檔。 五大主流的瀏覽器及其內核？ Chrome 內核 Blink Safari 內核 Webkit Op ...
一.前言
假如我們創建了一個對象，只有一個成員變數name，
let ss = {
name: 'shucheng',
}
console.log(ss);
結果如下：可以看出該對象有很多原型方法
通過上面的鋪墊，我們知道：：：：：：：：：：：：：：：：：：：：：：
JavaScript 的每個對象都繼承另一個父級對象，父級對象稱為原型 (prototype)對象。原型也是一個對象，原型對象上的所有屬性和方法，都能被子對象 (派生對象) 共用。通過構造函數生成實例對象 時，會自動為實例對象分配原型對象。
而每一個構造函數都有一個prototype屬性，這個屬性就是實例對象的原型對象。
上圖就可以明瞭的證明構造函數和原型對象之間的關係，那麼我們再來看實例和原型對象的關係。依照上面的關係圖，實例的內部指針 proto 指向原型對象，構造函數的原型也指向同一個原型對象。
對於原型的理解如下：
（1）所有的引用類型（包括數組，對象，函數）都有隱性原型屬性（_proto_）, 值也是一個普通的對象。（見上圖，可以看出原型對象就是灰色的部分，其裡面的屬性值也是可以訪問的。）
（2）所有的函數，都有一個 prototype 屬性，值也是一個普通的對象。
（3）所有的引用類型的proto屬性值都指向構造函數的 prototype 屬性值。
要理解原型就要明白構造函數、實例對象、原型之間的關係，我用一張圖來表示出他們之間的關係，如下圖所示：
構造函數new出來一個對象，而每個對象都有一個constructor屬性，該屬性指向創建該實例的構造函數，構造函數的prototype屬性是這個new出來的實例化對象的原型，實例對象通過__proto__或者object.getPrototype的方法獲取原型。轉化關係實例如下圖所示
2.1.原型鏈
那麼明白了三者之間的關係我們就來說一下原型鏈，從一個實例對象向上找有一個構造實例的原型對象，這個原型對象又有構造它的上一級原型對象，如此一級一級的關係鏈，就構成了原型鏈。原型鏈的最頂端就是Object.prototype ；
原型鏈的形成就是對象的屬性和方法，有可能是定義在自身內的，也有可能會定義他的原型對象上。由於原型本身也是對象，又有了自己的原型，所以就會形成。
總的來說它是實現繼承的主要方法，基本思想就是利用原型讓一個引用類型繼承另一個引用類型的屬性和方法。
二.原型鏈的理解實例
function MyTest(name,age){
this.name=name;
this.age=age;}MyTest.prototype={
"constructor":MyTest,
"showName":function(){
console.log(this.name);
},
"showAge":function(){
console.log(this.age);
}}
var newMyTest01=new MyTest('安靜的木馬',18);
代碼中我們通過new構造器MyTest，生成實例化對象newMyTest01，那麼newMyTest01就有一個隱形屬性__proto__指向MyTest.prototype原型對象。
①現在訪問newMyTest01.name,因為newMyTest01對象上有name屬性，值為“安靜的木馬”，這個可以直接訪問到
②現在我們訪問newMyTest01.showName方法呢，newMyTest01對象上並沒有直接定義showName方法，訪問不到，然後newMyTest01就會通過__proto__屬性找到MyTest.prototype，也就是MyTest的原型對象，看看能不能訪問到showName方法，現在是可以訪問到了。
③如果MyTest.prototype對象裡面也沒有showName方法呢？那就通過MyTest.prototype對象的__proto__繼續找，在原型鏈查找中，一般到Object.prototype.__proto__還查找不到時，就會終止查找，因為ECMA規範里說明Object.prototype.__proto__是原型鏈終點，值為null，而這個時候那個沒有訪問到的屬性值設置為undefined，並不爆出語法錯誤，這是原型鏈查找和作用域鏈查找的一個顯著區別。
本文來自博客園，作者：122www，轉載請註明原文鏈接：https://www.cnblogs.com/131362wsc/p/17106694.html
