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 相关文章推荐
JS 获取select(多选下拉)中所选值的示例代码
Aug 02 Javascript
用JavaScript实现类似于ListBox功能示例代码
Mar 09 Javascript
Jquery 点击按钮自动高亮实现原理及代码
Apr 25 Javascript
jQuery中parents()和parent()的区别分析
Oct 28 Javascript
基于JQuery和CSS3实现仿Apple TV海报背景视觉差特效源码分享
Sep 21 Javascript
AngualrJS中的Directive制作一个菜单
Jan 26 Javascript
整理AngularJS框架使用过程当中的一些性能优化要点
Mar 05 Javascript
JavaScript中 this 指向问题深度解析
Feb 21 Javascript
Vue infinite update loop的问题解决
Apr 23 Javascript
Vue使用Canvas绘制图片、矩形、线条、文字,下载图片
Apr 26 Javascript
Vue 自定义指令功能完整实例
Sep 17 Javascript
详解JavaScript匿名函数和闭包
Jul 10 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
ThinkPHP和UCenter接口冲突的解决方法
2016/07/25 PHP
php输出形式实例整理
2020/05/05 PHP
实现连缀调用的map方法(prototype)
2009/08/05 Javascript
javascript 二分法(数组array)
2010/04/24 Javascript
jquery tab标签页的制作
2010/05/10 Javascript
js冒泡法和数组转换成字符串示例代码
2013/08/14 Javascript
js返回上一页并刷新的多种实现方法
2014/02/26 Javascript
JavaScript中join()方法的使用简介
2015/06/09 Javascript
js实现跨域的方法实例详解
2015/06/24 Javascript
深入分析JSON编码格式提交表单数据
2015/06/25 Javascript
Vue 将后台传过来的带html字段的字符串转换为 HTML
2018/03/29 Javascript
Vue三种常用传值示例(父传子、子传父、非父子)
2018/07/24 Javascript
Vue模拟数据,实现路由进入商品详情页面的示例
2018/08/31 Javascript
vue实现点击选中,其他的不选中方法
2018/09/05 Javascript
生产制造追溯系统之在线打印功能
2019/06/03 Javascript
vue实现列表滚动的过渡动画
2020/06/29 Javascript
python冒泡排序简单实现方法
2015/07/09 Python
Python网络爬虫与信息提取(实例讲解)
2017/08/29 Python
Python cookbook(数据结构与算法)保存最后N个元素的方法
2018/02/13 Python
详谈Pandas中iloc和loc以及ix的区别
2018/06/08 Python
python3+PyQt5 实现Rich文本的行编辑方法
2019/06/17 Python
如何修复使用 Python ORM 工具 SQLAlchemy 时的常见陷阱
2019/11/19 Python
python+selenium+PhantomJS抓取网页动态加载内容
2020/02/25 Python
python3 使用traceback定位异常实例
2020/03/09 Python
Django之choices选项和富文本编辑器的使用详解
2020/04/01 Python
Python基于QQ邮箱实现SSL发送
2020/04/26 Python
德国大型箱包和皮具商店:Koffer
2019/10/01 全球购物
为什么需要版本控制?
2013/08/08 面试题
大学专科求职信
2014/07/02 职场文书
全陪导游词
2015/02/04 职场文书
2015年营业员工作总结
2015/04/23 职场文书
幼儿园安全教育月活动总结
2015/05/08 职场文书
详解python中[-1]、[:-1]、[::-1]、[n::-1]使用方法
2021/04/25 Python
教你利用Nginx 服务搭建子域环境提升二维地图加载性能的步骤
2021/09/25 Servers
python数据处理之Pandas类型转换
2022/04/28 Python
详解Go语言中配置文件使用与日志配置
2022/06/01 Golang