通過手寫instanceof理解原型鏈示例詳解
Instanceof的作用
Instanceof是判斷一個實例是否是其父類或者祖先類型的實例的方法。原理就是Instanceof會接受兩個參數,在查找的過程中會先遍歷左邊變量的原型鏈,直到找到右邊變量的prototype;如果查找失敗,則會返回false。
手寫Instanceof
let myInstanceof = (target, origin) => { while(target){ if(target._proto_ = origin.prototype){ return true } target = target._proto_ } return false } let arr = [1, 2, 3]; console.log(myInstanceof(arr, Array)) //true; console.log(myInstanceof(arr, Object)) //true;
什麼是原型
除null以外的所有js對象在創建時,都會關聯另一個對象,這個被關聯的對象就是我們常說的原型,每一個對象都會從關聯的對象中繼承屬性,例如:
//構造函數 function Person(age){ this.age = age } Person.prototype.name = '張三' var person = new Person() console.log(person.name)//張三
當通過構造函數創建實例後,如果從實例上尋找某個屬性值,如果屬性值就存在於這個實例上,則會直接輸出,否則就會從他的原型對象中去找。
- prototype: 每個構造函數都有一個prototype屬性,這個屬性指向函數的原型對象。
- __ proto__: 每個對象(除瞭null)都會有的屬性,這個屬性指向對象的原型。
- constructor: 每個原型都有一個constructor屬性,指向關聯的構造函數。
下面我們用一組輸出來驗證這些信息:
console.log(Person===Person.prototype.constructor) // true console.log(person.__proto__ == Person.prototype) // true console.log(person.__proto__.constructor == Person) // true console.log(person.constructor == Person) // true
解釋一下為什麼person.constructor == Person,前面我們說過,實例上的屬性如果不存在,則會從他的原型對象上找。person.constructor == Person其實就相當於person.__ proto__.constructor == Person。
原型的應用場景
function Person(name, age) { this.name = name this.age = age this.sayHello = function () { console.log("hello," + this.name); } }
當我們每次通過構造函數創建實例時,都會創建新的新的sayHello方法,如果創建的實例過多,就會造成性能浪費。此時如果將sayHello掛載到構造函數的prototype上,此時新創建的實例都可以訪問到這個方法瞭。
function Person(name, age) { this.name = name; this.age = age; } Person.prototype.sayHello = function () { console.log("hello," + this.name); }; const person = new Person(); person.name = "張三"; person.sayHello()//hello,張三;
什麼是原型鏈
要解釋這個問題,我們首先要理解好構造函數,原型和實例之間的關系:每個構造函數都有一個原型對象,原型對象都有一個指向其對應的構造函數的指針,而實例都包含一個指向原型對象的內部指針。
接下來,如果我們讓原型對象同時等於一個其他的實例呢?
此時原型對象中包含一個指向其他原型的指針,另一個原型中也包含著一個指向另一個構造函數的指針。假如另一個原型又是另一個類型的實例,那麼上述關系依然成立。如此層層遞進,就構成瞭實例與原型的鏈條。就是我們常說的原型鏈。
簡單來說,就是如果從實例上尋找某個屬性值,如果屬性值就存在於這個實例上,則會直接輸出,否則就會從他的原型對象中去找。而原型對象中也沒有的話,則會向原型對象的原型對象中去找。
以上就是通過手寫instanceof理解原型鏈示例詳解的詳細內容,更多關於instanceof原型鏈理解的資料請關註WalkonNet其它相關文章!
推薦閱讀:
- JavaScript 手動實現instanceof的方法
- 一文徹底理解js原生語法prototype,__proto__和constructor
- JavaScript三大重點同步異步與作用域和閉包及原型和原型鏈詳解
- Javascript 原型與原型鏈深入詳解
- JavaScript數據結構常見面試問題整理