cvte前端筆試後的js原型總結

　　最近實習生招聘已經開始了，昨天晚上也終於迎來了第一場筆試，筆試的公司是cvte，筆試題總共27題，25道不定項還有2道編程題，雖然出的都是前端題，可是由於以前沒有好好準備，仍是不少作的不是很好o(╥﹏╥)o考完試後也總結了一下，考的以node，原型，promise比較多，以前覺得本身原型掌握的還能夠，一考才發現問題啊，趕忙總結一下O(∩_∩)O

 

1、從筆試提及

　　你們以爲本身原型掌握的怎麼樣呢？昨天的筆試出了很多原型的題，一個prototype還好，多個加在一塊兒真的是有點暈了，下面是記得的一道題，你們以爲會輸出什麼呢？

function f1(){}

typeof f1.prototype;
typeof Object.prototype;
typeof Function.prototype.prototype;
typeof f1.prototype.constructor

　　上面的代碼會依次輸出"object"，"object"，"undefined"，"function"，若是你們四個都答對的話就不用往下看啦，若是還不會的話就跟着我一塊兒從新學習下原型把

 

2、原型

一、原型對象

　　不管何時，只要建立了一個新函數，就會根據一組特定的規則爲該函數建立一個prototype屬性，這個函數指向函數的原型對象，這個原型對象中包含了全部實例共享的屬性和方法，在默認狀況下，全部原型對象都會自動得到一個constructor屬性，這個屬性包含一個指向prototype屬性所在函數的指針，咱們拿上面的筆試題爲例畫圖給你們說明一下

　　從上面的圖咱們能夠看出，第一個例子中，由於f1是個函數，所以會根據一組規則爲f1建立一個prototype屬性，而且指向f1的原型，這裏也就是f1.prototype

　　所以，f1.prototype就是咱們所說的原型對象啦，既然它是對象，那麼typeof f1.prototype就會輸出object，而第四個例子中，f1.prototype.constructor會指向f1，f1自己是個函數，因此typeof f1.prorotype.constructor會輸出function

　　關於第二個例子Object.prototype也是一樣的道理，如下面的圖爲例說明一下：

　　從上面的圖咱們能夠看出，咱們能夠把Object看出是一個構造函數，所以它也有一個prototype屬性指向Object的原型對象，而Object.prototype也是一個對象，所以typeof Object.prototype會輸出object

　　關於第三個例子就有點複雜啦，首先，typeof Function.prototype會輸出什麼呢？

　　打開控制檯，輸入代碼，咱們會看到typeof Function.prototype輸出的會是Function，這裏要說明一點，Function.prototype和其它類型的prototype屬性不同，像前兩個例子同樣，f1.prototype和Object.prototype以及其它類型的prototype都是Object，而Function比較特殊，Function.prototype的類型是Function

　　接下來，typeof Function.prototype.prototype爲何會輸出undefined呢？這裏其實能夠這樣去理解，這是由於Function.prototype不具有prototype屬性，所以會輸出undefined，通常來講，只有函數纔會根據必定的規則建立prototype的，而Function.prototype並非函數，所以也不具有prototype屬性，一樣的道理，typeof f1.prototype.prototype會輸出undefined，typeof Object.prototype.prototype也會輸出undefined

 

二、實例，原型和構造函數的關係

　　首先，咱們須要先來講一下__proto__這個屬性，當一個對象被實例化的時候，將會包含一個內部屬性，咱們把這個內部屬性叫作[[Prototype]]，也就是__proto__，這個屬性會指向實例化出這個對象函數的prototype，好比有下面的代碼

function Person(){}

var person1 = new Person();

　　這個時候Person的構造函數，Person的原型屬性和Person的實例之間的關係能夠這樣表示

　　從上面的圖咱們能夠看到，Person是構造函數，它將根據一組特定的規則建立prototype屬性，而且指向Person的原型對象，而Person.prototype的constructor會指向Person構造函數，而person1是Person的實例，會包含一個內部屬性__proto__指向Person.prototype，你們別小看__proto__，正由於有了這個屬性，咱們就能夠在Person.prototype上添加屬性和方法，這些屬性和方法將會被全部實例所共享，好比說能夠像下面這樣在Person的原型上添加屬性和方法

function Person() {}

Person.prorotype.sayName = function() {
    console.log(this.name);                    //  在原型上添加方法
}

var person1 = new Person();
var person2 = new Person();

person1.name = "Nicholas";                  //  在實例上添加屬性
person2.name = "Greg";                       //  在實例上添加屬性

person1.sayName();                             //  Nicholas
person2.sayName();                             //  Greg

　　通常來講，每當代碼讀取某個對象的某個屬性時，都會指向一次搜索，目標是具備給定名字的屬性，搜索首先從對象實例自己開始，若是在實例中找到了具備給定名字的屬性，則返回該屬性的值，若是沒有找到，則繼續搜索指針指向的原型對象，在原型對象中查找具備給定名字的屬性

　　咱們在Person的原型上添加了sayName方法，而且建立了person1和person2兩個實例，這兩個實例都有本身的name屬性，當執行sayName()方法時，因爲其實例上不存在sayName()方法，所以會順着__proto__指向的原型，在原型上查找sayName()方法，而且指向裏面的代碼

 

三、怎麼判斷某個實例和原型之間存在關係

　　在全部實現中都沒法訪問到[[Prototype]]的，所以咱們不可能經過實例的[[Prototype]]判斷其是否和某個原型存在關係，咱們須要使用isPrototypeOf()方法來肯定對象之間是否存在這種關係，從本質上講，若是[[Prototype]]指向調用isPrototypeOf()方法的對象，那麼就返回true

 

Person.prorotype.isPrototypeOf(person1);        //  true
Person.prototype.isPrototypeOf(person2);        //  true

 

　　由於person1和person2內部的[[Prototype]]都指向Person.prototype，因此返回true

 

四、怎麼判斷屬性存在實例仍是原型中

　　前面已經說過，若是在對象的實例上搜索不到某個屬性時，將會在原型對象上進行搜索，若是咱們在實例中添加了一個屬性，而該屬性與實例原型中的一個屬性同名，那麼該屬性將會屏蔽原型中的那個屬性，那麼，咱們怎麼判斷一個屬性是存在實例仍是存在原型中呢，這裏能夠用hasOwnProperty進行判斷

　　使用hasOwnPrototype方法能夠檢測一個屬性是不是存在於實例中，仍是存在於原型中，旨在給定屬性存在於對象實例中時，纔會返回true

 

五、再來一個題

　　上面對原型作了一個比較簡單的介紹，不知道你們是否是對原型有個瞭解了，最後，咱們在來看下面的題輸出的是什麼？

　　你們知道typeof Function.prototype.__proto__又是什麼呢？你們本身輸出代碼試一試，結果會輸出object喲，咱們看看下面的代碼

Function.prototype.__proto__ === Object.prototype;    // true

　　通常來講，除了Object.prototype以外的全部對象都會有[[Prototype]]，也就是__proto__屬性，會指向實例化出這個對象的構造函數的原型，而爲何Object沒有呢，由於js的繼承機制主要是原型鏈實現的，而原型鏈的頭就是Object.prototype，而這裏Function.prototype其實就是指向了Object.prototype

 

　　今天主要介紹這麼多了，接下來要好好準備筆試，準備面試了，其實在筆試和麪試中，咱們能夠發現本身在哪方面的不足，及時的進行總結，其實面試對於咱們來講，也是一種不斷學習的過程，但願你們都能加油拿到本身想要的offer