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 相关文章推荐
一段实时更新的时间代码
Jul 07 Javascript
js获得地址栏?问号后参数的方法
Aug 08 Javascript
AngularJS初始化静态模板详解
Jan 14 Javascript
如何提高javascript加载速度
Dec 26 Javascript
老生常谈js-react组件生命周期
May 02 Javascript
js实现日期显示的一些操作(实例讲解)
Jul 27 Javascript
bootstrap日期插件daterangepicker使用详解
Oct 19 Javascript
js使用xml数据载体实现城市省份二级联动效果
Nov 08 Javascript
Angular实现模版驱动表单的自定义校验功能(密码确认为例)
May 17 Javascript
微信小程序与webview交互实现支付功能
Jun 07 Javascript
Angular进行简单单元测试的实现方法实例
Aug 16 Javascript
JS实现超级好看的鼠标小尾巴特效
Dec 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 异常处理实现代码
2009/03/10 PHP
解析PHP高效率写法(详解原因)
2013/06/20 PHP
Yii2中使用join、joinwith多表关联查询
2016/06/30 PHP
javascript实现动态增加删除表格行(兼容IE/FF)
2007/04/02 Javascript
JQuery 学习笔记 选择器之二
2009/07/23 Javascript
关于Javascript模块化和命名空间管理的问题说明
2010/12/06 Javascript
Js控制弹窗实现在任意分辨率下居中显示
2013/08/01 Javascript
Javascript实现禁止输入中文或英文的例子
2014/12/09 Javascript
javascript 数组的定义和数组的长度
2016/06/07 Javascript
利用JavaScript实现拖拽改变元素大小
2016/12/14 Javascript
浅谈Angular2 模块懒加载的方法
2017/10/04 Javascript
React 项目迁移 Webpack Babel7的实现
2018/09/12 Javascript
bootstrap table表格插件之服务器端分页实例代码
2018/09/12 Javascript
Vue CLI3搭建的项目中路径相关问题的解决
2018/09/17 Javascript
新手如何快速理解js异步编程
2019/06/24 Javascript
python抓取京东价格分析京东商品价格走势
2014/01/09 Python
Python和php通信乱码问题解决方法
2014/04/15 Python
Python函数式编程
2017/07/20 Python
Python实现基于PIL和tesseract的验证码识别功能示例
2018/07/11 Python
python创造虚拟环境方法总结
2019/03/04 Python
用Python调用win命令行提高工作效率的实例
2019/08/14 Python
python中通过selenium简单操作及元素定位知识点总结
2019/09/10 Python
python 类之间的参数传递方式
2019/12/20 Python
Django实现前台上传并显示图片功能
2020/05/29 Python
Python实现中英文全文搜索的示例
2020/12/04 Python
基于 Python 实践感知器分类算法
2021/01/07 Python
使用分层画布来优化HTML5渲染的教程
2015/05/08 HTML / CSS
某公司C#程序员面试题笔试题
2014/05/26 面试题
专科毕业生就业推荐信
2013/11/01 职场文书
决心书范文
2014/03/11 职场文书
乡村卫生服务一体化管理实施方案
2014/03/30 职场文书
质量承诺书怎么写
2014/05/24 职场文书
四风问题民主生活会对照检查材料思想汇报
2014/09/27 职场文书
2015年端午节国旗下演讲稿
2015/03/19 职场文书
15个值得收藏的JavaScript函数
2021/09/15 Javascript
python开发人人对战的五子棋小游戏
2022/05/02 Python