经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置:技术经验 » HTML/CSS » HTML5 » 查看文章
JavaScript prototype原型用法
来源:cnblogs  作者:web小哥  时间:2019/7/29 9:08:11  对本文有异议

JavaScript对象原型

所有JavaScript对象都从原型继承属性和方法。

  1. <!DOCTYPE html>
  2. <html>
  3. <meta charset="utf-8">
  4. <title>js</title>
  5. <body>
  6.  
  7. <h2>JavaScript 对象</h2>
  8.  
  9. <p id="demo"></p>
  10.  
  11. <script>
  12. function Person(first, last, age, eye) {
  13. this.firstName = first;
  14. this.lastName = last;
  15. this.age = age;
  16. this.eyeColor = eye;
  17. }
  18. var myFather = new Person("John", "Doe", 50, "blue");
  19. var myMother = new Person("Sally", "Rally", 48, "green");
  20. document.getElementById("demo").innerHTML =
  21. "My father is " + myFather.age + ". My mother is " + myMother.age;
  22. </script>
  23. </body>
  24. </html>

 

 

我们还了解到,您无法向现有对象构造函数添加新属性:

  1. <!DOCTYPE html>
  2. <html>
  3. <meta charset="utf-8">
  4. <title>JavaScript对象</title>
  5. <body>
  6.  
  7. <h2>JavaScript对象</h2>
  8.  
  9. <p>您无法向构造函数添加新属性。</p>
  10.  
  11. <p id="demo"></p>
  12.  
  13. <script>
  14. function Person(first, last, age, eye) {
  15. this.firstName = first;
  16. this.lastName = last;
  17. this.age = age;
  18. this.eyeColor = eye;
  19. }
  20. Person.nationality = "English";
  21. var myFather = new Person("John", "Doe", 50, "blue");
  22. var myMother = new Person("Sally", "Rally", 48, "green");
  23. document.getElementById("demo").innerHTML =
  24. "The nationality of my father is " + myFather.nationality;
  25. </script>
  26. </body>
  27. </html>

 


要向构造函数添加新属性,必须将其添加到构造函数:

  1. <!DOCTYPE html>
  2. <html>
  3. <meta charset="utf-8">
  4. <title>JavaScript对象</title>
  5. <body>
  6.  
  7. <h2> JavaScript对象</h2>
  8.  
  9. <p id="demo"></p>
  10.  
  11. <script>
  12. function Person(first, last, age, eye) {
  13. this.firstName = first;
  14. this.lastName = last;
  15. this.age = age;
  16. this.eyeColor = eye;
  17. this.nationality = "English";
  18. }
  19. var myFather = new Person("John", "Doe", 50, "blue");
  20. var myMother = new Person("Sally", "Rally", 48, "green");
  21. document.getElementById("demo").innerHTML =
  22. "我父亲的国籍是 " + myFather.nationality + ". 我母亲的国籍是: " + myMother.nationality;
  23. </script>
  24. </body>
  25. </html>

 

原型继承

所有JavaScript对象都从原型继承属性和方法:

Object.prototype位于原型继承链的顶部:Date对象,Array对象和Person对象继承自Object.prototype。

* Date 对象继承自 Date.prototype
* Array 对象继承自 Array.prototype
* Person 对象继承自 Person.prototype

# 向对象添加属性和方法

有时,您希望向给定类型的所有现有对象添加新属性(或方法)。有时您想要向对象构造函数添加新属性(或方法)。

使用**原型**属性

JavaScript prototype属性允许您向对象构造函数添加新属性:

  1. function Person(first, last, age, eyecolor) {
  2. this.firstName = first;
  3. this.lastName = last;
  4. this.age = age;
  5. this.eyeColor = eyecolor;
  6. }
  7. Person.prototype.nationality = "English";

 

JavaScript prototype属性还允许您向对象构造函数添加新方法:

  1. function Person(first, last, age, eyecolor) {
  2. this.firstName = first;
  3. this.lastName = last;
  4. this.age = age;
  5. this.eyeColor = eyecolor;
  6. }
  7. Person.prototype.name = function() {
  8. return this.firstName + " " + this.lastName;
  9. };

更好的原型对象的文章

原文链接:http://www.cnblogs.com/jc2182/p/11248968.html

 友情链接:直通硅谷  点职佳  北美留学生论坛

本站QQ群:前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

W3xue 的所有内容仅供测试,对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接(目前9元/月)请联系QQ:27243702 沸活量
皖ICP备17017327号-2 皖公网安备34020702000426号