043_对象构造器和原型
生活随笔
收集整理的這篇文章主要介紹了
043_对象构造器和原型
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
1. 對象類型(藍圖)(類)
1.1. 通過文本和new Object()的方式, 我們只能創建單一對象。
1.2. 有時我們需要創建相同"類型"的許多對象的"藍圖"。
1.3. 創建一種"對象類型"的方法, 是使用對象構造器函數。
1.4. 下面的Person()函數就是對象構造器函數:
function Person(first, last) {this.firstName = first;this.lastName = last; }1.5. 通過new關鍵詞調用構造器函數可以創建相同類型的對象:
var myFather = new Person("Bill", "Gates"); var myMother = new Person("Steve", "Jobs");1.6. 用大寫首字母對構造器函數命名是個好習慣。
2. 為構造器添加屬性和方法
2.1. 為對象添加屬性和方法
function Person(first, last) {this.firstName = first;this.lastName = last; }var myFather = new Person("Bill", "Gates"); var myMother = new Person("Steve", "Jobs");// 給myFather對象添加屬性 myFather.nationality = "English"; // 給myFather對象添加方法 myFather.fullName = function () {return this.firstName + " " + this.lastName; };// myMother對象沒有nationality屬性和fullName方法2.2. 您無法為對象構造器添加屬性和方法
function Person(first, last) {this.firstName = first;this.lastName = last; } Person.nationality = "English"; Person.fullName = function () {return this.firstName + " " + this.lastName; };var myFather = new Person("Bill", "Gates"); var myMother = new Person("Steve", "Jobs");// myFather 和myMother都沒有nationality屬性和fullName方法2.3. 如需向構造器添加一個屬性和方法, 您必須添加到構造器函數。
function Person(first, last, nationality) {this.firstName = first;this.lastName = last;this.nationality = nationality;this.fullName = function () {return this.firstName + " " + this.lastName;}; }2.4. 例子
2.4.1. 代碼
<!DOCTYPE html> <html lang="zh-CN"><head><meta charset="utf-8" /><title>無法為對象構造器添加屬性和方法</title></head><body><script type="text/javascript">function Person(firstName, lastName) {this.firstName = firstName;this.lastName = lastName;}Person.nationality = "English";Person.fullName = function () {// 這里的this指的是Person本身return this.firstName + " " + this.lastName;};var myFather = new Person("Bill", "Gates");var myMother = new Person("Steve", "Jobs");// myFather對象沒有nationality屬性, myFather.nationality返回undefineddocument.write('myFather.nationality: ' + myFather.nationality + '<br />');// myFather對象沒有fullName()方法, myFather.fullName()報錯// document.write('myFather.fullName(): ' + myFather.fullName() + '<br />');// myMother對象沒有nationality屬性, myMother.nationality返回undefineddocument.write('myMother.nationality: ' + myMother.nationality + '<br />');// myMother對象沒有fullName()方法, myMother.fullName()報錯// document.write('myMother.fullName(): ' + myMother.fullName() + '<br />');// 可以使用Person.nationality訪問nationality屬性, 類似于靜態值document.write('Person.nationality: ' + Person.nationality + '<br />');document.write('Person.fullName(): ' + Person.fullName() + '<hr />');// 給myFather對象添加屬性myFather.nationality = "English";// 給myFather對象添加方法myFather.fullName = function () {return this.firstName + " " + this.lastName;};// myFather對象訪問nationality屬性和fullName()方法document.write('myFather.nationality: ' + myFather.nationality + '<br />');document.write('myFather.fullName(): ' + myFather.fullName() + '<br />');// myMother對象沒有nationality屬性, myMother.nationality返回undefineddocument.write('myMother.nationality: ' + myMother.nationality + '<hr />');// myMother對象沒有fullName()方法, myMother.fullName()報錯// document.write('myMother.fullName(): ' + myMother.fullName() + '<br />');function Human(first, last, nationality) {this.firstName = first;this.lastName = last;this.nationality = nationality;this.fullName = function () {return this.firstName + " " + this.lastName;};}myFather = new Human("Bill", "Gates");myMother = new Human("Steve", "Jobs");myFather.nationality = 'Chinese';myMother.nationality = 'Chinese';document.write('myFather.nationality: ' + myFather.nationality + '<br />');document.write('myFather.fullName(): ' + myFather.fullName() + '<br />');document.write('myMother.nationality: ' + myMother.nationality + '<br />');document.write('myMother.fullName(): ' + myMother.fullName() + '<br />');</script></body> </html>2.4.2. 效果圖
3. 原型繼承
3.1. 所有JavaScript對象都從原型繼承屬性和方法。
3.2. Object類的原型位于原型鏈的頂端。字符串類(String)、布爾類(Boolean)、數字類(Number)、數組類(Array)、函數類(Function), 都繼承Object類的原型。
3.3. 字符串對象繼承自String類的原型。布爾對象繼承自Boolean類的原型。數字對象繼承自Number類的原型。數組對象繼承自Array類的原型。對象繼承自Object類的原型。函數對象繼承自Function類的原型。
3.4. 例子
<!DOCTYPE html> <html lang="zh-CN"><head><meta charset="utf-8" /><title>原型繼承</title></head><body><script type="text/javascript">document.write(Object.prototype + "<br />");document.write(String.prototype + "<br />");document.write(Boolean.prototype + "<br />");document.write(Number.prototype + "<br />");document.write(Array.prototype + "<br />");document.write(Function.prototype.__proto__ + "<hr />");var str = new String('Java編程語言(第三版)');document.write(str + "<br />");var boo = new Boolean(true);document.write(boo + "<br />");var num = new Number(1);document.write(num + "<br />");var arr = new Array();document.write(arr + "<br />");var obj = new Object();document.write(obj + "<br />");var myFun = new Function();document.write((myFun.__proto__ === Function.prototype) + "<br />");</script></body> </html>3.5. Object.prototype
3.6. String.prototype
3.7. Boolean.prototype
3.8. Number.prototype
3.9. Array.prototype
3.10. Function.prototype.__proto__
3.11. 字符串對象繼承自String類的原型。
3.12. 布爾對象繼承自Boolean類的原型。
3.13. 數字對象繼承自Number類的原型。
3.14. 數組對象繼承自Array類的原型。
3.15. 對象繼承自Object類的原型。
4. 使用prototype屬性給對象構造器添加屬性和方法
function Person(first, last) {this.firstName = first;this.lastName = last; }Person.prototype.nationality = "Chinese";Person.prototype.fullName = function() {return this.firstName + " " + this.lastName; };5. 例子
5.1. 代碼
<!DOCTYPE html> <html lang="zh-CN"><head><meta charset="utf-8" /><title>對象構造器和原型</title></head><body><script type="text/javascript">function Person(firstName, lastName) {this.firstName = firstName;this.lastName = lastName;}var p1 = new Person('zhang', 'san');for(item in p1){if ((typeof p1[item]) == 'function') {document.write(p1[item]() + '<br />');} else {document.write(p1[item] + '<br />');}}document.write('<hr />');// 通過原型屬性給對象構造器添加屬性Person.prototype.nationality = "Chinese";// 通過原型屬性給對象構造器添加方法Person.prototype.fullName = function() {return this.firstName + " " + this.lastName;};var p2 = new Person('li', 'si');for(item in p2){if ((typeof p2[item]) == 'function') {document.write(p2[item]() + '<br />');} else {document.write(p2[item] + '<br />');}}</script></body> </html>5.2. 效果圖
《新程序員》：云原生和全面數字化實踐50位技術專家共同創作，文字、視頻、音頻交互閱讀總結
以上是生活随笔為你收集整理的043_对象构造器和原型的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 039_JavaScript对象访问器
- 下一篇： 047_Object对象