JavaScript原型鏈是開發中不可避免要接觸到的一個重要概念。我們可以通過原型鏈取到對象的屬性和方法,本文重點討論如何通過原型鏈取值。
在JavaScript中,對象是由原型鏈構成的。每個對象都有一個原型,原型又有自己的原型,這樣就形成了一個原型鏈。
// 創建一個對象 var obj = { name: 'Tom' } // 輸出該對象的原型 console.log(obj.__proto__);
上面代碼輸出的原型便是指向Object的原型,即:
Object.prototype
接下來看一個例子:
function Person(name, age) { this.name = name this.age = age } Person.prototype.sayHello = function() { console.log('Hello World!') } var tom = new Person('Tom', 18) tom.sayHello()
上面的代碼,我們先定義了一個Person構造函數,然后通過在Person.prototype上添加方法,使通過new操作符創建出的對象也擁有了該方法。
在調用tom.sayHello()時,便是通過原型鏈去查找該方法,因為tom自身并沒有sayHello方法,但它的原型鏈上有一個指向Person.prototype的原型對象,該原型對象上有sayHello方法,所以tom才能調用sayHello方法。
再看一個例子,多層嵌套的原型鏈情況:
function Father(age) { this.age = age } Father.prototype.sayHello = function() { console.log('Hello father!') } function Son(name, age) { this.name = name Father.call(this, age) } Son.prototype = Object.create(Father.prototype) Son.prototype.sayHello = function() { console.log('Hello son!') } var tom = new Son('Tom', 18) tom.sayHello()
上面的代碼,我們定義了一個Father構造函數和一個Son構造函數,并使用Object.create()方法,將Son的原型指向Father的原型,形成了一個多層嵌套的原型鏈。在調用tom.sayHello()方法時,先在tom自身查找該方法,找不到的話便去它的原型Son.prototype上查找,再找不到,便去它的原型Father.prototype上查找,最后也找不到的話便去Object.prototype上查找,直到找到為止。
通過原型鏈取值的流程是:
- 在當前對象自身查找該值
- 如果自身沒有該值,則去它的原型對象上查找
- 如果原型對象上也沒有該值,則去該原型對象的原型對象上查找
- 直到遍歷到Object.prototype,如果還沒有找到該值,則返回undefined
本文通過多個例子,詳細解釋了原型鏈取值的原理,掌握了這個概念后,就能更好的理解JavaScript中對象的繼承和原型鏈的關系。
上一篇oracle call
下一篇ajax中文傳到前臺亂碼