javascript prototype原型详解(比较基础)


Posted in Javascript onDecember 26, 2016

javascript的prototype原型简单介绍:
prototype原型是javascript中特别重要的概念,属于必须要掌握,如果没有良好的掌握的话,进一步用好或者学好js基本是不可能的实现的事情,并且此概念稍有难度,可能对于初次接触的朋友来说有点困难,下面就通过代码实例简单介绍一下prototype原型的用法。

一.基本概念:

每一个函数都具有一个prototype属性。
此属性是一个指针,能够指向一个对象,而此对象将会被由构造函数创建的对象实例所共享,也就是会继承此对象。
总结:prototype所指向的对象是被构造函数所创建的对象实例所共同共享的。
创建的对象实例有一个内部属性[[Prototype]],它是一个指针,指向构造函数原型(prototype)指向的对象。
先看一段代码:

<script>
function antzone(name,age){
 this.webname=name;
 this.age=age;
}
antzone.prototype.getName=function(){
 return this.webname;
}
var oantzone=new antzone("三水点靠木",10);
console.log(oantzone.getName());
</script>

效果图:

javascript prototype原型详解(比较基础)

图示如下:

javascript prototype原型详解(比较基础)

上面图片基本说明了prototype的作用。
二.代码实例:
实例一:

function antzone(name,age){
 this.webname=name;
 this.age=age;
}
var obj={
 address:"江苏省徐州"
}
var oantzone=new antzone("三水点靠木",10);
antzone.prototype=obj;
console.log(oantzone.address);

看以上代码,很多朋友可能以为输出值是"江苏省徐州",但是实际输出内容是undefined,这是因为在使用构造函数创建对象oantzone的时候,oantzone对象内部属性[[Prototype]]将会指向antzone()构造函数的原型prototype所指向的对象,而后来antzone.prototype=obj是重置构造函数的原型,而oantzone的内置属性[[Prototype]]指向依然是原来的对象,自然oantzone.address是undefined。
实例二:

<script>
function antzone(name,age){
 this.webname=name;
 this.age=age;
}
var obj={
 address:"江苏省徐州"
}
antzone.prototype=obj;
var oantzone=new antzone("三水点靠木",10);
console.log(oantzone.webname+oantzone.address);
</script>

此代码和上一段代码的唯一不同,就是第八行和第九行进行了一下交换,这样就可以输出"江苏省徐州",这个就不难理解了,因为对象实例是在重置原型以后创建的。
实例三:

function antzone(name,age){
 this.webname=name;
 this.age=age;
}
var obj={
 address:"江苏省徐州"
}
antzone.prototype.add=obj;
var oantzone=new antzone("三水点靠木",10);
console.log(oantzone.add.address);

以上代码只是修改对象原型,而不是重置对象原型。

Javascript 相关文章推荐
我见过最全的个人js加解密功能页面
Dec 12 Javascript
javascript在当前窗口关闭前检测窗口是否关闭
Sep 29 Javascript
javascript生成不重复的随机数
Jul 17 Javascript
jQuery实现彩带延伸效果的网页加载条loading动画
Oct 29 Javascript
js本地图片预览实现代码
Oct 09 Javascript
手机浏览器 后退按钮强制刷新页面方法总结
Oct 09 Javascript
JS 中使用Promise 实现红绿灯实例代码(demo)
Oct 20 Javascript
利用adb shell和node.js实现抖音自动抢红包功能(推荐)
Feb 22 Javascript
vue2.0移动端滑动事件vue-touch的实例代码
Nov 27 Javascript
详解jQuery中的getAll()和cleanData()
Apr 15 jQuery
小程序实现左滑删除的效果的实例代码
Oct 19 Javascript
Vuex实现简单购物车
Jan 10 Vue.js
如何提高数据访问速度
Dec 26 #Javascript
Angular的模块化(代码分享)
Dec 26 #Javascript
详解Angular的数据显示优化处理
Dec 26 #Javascript
easyui combotree加载静态数据问题(选不上)解决方法
Dec 26 #Javascript
手动初始化Angular的模块与控制器
Dec 26 #Javascript
详解Python中logging日志模块在多进程环境下的使用
Dec 26 #Javascript
Angular的事件和表单详解
Dec 26 #Javascript
You might like
PHP数据库连接mysql与mysqli对比分析
2016/01/04 PHP
zend framework重定向方法小结
2016/05/28 PHP
PHP cookie,session的使用与用户自动登录功能实现方法分析
2019/06/05 PHP
初试jQuery EasyUI 使用介绍
2010/04/01 Javascript
怎么清空javascript数组
2013/05/11 Javascript
Jquery 动态循环输出表格具体方法
2013/11/23 Javascript
NodeJS学习笔记之Connect中间件应用实例
2015/01/27 NodeJs
jQuery+HTML5+CSS3制作支持响应式布局时间轴插件
2016/08/10 Javascript
微信公众平台开发教程(四) 实例入门:机器人回复(附源码)
2016/12/02 Javascript
快速实现JS图片懒加载(可视区域加载)示例代码
2017/01/04 Javascript
jQuery插件FusionWidgets实现的AngularGauge图效果示例【附demo源码】
2017/03/23 jQuery
Node.js readline模块与util模块的使用
2018/03/01 Javascript
Vue3 中的数据侦测的实现
2019/10/09 Javascript
Vue状态模式实现窗口停靠功能(灵动、自由, 管理后台Admin界面)
2020/03/06 Javascript
python文件读写操作与linux shell变量命令交互执行的方法
2015/01/14 Python
在Python的Flask框架中实现单元测试的教程
2015/04/20 Python
Python random模块用法解析及简单示例
2017/12/18 Python
python装饰器深入学习
2018/04/06 Python
python实现关键词提取的示例讲解
2018/04/28 Python
django将图片上传数据库后在前端显式的方法
2018/05/25 Python
详解Python 字符串相似性的几种度量方法
2019/08/29 Python
Python 中由 yield 实现异步操作
2020/05/04 Python
若干个Java基础面试题
2015/05/19 面试题
汽车工程专业应届生求职信
2013/10/19 职场文书
理工科学生的自我评价
2013/12/15 职场文书
旷课检讨书2000字
2014/01/14 职场文书
时尚休闲吧创业计划书
2014/01/25 职场文书
关于环保的活动方案
2014/08/25 职场文书
解放思想大讨论活动心得体会
2014/09/11 职场文书
班主任师德师风自我剖析材料
2014/10/02 职场文书
商家认证委托书格式
2014/10/16 职场文书
2014年乡镇安全生产工作总结
2014/12/02 职场文书
团日活动总结格式
2015/05/11 职场文书
毕业证明模板
2015/06/19 职场文书
迎新生欢迎词2015
2015/07/16 职场文书
nginx静态资源的服务器配置方法
2022/07/07 Servers