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 相关文章推荐
JQuery 动态扩展对象之另类视角
May 25 Javascript
利用谷歌地图API获取点与点的距离的js代码
Oct 11 Javascript
获取内联和链接中的样式(js代码)
Apr 11 Javascript
jQuery 获取URL的GET参数值的小例子
Apr 18 Javascript
jQuery ajaxForm()的应用
Oct 14 Javascript
js实现抽奖效果
Mar 27 Javascript
jquery中关于bind()方法的使用技巧分享
Mar 30 jQuery
bootstrap multiselect下拉列表功能
Aug 22 Javascript
JavaScript中使用参数个数实现重载功能
Sep 01 Javascript
Vue的移动端多图上传插件vue-easy-uploader的示例代码
Nov 27 Javascript
babel之配置文件.babelrc入门详解
Feb 22 Javascript
vue1.0和vue2.0的watch监听事件写法详解
Sep 11 Javascript
如何提高数据访问速度
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 已经成熟
2006/12/04 PHP
PHP文件生成的图片无法使用CDN缓存的解决方法
2015/06/20 PHP
thinkphp框架使用JWTtoken的方法详解
2019/10/10 PHP
使用Modello编写JavaScript类
2006/12/22 Javascript
JS在IE和FF下attachEvent,addEventListener学习笔记
2009/11/26 Javascript
js点击页面其它地方将某个显示的DIV隐藏
2012/07/12 Javascript
javascript文件中引用依赖的js文件的方法
2014/03/17 Javascript
javascript如何判断输入的url是否正确
2014/04/11 Javascript
jQuery移动web开发之页面跳转和加载外部页面的实现
2015/12/04 Javascript
JavaScript阻止回车提交表单的方法
2015/12/30 Javascript
如何使用AngularJs打造权限管理系统【简易型】
2016/05/09 Javascript
你不知道的 javascript【推荐】
2017/01/08 Javascript
node.JS md5加密中文与php结果不一致的解决方法
2017/05/05 Javascript
浅谈JS中的反柯里化( uncurrying)
2017/08/17 Javascript
Bootstarp在pycharm中的安装及简单的使用方法
2019/04/19 Javascript
JavaScript canvas动画实现时钟效果
2020/02/10 Javascript
在vue项目中利用popstate处理页面返回的操作介绍
2020/08/06 Javascript
基于postman获取动态数据过程详解
2020/09/08 Javascript
[07:55]2014DOTA2 TI正赛第三日 VG上演推进荣耀DKEG告别
2014/07/21 DOTA
Python批量查询域名是否被注册过
2017/06/21 Python
CentOS 7下Python 2.7升级至Python3.6.1的实战教程
2017/07/06 Python
django_orm查询性能优化方法
2018/08/20 Python
用于ETL的Python数据转换工具详解
2020/07/21 Python
Python爬虫开发与项目实战
2020/12/16 Python
css3选择器基本介绍
2014/12/15 HTML / CSS
英国第一家领先的在线处方眼镜零售商:Glasses Direct
2018/02/23 全球购物
结婚喜宴家长答谢词
2014/01/15 职场文书
办理居住证介绍信
2014/01/15 职场文书
七年级数学教学反思
2014/01/22 职场文书
《小蝌蚪找妈妈》教学反思
2014/02/21 职场文书
小学社会实践活动总结
2014/07/03 职场文书
小学生关于梦想的演讲稿
2014/08/22 职场文书
开展党的群众路线教育实践活动工作总结
2014/11/05 职场文书
小学语文课《掌声》教学反思
2016/03/03 职场文书
个人销售励志奋斗口号
2019/12/05 职场文书
Python中os模块的简单使用及重命名操作
2021/04/17 Python