>>分享Web前端开发技术,并对孙卫琴的《精通Vue.js:Web前端开发技术详解》提供技术支持 书籍支持  卫琴直播  品书摘要  在线测试  资源下载  联系我们
发表一个新主题 开启一个新投票 回复文章 您是本文章第 21203 个阅读者 刷新本主题
 * 贴子主题:  JavaScript prototype(原型对象) 回复文章 点赞(0)  收藏  
作者:flybird    发表时间:2019-08-19 19:26:56     消息  查看  搜索  好友  邮件  复制  引用

  

JavaScript prototype(原型对象)

     所有的 JavaScript 对象都会从一个 prototype(原型对象)中继承属性和方法。                          

范例

function   Person ( first ,  last ,  age ,  eyecolor )   {
   this . firstName  =  first ;
   this . lastName  =  last ;
   this . age  =  age ;
   this . eyeColor  =  eyecolor ;
}

var   myFather  =  new   Person ( " John " ,  " Doe " ,  50 ,  " blue " ) ;
var   myMother  =  new   Person ( " Sally " ,  " Rally " ,  48 ,  " green " ) ;

        我们也知道在一个已存在的对象构造器中是不能添加新的属性的:                    

范例

           Person . nationality  =  " English " ;

        要添加一个新的属性需要在在构造器函数中添加:                    

范例

function   Person ( first ,  last ,  age ,  eyecolor )   {
   this . firstName  =  first ;
   this . lastName  =  last ;
   this . age  =  age ;
   this . eyeColor  =  eyecolor ;
   this . nationality  =  " English " ;
}

prototype 继承

   所有的 JavaScript 对象都会从一个 prototype(原型对象)中继承属性和方法:    
  •   Date 对象从  Date.prototype 继承。
  •   Array 对象从  Array.prototype 继承。
  •   Person 对象从  Person.prototype 继承。
        所有 JavaScript 中的对象都是位于原型链顶端的 Object 的范例。

         JavaScript 对象有一个指向一个原型对象的链。当试图访问一个对象的属性时,它不仅仅在该对象上搜寻,还会搜寻该对象的原型,以及该对象的原型的原型,依次层层向上搜索,直到找到一个名字匹配的属性或到达原型链的末尾。

          Date 对象,  Array 对象, 以及  Person 对象从  Object.prototype 继承。                            

添加属性和方法

     有的时候我们想要在所有已经存在的对象添加新的属性或方法。

         另外,有时候我们想要在对象的构造函数中添加属性或方法。

                 使用 prototype 属性就可以给对象的构造函数添加新的属性:                    

范例

function   Person ( first ,  last ,  age ,  eyecolor )   {
   this . firstName  =  first ;
   this . lastName  =  last ;
   this . age  =  age ;
   this . eyeColor  =  eyecolor ;
}

Person . prototype . nationality  =  " English " ;

            当然我们也可以使用 prototype 属性就可以给对象的构造函数添加新的方法:            

范例

function   Person ( first ,  last ,  age ,  eyecolor )   {
   this . firstName  =  first ;
   this . lastName  =  last ;
   this . age  =  age ;
   this . eyeColor  =  eyecolor ;
}

Person . prototype . name  =  function ( )   {
   return   this . firstName  +  "   "  +  this . lastName ;
} ;

   程序猿的技术大观园:www.javathinker.net



[这个贴子最后由 flybird 在 2020-02-07 21:22:35 重新编辑]
  Java面向对象编程-->图形用户界面(上)
  JavaWeb开发-->使用Session(Ⅱ)
  JSP与Hibernate开发-->映射组成关系
  Java网络编程-->用Swing组件展示HTML文档
  精通Spring-->组合(Composition)API
  Vue3开发-->通过Vuex进行状态管理
  前端Vue单页面应用性能优化
  JavaScript输出格式化日期和时间
  JavaScript实现睡眠函数
  animate.css动画样式类型库的用法
  css3中translate、transform和translation,以及动画animati...
  JavaScript的async函数
  Vue路由传递参数详细说明
  Vue.js学习笔记-基础部分+完整实现代码
  用Vue-Awesome-Swiper实现旋转叠加轮播效果,平移轮播效果
  14个JavaScript优化建议
  JavaScript的History 对象
  CSS 列表样式(ul)
  JavaScript 的HTML DOM 事件
  JavaScript编程规范
  应该掌握的几个HTML标记语言(个人总结)
  更多...
 IPIP: 已设置保密
树形列表:   
1页 0条记录 当前第1
发表一个新主题 开启一个新投票 回复文章


中文版权所有: JavaThinker技术网站 Copyright 2016-2026 沪ICP备16029593号-2
荟萃Java程序员智慧的结晶,分享交流Java前沿技术。  联系我们
如有技术文章涉及侵权,请与本站管理员联系。