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 相关文章推荐
Javascript Tab 导航插件 (23个)
Jun 11 Javascript
利用jquery动画特效和css打造的侧边弹出垂直导航
Apr 04 Javascript
javascript对象的创建和访问
Mar 08 Javascript
AngularJS基础 ng-mousemove 指令简单示例
Aug 02 Javascript
jQuery实现checkbox列表的全选、反选功能
Nov 24 Javascript
基于Bootstrap漂亮简洁的CSS3价格表(附源码下载)
Feb 28 Javascript
利用imgareaselect辅助后台实现图片上传裁剪
Mar 02 Javascript
angularjs+bootstrap实现自定义分页的实例代码
Jun 19 Javascript
如何为vue的项目添加单元测试
Dec 19 Javascript
解决Vue中 父子传值 数据丢失问题
Aug 27 Javascript
微信小程序点击滚动到指定位置的实现
May 22 Javascript
如何用JavaScript检测当前浏览器是无头浏览器
Apr 27 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
2020最新CPU的性能排名
2020/04/02 数码科技
短波问题解答
2021/02/28 无线电
PHP防CC攻击实现代码
2011/12/29 PHP
PHP代码网站如何防范SQL注入漏洞攻击建议分享
2012/03/01 PHP
深入解析phpCB批量转换的代码示例
2013/06/27 PHP
使用PHP实现蜘蛛访问日志统计
2013/07/05 PHP
php代码审计比较有意思的例子
2014/05/07 PHP
DOM基础及php读取xml内容操作的方法
2015/01/23 PHP
PHP之多条件混合筛选功能的实现方法
2019/10/09 PHP
深入理解JavaScript系列(2) 揭秘命名函数表达式
2012/01/15 Javascript
JavaScript运行机制之事件循环(Event Loop)详解
2014/10/10 Javascript
javascript制作网页图片上实现下雨效果
2015/02/26 Javascript
jQuery实现模拟marquee标签效果
2015/07/14 Javascript
js实现登陆遮罩效果的方法
2015/07/28 Javascript
浅析Javascript匿名函数与自执行函数
2016/02/06 Javascript
AngularJS基础 ng-dblclick 指令用法
2016/08/01 Javascript
js实现交通灯效果
2017/01/13 Javascript
node.js入门学习之url模块
2017/02/25 Javascript
Bootstrap实现的标签页内容切换显示效果示例
2017/05/25 Javascript
基于Particles.js制作超炫粒子动态背景效果(仿知乎)
2017/09/13 Javascript
vue基于element的区间选择组件
2018/09/07 Javascript
基于vue.js实现分页查询功能
2018/12/29 Javascript
Vue项目中Api的组织和返回数据处理的操作
2019/11/04 Javascript
vuex的数据渲染与修改浅析
2020/11/26 Vue.js
Python实现抓取页面上链接的简单爬虫分享
2015/01/21 Python
Python切片知识解析
2016/03/06 Python
Python实现一个Git日志统计分析的小工具
2017/12/14 Python
python数字图像处理之高级形态学处理
2018/04/27 Python
python http基本验证方法
2018/12/26 Python
Django框架中间件(Middleware)用法实例分析
2019/05/24 Python
Pytorch.nn.conv2d 过程验证方式(单,多通道卷积过程)
2020/01/03 Python
python实现代码审查自动回复消息
2021/02/01 Python
婚礼女方父母答谢词
2015/01/04 职场文书
怎样写好工作计划
2019/04/10 职场文书
Canvas三种动态画圆实现方法说明(小结)
2021/04/16 Javascript
python中字符串String及其常见操作指南(方法、函数)
2022/04/06 Python