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 相关文章推荐
javascript iframe编程相关代码
Dec 28 Javascript
jquery获取下拉列表的值为null的解决方法
Mar 18 Javascript
zShowBox 图片放大展示jquery版 兼容性
Sep 24 Javascript
原生Ajax 和jQuery Ajax的区别示例分析
Dec 17 Javascript
js与jquery实时监听输入框值的oninput与onpropertychange方法
Feb 05 Javascript
jQuery表单美化插件jqTransform使用详解
Apr 12 Javascript
简单的JS轮播图代码
Jul 18 Javascript
AngularJS基础 ng-if 指令用法
Aug 01 Javascript
Angular2中如何使用ngx-translate进行国际化
May 21 Javascript
js实现前端图片上传即时预览功能
Aug 02 Javascript
深入浅析angular和vue还有jquery的区别
Aug 13 jQuery
微信小程序实现日历小功能
Nov 18 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+mysql开源XNA 聚合程序发布 下载
2007/07/13 PHP
PHP+Session防止表单重复提交的解决方法
2018/04/09 PHP
php实现在线考试系统【附源码】
2018/09/18 PHP
关于文本限制字数的js代码
2007/04/02 Javascript
跟着JQuery API学Jquery 之三 筛选
2010/04/09 Javascript
JQuery制作的放大效果的popup对话框(未添加任何jquery plugin)分享
2013/04/28 Javascript
javascript中style.left和offsetLeft的用法说明
2014/03/07 Javascript
使用jquery中height()方法获取各种高度大全
2014/04/02 Javascript
JQuery性能优化的几点建议
2014/05/14 Javascript
js的延迟执行问题分析
2014/06/23 Javascript
JS实现的用来对比两个用指定分隔符分割的字符串是否相同
2014/09/19 Javascript
jquery中attr和prop的区别分析
2015/03/16 Javascript
聊一聊JS中this的指向问题
2016/06/17 Javascript
Bootstrap作品展示站点实战项目2
2016/10/14 Javascript
jQuery+ajax实现局部刷新的两种方法
2017/06/08 jQuery
vue绑定的点击事件阻止冒泡的实例
2018/02/08 Javascript
express默认日志组件morgan的方法
2018/04/05 Javascript
详解javascript appendChild()的完整功能
2018/08/18 Javascript
koa2使用ejs和nunjucks作为模板引擎的使用
2018/11/27 Javascript
9102年webpack4搭建vue项目的方法步骤
2019/02/20 Javascript
JS 5种遍历对象的方式
2020/06/16 Javascript
给Python入门者的一些编程建议
2015/06/15 Python
Python模拟百度登录实例详解
2016/01/20 Python
pytorch中nn.Conv1d的用法详解
2019/12/31 Python
基于python监控程序是否关闭
2020/01/14 Python
python实现小程序推送页面收录脚本
2020/04/20 Python
基于pycharm 项目和项目文件命名规则的介绍
2021/01/15 Python
html5 touch事件实现触屏页面上下滑动(二)
2016/03/10 HTML / CSS
你所在的项目是如何确定版本号的
2015/12/28 面试题
机电一体化职业规划书
2014/01/07 职场文书
秋季校运动会广播稿
2014/02/23 职场文书
市场部经理岗位职责
2014/04/10 职场文书
MySQL复制问题的三个参数分析
2021/04/07 MySQL
Golang实现AES对称加密的过程详解
2021/05/20 Golang
高性能跳频抗干扰宽带自组网电台
2022/02/18 无线电
zabbix如何添加监控主机和自定义监控项
2022/08/14 Servers