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 tools之tooltip
Jul 25 Javascript
用JQuery实现表格隔行变色和突出显示当前行的代码
Feb 10 Javascript
用js写了一个类似php的print_r输出换行功能
Feb 18 Javascript
javascript获取元素CSS样式代码示例
Nov 28 Javascript
js检测判断日期大于多少天的方法
May 04 Javascript
js实现右键自定义菜单
Dec 03 Javascript
详解Vue路由开启keep-alive时的注意点
Jun 20 Javascript
vue用addRoutes实现动态路由的示例
Sep 15 Javascript
vue与TypeScript集成配置最简教程(推荐)
Oct 17 Javascript
vue-scroller记录滚动位置的示例代码
Jan 17 Javascript
JavaScript强制类型转换和隐式类型转换操作示例
May 01 Javascript
vue项目中自定义video视频控制条的实现代码
Apr 26 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的无限分类实现想法~
2007/01/02 PHP
php代码把全角数字转为半角数字
2007/12/10 PHP
网站防止被刷票的一些思路与方法
2015/01/08 PHP
php获取系统变量方法小结
2015/05/29 PHP
php中Redis的应用--消息传递
2017/03/28 PHP
PHP 数组操作详解【遍历、指针、函数等】
2020/05/13 PHP
通过jQuery源码学习javascript(三)
2012/12/27 Javascript
表格奇偶行设置不同颜色的核心JS代码
2013/12/24 Javascript
JS去掉第一个字符和最后一个字符的实现代码
2014/02/20 Javascript
防止按钮在短时间内被多次点击的方法
2014/03/10 Javascript
jQuery 顶部导航跟随滚动条滚动固定浮动在顶部
2014/06/06 Javascript
jQuery操作JSON的CRUD用法实例
2015/02/25 Javascript
jQuery+Pdo编写login登陆界面
2016/08/01 Javascript
jQuery实现的瀑布流加载效果示例
2016/09/13 Javascript
分享bootstrap学习笔记心得(组件及其属性)
2017/01/11 Javascript
详解angularJS动态生成的页面中ng-click无效解决办法
2017/06/19 Javascript
ES6 迭代器(Iterator)和 for.of循环使用方法学习(总结)
2018/02/08 Javascript
用p5.js制作烟花特效的示例代码
2018/03/21 Javascript
vue加载完成后的回调函数方法
2018/09/07 Javascript
原生JS实现记忆翻牌游戏
2020/07/31 Javascript
[43:51]2018DOTA2亚洲邀请赛3月30日 小组赛B组 EG VS Secret
2018/03/31 DOTA
在Linux下调试Python代码的各种方法
2015/04/17 Python
python opencv3实现人脸识别(windows)
2018/05/25 Python
selenium+python截图不成功的解决方法
2019/01/30 Python
Big Green Smile德国网上商店:提供各种天然产品
2018/05/23 全球购物
澳大利亚婴儿喂养品牌:Cherub Baby
2018/11/01 全球购物
IdealFit官方网站:女性蛋白质、补充剂和运动服装
2019/03/24 全球购物
广州品高软件.net笔面试题目
2012/04/18 面试题
土木工程师岗位职责
2013/11/24 职场文书
最热门的自我评价
2013/12/30 职场文书
食品安全宣传标语
2014/06/07 职场文书
奥运会口号
2014/06/13 职场文书
2014年保育员工作总结
2014/12/02 职场文书
惹女朋友生气检讨书
2015/05/06 职场文书
PHP连接MSSQL数据库案例,PHPWAMP多个PHP版本连接SQL Server数据库
2021/04/16 PHP
vue.js 使用原生js实现轮播图
2022/04/26 Vue.js