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轻松实现Ajax的实例代码
Aug 16 Javascript
详解js中==与===的区别
Jan 08 Javascript
javascript ES6中箭头函数注意细节小结
Feb 17 Javascript
利用Mongoose让JSON数据直接插入或更新到MongoDB
May 03 Javascript
angular中不同的组件间传值与通信的方法
Nov 04 Javascript
vue基于mint-ui实现城市选择三级联动
Jun 30 Javascript
vue.js删除列表中的一行
Jun 30 Javascript
react native基于FlatList下拉刷新上拉加载实现代码示例
Sep 30 Javascript
jQuery事件绑定和解绑、事件冒泡与阻止事件冒泡及弹出应用示例
May 13 jQuery
一步一步实现Vue的响应式(对象观测)
Sep 02 Javascript
React-redux实现小案例(todolist)的过程
Sep 29 Javascript
javascript实现计算器功能详解流程
Nov 01 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框架排名
2013/07/04 PHP
php实现读取手机客户端浏览器的类
2015/01/09 PHP
php通过array_merge()函数合并关联和非关联数组的方法
2015/03/18 PHP
php上传图片获取路径及给表单字段赋值的方法
2016/01/23 PHP
功能强大的PHP发邮件类
2016/08/29 PHP
PHP中$GLOBALS['HTTP_RAW_POST_DATA']和$_POST的区别分析
2017/07/03 PHP
浅谈thinkphp5 instance 的简单实现
2017/07/30 PHP
html向js方法传递参数具体实现
2013/08/08 Javascript
javascript中全局对象的isNaN()方法使用介绍
2013/12/19 Javascript
javascript中动态函数用法实例分析
2015/05/14 Javascript
基于jQuery实现文本框只能输入数字(小数、整数)
2016/01/14 Javascript
jQuery Easyui学习教程之实现datagrid在没有数据时显示相关提示内容
2016/07/09 Javascript
JavaScript函数柯里化原理与用法分析
2017/03/31 Javascript
AngularJS基于provider实现全局变量的读取和赋值方法
2017/06/28 Javascript
JS图片延迟加载插件LazyImgv1.0用法分析【附demo源码下载】
2017/09/04 Javascript
vue.js template模板的使用(仿饿了么布局)
2018/08/13 Javascript
Vue中android4.4不兼容问题的解决方法
2018/09/04 Javascript
nodejs使用async模块同步执行的方法
2019/03/02 NodeJs
如何用webpack4.0撸单页/多页脚手架 (jquery, react, vue, typescript)
2019/06/18 jQuery
python实现定时播放mp3
2015/03/29 Python
利用Python如何生成hash值示例详解
2017/12/20 Python
Python操作Redis之设置key的过期时间实例代码
2018/01/25 Python
python绘制已知点的坐标的直线实例
2019/07/04 Python
Python ckeditor富文本编辑器代码实例解析
2020/06/22 Python
解决Keras的自定义lambda层去reshape张量时model保存出错问题
2020/07/01 Python
爬虫代理的cookie如何生成运行
2020/09/22 Python
10 套华丽的CSS3 按钮小结
2012/10/03 HTML / CSS
Gap中国官网:美式休闲风服饰
2017/02/05 全球购物
存储过程和函数的区别
2013/05/28 面试题
生态学毕业生自荐信
2013/10/27 职场文书
保护环境倡议书100字
2014/05/19 职场文书
2015年乡镇流动人口工作总结
2015/05/12 职场文书
南极大冒险观后感
2015/06/05 职场文书
爱国电影观后感
2015/06/19 职场文书
pytorch 一行代码查看网络参数总量的实现
2021/05/12 Python
python多线程方法详解
2022/01/18 Python