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 相关文章推荐
IE与Firefox在JavaScript上的7个不同写法小结
Sep 14 Javascript
30分钟就入门的正则表达式基础教程
Feb 25 Javascript
javascript实现获取浏览器版本、操作系统类型
Jan 29 Javascript
jquery日历插件datepicker用法分析
Jan 22 Javascript
Javascript的this用法
Jan 16 Javascript
vue-router实现webApp切换页面动画效果代码
May 25 Javascript
二维码图片生成器QRCode.js简单介绍
Aug 18 Javascript
JS获取子节点、父节点和兄弟节点的方法实例总结
Jul 06 Javascript
vue实现微信二次分享以及自定义分享的示例
Mar 20 Javascript
简单了解TypeScript中如何继承 Error 类
Jun 21 Javascript
Layui实现带查询条件的分页
Jul 27 Javascript
JavaScript检测是否开启了控制台(F12调试工具)
Oct 02 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报表之jpgraph柱状图实例代码
2011/08/22 PHP
PHP页面实现定时跳转的方法
2014/10/31 PHP
php实现二进制和文本相互转换的方法
2015/04/18 PHP
Laravel 自定命令以及生成文件的例子
2019/10/23 PHP
JavaScript入门教程(3) js面向对象
2009/01/31 Javascript
javascript smipleChart 简单图标类
2011/01/12 Javascript
intro.js 页面引导简单用法 分享
2013/08/06 Javascript
收集json解析的四种方法分享
2014/01/17 Javascript
js模拟支付宝密码输入框
2017/04/11 Javascript
VUE 更好的 ajax 上传处理 axios.js实现代码
2017/05/10 Javascript
react native带索引的城市列表组件的实例代码
2017/08/08 Javascript
React key值的作用和使用详解
2018/08/23 Javascript
解决vue点击控制单个样式的问题
2018/09/05 Javascript
Electron 如何调用本地模块的方法
2019/02/01 Javascript
Vue.js轮播图走马灯代码实例(全)
2019/05/08 Javascript
layui表格数据复选框回显设置方法
2019/09/13 Javascript
vue中对象数组去重的实现
2020/02/06 Javascript
JavaScript缺少insertAfter解决方案
2020/07/03 Javascript
Python 比较两个数组的元素的异同方法
2017/08/17 Python
python 实现对文件夹内的文件排序编号
2018/04/12 Python
Python图像处理之颜色的定义与使用分析
2019/01/03 Python
numpy库与pandas库axis=0,axis= 1轴的用法详解
2019/05/27 Python
Python 使用list和tuple+条件判断详解
2019/07/30 Python
django框架auth模块用法实例详解
2019/12/10 Python
基于SQLAlchemy实现操作MySQL并执行原生sql语句
2020/06/10 Python
新西兰珠宝品牌:Michael Hill
2017/09/16 全球购物
德国50岁以上交友网站:Lebensfreunde
2020/03/18 全球购物
演讲稿开场白
2014/01/13 职场文书
教师自查自纠材料
2014/10/14 职场文书
安全责任书
2015/01/29 职场文书
2015年毕业生自荐信范文
2015/03/24 职场文书
乡镇团委工作总结2015
2015/05/26 职场文书
学校运动会通讯稿
2015/07/18 职场文书
简短清晨问候语
2015/11/10 职场文书
Python turtle实现贪吃蛇游戏
2021/06/18 Python
Go语言 详解net的tcp服务
2022/04/14 Golang