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 相关文章推荐
ExtJs 表单提交登陆实现代码
Aug 19 Javascript
Firefox中使用outerHTML的2种解决方法
Jun 07 Javascript
深入探寻javascript定时器
Jan 02 Javascript
详解AngularJS中自定义过滤器
Dec 28 Javascript
分享两款带遮罩的jQuery弹出框
Dec 30 Javascript
BootStrap中的table实现数据填充与分页应用小结
May 26 Javascript
JavaScript运动框架 解决防抖动问题、悬浮对联(二)
May 17 Javascript
vue.js给动态绑定的radio列表做批量编辑的方法
Feb 28 Javascript
vue非父子组件通信问题及解决方法
Jun 11 Javascript
vue观察模式浅析
Sep 25 Javascript
在Vue中使用icon 字体图标的方法
Jun 14 Javascript
微信小程序如何播放腾讯视频的实现
Sep 20 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的无限分类实现想法~
2007/01/02 PHP
PHP实现今天是星期几的几种写法
2013/09/26 PHP
PHP如何通过传引用的思想实现无限分类(代码简单)
2015/10/13 PHP
PHP实现限制IP访问及提交次数的方法详解
2017/07/17 PHP
PHP MVC框架中类的自动加载机制实例分析
2019/09/18 PHP
js类型转换与引用类型详解(Boolean_Number_String)
2014/03/07 Javascript
jQuery事件之键盘事件(ctrl+Enter回车键提交表单等)
2014/05/11 Javascript
jQuery事件绑定和委托实例
2014/11/25 Javascript
在JavaScript应用中使用RequireJS来实现延迟加载
2015/07/01 Javascript
JS实现IE状态栏文字缩放效果代码
2015/10/24 Javascript
JS实现刷新父页面不弹出提示框的方法
2016/06/22 Javascript
javascript ASCII和Hex互转的实现方法
2016/12/27 Javascript
JavaScript运动框架 多值运动(四)
2017/05/18 Javascript
React组件生命周期详解
2017/07/03 Javascript
Three.js利用dat.GUI如何简化试验流程详解
2017/09/26 Javascript
vue2.0移动端滑动事件vue-touch的实例代码
2018/11/27 Javascript
vue + element-ui的分页问题实现
2018/12/17 Javascript
微信小程序设置滚动条过程详解
2019/07/25 Javascript
微信小程序开发搜索功能实现(前端+后端+数据库)
2020/03/04 Javascript
python 正则式使用心得
2009/05/07 Python
Python使用正则表达式实现文本替换的方法
2017/04/18 Python
spyder常用快捷键(分享)
2017/07/19 Python
如何在Django配置文件里配置session链接
2019/08/06 Python
Python 正则表达式爬虫使用案例解析
2019/09/23 Python
Python实现AI自动抠图实例解析
2020/03/05 Python
给ubuntu18安装python3.7的详细教程
2020/06/08 Python
基于selenium及python实现下拉选项定位select
2020/07/22 Python
Ajax的工作原理
2015/12/04 面试题
自荐信写法介绍
2014/01/25 职场文书
党风廉政建设责任书
2014/04/14 职场文书
教师个人查摆剖析材料
2014/10/14 职场文书
研讨会致辞
2015/07/31 职场文书
2019年思想汇报
2019/06/20 职场文书
因个人工作失误检讨书
2019/06/21 职场文书
如何理解python接口自动化之logging日志模块
2021/06/15 Python
python自动获取微信公众号最新文章的实现代码
2022/07/15 Python