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代码
Sep 22 Javascript
JavaScript中字符串拼接的基本方法
Jul 07 Javascript
拥有一个属于自己的javascript表单验证插件
Mar 24 Javascript
全面解析DOM操作和jQuery实现选项移动操作代码分享
Jun 07 Javascript
Vue.js计算属性computed与watch(5)
Dec 09 Javascript
jquery中关于bind()方法的使用技巧分享
Mar 30 jQuery
vue父组件通过props如何向子组件传递方法详解
Aug 16 Javascript
JS异步错误捕获的一些事小结
Apr 26 Javascript
VSCode使用之Vue工程配置eslint
Apr 30 Javascript
ant-design-vue按需加载的坑的解决
May 14 Javascript
基于JavaScript实现简单抽奖功能代码实例
Oct 20 Javascript
AudioContext 实现音频可视化(web技术分享)
Feb 24 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
Drupal 添加模块出现莫名其妙的错误的解决方法(往往出现在模块较多时)
2011/04/18 PHP
PHP中Session引起的脚本阻塞问题解决办法
2014/04/08 PHP
PHP使用自定义方法实现数组合并示例
2016/07/07 PHP
PHP结合Ueditor并修改图片上传路径
2016/10/16 PHP
PHP如何使用cURL实现Get和Post请求
2020/07/11 PHP
解决jquery的.animate()函数在IE6下的问题
2010/12/03 Javascript
jQuery插件分享之分页插件jqPagination
2014/06/06 Javascript
JavaScript知识点整理
2015/12/09 Javascript
只要1K 纯JS脚本送你一朵3D红色玫瑰
2016/08/09 Javascript
jQuery EasyUI右键菜单实现关闭标签/选项卡
2016/10/10 Javascript
详解create-react-app 2.0版本如何启用装饰器语法
2018/10/23 Javascript
详解小程序退出页面时清除定时器
2019/04/28 Javascript
js贪心算法 钱币找零问题代码实例
2019/09/11 Javascript
搭建vscode+vue环境的详细教程
2020/08/31 Javascript
微信小程序实现签到弹窗动画
2020/09/21 Javascript
[02:12]Dota 2 推出全新英雄—— 电炎绝手
2019/08/23 DOTA
SublimeText 2编译python出错的解决方法(The system cannot find the file specified)
2013/11/27 Python
wxPython定时器wx.Timer简单应用实例
2015/06/03 Python
python黑魔法之参数传递
2016/02/12 Python
Python基于pillow判断图片完整性的方法
2016/09/18 Python
详解Python中的动态属性和特性
2018/04/07 Python
python搭建服务器实现两个Android客户端间收发消息
2018/04/12 Python
在Python中使用gRPC的方法示例
2018/08/08 Python
Python实现查找数组中任意第k大的数字算法示例
2019/01/23 Python
手把手教你使用Python创建微信机器人
2019/04/29 Python
基于Python计算圆周率pi代码实例
2020/03/25 Python
详解python tkinter 图片插入问题
2020/09/03 Python
美国当红的名品折扣网:Gilt Groupe
2016/08/15 全球购物
阿根廷在线宠物商店:Puppis
2018/03/23 全球购物
.NET面试题:什么是值类型和引用类型
2016/01/12 面试题
应聘教师推荐信
2013/10/31 职场文书
生物医学工程专业学生求职信范文分享
2013/12/14 职场文书
世界文化遗产导游词
2015/02/13 职场文书
大学生自我评价范文
2015/03/03 职场文书
敬老院活动感想
2015/08/07 职场文书
解决Git推送错误non-fast-forward的方法
2022/06/25 Servers