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(复习)—Baidu ajax request分离版
Jan 24 Javascript
JS实现从顶部下拉显示的带动画QQ客服特效代码
Oct 24 Javascript
JavaScript队列、优先队列与循环队列
Nov 14 Javascript
基于layer.js实现收货地址弹框选择然后返回相应的地址信息
May 26 Javascript
jquery中有哪些api jQuery主要API
Nov 20 jQuery
使用Vue动态生成form表单的实例代码
Apr 26 Javascript
vue slots 组件的组合/分发实例
Sep 06 Javascript
JS/HTML5游戏常用算法之碰撞检测 地图格子算法实例详解
Dec 12 Javascript
JS实现深度优先搜索求解两点间最短路径
Jan 17 Javascript
JavaScript刷新页面的几种方法总结
Mar 28 Javascript
基于vue-cli搭建多模块且各模块独立打包的项目
Jun 12 Javascript
JS中如何优雅的使用async await详解
Oct 05 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使用者状态管理功能的应用
2006/10/09 PHP
php修改NetBeans默认字体的大小
2013/07/02 PHP
ThinkPHP3.1新特性之多层MVC的支持
2014/06/19 PHP
yii2 modal弹窗之ActiveForm ajax表单异步验证
2016/06/13 PHP
js常用函数 不错
2006/09/08 Javascript
用jquery ajax获取网站Alexa排名的代码
2009/12/12 Javascript
JavaScript高级程序设计(第3版)学习笔记8 js函数(中)
2012/10/11 Javascript
jquery用get实现ajax在ie里面刷新不进入后台解决方法
2013/08/12 Javascript
js data日期初始化的5种方法
2013/12/29 Javascript
轻松学习jQuery插件EasyUI EasyUI创建菜单与按钮
2015/11/30 Javascript
AngularJs Modules详解及示例代码
2016/09/01 Javascript
js点击任意区域弹出层消失实现代码
2016/12/27 Javascript
jQuery+pjax简单示例汇总
2017/04/21 jQuery
利用webstrom调试Vue.js单页面程序的方法教程
2017/06/06 Javascript
ejsExcel模板在Vue.js项目中的实际运用
2018/01/27 Javascript
解决vue多个路由共用一个页面的问题
2018/03/12 Javascript
小程序云开发实现数据库异步操作同步化
2019/05/18 Javascript
小程序实现左滑删除效果
2019/07/25 Javascript
浅析webpack-bundle-analyzer在vue-cli3中的使用
2019/10/23 Javascript
js实现简单图片拖拽效果
2021/02/22 Javascript
python不带重复的全排列代码
2013/08/13 Python
python快速查找算法应用实例
2014/09/26 Python
python实现多线程的两种方式
2016/05/22 Python
python多任务及返回值的处理方法
2019/01/22 Python
numpy求平均值的维度设定的例子
2019/08/24 Python
python GUI库图形界面开发之PyQt5布局控件QVBoxLayout详细使用方法与实例
2020/03/06 Python
阿迪达斯德国官方网站:adidas德国
2017/07/12 全球购物
美国女孩洋娃娃店:American Girl
2017/10/24 全球购物
DHC美国官网:日本通信销售第一的化妆品品牌
2017/11/12 全球购物
意大利简约的休闲品牌:Aspesi
2018/02/08 全球购物
Madda Fella官网:美国冒险家服装品牌
2020/01/16 全球购物
2014年商场国庆节活动策划方案
2014/09/16 职场文书
胡桃夹子观后感
2015/06/11 职场文书
2019开业庆典剪彩仪式主持词!
2019/07/22 职场文书
Golang 并发下的问题定位及解决方案
2022/03/16 Golang
关于Python中进度条的六个实用技巧分享
2022/04/05 Python